/* kinplace Next: the Roofline brand. White and teal ink, with coral for the
   mark, your own home and the one thing to press. Light only -- the dark
   design lives on in kinplace Classic.

   Colour roles:
     --ink / --accent   teal ink: text, links, the current tab, structure
     --cta              coral deep: primary buttons. Bright coral (--coral)
                        fails contrast under white text, so buttons use this.
     --coral            the mark, the home pin, small highlights only
     --mint, --mist     soft fills: selected states, section washes
   Scores keep their own green-to-red scale (--s1..--s5). */
@font-face{font-family:"Gabarito";src:url("fonts/gabarito-latin.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
:root{
  color-scheme:light;
  --bg:#F7FAF9; --panel:#FFFFFF; --ink:#0E3B43; --muted:#4A6A6F; --line:#E3ECEA;
  --mist:#F2FBF7; --mint:#D5F5E8; --coral:#FF6B5B; --teal:#0E3B43;
  --accent:#0E3B43; --accent-ink:#FFFFFF; --accent-deep:#082A30;
  --accent-soft:#EAF7F2; --on-soft:#0E3B43;
  --cta:#CF3F2E; --cta-deep:#A93122; --cta-ink:#FFFFFF; --cta-soft:#FFE9E5;
  --shadow:0 1px 2px rgba(14,59,67,.05),0 6px 18px -8px rgba(14,59,67,.18);
  --s1:#0f9d58; --s2:#7cb342; --s3:#f4b400; --s4:#ef6c00; --s5:#d93025;
  --radius:16px;
  --font:"Gabarito",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
/* A `display` rule beats the UA stylesheet's [hidden], so restate it. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--font)}
h1,h2,h3{margin:0;font-weight:750;letter-spacing:-.015em}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:600}
.brand{display:flex;align-items:center;gap:12px}
/* The mark: one coral stroke that is a bird and two roofs, over a teal dot. */
.logo{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px}
.logo svg{width:36px;height:auto;display:block}
.topbar h1{font-size:23px;font-weight:800;letter-spacing:-.035em;line-height:1}
.sub{margin:0;color:var(--muted);font-size:12px}
.topbar-right{display:flex;gap:10px;align-items:center}

.btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:8px 16px;cursor:pointer;font-weight:600;transition:.12s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.btn.primary:hover{background:var(--cta-deep);border-color:var(--cta-deep)}
.btn.ghost{background:transparent}
.btn.small{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.control{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:7px 10px}
.control.full{width:100%}

/* ---------- run bar ---------- */
.runbar{display:flex;align-items:center;gap:10px;padding:8px 20px;
  background:#fff8e1;border-bottom:1px solid #f0e0a8;color:#5c4a03;font-size:13px}
.runlog{color:var(--muted);font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums}
.spinner{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
/* Anything that arrives late says so, in the place it will appear. */
.loadbox{display:flex;align-items:center;gap:10px;padding:10px 2px;color:var(--muted);font-size:14px}
.loadbox.big{justify-content:center;padding:36px 12px;font-size:15px;min-height:96px}
.loadbox .spinner{flex:none;color:var(--teal,#0E3B43)}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
/* A tab whose content is still being fetched in the background. */
.tab.busy::after{content:"";display:inline-block;width:9px;height:9px;margin-left:6px;vertical-align:baseline;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;opacity:.6}
/* Address suggestions under a box. */
.addrwrap{position:relative}
.addrhits{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 28px rgba(14,59,67,.14);max-height:320px;overflow:auto;padding:4px}
.addrhits button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;
  background:transparent;padding:9px 12px;border-radius:8px;font:inherit;color:inherit;cursor:pointer}
.addrhits button:hover,.addrhits button.on{background:var(--mist)}
.addrhits .addrnote{padding:8px 12px;margin:0}
.addrhits .loadbox{padding:10px 12px}
/* Journey times: one place, the ways of getting there. */
.jrow{padding:10px 0;border-bottom:1px solid var(--line)}
.jrow:last-child{border-bottom:0}
.jto{font-weight:600;margin-bottom:4px}
.jopts{display:flex;flex-wrap:wrap;gap:6px 16px}
.jopt b{font-variant-numeric:tabular-nums}
.jopt.est{opacity:.8}
.jlegs{margin-top:4px}
.commuteslot{margin-top:14px}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:268px 1fr;gap:18px;padding:18px 20px;
  align-items:start;max-width:1720px;margin:0 auto}
@media (max-width:960px){.layout{grid-template-columns:1fr}}

.sidebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);position:sticky;top:74px;max-height:calc(100vh - 92px);
  overflow:auto}
.preset-row{display:flex;gap:8px;margin-bottom:12px}
.preset-row .btn{flex:1}
.fgroup{padding:12px 0;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0;padding-top:0}
.fgroup h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin-bottom:9px;display:flex;justify-content:space-between}
.hint{color:var(--accent);font-weight:650}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}
label.full{display:block}
label input[type=number]{width:100%;margin-top:3px;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg)}
label.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin-bottom:6px;cursor:pointer}
label.check input{margin:0}
input[type=range]{width:100%;accent-color:var(--accent)}
.micro{font-size:11.5px;color:var(--muted);margin:6px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;
  cursor:pointer;background:var(--bg);user-select:none}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------- toolbar / tabs ---------- */
.content{min-width:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:3px}
.tab{border:0;background:transparent;padding:7px 15px;border-radius:999px;cursor:pointer;
  font-weight:550;color:var(--muted)}
.tab.active{background:var(--accent);color:var(--accent-ink)}
.toolbar-right{display:flex;gap:10px;align-items:center}
.count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- gallery ---------- */
/* The gallery and the watchlist are the same kind of thing -- a wall of
   properties -- so they share one column rule rather than each carrying
   its own copy to drift out of step. */
.grid,
#wlGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.14s;display:flex;flex-direction:column}
/* Only where something actually hovers. On a touch screen the browser fires
   hover as your finger passes, so scrolling a list of cards lifted and dropped
   each one under the thumb and zoomed its photo -- which reads as the page
   flickering rather than as a hover effect. */
@media (hover: hover) and (pointer: fine){
  .card:hover{transform:translateY(-2px);border-color:var(--accent)}
}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:13px 14px 0}
.price{font-size:19px;font-weight:700;letter-spacing:-.02em}
.addr{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.35}
.score{flex:none;width:54px;text-align:center;border-radius:10px;padding:6px 4px;color:#fff}
.score b{display:block;font-size:17px;line-height:1.1}
.score span{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.92}
.card-body{padding:11px 14px 13px;display:flex;flex-direction:column;gap:9px;flex:1}
.specs{display:flex;flex-wrap:wrap;gap:5px}
.spec{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:2px 7px;font-size:11.5px}
.labels{display:flex;flex-wrap:wrap;gap:5px}
.lab{font-size:10.5px;font-weight:650;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.lab.needswork{background:#fde8e6;color:#a5211a}
.lab.dated{background:#fdf0dd;color:#8a5a09}
.lab.average{background:#eceff3;color:#4b5563}
.lab.wellpresented{background:#e4f2e6;color:#256c33}
.lab.newlyrenovated{background:#daf0e2;color:#0d6b34}
.lab.pool{background:#e0f0fa;color:#0b5c8a}
.lab.new{background:#ede4fb;color:#5b2ca8}
.lab.alsoin{background:var(--accent-soft);color:var(--accent-deep)}
.vline{font-size:11.5px;color:var(--muted);margin-top:auto;display:flex;justify-content:space-between;gap:8px}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}

/* ---------- map ---------- */
.mapwrap{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
#map{height:min(74vh,760px);width:100%;background:var(--panel)}
.mapctl{position:absolute;top:10px;right:10px;z-index:500;display:flex;gap:6px;flex-wrap:wrap;
  justify-content:flex-end;max-width:60%}
.mapctl .btn{background:var(--panel);box-shadow:var(--shadow)}
.maplegend{position:absolute;bottom:12px;left:12px;z-index:500;background:var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:11.5px;box-shadow:var(--shadow)}
.maplegend strong{display:block;margin-bottom:5px;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.maplegend span{display:flex;align-items:center;gap:6px;line-height:1.75}
.maplegend i{width:11px;height:11px;border-radius:50%;display:inline-block}
.pin{border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.leaflet-popup-content{margin:10px 12px;font:13px/1.45 inherit}
.leaflet-popup-content b{font-size:14px}

/* ---------- drawer / dialog ---------- */
.drawer{position:fixed;inset:0;z-index:1000;display:flex;justify-content:flex-end}
.drawer-bg{position:absolute;inset:0;background:rgba(10,13,18,.45)}
.drawer-panel{position:relative;width:min(560px,100%);height:100%;overflow:auto;
  background:var(--panel);border-left:1px solid var(--line);padding:22px 24px 40px;
  animation:slide .18s ease}
@keyframes slide{from{transform:translateX(24px);opacity:.5}}
/* A tall dialog -- a school comparison with every row -- ran off the bottom of
   the screen with no way to scroll and its Close button out of reach. The
   height cap and scroll used to live only in the mobile media query. */
.dialog{position:relative;margin:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;width:min(460px,92vw);box-shadow:var(--shadow);
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
/* Stays reachable however far down the content goes. */
.dlgclose{position:sticky;top:-22px;float:right;margin:-10px -8px 0 0;z-index:2;
  border:0;background:var(--panel);color:var(--muted);font-size:22px;line-height:1;
  cursor:pointer;padding:4px 8px;border-radius:8px}
.dlgclose:hover{background:var(--bg);color:var(--ink)}
.dialog h2{font-size:17px;margin-bottom:6px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.warn{color:#b35309;font-size:11px;font-weight:600}
.ok{color:#0B7A47;font-size:11px;font-weight:600}
.note{font-size:11.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;margin-top:14px}

.dhead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.dclose{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
.dsec{margin-top:20px}
.dsec h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.kv{display:grid;grid-template-columns:1fr auto;gap:5px 14px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.explain{list-style:none;padding:0;margin:0;font-size:12.5px}
.explain li{padding:7px 0 7px 18px;border-bottom:1px solid var(--line);position:relative;color:var(--muted)}
.explain li:before{content:"›";position:absolute;left:4px;color:var(--accent);font-weight:700}
.explain li:first-child{color:var(--ink);font-weight:600}
.factors{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.factors td{padding:6px 0;border-bottom:1px solid var(--line)}
.factors td:last-child{text-align:right;font-weight:600}
.up{color:var(--s1)}.down{color:var(--s5)}
.bigscore{text-align:center;border-radius:12px;padding:14px;color:#fff;margin-top:14px}
.bigscore b{display:block;font-size:36px;line-height:1}
.bigscore span{font-size:12px;opacity:.93}
.conf{font-size:11px;opacity:.85;margin-top:5px}

/* ---------- analysis ---------- */
.acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;box-shadow:var(--shadow)}
.acard b{display:block;font-size:25px;letter-spacing:-.02em}
.acard span{font-size:12px;color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px;box-shadow:var(--shadow);margin-bottom:16px}
.panel h3{font-size:14px;margin-bottom:12px}
.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:96px 1fr 42px;gap:10px;align-items:center;font-size:12px}
.bar .track{background:var(--bg);border-radius:5px;height:19px;overflow:hidden;border:1px solid var(--line)}
.bar .fill{height:100%;background:var(--accent);border-radius:4px}
.bar .n{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
pre.report{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:13px;
  overflow:auto;font-size:11.5px;line-height:1.5;max-height:460px}

textarea.control{width:100%;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  resize:vertical;background:var(--bg)}
input[type=file].control{padding:8px;font-size:12.5px;background:var(--bg)}

/* ---------- card photo ---------- */
.thumb{position:relative;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
@media (hover: hover) and (pointer: fine){
  .card:hover .thumb img{transform:scale(1.04)}
}
.thumb.noimg{display:grid;place-items:center;color:var(--muted);font-size:12px}
.thumb .shots{position:absolute;left:9px;bottom:9px;background:rgba(10,13,18,.72);color:#fff;
  font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px}
.thumb-score{position:absolute;right:9px;top:9px;color:#fff;font-weight:700;font-size:13px;
  min-width:34px;text-align:center;padding:4px 7px;border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,.35)}
.card .card-top{padding-top:12px}

/* ---------- drawer gallery ---------- */
.gal{margin-top:14px}
.gal-main{position:relative;aspect-ratio:4/3;background:var(--bg);border-radius:10px;
  overflow:hidden;border:1px solid var(--line)}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;cursor:pointer;
  width:38px;height:52px;background:rgba(10,13,18,.55);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;transition:.15s}
.gal-nav:hover{background:rgba(10,13,18,.8)}
.gal-nav.prev{left:0;border-radius:0 8px 8px 0}
.gal-nav.next{right:0;border-radius:8px 0 0 8px}
.gal-count{position:absolute;left:10px;bottom:10px;background:rgba(10,13,18,.72);color:#fff;
  font-size:11px;padding:3px 9px;border-radius:999px}
.gal-zoom{position:absolute;right:10px;bottom:10px;border:0;cursor:pointer;color:#fff;
  background:rgba(10,13,18,.72);border-radius:7px;width:28px;height:28px;font-size:14px}
.gal-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 2px;scrollbar-width:thin}
.gal-strip img{width:74px;height:56px;object-fit:cover;border-radius:7px;cursor:pointer;
  flex:none;opacity:.55;border:2px solid transparent;transition:.15s}
.gal-strip img:hover{opacity:.85}
.gal-strip img.on{opacity:1;border-color:var(--accent)}

/* ---------- full-screen viewer ---------- */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(8,10,14,.95);
  display:flex;align-items:center;justify-content:center;gap:8px}
.lightbox img{max-width:88vw;max-height:88vh;object-fit:contain;border-radius:6px;
  box-shadow:0 12px 48px rgba(0,0,0,.6)}
.lb-nav{border:0;background:rgba(255,255,255,.09);color:#fff;font-size:34px;cursor:pointer;
  width:52px;height:78px;border-radius:10px;flex:none;transition:.15s}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-close{position:absolute;top:18px;right:22px;border:0;background:transparent;color:#fff;
  font-size:34px;cursor:pointer;line-height:1}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;
  background:rgba(255,255,255,.12);padding:5px 14px;border-radius:999px;font-size:12.5px}
@media (max-width:700px){ .lb-nav{width:40px;height:60px;font-size:26px} }

.thumb-score.shaky{border:2px dashed rgba(255,255,255,.8)}
.uncertain{font-size:12px;background:#fdf0dd;color:#8a5a09;border:1px solid #f0d9a8;
  border-radius:9px;padding:9px 11px;margin-top:14px;line-height:1.5}

/* ---------- refresh progress ---------- */
.runtext{display:flex;flex-direction:column;line-height:1.25;min-width:180px}
.rundetail{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.runprogress{flex:1;height:7px;background:rgba(0,0,0,.14);border-radius:99px;
  overflow:hidden;min-width:120px;max-width:460px}
.runfill{height:100%;width:0;background:currentColor;border-radius:99px;
  transition:width .45s ease}
.runpct{font-size:12px;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}

.donebar{display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:13px;
  background:#e4f2e6;color:#1c6b31;border-bottom:1px solid #bfe0c6}
.donebar .tick{font-weight:800}
.donex{margin-left:auto;border:0;background:transparent;color:inherit;font-size:19px;
  cursor:pointer;line-height:1;opacity:.7}
.donex:hover{opacity:1}

.minimap{height:230px;width:100%;border-radius:10px;border:1px solid var(--line);
  overflow:hidden;background:var(--bg)}
.minimap .leaflet-control-zoom{border:0;box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* ---------- watchlist ---------- */
.tabbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:5px;border-radius:99px;background:var(--s5);color:#fff;font-size:10.5px;
  font-weight:700;vertical-align:1px}
.tab.active .tabbadge{background:rgba(255,255,255,.28)}

.wlbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.whoami{margin-left:auto;display:flex;align-items:center;gap:7px}

.states{display:flex;gap:5px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:4px;margin-bottom:9px}
.statetab{border:0;background:transparent;padding:7px 13px;border-radius:8px;cursor:pointer;
  font-weight:560;color:var(--muted);font-size:13px}
.statetab .n{display:inline-block;margin-left:5px;font-variant-numeric:tabular-nums;opacity:.75}
.statetab.active{background:var(--accent);color:var(--accent-ink)}
.statetab.active .n{opacity:.95}
#wlHint{margin:0 0 13px;max-width:70ch}

.wlcard .card-body{gap:8px}
.wlactions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.wlactions .btn{flex:0 0 auto}

.viewing{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px;align-items:center;
  padding:8px 0 2px;border-top:1px solid var(--line)}
.viewing label{margin:0}
.viewing .control{padding:5px 7px;font-size:12px}

.thread{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:7px}
.cmt{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:7px 9px;font-size:12.5px;line-height:1.45}
.cmt b{font-size:12px}
.cmtx{position:absolute;top:4px;right:6px;border:0;background:transparent;color:var(--muted);
  cursor:pointer;font-size:15px;line-height:1;opacity:0}
.cmt:hover .cmtx{opacity:.7}
.cmtx:hover{opacity:1!important;color:var(--s5)}
.cmtadd{display:flex;gap:6px}
.cmtadd .control{flex:1;padding:6px 9px;font-size:12.5px}
.fieldset{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:15px 0 7px}

/* ================= mobile ================= =========================
   The desktop layout puts a tall filter column first, which on a phone
   meant scrolling past ~1,500px of inputs before seeing a single
   property. On mobile the content comes first and filters live behind a
   toggle. */
.mobonly{display:none}

@media (max-width: 860px){
  /* clip, not hidden. overflow-x:hidden makes html a scroll container, which
     silently kills position:sticky on everything inside it -- the header and
     the run bar both stopped sticking below 860px. clip suppresses the same
     sideways overflow without creating that container. */
  html, body{max-width:100%;overflow-x:clip}

  .topbar{gap:8px;padding:10px 12px}
  .brand .sub{display:none}
  .topbar h1{font-size:16px}
  .logo{width:30px;height:30px;flex-basis:30px}
  .logo svg{width:20px;height:20px}
  /* The header holds only the refresh button now; the school selector moved
     to the scope bar. A full-width right block here overlapped the title. */
  .topbar-right{gap:6px}
  .topbar-right .btn{padding:7px 10px;font-size:12.5px;white-space:nowrap}
  .mobonly{display:inline-block}

  .layout{padding:12px;gap:12px}
  /* Filters become a drawer-style panel, closed until asked for. */
  /* On a phone the filters open as a sheet over the page, not as a block in
     the flow. They used to sit after the gallery with order:2, so tapping
     "Filters" opened the panel 116,000 pixels down -- past four hundred cards.
     The button appeared to do nothing at all.

     A sheet has to be dismissible three ways, because on a phone you cannot
     see the control that opened it: a close button, the backdrop, and the
     confirm bar. The first attempt had only a sticky bar that scrolled out of
     reach, which is a trap. */
  .sidebar{position:fixed;inset:auto 0 0 0;z-index:1100;display:none;
    background:var(--panel);border:0;border-radius:16px 16px 0 0;
    max-height:88vh;padding:0 14px 88px;
    box-shadow:0 -10px 34px rgba(0,0,0,.35);
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sidebar.open{display:block}

  /* Title, and an X that is always where you left it. */
  .sheethead{position:sticky;top:0;z-index:2;display:flex;align-items:center;
    justify-content:space-between;gap:10px;margin:0 -14px 10px;padding:12px 14px;
    background:var(--panel);border-bottom:1px solid var(--line)}
  .sheethead h2{margin:0;font-size:16px}
  .sheetx{border:0;background:transparent;font-size:26px;line-height:1;
    padding:0 6px;color:var(--muted);cursor:pointer}

  /* Pinned to the sheet, not to its scrolling content, so it cannot be
     scrolled away from. */
  .sheetclose{position:fixed;left:12px;right:12px;bottom:12px;z-index:3;
    padding:14px;border:0;border-radius:11px;background:var(--accent);color:var(--accent-ink);
    font:inherit;font-weight:650;font-size:15px;cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.25)}

  .sheetbackdrop{position:fixed;inset:0;z-index:1090;background:rgba(8,10,14,.5)}
  .content{order:1}

  .toolbar{gap:8px}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tab{padding:7px 12px;font-size:13px;white-space:nowrap}
  .toolbar-right{width:100%;justify-content:space-between}
  .toolbar-right .control{flex:1;min-width:0}

  .grid,
  #wlGrid{grid-template-columns:1fr;gap:12px}
  .thumb{aspect-ratio:3/2}

  /* Full-height sheets rather than side panels. */
  .drawer-panel{width:100%;border-left:0}
  .dialog{width:96vw;max-height:88vh;overflow-y:auto}
  #map{height:64vh}
  .minimap{height:200px}

  /* Four tabs, one row. They fitted until the counts reached three digits --
     "New 107 / Flagged 16 / Saved 1 / Out 131" is 352px of content in 351px of
     bar -- and wrapping put "Out" on a line of its own, which reads as a
     different kind of thing rather than as the fourth tab. Tighter padding
     buys back the 40px; the scroll is the fallback if a count ever runs to
     four digits. */
  .states{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .states::-webkit-scrollbar{display:none}
  .statetab{white-space:nowrap;flex:1 1 auto;padding:7px 7px;font-size:12.5px}
  .statetab .n{margin-left:4px}
  .wlbar{gap:6px}
  .whoami{margin-left:0;width:100%;justify-content:flex-end}
  .wlactions .btn{flex:1 1 auto;text-align:center}
  .viewing{grid-template-columns:1fr 1fr;row-gap:6px}
  .viewing label{grid-column:1 / -1}

  .runbar{flex-wrap:wrap;gap:7px}
  .runprogress{order:3;width:100%;max-width:none}
}

@media (max-width: 420px){
  .price{font-size:17px}
  .card-top{padding:11px 12px 0}
  .card-body{padding:10px 12px 12px}
}

/* ---------- admission badge ---------- */
.admbadge{position:absolute;left:9px;top:9px;width:26px;height:26px;border-radius:50%;
  border:2px solid #fff;cursor:pointer;font-weight:800;font-size:13px;line-height:1;
  display:grid;place-items:center;color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.4);padding:0}
.admbadge.static{position:static;cursor:default;flex:none}
.admbadge:hover{transform:scale(1.12)}
.adm-ok{background:#0f9d58}
.adm-warn{background:#f4b400;color:#3b2f00}
.adm-bad{background:#d93025}
.adm-unknown{background:#8a94a3}

.admverdict{display:flex;gap:12px;align-items:center;padding:14px;border-radius:11px;
  margin:14px 0 6px;color:#fff}
.admverdict.adm-warn{color:#3b2f00}
.admverdict.adm-unknown{background:#64707F}  /* white on the old #8a94a3
   scored 3.07:1 -- readable on paper, not against a dark page */
.admverdict.adm-ok{background:#0f9d58}
.admverdict.adm-bad{background:#d93025}
.admicon{font-size:26px;font-weight:800;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.22);flex:none}
.admline{font-size:12.5px;opacity:.95;margin-top:2px}

.admschool{border:1px solid var(--line);border-radius:11px;padding:13px;margin-top:12px}
.admhead{display:flex;gap:10px;align-items:flex-start}
.admhead .admline{color:var(--muted);opacity:1}
.admdetail{font-size:12.5px;line-height:1.55;margin:9px 0 6px}
.admschool .kv{margin-top:8px;font-size:12.5px}
.admschool .btn{margin-top:10px}

.admpreview{margin-top:12px;max-height:230px;overflow:auto;border:1px solid var(--line);
  border-radius:9px;padding:10px;background:var(--bg)}
.admpreview .factors td{padding:4px 6px;font-size:12px}

/* ---------- swipeable card photos ---------- */
.thumb.swipe{overflow:hidden;touch-action:pan-y}
.thumb .track{display:flex;height:100%;width:100%;transition:transform .28s ease}
.thumb .track img{width:100%;height:100%;object-fit:cover;flex:0 0 100%;display:block}
@media (hover: hover) and (pointer: fine){
  .card:hover .thumb .track img{transform:none}
}
.swipenav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;
  width:30px;height:44px;background:rgba(10,13,18,.45);color:#fff;font-size:22px;
  cursor:pointer;opacity:0;transition:.15s;display:grid;place-items:center;padding:0}
.swipenav.prev{left:0;border-radius:0 7px 7px 0}
.swipenav.next{right:0;border-radius:7px 0 0 7px}
@media (hover: hover) and (pointer: fine){
  .card:hover .swipenav{opacity:1}
}
.swipenav:hover{background:rgba(10,13,18,.75)}
.dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:3}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);
  box-shadow:0 0 2px rgba(0,0,0,.5);transition:.15s}
.dots i.on{background:#fff;width:14px;border-radius:99px}
.notes{position:absolute;left:9px;bottom:9px;background:rgba(10,13,18,.72);color:#fff;
  font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;z-index:3}
@media (hover:none){ .swipenav{opacity:.85;width:34px;height:48px} }

/* ---------- sheet gestures ---------- */
.grabber{display:none}
@media (max-width: 860px){
  /* On a phone the drawer is a sheet, so it gets a handle and can be dragged
     away. The handle is the affordance — without it the gesture is invisible. */
  .drawer-panel{border-radius:16px 16px 0 0;padding-top:8px;will-change:transform}
  .grabber{display:block;width:38px;height:4px;border-radius:99px;background:var(--line);
    margin:2px auto 10px;position:sticky;top:0;z-index:5}
  .gal-main{touch-action:pan-y}
  .lightbox img{touch-action:pan-y}
}

/* ---------- area insights ---------- */
.areabox h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:14px 0 7px}
.areabox h3:first-child{margin-top:4px}
.areabox .kv{font-size:12.5px}
/* Sub-tabs inside the Area panel. Deliberately lighter than the main nav's
   accent-filled tabs: this is a section control, not top-level navigation, and
   two identical-looking tab bars on one screen read as one confused set. */
.areatabs{margin:0 0 10px;padding:3px;gap:2px}
.areatabs .tab{padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--muted)}
.areatabs .tab.active{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.areapane>h3:first-child{margin-top:0}
.soldspec{color:var(--muted);font-weight:400;font-size:11.5px;white-space:nowrap}
@media (max-width:640px){.areatabs .tab{padding:5px 10px;font-size:12px}}
.areabox .explain li{font-size:12px;line-height:1.5}
/* .explain bolds its first item because in the Value Score breakdown that is
   the largest factor. The planning list is sorted by date, so its first row is
   merely the most recent and should not be shouted. */
.areabox .explain li:first-child{color:var(--muted);font-weight:400}
.areabox .explain li b{color:var(--ink);font-weight:600}
.areabox .srcs{margin-top:14px;padding-top:9px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.6}

/* ---------------- school picker ---------------- */
.schoolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.schoolbar label{display:block}
.schoolbar > div{min-width:0}
.schoolbar .scwide{flex:1 1 220px}

/* Find on the left, what you have chosen on the right. The right column is
   fixed-width because it is a reference, not a workspace: it is there so you
   can see your shortlist while you look at the alternatives. */
.scgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.scmine{position:sticky;top:12px}
.scmap{height:min(52vh,460px);border-radius:12px;border:1px solid var(--line)}
.sclist{max-height:min(62vh,560px);overflow:auto;display:flex;flex-direction:column;gap:6px}
.minedrop{border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;
  line-height:1;padding:2px 4px}
.minedrop:hover{color:#d93025}
.scrow{display:flex;gap:10px;padding:9px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel)}
.scrow.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.scbody{flex:1;min-width:0}
.scname{font-weight:600;font-size:13.5px;cursor:pointer}
.scname .micro{font-weight:400;margin-left:6px}
.scmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:3px 0}
.scscore{font-size:12.5px}
.lab.ofsted-out{background:#dcfce7;color:#14532d}
.lab.ofsted-good{background:#ecfccb;color:#3f6212}
.lab.ofsted-ri{background:#fef3c7;color:#92400e}
.lab.ofsted-bad{background:#fee2e2;color:#991b1b}
.lab.ofsted-card{background:#e0e7ff;color:#3730a3}
.lab .yr{opacity:.65;font-weight:400}
.scnotes{margin-top:12px}
.scnotes summary{cursor:pointer;padding:6px 0}
.cmpscroll{overflow-x:auto}
table.cmp{border-collapse:collapse;width:100%;font-size:13px}
table.cmp th,table.cmp td{border-bottom:1px solid var(--line);padding:7px 10px;
  text-align:left;vertical-align:top}
table.cmp thead th{position:sticky;top:0;background:var(--panel);font-size:12.5px}
table.cmp td:first-child,table.cmp th:first-child{color:var(--muted);font-size:12px;
  white-space:nowrap}
table.cmp tr.cmphead td{background:var(--bg)}
@media (max-width:900px){
  /* One column, and the shortlist first: what you have already chosen is the
     context for everything below it. */
  .scgrid{grid-template-columns:1fr}
  .scmine{position:static;order:-1}
  .scmap{height:240px}
  .sclist{max-height:none}
}
table.cmp tr.cmpgroup td{background:var(--bg);font-weight:600;color:var(--ink);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding-top:12px}
table.cmp td.na{color:var(--muted)}
.lab.unknown{background:#e2e8f0;color:#475569}

/* Admission verdict beside the price. A bare tick on the photo told you nothing
   about what was being judged; this names the question. */
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.admpill{display:inline-flex;align-items:center;gap:4px;border:0;background:none;
  padding:0;cursor:pointer;flex:0 0 auto;white-space:nowrap;
  font-size:11.5px;color:var(--muted);line-height:1.2}
.admpill .admicon{display:grid;place-items:center;width:14px;height:14px;
  border-radius:50%;font-size:9px;font-weight:700;color:#fff;flex:0 0 auto}
/* The mortarboard names the subject; the coloured mark carries the verdict. */
.admpill .admcap{font-size:11px;line-height:1;margin-right:1px}
.admpill.adm-ok .admicon{background:#15803d}
.admpill.adm-warn .admicon{background:#b45309}
.admpill.adm-bad .admicon{background:#b91c1c}
.admpill.adm-unknown .admicon{background:#94a3b8}
.admpill:hover{color:var(--ink);text-decoration:underline}
/* Sits on the price line rather than above it. */
.card-top .price{line-height:1.2}
.card-top{align-items:baseline}

/* An unloaded area section: says what it will fetch rather than looking empty. */
.areaload{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  padding:14px;border:1px dashed var(--line);border-radius:10px;background:var(--bg);
  cursor:pointer}
.areaload:hover{border-color:var(--accent)}
.areaload-title{font-size:13.5px;font-weight:600;color:var(--ink)}
.areaload-cta{margin-top:5px;font-size:11.5px;font-weight:600;color:var(--accent)}

/* Scope bar for the listing views. On a phone the school name had been
   squeezed between three buttons in the header until it read just "T". */
.contextbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 0 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ctxlabel{font-size:12px;color:var(--muted);flex:0 0 auto}
.contextbar #schoolSelect{flex:1 1 260px;min-width:0}
@media (max-width:720px){
  .contextbar{gap:6px}
  .contextbar #schoolSelect{flex:1 1 100%;order:-1}
  .ctxlabel{width:100%;order:-2;margin-bottom:-2px}
}

/* which view -> which school -> how many, sorted how */
.resultbar{padding-bottom:10px}
.resultbar .toolbar-right{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.resultbar #sortBy{flex:1 1 auto;min-width:0;max-width:280px}
@media (max-width:720px){
  .topbar-right .btn{padding:7px 11px;font-size:12.5px}
  .resultbar #sortBy{max-width:none}
}

/* Keep the header to one row on a phone: the strapline and the longer button
   label are the first things to go, not the layout. */
.topbar{flex-wrap:nowrap}
.brand{min-width:0}
.brand > div{min-width:0}
.topbar-right{flex:0 0 auto}
.btn .narrow{display:none}
@media (max-width:620px){
  .topbar{gap:10px;padding-left:12px;padding-right:12px}
  .topbar .sub{display:none}
  .btn .wide{display:none}
  .btn .narrow{display:inline}
}
.scadm{margin-top:3px;color:var(--muted)}

/* Decision and age share one line so showing "added" costs no card height. */
/* Plain text, not flex. This was a two-part row until the age moved onto the
   photo; left as a flex container with space-between, its own words became
   flex items and got pushed to opposite ends of the card. */
.wlmeta{margin:4px 0 0}
.wlbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px}
@media (max-width:640px){ .wlbar{gap:8px} .wlbar .whoami{flex:1 1 auto} }
.thumb-age{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.62);
  color:#fff;font-size:10.5px;padding:2px 7px;border-radius:999px;
  backdrop-filter:blur(2px)}
.whoami{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.whoami .control{min-width:0}

/* One-at-a-time review: a single property filling the frame, decisions under
   the thumb, so triage does not mean scrolling and losing your place. */
.reviewcard{position:relative;margin:auto;width:min(520px,96vw);max-height:94vh;
  display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
.reviewtop{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.reviewcard .thumb{flex:1 1 auto;min-height:0;border-radius:0}
.reviewcard .thumb img{height:100%;object-fit:cover}
.reviewbody{padding:12px 14px;flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.reviewactions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);
  flex:0 0 auto}
.reviewactions .btn{flex:1}
.btn.big{padding:13px 12px;font-size:14px;font-weight:600}
.reviewdone{padding:36px 24px;text-align:center;display:flex;flex-direction:column;
  gap:10px;align-items:center}
@media (max-width:640px){
  .reviewcard{width:100vw;max-height:100vh;height:100vh;border-radius:0;border:0}
}
.wizchips{display:flex;flex-wrap:wrap;gap:8px}
.wizchip{padding:9px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);cursor:pointer;font-size:13px;color:var(--ink)}
.wizchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.wizwhy{list-style:none;padding:0;margin:3px 0 0;font-size:12px;color:var(--muted)}
.wizwhy li:before{content:"· "}

/* Reviewing works by position: one property fills the frame, and when you
   discard it the next one lands in exactly the same place instead of the list
   shuffling upward by an unpredictable amount. The card is capped to the
   viewport and snaps, so scrolling moves one property at a time. */
/* Snapping is for the single-column case only. In three columns it would jump
   a whole row at a time, and the reason for it -- the next card landing where
   the last one was -- does not apply once they sit side by side. */
/* The snap points were on #wlGrid, which is not itself a scroll container --
   the page is. Browsers then apply them to the nearest scrollport, and Safari
   in particular fights its own momentum doing it: the list caught and
   re-settled as you scrolled. The property that mattered -- the next card
   landing where the last one was -- comes from removing one card rather than
   rebuilding the grid, which decide() already does. */
@media (max-width: 860px){
  #wlGrid .wlcard{scroll-margin-top:8px}
}
/* Cards in a row should end level whatever length their address runs to. */
#wlGrid .wlcard{align-self:stretch}
/* No aspect override here on purpose: the watchlist photo inherits exactly the
   gallery's .thumb rule, so the two views stay identical. Forcing a taller box
   upscaled a 656px-wide photo past its own resolution and softened every
   image. */
/* Leaves without the list jumping while the server catches up. */
#wlGrid .wlcard.leaving{opacity:0;transform:scale(.97);
  transition:opacity .13s ease,transform .13s ease}
.wlactions .btn{flex:1;padding:11px 10px;font-weight:600}
.wlactions{display:flex;gap:8px;margin-top:10px}

.wlscope{margin-bottom:10px}
.wlscope #wlSelect{flex:1 1 240px;min-width:0}
@media (max-width:720px){
  .wlscope #wlSelect{flex:1 1 100%;order:-1}
  .wlscope .ctxlabel{width:100%;order:-2}
}

/* Drawer tabs: the decision line and score stay put, everything else is behind
   a tab that fetches only when opened. */
.dfacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:10px 0 2px}
.dfact{font-size:12px;color:var(--muted)}
.dfact b{font-size:14px;color:var(--ink);font-weight:600}
/* Five tabs on a 375px screen with 4px to spare: they fit, so they should not
   scroll -- a tab you have to discover by swiping is a tab most people miss. */
.dtabs{margin:14px 0 12px;padding:3px;gap:1px}
.dtabs .tab{padding:6px 10px;font-size:12.5px;white-space:nowrap;flex:1 1 auto;
  text-align:center}
.dpane{min-height:60px}
/* The inline pane reuses the dialog's markup; its header belongs to the dialog. */
#admBox .admonly{display:none}
.kv dt.total,.kv dd.total{border-top:1px solid var(--line);padding-top:7px;margin-top:3px}
.riskbadge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;background:var(--bg);color:var(--muted)}
.riskbadge.risk-low{background:#dcfce7;color:#14532d}
.riskbadge.risk-mid{background:#fef3c7;color:#92400e}
.riskbadge.risk-high{background:#fee2e2;color:#991b1b}

/* One map, layers you switch. Sits above the tabs because it is context for
   all of them -- and keeps the tab row to a single screen. */
.laybtn:disabled{opacity:.6}

/* GARDEN AND SUN ---------------------------------------------------------- */
.sunhead{display:flex;gap:14px;align-items:center;margin:2px 0 12px}
.dial{width:64px;height:64px;flex:0 0 64px}
.dial-ring{fill:var(--panel);stroke:var(--line,#dcdcd6);stroke-width:1.5}
.dial-wedge{fill:#f0b429;opacity:.85}
.dial-t{font-size:9px;fill:var(--muted,#7a7a72);text-anchor:middle;font-weight:600}
.sunfacing{font-size:17px;font-weight:650;line-height:1.2}

.sunseasons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.sunseason{text-align:center}
.sunhrs{font-size:20px;font-weight:650;line-height:1}
.sunhrs span{font-size:12px;font-weight:500;color:var(--muted,#7a7a72)}
.sunbar{height:5px;border-radius:3px;background:var(--line,#e6e6e0);margin:6px 0 5px;overflow:hidden}
.sunbar i{display:block;height:100%;background:linear-gradient(90deg,#f6c453,#f0932b)}
.sunlabel{font-size:11.5px;font-weight:600}
.sunsay{font-size:13px;line-height:1.5;margin:10px 0 12px}

.sunctl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.seg{display:inline-flex;border:1px solid var(--line,#dcdcd6);border-radius:7px;overflow:hidden}
.seg button{border:0;background:var(--panel);padding:5px 9px;font:inherit;
  font-size:11.5px;cursor:pointer;color:var(--muted,#7a7a72);border-right:1px solid var(--line,#dcdcd6)}
.seg button:last-child{border-right:0}
.seg button.on{background:#2f2f2b;color:#fff;font-weight:600}

.sunstage{background:#eef1f4;border:1px solid var(--line,#dcdcd6);border-radius:9px;
  padding:6px;max-height:300px;display:flex;justify-content:center}
.planSvg{width:100%;height:auto;max-height:288px}
.pl-plot{fill:#dfe4e8;stroke:none}
.pl-sunlit polygon{fill:#fdf0cd}
/* Shadows are drawn as one group at a single opacity. Per-polygon opacity
   made every overlap darker than the last, so a garden crossed by the house
   and three fences came out in four different greys for one shadow. */
.pl-shade{fill:#5b6b7c}
.pl-shadows{opacity:.45}
.pl-house{fill:#4a4a44;stroke:#33332e;stroke-width:.25}
.pl-nb{fill:#a9a9a1;stroke:#8d8d85;stroke-width:.2}
.pl-edge{fill:none;stroke:#6b6b62;stroke-width:.45;stroke-dasharray:1.2 .8}
.pl-scale line{stroke:#555;stroke-width:.3}
/* The sun can land anywhere on the perimeter, including on top of these,
   so they carry a halo rather than being placed out of its way. */
.pl-scale text,.pl-n text{font-size:1.7px;fill:#555;font-weight:600;
  paint-order:stroke fill;stroke:#eef1f4;stroke-width:.7;stroke-linejoin:round}
.pl-scale line{paint-order:stroke;stroke-linecap:round}
.sunwhen{margin-top:7px}
.sunhow{margin-top:10px}
.sunhow summary{cursor:pointer;font-size:12px;color:var(--muted,#7a7a72)}
.sunassume{margin:8px 0 0;padding-left:16px;line-height:1.55}
.sunassume li{margin-bottom:4px}
@media (max-width:400px){.sunseasons{gap:6px}.sunhrs{font-size:17px}}

/* A listing that has sat unsold for a season is worth noticing among the
   headline facts. Tinted rather than badged: its neighbours in this row are
   plain text, and giving this one a pill broke the line and buried the number
   in a background it had no contrast against. */
.dfact.stale, .dfact.stale b{color:#8F5500}
.thumb-age.stale{background:rgba(150,80,10,.82)}

/* COMMUTE ----------------------------------------------------------------- */
.commutebox{margin-bottom:14px}
.dsechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dsechead h3{margin:0 0 6px}
.linkbtn{border:0;background:none;padding:0;font:inherit;font-size:12px;
  color:var(--muted);text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
/* One row shape for a fixed place and a saved destination alike. */
.tjourney{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.tjourney:last-of-type{border-bottom:0}
.tdest{flex:1 1 auto;min-width:44%;font-size:13px;font-weight:600}
.tmodes{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.tmode{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tmode.lead{font-size:15px;font-weight:650;color:var(--ink)}
.tjourney .clegs,.tjourney>.micro{flex:1 0 100%}
.clegs{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cleg{font-size:11px;padding:2px 6px;border-radius:5px;background:var(--chip,#f0f0ea);
  color:var(--muted);white-space:nowrap}

.destrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.destadd{margin-top:12px}
.destpick{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:7px;
  padding:7px 9px;margin-top:6px;font:inherit;cursor:pointer}
.destpick:hover{border-color:var(--ink)}

.connsay{font-size:13.5px;line-height:1.5;margin:2px 0 10px}
.micro.warn{color:#8a5a1e}

/* FLOORPLANS -------------------------------------------------------------- */
.fpgrid{display:grid;gap:8px}
.fpgrid.many{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.fpthumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  border-radius:9px;overflow:hidden;background:#fff;cursor:zoom-in}
.fpthumb img{display:block;width:100%;height:auto}
.fpcap{position:absolute;left:0;right:0;bottom:0;padding:4px 7px;font-size:11px;
  background:rgba(0,0,0,.6);color:#fff;text-align:left}

/* The viewer. A floorplan is read, so it zooms and pans; it does not swipe. */
/* Above the drawer (1000), alongside the photo lightbox (2000): it is
   opened from inside the drawer, so anything lower renders behind it. */
.fpview{position:fixed;inset:0;z-index:2000;background:#0e0e0c;display:flex;flex-direction:column}
.fpbar{display:flex;align-items:center;gap:8px;padding:8px 10px;color:#fff;
  background:#1a1a17;font-size:13px;flex:0 0 auto}
.fpspacer{flex:1 1 auto}
.fpbtn{border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;
  border-radius:6px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer}
.fpbtn:hover{background:rgba(255,255,255,.12)}
.fpstage{flex:1 1 auto;overflow:auto;display:flex;align-items:center;justify-content:center;
  padding:8px;-webkit-overflow-scrolling:touch}
.fpstage.zoomed{align-items:flex-start;justify-content:flex-start}
#fpImg{max-width:100%;max-height:100%;object-fit:contain;background:#fff;
  border-radius:4px;cursor:zoom-in}
#fpImg.zoomed{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out}

/* FINANCE ----------------------------------------------------------------- */
.bignum{display:flex;align-items:baseline;gap:8px;margin:2px 0 10px}
.bignum b{font-size:30px;font-weight:650;line-height:1}
.bignum span{font-size:12.5px;color:var(--muted)}
.nextband{background:var(--chip,#f4f4ee);border-radius:8px;padding:8px 10px;
  line-height:1.55;margin-top:8px}
.posgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px 0}
.posown{margin-top:6px;border-top:1px solid var(--line);padding-top:10px}
.posown summary{cursor:pointer;font-size:13px;font-weight:600}
.posest{margin-top:10px}
.posval{font-size:15px;margin:6px 0 2px}
.posval b{font-size:22px;font-weight:650}
.soldlist{margin:4px 0 0;padding-left:16px;line-height:1.6}
.valuetabs{margin-bottom:10px}
/* A price cut: worth noticing, not worth shouting. */
.dfact.cut, .dfact.cut b{color:#1d7a4c}
.lab.cut{background:#e6f4ec;color:#1d7a4c;border-color:#bfe3ce}
/* The sun on the plan: its size is its height above the horizon. */
.pl-sun circle{fill:#f6b73c;stroke:#d99518;stroke-width:.2}
.pl-sunrays line{stroke:#e8a72a;stroke-width:.32;stroke-linecap:round}
.pl-sunray{stroke:#e8a72a;stroke-width:.28;stroke-dasharray:1 1.1;opacity:.75}
.pl-sun text{font-size:1.9px;fill:#8a5f0f;font-weight:700;
  paint-order:stroke fill;stroke:#eef1f4;stroke-width:.8;stroke-linejoin:round}
/* A warning next to the price: it has to reach you before you open a tab. */
.dfact.warn b{font-weight:650}
.dfact.warn.risk-high, .dfact.warn.risk-high b{color:#a8431a}
.dfact.warn.risk-mid, .dfact.warn.risk-mid b{color:#8a5a1e}
.planbtn{margin-top:6px}
.planbtn.on{background:#2f2f2b;color:#fff;border-color:#2f2f2b}
.plantip{font-size:11.5px;line-height:1.45;max-width:240px}
/* Planning list entries pair with their pin, so they read as selectable. */
.planlist{list-style:none;padding-left:0;margin:6px 0 0}
.planitem{display:flex;gap:9px;align-items:flex-start;padding:8px 8px 8px 6px;
  border-radius:8px;cursor:pointer;border:1px solid transparent}
.planitem:hover{background:var(--chip,#f4f4ee)}
.planitem.on{border-color:var(--ink);background:var(--chip,#f4f4ee)}
.plandot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;margin-top:5px}
.planstatus{font-size:11.5px;color:var(--muted)}
.pcmark{background:var(--chip,#f0f0ea);border-radius:4px;padding:1px 5px;font-weight:600}

/* Under offer. The one badge allowed to be loud: it changes whether the
   property is worth a viewing at all, and nothing else on the card says it. */
.thumb-status{position:absolute;left:8px;top:8px;background:#a8431a;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 8px;
  border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.dfact.sstc, .dfact.sstc b{color:#a8431a}

/* Which catchments the gallery and map are showing. */
.schoolchips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.schoolchip{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;
  white-space:nowrap}
.schoolchip.on{background:var(--accent-soft);border-color:#BFE3D5;color:var(--ink);font-weight:600}
.schoolchip:not(.on){text-decoration:line-through;opacity:.72}
.scwhere{display:flex;gap:6px}
.scwhere .control{flex:1 1 auto;min-width:0}
.scplacehits{flex:1 1 100%}
.scplacehit{display:block;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--panel);border-radius:7px;padding:6px 9px;margin-top:5px;
  font:inherit;cursor:pointer}
.scplacehit:hover{border-color:var(--ink)}
.freshness{margin:6px 0 0;font-size:12px;color:var(--muted)}

/* The progress bar opens into what it is actually doing. */
.runbar{width:100%;text-align:left;cursor:pointer;font:inherit}
.runchev{margin-left:6px;opacity:.7}
.runtasks{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin:0 0 10px}
.tasklist{list-style:none;margin:0;padding:0}
.tasklist .task{display:flex;align-items:flex-start;gap:9px;padding:4px 0;font-size:13px}
.taskmark{width:14px;color:var(--muted)}
.task.done .taskmark{color:#1d7a4c}
.task.active .taskmark{color:var(--accent)}
.task.active .taskname{font-weight:650}
.taskname{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.35}
.tasktime{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.task:not(.done):not(.active) .taskname{color:var(--muted)}
/* In the header beside Refresh; must not add a row. */
.freshness{font-size:12px;color:var(--muted);white-space:nowrap}
.freshbtn{border:0;background:none;padding:0;font:inherit;font-size:12px;
  color:var(--muted);text-decoration:underline;cursor:pointer}
.freshbtn:hover{color:var(--ink)}
@media (max-width:560px){.freshness{display:none}}
.task.skipped .taskname{color:var(--muted);opacity:.75}
.task.skipped .taskmark{color:var(--muted)}

/* The "made from your search" note in the watchlist editor. It carries what
   did *not* come across from the filters, so it has to read as a caveat rather
   than as more small print. */
.wlfrom{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;padding:8px 10px;margin:8px 0 2px;color:var(--ink)}

/* Icon inside a button: sized to the text, and stroked rather than filled so
   it reads at 14px on a phone. */
.btn .ico{width:14px;height:14px;vertical-align:-2px;margin-right:5px;
  fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}

/* ---- the school plan ---- */
.planhead{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin:4px 0 10px;font-size:14px}
.planhead.bad{border-left:3px solid #d93025}
.planhead .micro{display:block;margin-top:3px}
.tablewrap{overflow-x:auto}
.plantable{width:100%;border-collapse:collapse;font-size:13px}
.plantable th,.plantable td{padding:7px 8px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.plantable th{font-size:11.5px;color:var(--muted);font-weight:600}
.plantable .num{text-align:right;white-space:nowrap}
.plantable .micro{margin:2px 0 0}
.plansteps{list-style:none;margin:6px 0 0;padding:0}
.planstep{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.planstep:last-child{border-bottom:0}
.planstep .micro{margin-top:2px}
.planicon{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;background:var(--line);color:var(--ink)}
.planstep.gap .planicon,.planstep.conflict .planicon{background:#fde7e5;color:#a3231a}
.planstep.narrow .planicon{background:#fff2d6;color:#8a5a00}
.planstep.target .planicon{background:#dcfce7;color:#14532d}
.planstep.deadline .planicon{background:#fde7e5;color:#a3231a}
.planstep.wider .planicon{background:var(--accent-soft);color:var(--accent-deep)}

/* The property filters belong to the gallery and the map. On the school picker
   they filter nothing on screen, and taking up the left column made a page
   about schools look like a page about houses. */
body.on-full .sidebar{display:none}
body.on-full .layout{grid-template-columns:1fr}

/* The whole row is the target. A 13px checkbox is not one on a phone. */
.scrow{cursor:pointer;transition:border-color .12s,background .12s}
.scrow:hover{border-color:var(--accent)}
.scrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scrow.noboundary{opacity:.88}
.ctxlabel.guessed{color:#b45309;font-style:italic}

/* Which boundary is which. Dashed blue is your shortlist; solid amber is what
   you have selected in the list below. */
.scmapkey{display:flex;gap:14px;flex-wrap:wrap;margin:6px 2px 0;font-size:11.5px;
  color:var(--muted)}
.scmapkey span{display:inline-flex;align-items:center;gap:5px}
.scmapkey i{width:18px;height:0;border-top-width:2px;display:inline-block}
.scmapkey .k-mine{border-top-style:dashed;border-top-color:var(--accent)}
.scmapkey .k-pick{border-top-style:solid;border-top-color:#b45309}

/* The run bar, its task breakdown and the done bar travel with the header.
   They used to sit in normal flow at the top of the document while .topbar was
   sticky, so pressing Refresh from halfway down the gallery showed you nothing:
   the feedback was rendered where you no longer were. --topbar-h is measured in
   JS, because the header changes height with the viewport. */
.statusstack{position:sticky;top:var(--topbar-h,61px);z-index:590}
.statusstack:empty{display:none}
/* Expanded, the breakdown is a panel over the page rather than part of it. */
.statusstack .runtasks{margin:0;border-radius:0 0 10px 10px;
  box-shadow:0 8px 20px rgba(16,24,40,.14);max-height:60vh;overflow:auto}

/* Bills, and the value rationale, both read as small tables of money. */
.plantable.bills td:first-child{width:52%}
.plantable tfoot td{border-top:2px solid var(--line);border-bottom:0;padding-top:9px}
.plantable tr.soft td:first-child{color:var(--muted)}
.plantable tr.soft td:first-child:after{content:" ~";color:var(--muted)}
.bandtable{margin-top:10px}
.bandtable summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:4px 0}

/* ---- why the score is the score ---- */
.rathead{margin:0 0 10px;font-size:14px;line-height:1.5}
.ratsteps{list-style:none;margin:0;padding:0;counter-reset:rat}
.ratstep{padding:8px 0;border-bottom:1px solid var(--line)}
.ratstep:last-child{border-bottom:0}
.ratline{display:flex;align-items:baseline;gap:8px}
.ratlabel{font-weight:600;font-size:13px;flex:1 1 auto}
.ratpct{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.ratpct.up{color:#1d7a4c}
.ratpct.down{color:#b3261e}
.ratrun{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:78px;text-align:right}
.ratstep .micro{margin-top:3px}
.ratconf{background:var(--bg);border-radius:8px;padding:8px 10px;margin-top:10px}
.ratmethod{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.ratmethod summary{cursor:pointer;font-size:12.5px;font-weight:600;padding:4px 0}
.ratmethod dt{font-weight:600;font-size:12.5px;margin-top:8px}
.ratmethod dd{margin:2px 0 0}
.ratnone{background:var(--bg);border-left:3px solid #b45309;border-radius:8px;
  padding:10px 12px;font-size:13px}

/* What changed on a watched property since the previous refresh. */
.changes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 6px;
  padding:6px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.chglabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700}
.chg{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.chg.cut{background:#dcfce7;color:#14532d}
.chg.up{background:#fee2e2;color:#991b1b}
.chg.sstc{background:#fef3c7;color:#92400e}
.chg.gone{background:#e2e8f0;color:#475569}
.chg.back{background:var(--accent-soft);color:var(--accent-deep)}

.wlchanges{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  margin:0 0 10px;padding:9px 12px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--accent)}
.wlchtitle{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;width:100%}
.wlchbody{font-size:13.5px}
.wlchanges .micro{width:100%;margin:0}

/* Asking price over time. */
.pthead{margin:14px 0 6px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.pricetl td:first-child{white-space:nowrap}
.pricetl .chg{font-size:11.5px}
.pricetl .micro{margin:0;white-space:nowrap}

/* ---------- item 3: touch targets ----------
   Measured on a phone: tabs 34px, chips 31, Find/Filters/Save 31, Refresh 35,
   sort 35, and the admission pill 14. Apple's floor is 44 and Kate uses this
   one-handed. Applied only where a finger is the pointer, so the desktop
   layout keeps its density. */
@media (pointer: coarse){
  .btn, .tab, .schoolchip, .chip, select.control, input.control,
  .statetab, .scplacehit, .linkbtn, .schoolsummary{
    min-height:44px;
  }
  .btn, .tab, .statetab{display:inline-flex;align-items:center;justify-content:center}
  .schoolchip, .chip{display:inline-flex;align-items:center}
  /* The pill is a link to a full admissions assessment and was 14px tall. The
     text stays its size; the target around it grows. */
  .admpill{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  /* A checkbox you tick by the row, not by the box. */
  .sidebar label.check{min-height:44px;display:flex;align-items:center}
}

/* ---------- item 2: less furniture before the first house ----------
   Measured on a 375px phone: the first card began 325px down — 40% of the
   viewport spent on five bands of chrome. Two of them were avoidable. */
.schoolsummary{
  display:none;border:1px solid var(--line);background:var(--panel);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;color:var(--ink);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.schoolsummary:after{content:" ▾";font-weight:400;color:var(--muted)}
.schoolsummary[aria-expanded="true"]:after{content:" ▴"}

@media (max-width:860px){
  /* the chips collapse behind the summary until asked for */
  .schoolsummary{display:inline-block}
  .contextbar .schoolchips{display:none;width:100%}
  .contextbar.chipsopen .schoolchips{display:flex}
  .contextbar .ctxlabel{display:none}
  /* count and sort join the row above rather than owning one */
  .resultbar{padding-top:0;margin-top:-2px}
  .resultbar .toolbar-right{gap:8px}
  .resultbar .count{font-size:12.5px;white-space:nowrap}
  #sortBy{flex:1 1 auto;min-width:0}
}

/* The context row must stay one line: wrapped, it was 113px on a phone and
   pushed the first property most of a screen down. The short labels come in
   earlier than the header's do, because this row carries four controls. */
@media (max-width:860px){
  .contextbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:7px;align-items:center}
  .contextbar::-webkit-scrollbar{display:none}
  .contextbar .btn{flex:0 0 auto}
  .contextbar .btn .wide{display:none}
  .contextbar .btn .narrow{display:inline}
  .schoolsummary{flex:0 1 auto}
  /* Opened, the chips need their own line and the row stops scrolling. */
  .contextbar.chipsopen{flex-wrap:wrap;overflow:visible}
}

/* ---------- item 5: collapsible filter groups ---------- */
.fgroup.collapsible > h3{
  cursor:pointer;display:flex;align-items:center;gap:7px;
  margin:0;padding:9px 0;user-select:none;
}
.fgroup.collapsible > h3:after{
  content:"▾";margin-left:auto;color:var(--muted);font-weight:400;
  transition:transform .15s ease;
}
.fgroup.collapsible.open > h3:after{transform:rotate(180deg)}
.fgroup.collapsible > *:not(h3){display:none}
.fgroup.collapsible.open > *:not(h3){display:revert}
.fgroup.collapsible.open > .chips{display:flex}
.fgroup.collapsible > h3:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fcount{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:700;letter-spacing:0;
}
.fgroup.collapsible.active > h3{color:var(--ink)}
/* Coverage is a reference table, not a headline. */
.coverage dd .micro{margin-left:6px}

/* The brand block is the way back to the home page. */
a.brand{text-decoration:none;color:inherit}
a.brand:hover h1{text-decoration:underline;text-underline-offset:3px}

/* ---------- the shared main nav ----------
   The same four destinations on the home page and in the app, so crossing
   between them does not change the furniture. */
.mainnav{display:flex;align-items:center;gap:2px;flex:1 1 auto;
  justify-content:center;flex-wrap:wrap}
.navitem{display:inline-flex;align-items:center;gap:7px;border:0;background:none;
  font:inherit;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;
  padding:9px 15px;border-radius:999px;text-decoration:none;white-space:nowrap}
@media (max-width:1180px){
  .navitem{font-size:13.5px;padding:9px 9px}
  .topbar{gap:10px}
  .topbar .sub{display:none}
}
@media (max-width:1000px) and (min-width:861px){
  .navitem{font-size:13px;padding:8px 7px}
  .topbar h1{font-size:15px}
}
.navitem:hover{color:var(--ink);background:var(--mist)}
.navitem.on{color:var(--ink);background:var(--mint)}
.navitem.on:after{content:"";position:absolute}
.navbadge{display:inline-grid;place-items:center;min-width:19px;height:19px;
  padding:0 6px;border-radius:999px;background:var(--s5);color:#fff;
  font-size:11px;font-weight:700;line-height:1}
@media (max-width:860px){
  /* On a phone the nav goes under the brand and spreads, so every destination
     is one thumb-reach away rather than behind a menu. */
  .topbar{flex-wrap:wrap;row-gap:8px}
  .mainnav{order:3;width:100%;justify-content:space-between;gap:0;
    border-top:1px solid var(--line);padding-top:7px;margin-top:2px}
  .navitem{flex:1 1 0;justify-content:center;padding:11px 6px;font-size:13px}
  .brand{flex:1 1 auto}
}
@media (max-width:620px){
  /* Five destinations will not fit across a phone, and wrapping one onto a
     row of its own looks like a mistake. "How it works" is the only one that
     leaves the app for the marketing page, so it is the one that goes: the
     home page is still a tap on the logo away. */
  .mainnav .navitem[href]{display:none}
  .navitem{padding:11px 4px;font-size:12.5px}
}

/* ---------- your own home ----------
   The only screen in the app about a house that is not for sale. It reads top
   to bottom as a sequence -- find it, here it is, here is what it is worth,
   here is what changing it would do -- so the layout is a column rather than a
   dashboard, and the answer ("does it pay?") is the widest thing on it. */
.mh{max-width:960px;margin:0 auto;padding:4px 0 60px}
.mhhead h2{font-size:26px;letter-spacing:-.02em}
.mhhead .sub{margin-top:6px;max-width:62ch;font-size:13.5px}
.mhsechead h3{font-size:19px;letter-spacing:-.015em}
.mhsechead .sub{margin-top:5px;max-width:62ch;font-size:13px}
.mhlabel{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.mhhint{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.mherr{margin-top:10px;color:#e2a55e;font-size:13px}

.mhcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-top:14px;box-shadow:var(--shadow)}

/* find */
.mhfind{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-top:18px;box-shadow:var(--shadow)}
.mhfindrow{display:block;margin-bottom:12px}
.mhfindrow .mhlabel{margin-bottom:6px}
.mhfindrow label.mhlabel{display:block}
.mhfind .btn.primary{width:100%}
.mhmatches{margin-top:16px}
.mhmatchlist{display:grid;gap:8px;margin-top:8px}
.mhmatch{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:transparent;border-radius:9px;padding:10px 12px}
.mhmatch:hover{border-color:var(--accent)}
.mhmatch span{color:var(--muted);font-size:12.5px}

/* what we found */
.mhtop{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-top:14px}
.mhtop .mhcard{margin-top:0}
.mhid{display:flex;gap:14px;align-items:flex-start}
.mhphoto{width:132px;height:99px;object-fit:cover;border-radius:9px;flex:0 0 132px}
.mhidtext h3{font-size:17px;line-height:1.35}
.mhfacts{margin:6px 0 0;color:var(--muted);font-size:13px}
.mhareas{margin-top:14px}
.mhareas ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.mhareas li{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:var(--muted)}
.mhareas li b{color:var(--ink);font-variant-numeric:tabular-nums}
.mhareas li.on b{color:var(--accent)}
.mhplan{display:block;margin-top:14px;text-decoration:none}
.mhplan img{width:100%;border-radius:9px;background:#fff;display:block}
.mhplan span{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.mhnote{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);
  border-left:2px solid var(--accent);padding-left:10px}

/* the valuation */
.mhbig{font-size:38px;font-weight:650;letter-spacing:-.025em;margin-top:6px;
  font-variant-numeric:tabular-nums}
.mhrange{display:flex;align-items:center;gap:10px;margin-top:8px;
  color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.mhrangebar{flex:1;height:4px;border-radius:2px;background:var(--accent-soft);position:relative}
.mhrangebar i{position:absolute;inset:0;border-radius:2px;background:var(--accent);opacity:.55}
.mhconf{margin-top:14px}
.mhconfbar{display:block;height:5px;border-radius:3px;background:var(--line);margin-top:5px}
.mhconfbar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.mhwhy{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.mhwhy li{font-size:12.5px;color:var(--muted);line-height:1.5;padding-left:14px;position:relative}
.mhwhy li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.mhchecks{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:14px}
.mhcheckhead{display:flex;align-items:baseline;gap:10px}
.mhcheckhead b{font-size:19px;font-variant-numeric:tabular-nums}
.mhcheckhead span{color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}
.mhcheck p{margin:5px 0 0;font-size:12.5px;line-height:1.5}

/* sale history */
.mhsales{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.mhsales li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;
  font-variant-numeric:tabular-nums;font-size:13px}
.mhsaledate{color:var(--muted);font-size:12px}
.mhsalebar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.mhsalebar i{display:block;height:100%;border-radius:4px;background:var(--accent);opacity:.75}

/* the planner */
.mhplanner{margin-top:28px}
.mhworks{display:grid;gap:8px;margin-top:14px}
.mhwork{border:1px solid var(--line);border-radius:11px;background:var(--panel);
  overflow:hidden;transition:border-color .12s}
.mhwork.on{border-color:var(--accent)}
.mhworkhead{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer}
.mhworklabel{flex:1;display:flex;flex-direction:column;gap:2px}
.mhworklabel span{color:var(--muted);font-size:12.5px}
.mhworkcost{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.mhworkbody{padding:0 15px 15px;border-top:1px solid var(--line);padding-top:14px}
.mhsize{display:flex;align-items:center;gap:14px}
.mhsqmout{font-variant-numeric:tabular-nums;font-size:13px;font-weight:550;
  white-space:nowrap;min-width:130px;text-align:right}
.mhslider{flex:1;width:100%;accent-color:var(--accent)}
.mhrate{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;font-size:12.5px;color:var(--muted)}
.mhrateinput{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.mhper{width:78px;border:1px solid var(--line);background:transparent;border-radius:7px;
  padding:5px 7px;font-variant-numeric:tabular-nums}
.mhplanning{margin:8px 0 0;font-size:12px;color:var(--muted);font-style:italic}

.mhfinish{margin-top:20px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);padding:15px}
.mhfinishhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mhfinishnow{font-weight:600;font-size:14px;color:var(--accent)}
.mhfinish .mhslider{margin:12px 0 6px}
.mhticks{display:flex;justify-content:space-between;gap:6px}
.mhticks span{font-size:10.5px;color:var(--muted);text-align:center;flex:1;line-height:1.3}
.mhticks span.on{color:var(--accent);font-weight:600}

.mhfixed{margin-top:20px}
.mhchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mhchip{display:flex;flex-direction:column;gap:1px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);background:transparent;border-radius:9px;padding:8px 12px;
  font-size:13px;transition:.12s}
.mhchip span{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.mhchip:hover{border-color:var(--accent)}
.mhchip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--on-soft)}
.mhchip.on span{color:var(--on-soft);opacity:.75}

/* the answer */
.mhresult{margin-top:22px;transition:opacity .15s}
.mhresult.working{opacity:.5}
.mhidle{text-align:center;padding:22px;border:1px dashed var(--line);border-radius:12px}
.mharrow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.mhstep{display:flex;flex-direction:column;gap:3px}
.mhstep b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mharrowmark{font-size:22px;color:var(--accent)}
.mhsums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.mhsum{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;
  display:flex;flex-direction:column;gap:3px}
.mhsum b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mhsum.add b{color:var(--accent)}
.mhsum.net.good{border-color:var(--accent)}
.mhsum.net.good b{color:var(--accent)}
.mhsum.net.bad b{color:#e2a55e}
.mhverdict{margin-top:10px;border-radius:12px;padding:16px 18px;
  background:var(--accent-soft);color:var(--on-soft)}
.mhverdict b{font-size:16px;display:block}
.mhverdict p{margin:6px 0 0;font-size:13px;line-height:1.55}
.mhverdict.poor{background:#2b2410;color:#e8d9a0}
.mhverdict.marginal{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.mhpersqft{margin-top:8px!important}

/* the street's ceiling -- the part nobody selling you a kitchen mentions */
.mhceiling{border-left:3px solid var(--accent)}
.mhceiling.near{border-left-color:#f4b400}
.mhceiling.over{border-left-color:#e2a55e}
.mhceilmsg{margin:8px 0 0;font-size:14px;line-height:1.6}
.mhscale{margin-top:14px}
.mhscalebar{display:block;position:relative;height:10px;border-radius:5px;background:var(--line)}
.mhscalefill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--accent);opacity:.8}
.mhscalemark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--muted)}
.mhscalekey{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.mhtable{width:100%;border-collapse:collapse;margin-top:10px}
.mhtable td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}
.mhtable td .mhhint{display:block}
.mhtable .mhnum{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  padding-left:14px}
.mhoncost td{border-bottom:0;color:var(--muted)}
.mhbasis{margin:14px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.mhactions{margin-top:18px;display:flex;justify-content:flex-end}

@media (max-width:820px){
  .mhtop{grid-template-columns:1fr}
  .mhsums{grid-template-columns:1fr}
  .mharrow{grid-template-columns:1fr;text-align:center}
  .mharrowmark{transform:rotate(90deg)}
  .mhid{flex-direction:column}
  .mhphoto{width:100%;height:190px;flex:none}
  .mhticks span{font-size:9.5px}
}
.mhnowpick{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.mhnowpick .control{padding:5px 8px;font-size:12.5px}
.mhfinishtarget{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.mhticks span.from{color:var(--ink);font-weight:600}
.mhticks span.below{opacity:.4}
.mhrefuse{margin:8px 0 0;font-size:20px;font-weight:600;color:var(--muted)}

/* ---------- the extension wizard ----------
   A drawing surface over your own floorplan. The canvas sits on top of the
   image at exactly its displayed size; the shapes underneath are held as
   fractions of the natural image, so none of this cares what size the screen
   is. touch-action:none is what lets a finger drag a box instead of scrolling
   the page out from under it. */
.mhwiz{margin-top:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);padding:15px}
.mhwizbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between}
.mhwizmodes{display:flex;gap:6px}
.mhmode{border:1px solid var(--line);background:transparent;border-radius:9px;
  padding:8px 13px;font:inherit;font-size:13px;font-weight:550;cursor:pointer;
  color:var(--muted);transition:.12s}
.mhmode:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
.mhmode.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mhmode:disabled{opacity:.45;cursor:not-allowed}
.mhwizpick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:12.5px;color:var(--muted)}
.mhwizpick label{display:inline-flex;align-items:center;gap:6px}
.mhwizpick .control{padding:5px 8px;font-size:12.5px}
.mhwizsay{margin:12px 0 10px;font-size:13px;color:var(--ink)}

.mhcanvaswrap{position:relative;line-height:0;border-radius:10px;overflow:hidden;
  background:#fff}
.mhcanvaswrap img{width:100%;display:block}
.mhcanvaswrap canvas{position:absolute;left:0;top:0;cursor:crosshair;
  touch-action:none}

.mhcalib{margin-top:14px;padding:13px;border:1px solid var(--accent);
  border-radius:10px;background:var(--accent-soft);color:var(--on-soft)}
.mhcalib .mhlabel{color:inherit;opacity:.8}
.mhdims{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mhdim{border:1px solid currentColor;background:transparent;color:inherit;
  border-radius:8px;padding:6px 11px;font:inherit;font-size:13px;cursor:pointer;
  font-variant-numeric:tabular-nums;opacity:.85}
.mhdim:hover{opacity:1;background:rgba(127,127,127,.18)}
.mhdimown{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-size:12.5px;opacity:.85}

.mhspaces{margin-top:16px}
.mhspacelist{display:grid;gap:7px;margin-top:9px}
.mhspace{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;cursor:pointer}
.mhspace.on{border-color:var(--accent);background:var(--bg)}
.mhswatch{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.mhspacesel{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.mhspacesel select{border:1px solid var(--line);background:transparent;
  border-radius:7px;padding:4px 7px;font:inherit;font-size:12.5px;max-width:100%}
.mhspacesize{font-variant-numeric:tabular-nums;font-size:13px;font-weight:550;
  text-align:right;white-space:nowrap}
.mhspacesize .mhhint{margin:0;display:block;font-weight:400}
.mhspacedel{border:0;background:none;color:var(--muted);font-size:19px;
  cursor:pointer;line-height:1;padding:0 4px}
.mhspacedel:hover{color:var(--s5)}
.mhspacetotal{margin:10px 0 0;font-size:13px;font-variant-numeric:tabular-nums}

.mhtypedtoggle{margin-top:10px;display:flex;justify-content:flex-end}
.mhlocalrate .mhratehead{margin:7px 0 0;font-size:14px}
.mhcaveat{margin:10px 0 0;padding:12px 14px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid #f4b400;
  font-size:12.5px;line-height:1.55;color:var(--muted)}

@media (max-width:820px){
  .mhwizbar{flex-direction:column;align-items:stretch}
  .mhwizmodes .mhmode{flex:1}
  /* Narrow: the size and the delete cross keep the top line, the two
     dropdowns take a line of their own. Ordering only the selects left the
     cross stranded in the middle of the row. */
  .mhspace{flex-wrap:wrap}
  .mhswatch{order:1}
  .mhspacesize{order:2;text-align:left}
  .mhspacedel{order:3;margin-left:auto}
  .mhspacesel{order:4;width:100%}
  .mhspacesel select{flex:1 1 140px}
}
.mhscalewarn{color:#e2a55e!important}
.mhabout-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;flex-wrap:wrap}
.mhaboutlab{font-size:13.5px;font-weight:550}
.mhabout-row input{width:110px;border:1px solid var(--line);background:transparent;
  border-radius:7px;padding:6px 8px;font-variant-numeric:tabular-nums}
.mhfeatures{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}
.mhfeat{padding:7px 12px;font-size:12.5px}

/* ---- private school fees ---- */
.scheadbtns{display:flex;gap:8px;flex-wrap:wrap}
.lab.fee{background:var(--accent-soft);color:var(--accent)}
.lab.fee.none{background:#e2e8f0;color:#475569}
.feekids{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.feekid{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--bg)}
.feekidhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.feekidhead .feename{width:150px}
.feeinline{display:flex;gap:6px;align-items:center;margin:0;color:var(--ink);font-size:13px}
.feeinline select{padding:6px 8px}
.feechips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin-top:8px}
.feechip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;
  padding:6px 10px 6px 10px;cursor:pointer;position:relative;font:inherit;font-size:13px}
.feechip .micro{margin:0}
.feechip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--on-soft)}
.feechip.on .micro{color:var(--on-soft)}
.feechip.past{opacity:.55}
.feechipname{font-weight:600;padding-right:22px}
.feeord{position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:11px;display:grid;place-items:center}
.feebar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.feeopt{display:flex;gap:6px;align-items:center;margin:0;color:var(--ink);font-size:13px}
.feeopt input[type=number]{width:64px;margin:0}
.feetiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:10px}
.feetile{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;
  display:flex;flex-direction:column;gap:2px;background:var(--panel)}
.feetile .micro{margin:0}
.feetile b{font-size:22px;font-variant-numeric:tabular-nums}
.feekidtotals{margin:0 0 10px}
.feetable td{font-variant-numeric:tabular-nums;white-space:nowrap}
.feetable td .micro{white-space:normal}
.feewarn{margin:10px 0;padding:8px 12px 8px 28px;background:#3a2c12;color:#f0c67a;border-radius:8px;font-size:12.5px}
.feeassume{margin-top:8px}
.feeassume ul{margin:6px 0;padding-left:20px}
@media (max-width:640px){ .feekidhead .feename{width:100%} .feechips{grid-template-columns:1fr} }

/* ---- choosing a school: four steps ---- */
.jr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 16px}
.jrstep{display:flex;gap:10px;align-items:center;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);
  font:inherit;cursor:pointer;min-width:0}
.jrstep:hover{border-color:var(--accent)}
.jrstep.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--accent-soft)}
.jrnum{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:var(--bg);border:1px solid var(--line)}
.jrstep.on .jrnum,.jrstep.has .jrnum{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.jrtxt{display:flex;flex-direction:column;min-width:0}
.jrtxt b{font-size:13.5px}
.jrtxt span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jrstep.on .jrtxt span{color:var(--on-soft);opacity:.8}
.jrpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.jrgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.jrtitle{font-size:18px;margin:0 0 4px}
.jrlede{color:var(--muted);margin:0 0 14px;max-width:62ch}
.jrq{font-size:13px;margin:22px 0 8px}
.jrskip{margin:-6px 0 14px}
.jrq .micro{font-weight:400}
.jrnext{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}
.jrnext.left{justify-content:flex-start}
.jrside{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;
  position:sticky;top:12px}
.jrside .jrq{margin-top:0}
.jrempty{text-align:left;padding:10px 0 4px}

.famkids{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.famkid{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.famkid .famname{width:160px}
.famkid .minedrop{margin-left:auto}
.famnone{margin:0 0 6px}
.famwhere{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.famwhere .scwhere{flex:1 1 260px}
.segs{display:flex;gap:8px;flex-wrap:wrap}
.segs button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);
  font:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
.segs button span{font-weight:400;font-size:11.5px;color:var(--muted)}
.segs button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--on-soft)}
.segs button.on span{color:var(--on-soft);opacity:.8}
.segs.small button{padding:6px 11px;font-size:13px}

.ahead .aheadkid{padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid var(--line)}
.aheadlist{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.aheadlist li{display:flex;gap:10px;font-size:13px}
.aheadlist li .micro{display:block;margin:1px 0 0}
.aheadlist li.minor{opacity:.7}
.aheadlist li.soon .aheadwhen{background:#3a2c12;color:#f0c67a}
.aheadwhen{flex:none;width:64px;font-size:11.5px;font-weight:700;padding:2px 6px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent);text-align:center;height:fit-content}

.findbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.findwhere{margin:0;flex:1 1 100%}
.findhint{margin:0 0 8px}
.scrow{align-items:flex-start}
.scrow.focus{border-color:#b45309}
.star{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:74px;
  padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--muted);font:inherit;font-size:11px;cursor:pointer}
.star span{font-size:20px;line-height:1}
.star:hover{border-color:var(--accent);color:var(--ink)}
.star.on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.jrdock{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;margin:14px -18px -18px;
  padding:12px 18px;background:var(--panel);border-top:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);z-index:3}
.dockstar{font-weight:700;color:var(--accent);flex:none}
.docknames{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jrdock .btn{flex:none}
.scmapkey .k-priv{width:10px;height:10px;border-radius:50%;background:#7c3aed;border:0}

.cmphead2{margin:0 0 8px}
.cmphead2 .micro{margin:0}
#cmpState + #cmpPrivate:not(:empty){margin-top:28px}
.cmpth{display:flex;gap:6px;align-items:flex-start;justify-content:space-between}
table.cmp thead th{min-width:150px}
table.cmp thead th:first-child{min-width:0}
table.cmppriv tr.cmptotal td{background:var(--accent-soft);color:var(--on-soft)}
table.cmppriv tr.cmptotal td:first-child{color:var(--on-soft);font-weight:600}
.cmpbig{font-size:18px;font-variant-numeric:tabular-nums}
.cmpsrc{margin-top:8px}

.nextgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.nextcard{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg);min-width:0}
.nextcard.wide{grid-column:1 / -1}
.nextcard .feekid{background:var(--panel)}

@media (max-width:900px){
  .jrgrid,.nextgrid{grid-template-columns:1fr}
  .scmap{height:200px}
  .jrside{position:static}
}
@media (max-width:640px){
  .jr{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .jrstep{flex-direction:column;align-items:center;gap:4px;padding:8px 4px;text-align:center}
  .jrtxt b{font-size:11.5px}
  .jrtxt span{display:none}
  .jrpanel{padding:14px}
  .jrdock{margin:12px -14px -14px;padding:10px 14px}
  .famkid .famname{width:100%}
  .segs.small{flex-wrap:nowrap;overflow-x:auto;flex:1 1 100%}
  .segs.small button{flex:none}
  .segs.small button span{display:none}
  .findbar .control{flex:1 1 40%}
  .star{min-width:0;padding:6px}
  .star{font-size:0}
  .star span{font-size:22px}
}

table.cmppriv a.notmet{color:#f0a35e;font-weight:600}

/* ---- school data refresh ---- */
.iconbtn{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}
.iconbtn:hover{border-color:var(--accent)}
.iconbtn .iconbusy{display:none;position:absolute;inset:-3px;border-radius:12px;
  border:2px solid transparent;border-top-color:var(--accent);animation:spin 1s linear infinite}
.iconbtn.busy .iconbusy{display:block}
.sdareas{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.sdarea{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.sdareahead{display:flex;gap:8px;align-items:baseline}
.sdareahead b{font-size:15px}
.sdfacts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin-top:4px}
.sdarea .micro{margin:6px 0 0}
.sdstages{display:flex;flex-direction:column;gap:6px}
.sdstage{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;margin:0;color:var(--ink);font-size:13.5px;cursor:pointer}
.sdstage > span:last-child{display:flex;flex-direction:column;gap:2px}
.sdstage .micro{margin:0}
.sdstage.cur{border-color:var(--accent);background:var(--accent-soft);color:var(--on-soft)}
.sdstage.off{opacity:.5}
.sdicon{width:18px;text-align:center;font-weight:700;color:var(--accent)}
.sdres{color:var(--ink)}
.sdbad{color:#f0a35e}
.sdprog{height:6px;border-radius:3px;background:var(--line);margin:12px 0 4px;overflow:hidden}
.sdprog div{height:100%;background:var(--accent);transition:width .4s}
.sddetail{font-variant-numeric:tabular-nums}
.sdupload{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.sdupload .btn{margin:0;color:var(--ink)}
.sdlook{margin-top:10px}
.sdlook ul{margin:6px 0;padding-left:18px}
.sdlast{margin-right:auto}
@media (max-width:640px){ .iconbtn{width:34px;height:34px} }

/* ---- one comparison, state and private together ---- */
.cmpstage + .cmpstage{margin-top:28px}
.sectag{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:650;padding:1px 7px;
  border-radius:999px;background:var(--line);color:var(--ink)}
.sectag.priv{background:#2c1f4a;color:#c2a8f5}
.sectag.gram{background:#FFE9D6;color:#8A3B12}
.scname .sectag{margin:0 0 0 4px;vertical-align:1px}
table.cmpall td.best{background:var(--accent-soft);color:var(--on-soft);font-weight:600}
table.cmpall td.best .cellsub{color:var(--on-soft)}
.cellsub{display:block;margin:1px 0 0;font-weight:400}
.bestkey{display:inline-block;padding:0 6px;border-radius:5px;background:var(--accent-soft);color:var(--on-soft)}
.sdarea.off{opacity:.65}
.sdtoggle{display:inline-flex;gap:8px;align-items:center;margin:0;color:var(--ink);font-size:15px;cursor:pointer}
.sdadm{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sdadmhead{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sdeps{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.sdep{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13px}
.sdep .btn{margin:0;color:var(--ink)}
.sdqh{font-size:13px;margin:12px 0 4px}
.sdq summary{cursor:pointer}
.sdqt{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.sdqt td{border-bottom:1px solid var(--line);padding:5px 6px;vertical-align:top}
.sdqt td.num{white-space:nowrap;text-align:right}
.sdqt tr.accuracy td:first-child::before{content:"✓ ";color:var(--accent)}
.sdqt b.ok{color:var(--accent)} .sdqt b.mid{color:#f0c67a} .sdqt b.low{color:#f0a35e}
.sdadd{display:flex;gap:8px;margin:8px 0 4px}
.sdadd .control{flex:1;min-width:0}
table.cmpall td:first-child{white-space:normal;min-width:170px;max-width:230px;width:210px}
table.cmpall td:first-child .cellsub{font-size:11px}
table.cmpall td{min-width:130px}
@media (max-width:640px){ table.cmpall td:first-child{min-width:130px;width:140px} }
.homecta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:4px 0 12px}
.homenone{margin:0;font-weight:600}
.homewatch{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:6px}
.homewatch .micro{margin:0}
.nextplan summary{cursor:pointer;padding:4px 0}
.nextchoose{margin-bottom:16px}
.choosegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.choose{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer;font-size:13.5px}
.choose > span{display:flex;flex-direction:column;gap:2px}
.choose .micro{margin:0}
.choose.on{border-color:var(--accent);background:var(--accent-soft);color:var(--on-soft)}
.choose.on .micro{color:var(--on-soft)}
.choose input{margin-top:3px}

/* ---- "On this page": a light section menu for the long steps ---- */
.jrpanel.withnav{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start}
.secbody{min-width:0}
.secnav{position:sticky;top:calc(var(--topbar-h, 64px) + 14px);display:flex;flex-direction:column;
  gap:1px;font-size:13px}
.secnav[hidden]{display:none}
.secnavhead{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 6px 12px}
.secnav a{padding:6px 12px;border-left:2px solid var(--line);color:var(--muted);text-decoration:none;
  line-height:1.3}
.secnav a:hover{color:var(--ink)}
.secnav a.lvl1{color:var(--ink);font-weight:600}
.secnav a.lvl1 + a.lvl2{margin-top:0}
.secnav a.lvl2{padding-left:24px;font-size:12.5px}
.secnav a.lvl2 + a.lvl1{margin-top:10px}
.secnav a.on{border-left-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
[data-sec]{scroll-margin-top:calc(var(--topbar-h, 64px) + 16px)}
@media (max-width:1000px){
  .jrpanel.withnav{display:block}
  .secnav{flex-direction:row;overflow-x:auto;scrollbar-width:none;top:var(--topbar-h, 64px);z-index:6;
    background:var(--panel);margin:-18px -18px 14px;padding:6px 10px;border-bottom:1px solid var(--line);
    border-radius:var(--radius) var(--radius) 0 0}
  .secnav::-webkit-scrollbar{display:none}
  .secnavhead{display:none}
  .secnav a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;padding:6px 10px}
  .secnav a.lvl2{padding-left:10px}
  .secnav a.lvl2 + a.lvl1{margin-top:0;margin-left:10px}
  .secnav a.on{border-bottom-color:var(--accent);background:none}
  [data-sec]{scroll-margin-top:calc(var(--topbar-h, 64px) + 56px)}
}
@media (max-width:640px){ .secnav{margin:-14px -14px 12px} }

/* A table wider than the screen: a fade where there is more, labels pinned. */
.scrollwrap{position:relative}
.scrollwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(to left,var(--panel),transparent);opacity:0;transition:opacity .2s}
.scrollwrap.more-right::after{opacity:1}
.scrollhint{margin:0 0 6px;color:var(--accent)}
table.cmpall td:first-child,table.cmpall th:first-child{position:sticky;left:0;z-index:2;background:var(--panel)}
table.cmpall tr.cmpgroup td:first-child{background:var(--bg)}
.scrollwrap.more-left table.cmpall td:first-child,.scrollwrap.more-left table.cmpall th:first-child{
  box-shadow:6px 0 8px -6px rgba(0,0,0,.6)}
.sdmode{display:flex;flex-direction:column;gap:6px}
.sdmode label{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;margin:0;border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font-size:13.5px;cursor:pointer}
.sdmode label > span{display:flex;flex-direction:column;gap:2px}
.sdmode .micro{margin:0}
.sdmode label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--on-soft)}
.sdmode label:has(input:checked) .micro{color:var(--on-soft)}

/* kinplace Next beside Classic: which copy this is, and the way to the other. */
.edition{display:inline-flex;align-items:center;gap:5px;font-size:11px;line-height:1;text-decoration:none;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 7px 2px 2px;white-space:nowrap}
.edition b{background:#FF6B5B;color:#fff;border-radius:999px;padding:3px 6px;font-weight:700;font-size:10px;letter-spacing:.03em}
.edition:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:560px){.edition span{display:none}.edition{padding-right:2px}}


/* ==================== Roofline: kinplace Next ==================== */
.sub{font-size:12.5px}
.mono,.m{font-family:var(--mono)}
.famchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--panel);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;
  font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap}
.famchip:hover{border-color:var(--accent)}
.famdots{display:inline-flex}
.famdots b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;color:#fff;background:var(--teal);border:2px solid var(--panel)}
.famdots b:nth-child(2){background:var(--coral);margin-left:-7px}
.famdots b:nth-child(3){background:#1FA37A;margin-left:-7px}
.famdots b:nth-child(n+4){background:#8A5CF6;margin-left:-7px}
@media (max-width:1100px){.famnames{display:none}.famchip{padding-right:4px}}

/* The dashboard: the app's front door. */
.dash{max-width:1120px;margin:0 auto;padding:18px 0 60px;display:grid;gap:28px}
.dashhead{display:grid;gap:10px;padding:34px 36px;border-radius:32px;background:var(--mist)}
.dashmark{width:58px;height:auto}
.dashhead{position:relative;padding:40px 44px}
.dashpill{justify-self:start;background:var(--panel);font-weight:600;font-size:14px;padding:6px 13px;border-radius:999px}
.dashfind{position:relative;display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:999px;
  padding:7px 7px 7px 22px;max-width:560px;margin-top:10px;box-shadow:0 12px 32px -16px rgba(14,59,67,.35)}
.dashfind label{font-weight:600;color:var(--muted);white-space:nowrap}
.dashfind input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:700 18px var(--font);color:var(--ink);outline:none}
.dashfind .btn{padding:12px 20px;font-size:15px}
.dashhits{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px}
.dashhits button{display:flex;gap:8px;align-items:baseline;text-align:left;border:0;background:transparent;
  padding:9px 12px;border-radius:12px;cursor:pointer}
.dashhits button:hover,.dashhits button:focus-visible{background:var(--mist)}
.dashhint{margin:0}
.dashnotsure{justify-self:start;font-weight:600;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--coral);padding-bottom:1px}
.dashquick{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dashquick button{border:1px solid rgba(14,59,67,.14);background:var(--panel);color:var(--ink);border-radius:999px;
  padding:8px 14px;font:600 14px var(--font);cursor:pointer}
.dashquick button:hover{border-color:var(--ink)}
.dashsoon{border:1px solid var(--line);border-radius:24px;padding:22px 24px;background:var(--panel)}
.dashsoon h3{font-size:19px;margin-bottom:10px}
.dashsoon ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dashsoon li{display:flex;gap:14px;align-items:baseline;font-size:15px}
.dashsoon .when{flex:none;width:118px;font:500 13px var(--mono);color:var(--muted)}
.dashsoon li.near .when{color:var(--cta);font-weight:600}
.dashsoon .micro{display:block}
@media (max-width:620px){
  .dashhead{padding:26px 20px}
  .dashfind{padding-left:16px}
  .dashfind label{display:none}
  .dashfind .btn{padding:11px 14px}
  .dashsoon li{flex-direction:column;gap:2px}
}
.dashhead h2{font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.dashsub{margin:0;color:var(--muted);font-size:17px;max-width:40em}
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.dcard{display:grid;gap:8px;align-content:start;text-align:left;border:0;cursor:pointer;
  border-radius:24px;padding:22px;background:var(--tint);color:var(--ink);font:inherit;
  transition:transform .12s, box-shadow .12s}
.dcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.dcard:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dname{font-size:22px;font-weight:800;letter-spacing:-.02em}
.dline{font-size:15px;line-height:1.4}
.dstat{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--muted);
  border-top:1px solid rgba(14,59,67,.1);padding-top:10px}
.d-places{--tint:#F3EDFF}.d-schools{--tint:#EAF0FF}.d-homes{--tint:#EAF7F2}
.d-myhome{--tint:#FFE9E5}.d-plans{--tint:#EEF2F3}

/* Decisions not built yet. */
.soon{max-width:760px;margin:24px auto 60px;padding:36px;border-radius:32px;
  background:var(--tint);display:grid;gap:14px;justify-items:start}
.soon h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.soon p{margin:0;font-size:17px;line-height:1.55;max-width:36em}
.soon ul{margin:0;padding-left:1.1em;font-size:15.5px;display:grid;gap:4px}
.soontag{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--panel);border-radius:999px;padding:5px 10px}
@media (max-width:620px){
  .dash{padding-top:4px;gap:18px}
  .dashhead{padding:24px 22px;border-radius:24px}
  .soon{padding:26px 22px;border-radius:24px;margin-top:8px}
}

/* ---------- accounts, households and sharing ---------- */
.acctbtn{width:36px;height:36px;border-radius:50%;border:0;background:var(--teal);color:#fff;
  font:800 15px var(--font);cursor:pointer;flex:none}
.acctbtn:hover{box-shadow:0 0 0 3px var(--mint)}
.mename{font-weight:700}
.acct h2{margin-bottom:6px}
.acsec{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.acsec:first-child{border-top:0;padding-top:4px}
.acsec h3{font-size:17px}
.acme{display:flex;gap:12px;align-items:center}
.acme small,.acrow small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.acav{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:grid;
  place-items:center;font-weight:800;flex:none}
.acav.sm{width:30px;height:30px;font-size:13px}
.acrows{display:grid;gap:8px}
.acrow{display:flex;gap:10px;align-items:center;font-weight:600}
.acrow > span{flex:1 1 auto;min-width:0}
.acrow.pend{opacity:.85}
.acrow.pend .acav{background:var(--mint);color:var(--ink)}
.acinvite{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acinvite label{width:100%}
.acinvite input{flex:1 1 220px}
.acbtns{display:flex;gap:8px;flex-wrap:wrap}
.acstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.acstats div{background:var(--mist);border-radius:14px;padding:10px 12px}
.acstats b{display:block;font-size:22px;font-weight:800}
.acstats small{color:var(--muted)}
.acfunnel{display:grid;gap:5px}
.acfunnel div{display:flex;align-items:center;gap:10px}
.acfunnel span{display:block;width:var(--w);min-width:max-content;background:var(--mint);border-radius:8px;
  padding:5px 10px;font-size:13px;font-weight:600}
.acfunnel b{font-size:13px}
.shform{display:grid;gap:14px}
.shform label{display:grid;gap:6px;font-weight:600}
.shroles{border:1px solid var(--line);border-radius:16px;padding:10px 14px;display:grid;gap:8px;margin:0}
.shroles legend{font-weight:600;padding:0 6px}
.shroles label{display:block;font-weight:400}
.shroles small{display:block;color:var(--muted);margin-left:24px}
.shlink{display:flex;gap:8px;margin-top:8px}
#shResult{margin-top:14px;padding:14px;border-radius:16px;background:var(--mist)}
.gate{min-height:70vh;display:grid;place-items:center;padding:24px}
.gatecard{max-width:520px;background:var(--mist);border-radius:32px;padding:36px;display:grid;gap:12px}
.gatecard svg{width:56px}
.gatecard h2{font-size:30px;font-weight:800;letter-spacing:-.03em}
.linkbox{flex:1 1 100%;font:13px var(--mono)}

/* ---------- admin ---------- */
.adminbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);
  border-radius:999px;padding:7px 12px;font:600 13.5px var(--font);color:var(--ink);cursor:pointer}
.adminbtn:hover{border-color:var(--accent)}
@media (max-width:860px){.adminbtn span{display:none}.adminbtn{padding:8px}}
.admin{max-width:1120px;margin:0 auto;padding:18px 0 60px;display:grid;gap:18px}
.adminhead{display:grid;gap:8px;justify-items:start}
.adminhead h2{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em}
.admingrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.adcard{border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:22px;display:grid;gap:12px;align-content:start}
.adcard h3{font-size:19px}
.adcard .btn{justify-self:start}
.adsub{margin:6px 0 0;font-size:14px}
#schoolDataBtn.busy::after{content:"  · running";font-weight:400;color:var(--muted)}
#schoolDataBtn .iconbusy{display:none}
.adbars{display:flex;align-items:flex-end;gap:3px;height:70px;border-bottom:1px solid var(--line)}
.adbars span{flex:1 1 0;max-width:22px;height:var(--h);background:var(--mint);border-radius:4px 4px 0 0}

/* ---------- schools, map first ---------- */
/* The four steps are tabs now: the map leads, the rest sit beside it. */
.jr{display:flex;gap:4px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none}
.jr::-webkit-scrollbar{display:none}
.jrstep{flex:none;flex-direction:row;border:0;background:transparent;border-radius:999px;padding:8px 16px;box-shadow:none}
.jrstep:hover{background:var(--mist);border:0}
.jrstep.on{background:var(--ink);color:#fff;box-shadow:none}
.jrstep.on .jrtxt span{color:#fff;opacity:.75}
.jrtxt{flex-direction:row;align-items:baseline;gap:8px}
.jrtxt b{font-size:15px}
.jrtxt span{font-size:12.5px}

.jrpanel.smap{padding:0;overflow:hidden;display:flex;flex-direction:column;
  height:calc(100dvh - 150px);min-height:520px}
.smbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);
  position:relative;z-index:500;background:var(--panel)}
.smsearch{position:relative;flex:1 1 280px;max-width:440px}
.smsearch .control{width:100%;border-radius:999px;padding:9px 16px}
.smhits{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;max-height:60vh;overflow:auto}
.smhit{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;
  padding:8px 10px;border-radius:10px;cursor:pointer}
.smhit:hover,.smhit:focus-visible{background:var(--mist)}
.smhit .micro{margin-left:auto}
.smpin{width:26px;text-align:center;color:var(--cta);font-size:16px}
#scStage button,#smSector button,.chipbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:999px;padding:6px 13px;font:600 13.5px var(--font);cursor:pointer}
#scStage button.on,#smSector button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chipbtn:hover,#scStage button:hover,#smSector button:hover{border-color:var(--ink)}
.smlayerwrap{position:relative;margin-left:auto}
.smlayers{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:10px 14px;display:grid;gap:8px;min-width:230px}
.smlayers label{display:flex;gap:8px;align-items:center;cursor:pointer}
.smlayers .micro{margin-left:auto}

.smbody{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:380px minmax(0,1fr)}
.smlist{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--panel)}
.smhandle{display:none}
.smlisthead{display:flex;gap:8px;align-items:center;padding:10px 12px 6px}
.smlisthead .findwhere{flex:1 1 auto}
.smlisthead .control{flex:none;padding:5px 8px;border-radius:999px}
.smlist .sclist{flex:1 1 auto;max-height:none;overflow:auto;padding:0 12px 12px;gap:6px}
.smcount{margin:0 2px 2px}
.smlist .scnotes{padding:0 12px}
.smlist .jrdock{margin:0;border-radius:0}
.smlist .scrow{gap:10px;padding:10px;border-radius:14px;align-items:center}
.smlist .scrow.focus{border-color:var(--cta);box-shadow:0 0 0 1px var(--cta) inset}
.smlist .scrow.picked{border-color:var(--line);box-shadow:none}
.smlist .scname{font-size:14.5px}
.smlist .star{min-width:0;width:38px;height:38px;padding:0;border-radius:50%;justify-content:center}
.smlist .star span{font-size:19px}
.smlist .star.on{background:var(--coral);border-color:var(--coral);color:#fff}
.smmapwrap{position:relative;min-width:0;min-height:0}
.smap .scmap{height:100%;border:0;border-radius:0}
.smhere{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:450;border:0;border-radius:999px;
  background:var(--ink);color:#fff;font:600 14px var(--font);padding:9px 18px;box-shadow:var(--shadow);cursor:pointer}
.smkey{position:absolute;left:12px;bottom:12px;z-index:450;max-width:min(320px,calc(100% - 80px))}
.smkey details{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px 12px}
.smkey summary{cursor:pointer;font-weight:600;font-size:13px}
.smkeybody{display:grid;gap:6px;padding:8px 0 4px;font-size:12.5px}
.smkeybody > span{display:flex;align-items:center;gap:8px}
.smkeybody .smk{width:20px;height:20px;font-size:10px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block;flex:none}

/* Markers: circle state, rounded square private; colour is the inspection. */
.smkwrap{background:none;border:0}
.smk{display:inline-grid;place-items:center;width:100%;height:100%;min-width:24px;min-height:24px;flex:none;
  border:2px solid #fff;border-radius:50%;color:#fff;font:800 12px var(--font);
  box-shadow:0 1px 4px rgba(14,59,67,.35);box-sizing:border-box}
.scrow .smk,.smhit .smk,.smcard-head .smk{width:28px;height:28px}
.smk.pv{border-radius:7px}
.smk.ny{border-radius:50% 50% 50% 8px}

/* Nurseries: funded hours; schools: the rest of the profile */
.smfund{background:var(--mist);border-radius:14px;padding:10px 12px;font-size:13.5px;display:grid;gap:6px}
.smfund ul{margin:0;padding-left:18px;display:grid;gap:4px}
.smmore{border-top:1px solid var(--line);padding-top:8px}
.smmore summary{cursor:pointer;font-weight:700;font-size:14px}
.smfacts2{display:grid;gap:8px;margin:10px 0}
.smfact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;font-size:13.5px}
.smfact span{color:var(--muted)}
.smfact i{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}
.smpv{display:grid;gap:5px;margin:8px 0;font-size:13px}
.pvrow{display:grid;grid-template-columns:130px minmax(0,1fr) 40px;gap:8px;align-items:center}
.pvrow span:first-child{color:var(--muted)}
.pvbar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.pvbar i{display:block;height:100%;background:#34A56F}
.pvrow b{text-align:right}
.smhistory{font-size:13px;margin:8px 0}
.smhistory ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.smhistory li span{font-family:var(--mono);font-size:12px;color:var(--muted);margin-right:6px}
.noisekey{max-width:100%;height:auto}
.depkey{display:flex;gap:2px}
.depkey i{width:18px;height:12px;border-radius:2px}
.smk.kept{box-shadow:0 0 0 3px var(--coral),0 1px 4px rgba(14,59,67,.35)}
.smk.on{font-size:14px;box-shadow:0 0 0 3px var(--ink),0 2px 8px rgba(14,59,67,.45)}
.t-top{background:#0B7D55}
.t-good{background:#34A56F}
.t-ok{background:#7C9A3A}
.t-att{background:#D98014}
.t-bad{background:#C8372D}
.t-none{background:#8A9C9F}
b.t-top,b.t-good,b.t-ok,b.t-att,b.t-bad,b.t-none{color:#fff;border-radius:6px;padding:1px 7px;font-size:12px;font-weight:700}
.smhome{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid #fff;
  color:#fff;font:700 10px var(--font);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.smhomepin{display:grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  background:var(--coral);border:2px solid #fff;box-shadow:0 2px 6px rgba(14,59,67,.4)}
.smhomepin svg{width:16px;height:16px;fill:#fff;transform:rotate(45deg)}
.smhomepin.mini{width:20px;height:20px}
.smhomepin.mini svg{width:11px;height:11px}
.smcrow{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;background:var(--cta);color:#fff;
  font:600 12px var(--mono);padding:3px 8px;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* The school card: a drawer over the right of the map. */
.smdrawer{position:absolute;top:12px;right:12px;bottom:12px;width:360px;z-index:460;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:16px;display:flex;flex-direction:column;gap:12px}
.smcard-head{display:flex;gap:10px;align-items:flex-start}
.smcard-head h3{flex:1 1 auto;font-size:19px;line-height:1.2}
.smx{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  font-size:20px;line-height:1;cursor:pointer}
.smfacts{margin:-4px 0 0}
.smgrades{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px}
.smgrades li{display:flex;justify-content:space-between;gap:10px;font-size:13px;align-items:center}
.smgetin{background:var(--mist);border-radius:16px;padding:12px 14px}
.smgetin h4{margin:0 0 6px;font-size:14px}
.smgetin dl{margin:0;display:grid;gap:8px}
.smgetin dl div{display:grid;gap:1px}
.smgetin dt{font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.smgetin dd{margin:0;font-size:14px}
.smgetin .yes{color:#0B7D55}
.smgetin .no{color:var(--cta)}
.smcard-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

/* Phone: the map fills the screen; the list and the card are sheets. */
@media (max-width:900px){
  .jrpanel.smap{height:calc(100dvh - 205px);min-height:440px;border-radius:18px}
  .smlist:not(.open) .scnotes{display:none}
  .smbar{flex-wrap:nowrap;overflow-x:auto;padding:8px;scrollbar-width:none}
  .smbar::-webkit-scrollbar{display:none}
  .smsearch{flex:0 0 min(62vw,300px)}
  .chips{flex-wrap:nowrap}
  #scStage button,#smSector button,.chipbtn{flex:none;padding:6px 11px;font-size:13px}
  .smlayerwrap{position:static;margin-left:0}
  .smlayers{right:8px;top:54px;position:absolute}
  .smhits{position:fixed;top:auto;left:12px;right:12px;margin-top:6px;z-index:900}
  .smbody{display:block}
  .smmapwrap{position:absolute;inset:0}
  .smlist{position:absolute;left:0;right:0;bottom:0;height:36%;z-index:470;border:0;border-top:1px solid var(--line);
    border-radius:20px 20px 0 0;box-shadow:0 -6px 20px -8px rgba(14,59,67,.3);transition:height .2s}
  .smlist.open{height:88%}
  .smhandle{display:grid;place-items:center;border:0;background:transparent;padding:8px 0 2px;cursor:pointer}
  .smhandle span{width:44px;height:5px;border-radius:9px;background:var(--line)}
  .smlisthead{padding-top:2px}
  .smkey{bottom:calc(36% + 10px)}
  .smdrawer{top:auto;left:0;right:0;bottom:0;width:auto;max-height:60%;border-radius:20px 20px 0 0;z-index:480;gap:10px}
  .drawer-open .smkey{display:none}
  .smlist .star{width:34px;height:34px}
  .smlist .star span{font-size:18px}
  .jrtxt span{display:none}
  .jrstep{padding:7px 13px}
}

/* Compare: state and private in their own tables. */
.cmpstage + .cmpstage{margin-top:34px}
#cmpPrivate:not(:empty){margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.cmphead2 .eyebrow{display:block;font:400 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.cmphead2 .jrtitle{font-size:24px;font-weight:800;letter-spacing:-.02em}
table.cmppriv tr.cmplikely td{background:var(--cta-soft);color:var(--ink);font-size:14px;padding:10px 12px}
table.cmppriv tr.cmplikely .micro{color:var(--muted)}
.paletiles{filter:grayscale(.9) brightness(1.07) contrast(.88)}

/* Admin: data quality and freshness. */
.adfresh p{margin:0}
.adlist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:14px}
.adlist li{display:grid;gap:1px}
.adq{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px}
.adqhead{display:flex;gap:10px;align-items:baseline}
.adqpct{font:600 22px var(--font);color:#0B7D55}
.adqtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.adqtable td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.adqtable td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.adqtable tr.low td{color:var(--cta)}

/* ---------- places ---------- */
.pl{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;align-items:start;max-width:1400px;margin:0 auto}
.plside{position:sticky;top:132px;background:var(--panel);border:1px solid var(--line);border-radius:24px;
  padding:18px;display:grid;gap:18px}
.plside h3{font-size:15px;margin-bottom:8px}
.plpri{display:grid;gap:8px}
.plslider{display:grid;grid-template-columns:1fr 110px;gap:8px;align-items:center;font-size:14px}
.plslider input{accent-color:var(--cta);width:100%}
.plwork{display:grid;gap:12px}
.plworkrow{display:grid;gap:6px}
.plworkrow b{font-size:12px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plworkwhere{position:relative}
.plworkwhere .control{width:100%}
.plworkhow{display:flex;gap:6px}
.plworkhow .control{flex:1 1 auto;min-width:0}
.plhome{display:grid;gap:8px}
.plfield{display:grid;grid-template-columns:1fr 130px;gap:8px;align-items:center;font-size:14px}
.plmain{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.plhead{display:grid;gap:8px;padding:6px 0 4px}
.plhead .eyebrow{font:400 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plhead h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.pladd{position:relative;max-width:420px}
.pladd .control{width:100%;border-radius:999px;padding:9px 16px}
table.plcmp{background:var(--panel);border-radius:18px}
table.plcmp thead th{min-width:170px;vertical-align:top}
table.plcmp td.best{background:var(--accent-soft);color:var(--on-soft);font-weight:600}
.plfit{display:inline-grid;place-items:center;margin-top:8px;min-width:44px;height:30px;padding:0 10px;border-radius:10px;
  background:var(--ink);color:#fff;font:800 16px var(--font)}
.plgo td{border-bottom:0}
.plsrc{margin:6px 0 0}
@media (max-width:980px){
  .pl{grid-template-columns:minmax(0,1fr)}
  .plside{position:static;order:2}
  table.plcmp thead th{min-width:132px}
}
.adplrun{display:grid;gap:6px;font-size:14px}
.adplrun label{display:flex;gap:8px;align-items:baseline}
.adprog{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:6px}
.adprog span{display:block;height:100%;background:var(--cta);transition:width .3s}
/* Getting in: last place rings, crime shading, past years. */
.smring{display:inline-block;transform:translate(-50%,-120%);white-space:nowrap;background:var(--panel);color:var(--cta);
  border:1px solid var(--cta);font:600 11.5px var(--mono);padding:2px 7px;border-radius:999px}
.ringkey{width:16px;height:16px;border-radius:50%;border:1.5px dashed var(--ink);display:inline-block;flex:none}
.smhist{margin-top:10px}
.smhist table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.smhist th{font:400 10.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:3px 4px}
.smhist td{padding:4px;border-top:1px solid rgba(14,59,67,.08);font-variant-numeric:tabular-nums}
.histbar{display:inline-block;height:6px;width:calc(var(--w) * .5);max-width:50%;background:var(--coral);border-radius:3px;margin-right:6px;vertical-align:middle}

/* ---------- the rest of the home screen, as the front page ---------- */
.dashhead{grid-template-columns:minmax(0,1fr)}
.dashfam{position:absolute;right:36px;top:36px;width:280px;background:var(--panel);border-radius:22px;padding:18px 20px;
  box-shadow:0 16px 40px -18px rgba(14,59,67,.4);display:grid;gap:10px;justify-items:start}
.dashfamh{font-weight:700;font-size:14px;color:var(--muted)}
.dashkids{display:flex;gap:6px;flex-wrap:wrap}
.dashkid{background:var(--accent-soft);padding:5px 11px;border-radius:999px;font-weight:600;font-size:13.5px}
.dashkid.alt{background:var(--cta-soft)}
@media (min-width:1000px){.dashhead > :not(.dashfam){max-width:calc(100% - 320px)}}
@media (max-width:999px){.dashfam{position:static;width:auto;order:9;margin-top:8px}}
.kicker{font-weight:700;font-size:14px;color:var(--cta)}
.dvalue{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:36px;align-items:center;padding:12px 4px}
.dvcopy{display:grid;gap:12px;justify-items:start}
.dvcopy h3,.dpanel h3{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.dvcopy p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.dvhomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dvhome{display:grid;gap:5px;text-align:left;border:0;border-radius:24px;background:var(--mist);padding:20px;cursor:pointer;
  font:inherit;color:var(--ink);transition:transform .12s}
.dvhome:hover{transform:translateY(-2px)}
.dvhome b{font-size:17px}
.dvgap{font-weight:800;font-size:26px;letter-spacing:-.02em;color:#0A7A55}
.dvhome.over{background:#FFF1EE}
.dvhome.over .dvgap{color:#B8392B}
.dpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dpanel{border-radius:32px;padding:32px;display:grid;gap:14px;align-content:start;min-width:0}
.dpanel.dark{background:var(--ink);color:#fff}
.dpanel.dark .kicker{color:#8FD9BC}
.dpanel.dplaces{background:#F3EDFF}
.dpanel.dplaces .kicker{color:#6A2BD9}
.drows{display:grid}
.drow{display:flex;justify-content:space-between;gap:14px;border:0;border-top:1px solid #2E5C63;background:none;color:#fff;
  font:inherit;font-size:16px;padding:12px 0;text-align:left;cursor:pointer}
.drow span:last-child{color:#BFE3DA;text-align:right}
.drow .hl{color:#FFB3A9!important;font-weight:700}
.drow:hover span:first-child{text-decoration:underline}
.tscroll{overflow-x:auto}
.dtowns{display:grid;grid-template-columns:minmax(120px,1.3fr) repeat(var(--n,4),minmax(62px,1fr));gap:10px 10px;font-size:14px;min-width:430px}
.dtowns .k{color:var(--muted)}
.dplaces .linkbtn{justify-self:start}
/* "Things to try": a tour of what kinplace does, each tile opening it */
.dtour{display:grid;gap:18px}
.dtourhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dtourhead h3{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0}
.dtourgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dtile{font:inherit;color:var(--ink);text-align:left;background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:20px;display:grid;gap:8px;align-content:start;cursor:pointer;transition:border-color .12s,transform .12s}
.dtile:hover{border-color:var(--ink);transform:translateY(-2px)}
.dtile .dtk{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dtile b{font-size:18.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.dtile span:not(.dtk){font-size:14.5px;color:var(--muted);line-height:1.45}
.dtile i{font-style:normal;font-weight:700;font-size:14.5px;color:var(--cta);margin-top:4px}
@media (max-width:1000px){.dtourgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dtourgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dtile{transition:none}}
.dsources{display:flex;gap:28px;align-items:center;flex-wrap:wrap;background:var(--mist);border-radius:28px;padding:28px 32px}
.dsources b{font-size:22px;font-weight:800;white-space:nowrap}
.dsources span{flex:1 1 360px;color:var(--muted);font-size:14.5px;line-height:1.7}
.dfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--ink);color:#BFE3DA;border-radius:28px;
  padding:26px 32px;font-size:14.5px}
.dfoot b{color:#fff;font-size:20px;font-weight:800}
.dfoottag{margin-left:auto}
.dfoot nav{display:flex;gap:14px;width:100%;justify-content:flex-end}
.dfoot a{color:#BFE3DA}
@media (max-width:860px){
  .dvalue,.dpair{grid-template-columns:minmax(0,1fr)}
  .dvhomes{grid-template-columns:minmax(0,1fr)}
  .dpanel{padding:24px}
  .dfoot nav{justify-content:flex-start}
  .dfoottag{margin-left:0;width:100%}
}

/* ---------------- places: the scored map ---------------- */
.pltabs{margin-bottom:12px}
.plscan{display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px;min-height:calc(100vh - 210px)}
.plmapwrap{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:520px}
.plmap{position:absolute;inset:0}
.plask{position:absolute;inset:0;z-index:600;background:rgba(242,251,247,.72);backdrop-filter:blur(2px);
  display:grid;place-items:start center;overflow:auto;padding:28px 16px}
.plask form{background:#fff;border-radius:26px;box-shadow:0 20px 50px -20px rgba(14,59,67,.45);padding:26px 28px;
  width:min(640px,100%);display:grid;gap:10px}
.plask h2{font-size:28px;letter-spacing:-.02em;margin:0}
.plaskgo{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px}
.plq{display:grid;gap:14px}
.plq section{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.plq h3{font-size:16px;margin:0;display:flex;align-items:center;gap:8px}
.plq.compact h3{font-size:14px}
.plqn{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:inline-grid;place-items:center;font-size:13px}
.plqwork{display:grid;gap:6px}
.plqhow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.plqhow .control{flex:1 1 110px;min-width:0}
.plqrow{display:grid;grid-template-columns:1.4fr 1fr 0.8fr;gap:8px}
.plmoney{display:flex;align-items:center;gap:4px}
.plmoney input{width:100%}
.plchecks{display:grid;gap:6px}
.plcheck{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.plcheck input{margin-top:3px}
.plpanel{display:grid;gap:12px;align-content:start;max-height:calc(100vh - 170px);overflow:auto;padding-right:2px}
.plpanel.dim{opacity:.35;pointer-events:none}
.plfilters{background:var(--mist);border-radius:16px;padding:10px 14px;font-size:14px;display:grid;gap:4px}
.plfilters p{margin:0}
.plctl{border:1px solid var(--line);border-radius:16px;padding:8px 14px}
.plctl summary{cursor:pointer;font-weight:700}
.plcount{margin:0;font-size:15px}
.pltop{display:grid;gap:8px}
.pltown{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;border:1px solid var(--line);
  border-radius:16px;padding:10px 12px;cursor:pointer;background:#fff}
.pltown:hover,.pltown.focus{border-color:var(--ink)}
.pltown.out{background:var(--bg)}
.pltbody{display:grid;gap:3px;min-width:0}
.plline{font-size:13.5px}
.plpin{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;color:#fff;font:800 13px var(--font);
  border:2px solid #fff;box-shadow:0 1px 5px rgba(14,59,67,.4);box-sizing:border-box}
.plpin.mine{box-shadow:0 0 0 3px var(--coral),0 1px 5px rgba(14,59,67,.4)}
.plpin.sm{width:26px;height:26px;font-size:12px}
.plpin.out{background:#9DB3B6}
.plworkpin{display:grid;place-items:center;width:100%;height:100%;border-radius:7px;background:var(--ink);color:#fff;font:800 12px var(--font);border:2px solid #fff}
.plkey{position:absolute;left:12px;bottom:12px;z-index:500;background:#fff;border-radius:12px;padding:8px 10px;
  display:flex;gap:10px;flex-wrap:wrap;font-size:12px;box-shadow:var(--shadow)}
.plkey span{display:flex;gap:5px;align-items:center}
.plkey i{width:12px;height:12px;border-radius:50%}
.plyours{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:8px;position:sticky;bottom:0;background:var(--bg,#fff)}
.plyours h3{margin:0;font-size:16px}
.plchips{display:flex;gap:6px;flex-wrap:wrap}
.plchip{display:inline-flex;align-items:center;gap:4px;background:var(--mint);border-radius:999px;padding:4px 6px 4px 12px;font-weight:600;font-size:14px}
.plchip button{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ink)}
.plyoursgo{display:flex;gap:8px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:3000;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:14px;font-size:14.5px;transition:.2s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:980px){
  .plscan{grid-template-columns:1fr}
  .plmapwrap{min-height:420px}
  .plpanel{max-height:none}
  .plqrow{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------------- your family: the profile ---------------- */
.pf{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:8px 4px 40px}
.pfhead h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;margin:4px 0 6px}
.pfsteps{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.pfstep{font:inherit;color:var(--ink);text-align:left;display:flex;gap:10px;align-items:center;flex:1 1 200px;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 14px;cursor:pointer}
.pfstep:hover{border-color:var(--ink)}
.pfstep > span:last-child{display:grid;gap:2px}
.pfn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;
  background:var(--mist);color:var(--ink);border:2px solid var(--line)}
.pfstep.done .pfn{background:var(--ink);color:#fff;border-color:var(--ink)}
.pfarrow{align-self:center;color:var(--muted);font-weight:700}
.pfgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pfcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 20px;display:grid;gap:10px;align-content:start}
.pfcard h3{margin:0;font-size:19px;letter-spacing:-.01em}
.pfwide .jrpanel{padding:0;border:0;background:none}
.pflist{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:340px;overflow:auto}
.pflist li{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:7px 0;font-size:14.5px}
.pflist li .micro{display:block}
.pfacts{display:flex;gap:6px;align-items:center}
.pfx{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:8px}
.pfx:hover{color:var(--cta);background:var(--cta-soft)}
.pfgo{display:flex;gap:8px;flex-wrap:wrap}
.sctowns{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 0}
@media (max-width:900px){
  .pfgrid{grid-template-columns:1fr}
  .pfarrow{display:none}
}

/* Compare tables keep their column headers in view: a copy of the header row
   sticks under the top bars while its table is on screen, sized to the real
   columns and scrolled sideways with them. (The real header cannot stick to
   the page from inside a box that scrolls sideways.) */
.cmpfloat{position:sticky;top:var(--cmp-stick, 64px);z-index:30;height:0;pointer-events:none}
.cmpfloat.on{pointer-events:auto}
.cmpfloat .cmpfloatin{overflow:hidden;background:var(--panel);box-shadow:inset 0 -1px 0 var(--line),0 8px 10px -9px rgba(14,59,67,.35);
  visibility:hidden}
.cmpfloat.on .cmpfloatin{visibility:visible}
.cmpfloat table{table-layout:fixed;border-collapse:collapse;margin:0}
.cmpfloat table.cmpall th:first-child{position:sticky;left:0;z-index:2;background:var(--panel)}

/* ---------------- my home: can we extend? ---------------- */
.mhextend{display:grid;gap:12px}
.mhextend h3{margin:0;font-size:22px}
.mhextend h4{margin:6px 0 4px;font-size:15px}
.xverdict{margin:0;font-size:16px;font-weight:600}
.xgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
.xcons{width:100%;border-collapse:collapse;font-size:13.5px}
.xcons td{border-top:1px solid var(--line);padding:7px 6px;vertical-align:top}
.xcons td:first-child{white-space:nowrap;color:var(--muted)}
.xk{font-size:12px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.xk.yes{background:var(--cta-soft);color:var(--cta-deep)}
.xk.no{background:var(--mint);color:#0A5C3F}
.xk.unk{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.xpd{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.xpd li{display:grid;gap:2px}
.xpd li span{color:var(--muted);font-size:13px}
.xpd li.no b{color:var(--cta-deep)}
.xpd li.ok b{color:#0A7A55}
.xapps{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.xapps li{border-top:1px solid var(--line);padding-top:6px}
.xdate{font-family:var(--mono);font-size:12px;color:var(--muted);margin-right:6px}
.xst{font-size:12px;margin-right:6px}
.xst.ok{color:#0A7A55}.xst.no{color:var(--cta-deep)}
.xyours{background:var(--mist);border-radius:14px;padding:10px 14px}
@media (max-width:860px){.xgrid{grid-template-columns:1fr}}

/* ---------------- plans ---------------- */
.pn{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:8px 4px 40px}
.pn > *,.pncard > *{min-width:0}
.pnstart{background:var(--mist);border-radius:20px;padding:14px 18px;display:grid;gap:6px}
.pnstartrow{display:flex;gap:14px;flex-wrap:wrap;align-items:end}
.pnstartrow .plfield{display:grid;gap:4px;font-size:13.5px;flex:1 1 150px}
.pnyrs{width:70px}
.pnpaths{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;transition:opacity .15s}
.pnpaths.working{opacity:.55}
.pnpath{background:#fff;border:1px solid var(--line);border-top:5px solid var(--pc);border-radius:22px;padding:16px 18px;display:grid;gap:10px;align-content:start}
.pnpath header{display:flex;align-items:center;gap:8px}
.pndot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--pc);flex:none}
.pnname{font:800 19px var(--font);color:var(--ink);border:0;border-bottom:1px dashed transparent;padding:2px 0;width:100%;background:none}
.pnname:hover,.pnname:focus{border-bottom-color:var(--line);outline:none}
.pninputs{display:grid;gap:8px}
.pninputs .plfield{display:grid;gap:4px;font-size:13.5px}
.pnfacts{margin:0;display:grid;gap:8px}
.pnfacts div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;border-top:1px solid var(--line);padding-top:7px;font-size:14px}
.pnfacts dt{color:var(--muted)}
.pnfacts dd{margin:0;font-weight:700}
.pnfacts dd .micro{display:block;font-weight:400}
.pnfacts ul{margin:0;padding-left:16px;font-weight:600}
.pnnet dd{font-size:18px}
.pnnet.best dd{color:#0A7A55}
.pnnet.best dt::after{content:" · best";color:#0A7A55;font-weight:700}
.pnwarn{margin:0;padding-left:18px;color:var(--cta-deep);font-size:13px}
.pncard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px 18px;display:grid;gap:8px}
.pncard h3{margin:0}
.pnchart svg{width:100%;height:auto;display:block}
.pngrid{stroke:var(--line);stroke-width:1}
.pnax{font:11px var(--mono);fill:var(--muted)}
.pnlbl{font:700 12px var(--font)}
.pntable td{min-width:110px}
.pnnotes{display:grid;gap:4px;padding-left:18px;margin:0}

/* ---------------- admin: nationwide ---------------- */
.adnation{display:grid;gap:12px}
.natgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.natmapwrap{display:grid;gap:6px}
.natmap{height:440px;border-radius:16px;background:var(--mist);border:1px solid var(--line)}
.natkey{display:flex;gap:10px;flex-wrap:wrap;font-size:12px}
.natkey span{display:flex;gap:5px;align-items:center}
.natkey i{width:12px;height:12px;border-radius:3px}
.natside{display:grid;gap:12px}
.natnight,.natqueue{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:grid;gap:8px}
.natnight h4,.natqueue h4{margin:0}
.nattimes{display:flex;gap:10px;flex-wrap:wrap;font-size:14px}
.nattimes input{width:auto}
.natqueue ol{margin:0;padding-left:20px;display:grid;gap:4px;max-height:220px;overflow:auto;font-size:14px}
.natqueue li > span{display:inline-flex;gap:6px;align-items:center}
.natqueue li{display:list-item}
.natqueue li > span:last-child{float:right}
.natregions{display:grid;gap:6px}
.natregions details{border:1px solid var(--line);border-radius:14px;padding:6px 12px}
.natregions summary{cursor:pointer;display:flex;gap:10px;align-items:baseline}
.nattable{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0}
.nattable td{border-top:1px solid var(--line);padding:6px 6px;vertical-align:middle}
/* On a phone the councils table scrolls sideways rather than being cut off. */
@media (max-width:700px){.nattable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.natst{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.natcatch{min-width:170px}
.natst::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.natlog pre{white-space:pre-wrap;font:12px var(--mono);max-height:220px;overflow:auto;margin:6px 0 0}
@media (max-width:900px){.natgrid{grid-template-columns:1fr}.natmap{height:360px}}

/* fit, read rather than trusted */
.fitbars{display:grid;gap:3px;margin-top:6px;min-width:120px}
.fitbar{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px;align-items:center;font-size:11px;font-weight:500}
.fitbar i{font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitbar b{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#34A56F var(--v),var(--line) var(--v))}
.pltfit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.pltfit .fitbars{margin-top:0}
.plfit.sm{font-size:13px;padding:0 8px;height:26px;min-width:36px;margin-top:0}
.plfitnote{max-width:60em;margin:0 0 6px}
.plsearch input{width:100%}

/* schools: your schools, visible; a key that stays */
.star{min-width:74px;font-size:13px;font-weight:700;flex-direction:row;justify-content:center;white-space:nowrap}
.jrdock{display:grid;gap:8px;align-items:stretch}
.jrdock.empty{display:block}
.dockhead{display:flex;align-items:center;gap:8px}
.dockhead .btn{margin-left:auto}
.dockchips{display:flex;flex-wrap:wrap;gap:6px;max-height:112px;overflow:auto}
.dockchip,.towchip{display:inline-flex;align-items:center;border-radius:999px;background:var(--mint);font-size:13px;font-weight:600}
.dockchip.private{background:#FFE9E5}
.dockchip button,.towchip button{border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;padding:5px 4px 5px 10px}
.dockchip .dockx,.towchip .dockx{padding:3px 9px 3px 4px;font-size:16px;line-height:1;color:var(--muted)}
.dockx:hover{color:var(--cta)}
.towchip{background:var(--bg);border:1px solid var(--line)}
.towchip.on{border-color:var(--ink);background:#fff}
.smkeystatic{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px 10px;display:grid;gap:5px;font-size:12px;margin-bottom:6px}
.smkeystatic > span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.smkeystatic .smk{width:18px;height:18px;min-width:18px;min-height:18px;font-size:10px}
.smkletters b{font-weight:800;margin-left:4px}
.smktones{gap:3px!important}
.smktones .sw{display:inline-block;width:14px;height:14px;border-radius:50%}
.smtip{font-size:12.5px;line-height:1.4}
.smtipyours{color:#0A7A55;font-weight:700}

/* what next: numbered, with a purpose */
.nexthead{margin:0 0 14px}
.nextn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:15px;margin-right:6px;vertical-align:middle}
.nexttable{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 12px}
.nexttable th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.nexttable td{padding:8px;border-bottom:1px solid var(--line)}
.ctxhelp{flex:1 1 100%;color:var(--muted)}

/* my home: three tabs; design beside its cost and value */
.mhtabs{margin:6px 0 14px}
.mh.wide{max-width:1320px}
.mhdesign{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:18px;align-items:start}
.mhimpact{position:sticky;top:calc(var(--topbar-h,64px) + 12px);display:grid;gap:12px;
  max-height:calc(100vh - var(--topbar-h,64px) - 24px);overflow:auto;padding-right:2px}
.mhimpacth{margin:0;font-size:18px}
@media (max-width:1000px){
  .mhdesign{grid-template-columns:1fr}
  .mhimpact{position:static;max-height:none}
}

/* welcome */
.dialog.welcome{display:grid;gap:12px;padding:26px 28px}
.dialog.welcome h2{margin:0;font-size:26px;letter-spacing:-.02em}
.wlcdots{display:flex;gap:6px;margin:0}
.wlcdots i{width:28px;height:5px;border-radius:3px;background:var(--line)}
.wlcdots i.on{background:var(--ink)}
.wlcdots i.done{background:#34A56F}
.wlcpicks{display:grid;gap:8px}
.wlcpick{font:inherit;text-align:left;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:16px;
  padding:12px 14px;display:grid;gap:3px;cursor:pointer}
.wlcpick span{color:var(--muted);font-size:13.5px}
.wlcpick:hover{border-color:var(--ink)}
.wlcpick.on{border-color:var(--ink);background:var(--mist);box-shadow:inset 0 0 0 1px var(--ink)}
.wlcgo{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.wlckids{display:grid;gap:8px}
.wlckid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.8fr) auto;gap:6px;align-items:center}
.wlcwhere{position:relative}
.wlcwhere input{width:100%}
.dashroute{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--mist);border-radius:20px;padding:12px 16px;margin:0 0 14px}
.dashroute p{margin:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.routesteps{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.routesteps button{font:inherit;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;color:var(--ink);font-weight:600;font-size:14px}
.routesteps .pfn{width:24px;height:24px;font-size:12px}
.routesteps li.done .pfn{background:#34A56F;color:#fff;border-color:#34A56F}
.routesteps li.next button{border-color:var(--ink)}
@media (max-width:560px){.wlckid{grid-template-columns:1fr 1fr auto}.wlckid input{grid-column:1/-1}}

/* phone width: nothing wider than the screen */
.pf > *,.pfgrid > *,.pfcard > *{min-width:0}
.plq,.plq section,.plqwork,.plworkwhere{min-width:0}
.plq input,.plq select{max-width:100%;min-width:0}
#planBody{overflow-x:auto}
.mhtabs{overflow-x:auto;flex-wrap:nowrap}
@media (max-width:560px){
  .plask form{padding:20px 16px}
  .plqhow .control{flex:1 1 calc(50% - 6px)}
  .plqrow{grid-template-columns:1fr}
  .plq .plfield{display:grid;gap:4px}
  .mhtabs .jrtxt span{display:none}
}

.natzoom{display:flex;gap:6px;flex-wrap:wrap}
.natmap.big{height:72vh}
.natlive{border:1px solid var(--line);border-left:4px solid #2F6FD6;border-radius:14px;padding:10px 14px;display:grid;gap:6px;background:#fff}
.natlive.quiet{border-left-color:#E3B94C}
.natbar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.natbar i{display:block;height:100%;background:#2F6FD6;transition:width .4s}
@media (prefers-reduced-motion:reduce){.natbar i{transition:none}}

.natlayers{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.natlayers label{display:flex;gap:4px;align-items:center;white-space:nowrap}
.adhand{border:1px solid var(--line);border-radius:18px;padding:10px 16px;background:var(--panel)}
.adhand summary{cursor:pointer}
.adhand .admingrid{margin-top:12px}

/* schools list: the add button as a small labelled pill; your towns in line */
.smlist .star{width:auto;height:28px;min-width:0;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  flex-direction:row;gap:4px;align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.smlist .star:hover{border-color:var(--ink)}
.smlist .star.on{background:var(--mint);border-color:#34A56F;color:#0A5C3F}
@media (max-width:900px){.smlist .star{width:auto;height:28px}}
.sctowns{padding:2px 12px 6px;align-items:center;row-gap:6px}
.sctowns > .micro{flex-basis:100%;font-weight:600;color:var(--muted)}
.sctowns + .sclist .smcount{padding:0 12px}
.cmpfree{background:var(--mist);border-left:4px solid #34A56F;border-radius:12px;padding:10px 14px;margin:0 0 10px;font-size:14px;max-width:70em}
/* what next: three full-width steps, one under another */
[data-panel="next"] .nextgrid{grid-template-columns:minmax(0,1fr)}
[data-panel="next"] .nextcard{grid-column:1/-1}
/* the soonest date in a list is not a "coming soon" page card */
.aheadlist li.soon{max-width:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;display:flex}
.aheadlist li.soon .aheadwhen{background:var(--cta-soft);color:var(--cta-deep)}
.pnschools{margin:0;padding-left:16px;font-size:13px}
.pnfacts .pnhead dd{font-size:16px}

/* favourites, and the Your plan dock */
.favbtn{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:3px 10px;cursor:pointer;white-space:nowrap;margin-top:6px}
.favbtn:hover{border-color:var(--ink)}
.favbtn.on{background:#FFF4D6;border-color:#E3B94C;color:#7A5300}
.pnpath header .favbtn{margin:0 0 0 auto}
.pnpath.ours{box-shadow:0 0 0 2px #E3B94C}
.plandock{position:fixed;right:0;top:50%;z-index:900;transform:translateY(-50%)}
.plandocktab{position:absolute;right:0;top:0;transform:translateY(-50%) rotate(-90deg) translateY(-100%);transform-origin:right top;
  font:inherit;font-weight:800;font-size:14px;background:var(--ink);color:#fff;border:0;border-radius:12px 12px 0 0;
  padding:9px 16px;cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px -8px rgba(14,59,67,.6)}
.plandocktab span{color:#FFD27A;margin-left:4px}
.plandockpanel{position:fixed;right:0;top:var(--topbar-h,64px);bottom:0;width:min(360px,92vw);background:var(--panel);
  border-left:1px solid var(--line);box-shadow:-18px 0 40px -24px rgba(14,59,67,.45);padding:16px 18px;overflow:auto;
  transform:translateX(105%);transition:transform .2s;display:grid;gap:10px;align-content:start}
.plandock.open .plandockpanel{transform:none}
.plandock.open .plandocktab{opacity:0;pointer-events:none}
.plandockpanel header{display:flex;align-items:center}
.plandockpanel header h3{margin:0;font-size:20px}
.plandockpanel header .dlgclose{position:static;margin-left:auto;float:none}
#planDockBody{display:grid;gap:12px}
#planDockBody section{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px}
#planDockBody h4{margin:0;font-size:15px}
#planDockBody ul{margin:0;padding-left:16px;font-size:14px}
#planDockBody li.fav{font-weight:700}
#planDockBody p{margin:0;font-size:14px}
.dockstage{display:grid;gap:2px}
@media (prefers-reduced-motion:reduce){.plandockpanel{transition:none}}
@media print{.plandock{display:none}}

/* places: rank and fit told apart; your towns ringed in coral everywhere */
.plpin{font-size:11.5px;letter-spacing:-.02em}
.plfitlab{display:inline-flex;align-items:baseline;gap:3px;background:var(--ink);color:#fff;border-radius:8px;padding:2px 8px;font-size:12px;white-space:nowrap}
.plfitlab b{font-size:15px}
.plfitlab i{font-style:normal;opacity:.7;font-size:11px}
.pltown.mine{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.plchip.mine{box-shadow:inset 0 0 0 2px var(--coral)}
/* schools: your schools ringed in coral in the list and the tray, like their markers */
.smlist .scrow.picked{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.dockchip{box-shadow:inset 0 0 0 2px var(--coral)}

/* Your plan, above every map; a peek when something is added; a sheet on a phone */
.plandock{z-index:2600}
.plandockpanel{z-index:2601}
.planpeek{position:fixed;right:52px;top:50%;transform:translate(12px,-50%);opacity:0;pointer-events:none;z-index:2602;
  background:var(--ink);color:#fff;border-radius:16px;padding:10px 14px;max-width:min(300px,70vw);font-size:14px;
  box-shadow:0 12px 30px -12px rgba(14,59,67,.6);transition:opacity .2s,transform .2s;display:flex;gap:10px;align-items:center}
.planpeek.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.planpeek button{font:inherit;font-weight:700;background:#fff;color:var(--ink);border:0;border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
@media (max-width:720px){
  .plandockpanel{top:auto;left:0;right:0;width:auto;height:min(78vh,620px);border-left:0;border-top:1px solid var(--line);
    border-radius:22px 22px 0 0;transform:translateY(105%)}
  .plandock.open .plandockpanel{transform:none}
  .planpeek{left:16px;right:16px;top:auto;bottom:16px;max-width:none;transform:translateY(12px)}
  .planpeek.on{transform:none}
}
@media (prefers-reduced-motion:reduce){.planpeek{transition:none}}

/* The dock itself must not be transformed: a transformed parent makes its
   fixed children position against it instead of the screen. */
.plandock{position:fixed;right:0;top:0;bottom:auto;transform:none;width:0;height:0}
.plandocktab{position:fixed;right:0;top:50%;transform:rotate(-90deg) translateY(-100%);transform-origin:right top}

/* ---- Design your extension: the builder ---- */
.xb{display:grid;gap:12px;margin-top:16px}
.xbview{border:1px solid var(--line);border-radius:14px;background:linear-gradient(#f4fbf8,#fff);padding:8px 10px 10px}
.xb3d{display:block;width:100%;height:auto;aspect-ratio:600/380;touch-action:none;cursor:grab}
.xb3d:active{cursor:grabbing}
.xb3d.mini{max-height:340px;margin:4px 0 8px}
.minibuild .xbseg{margin-bottom:6px}
.minifigs{margin:6px 0 4px}
.minikv dd .arrow{color:var(--muted);margin:0 4px}
.minikv dd .micro{margin-left:6px}
.xbviewbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.xbviewbar .micro{margin-left:auto}
.xbsays{margin-top:6px}
.xbhouse{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:10px 12px;font-size:13px}
.xbhouse summary{cursor:pointer;line-height:1.5}
.xbhouse summary u{color:var(--accent);text-underline-offset:2px}
.xbhousegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:10px 0 6px}
.xbhousegrid label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.xbhousegrid input{width:70px}
.xblist{display:grid;gap:8px}
.xbcard{border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.xbcard.on{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral) inset}
.xbcard.locked{opacity:.6;background:transparent}
.xbcard.locked .xbhead{cursor:not-allowed}
.xblocked{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.xbhead{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer}
.xbhead>span:first-of-type{display:grid;gap:1px;flex:1}
.xbhead input{accent-color:var(--coral);width:17px;height:17px}
.xbarea{font-size:12.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.xbbody{padding:0 12px 12px 39px;display:grid;gap:9px}
.xbseg{display:flex;flex-wrap:wrap;gap:4px}
.xbseg button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.xbseg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.xbseg button:disabled{opacity:.4;cursor:not-allowed}
.xbsl{display:grid;grid-template-columns:140px 1fr 64px;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.xbsl output{font-weight:600;color:var(--ink);text-align:right}
.xbsel,.xbcheck{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.xbplan{font-size:12.5px;line-height:1.45;margin:0}
.xbpd{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;margin-right:4px}
.xbpd.ok{background:#DDF4E8;color:#14633F}
.xbpd.prior{background:#FFF1D6;color:#7A4B00}
.xbpd.plan{background:#FFE3DF;color:#9B2C1F}
.xbdraw{margin-top:14px;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:10px 12px}
.xbdraw summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.xbdraw[open] summary{margin-bottom:10px}
@media (max-width:720px){
  .xbsl{grid-template-columns:1fr 60px}
  .xbsl span{grid-column:1/-1}
  .xbbody{padding-left:12px}
  .xbviewbar .micro{margin-left:0;width:100%}
}
.mhchip.no{border-style:dashed;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(14,59,67,.4)}
.mhsoldcheck{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--accent-soft);font-size:13px;line-height:1.45}
.mhsoldcheck p{margin:4px 0 0}

/* ---- Admin: accuracy checks ---- */
.evlist{display:grid;gap:10px}
.evrow{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:6px}
.evrow.planned{opacity:.6;border-style:dashed}
.evhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.evbadge{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;background:#EEF2F1;color:var(--muted);white-space:nowrap}
.evbadge.pass{background:#DDF4E8;color:#14633F}
.evbadge.warn{background:#FFF1D6;color:#7A4B00}
.evbadge.fail{background:#FFE3DF;color:#9B2C1F}
.evchips{display:flex;flex-wrap:wrap;gap:6px}
.evchip{font-size:12px;border-radius:999px;padding:3px 10px;border:1px solid var(--line)}
.evchip.pass{border-color:#9ED9B9}.evchip.warn{border-color:#F2C46B}.evchip.fail{border-color:#F0A096;background:#FFF5F3}
.evflags{margin:0;padding-left:18px;font-size:12.5px;color:#7A4B00}
.evbtns{display:flex;flex-wrap:wrap;gap:6px}
.evspark{width:120px;height:28px;vertical-align:middle;margin-left:6px}
.evspark polyline{fill:none;stroke:var(--accent);stroke-width:1.5}
.evjob{display:grid;gap:4px}
.evbar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.evbar i{display:block;height:100%;background:var(--accent)}
.evfail{color:#9B2C1F}
.evdetail{display:grid;gap:8px;margin-top:6px;overflow-x:auto}
.evdim{margin:8px 0 0;font-size:13px}
.evtable{width:100%;border-collapse:collapse;font-size:12.5px}
.evtable th,.evtable td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.evtable th{font-weight:600;color:var(--muted)}
.evtable .num{text-align:right;white-space:nowrap}
.towchip.mine{box-shadow:0 0 0 2px var(--coral) inset}
.xbrow{display:grid;gap:5px}
.xblab{font-size:12.5px;color:var(--muted)}
.xbcost{display:block;font-size:12px;color:var(--ink);font-weight:700;text-align:right}
.xbarea{display:grid;justify-items:end;gap:1px}
.nurctl{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:8px 0 4px;font-size:13px}
.nurctl label{display:flex;gap:8px;align-items:center}
.nurquotes{display:grid;gap:6px;margin-top:6px}
.nurquotes label{justify-content:space-between;max-width:420px}
.dockchip.nursery{background:#FFF1D6}
.minfo{display:inline-block;margin-left:6px;vertical-align:middle}
.minfo summary{list-style:none;cursor:pointer;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);
  font:700 11px/14px Georgia,serif;font-style:italic;text-align:center}
.minfo summary::-webkit-details-marker{display:none}
.minfo[open] summary{background:var(--accent);color:var(--accent-ink)}
.minfo p{position:absolute;z-index:30;max-width:320px;margin:6px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(14,59,67,.15);font-size:12.5px;line-height:1.45;font-weight:400;color:var(--ink);white-space:normal}
.jobbar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13px}
.jobbar[hidden]{display:none}
.jobtext{flex:1;display:grid;gap:1px}
.natbtns{display:flex;flex-wrap:wrap;gap:6px}
.natwait{color:#7A4B00}
.fareb{font-weight:700;color:var(--ink)}.farehow{opacity:.75}

/* ---- a home's card beside a map; Extend & sell ---- */
.mapwrap{position:relative}
.homecard{position:absolute;top:12px;left:56px;z-index:900;width:min(340px,calc(100% - 68px));max-height:calc(100% - 24px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(14,59,67,.18)}
.homecard[hidden]{display:none}
.hcx{position:absolute;top:8px;right:8px;z-index:2;border:0;background:rgba(255,255,255,.9);border-radius:50%;width:28px;height:28px;font-size:18px;cursor:pointer}
.hcimg{display:block;width:100%;height:170px;object-fit:cover;border-radius:16px 16px 0 0}
.hcbody{padding:12px 14px 14px;display:grid;gap:6px}
.hcprice{font-size:20px;font-weight:800}
.hcaddr{font-weight:600}
.hcvs{display:flex;gap:8px;align-items:center}
.hcopen{justify-self:start}
.hcscore{color:#fff;font-weight:800;border-radius:7px;padding:2px 7px;font-size:13px}
.hcdeal{border-top:1px solid var(--line);padding-top:8px;display:grid;gap:6px}
.hcprofit b{font-size:20px}
.hcprofit.up b{color:#14633F}.hcprofit.down b{color:#9B2C1F}
.hcprofit .micro{display:block}
.hctable{width:100%;font-size:12.5px;border-collapse:collapse}
.hctable td{padding:2px 0}.hctable td:last-child{text-align:right}
.hcwarn{color:#7A4B00}
.flipbar{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:flex-start;margin:6px 0}
.flipbar .micro{display:block;max-width:60ch}
.flipctl{display:flex;flex-wrap:wrap;gap:10px;font-size:13px}
.flipctl label{display:flex;gap:6px;align-items:center}
.flipgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:12px}
#flipMap{height:640px;border-radius:14px}
.fliplist{display:grid;gap:6px;align-content:start;max-height:640px;overflow:auto}
.flipitem{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:6px;cursor:pointer;font:inherit}
.flipitem img,.flipitem .noimg{width:72px;height:54px;object-fit:cover;border-radius:8px;background:var(--mist);flex:none}
.fitext{display:grid;gap:1px;font-size:13px}
.fitext b.up{color:#14633F}.fitext b.down{color:#9B2C1F}
.flippin{font:700 11px/22px system-ui;border-radius:11px;text-align:center;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);border:2px solid #fff}
.flippin.p2{background:#14833F}.flippin.p1{background:#7cb342}.flippin.p0{background:#9aa5a8}
@media (max-width:900px){.flipgrid{grid-template-columns:1fr}#flipMap{height:420px}}
.fliptool{border-top:1px solid var(--line);padding-top:12px}#flipBack{display:block;margin-bottom:4px}
.modechip{margin-left:14px;align-self:center;height:30px;padding:0 12px;border-radius:999px;border:1px dashed var(--accent);
  background:transparent;color:var(--accent);font:600 12.5px/28px inherit;cursor:pointer;white-space:nowrap}
.modechip span{font-weight:800}
.modechip.on{background:var(--accent);color:var(--accent-ink);border-style:solid}
.flipdot{width:10px;height:10px;border-radius:50%;background:#9aa5a8;border:1.5px solid #fff;box-shadow:0 0 2px rgba(0,0,0,.3)}

.toolbar .modechip{margin-right:auto}

/* ---------- Admin: tabs, and the launch plan ---------- */
.admin{grid-template-columns:minmax(0,1fr)}
.adtabs{margin:0}
.adpanel{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);min-width:0}
.lphead,.lpphase{grid-template-columns:minmax(0,1fr)}
.lphead{gap:14px}
.lpweek{min-width:0}
.lptop{display:flex;justify-content:space-between;gap:18px;align-items:start}
.lptop .micro{max-width:62ch}
.lpscore{display:grid;justify-items:end;flex:none}
.lpscore b{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}
.lpscore small{font-size:12.5px;color:var(--muted)}
.lpbar{height:8px;border-radius:999px;background:var(--mist);overflow:hidden}
.lpbar span{display:block;height:100%;background:var(--coral);border-radius:999px}
.lpnow{font-size:14.5px}
.lpbehind{color:var(--cta);font-weight:600}
.lpctl{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lpseg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.lpseg button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font:600 13px var(--font);color:var(--muted);cursor:pointer}
.lpseg button.on{background:var(--ink);color:#fff}
.lphide{font-size:13.5px;display:inline-flex;gap:6px;align-items:center}
.lpdates{display:flex;flex-wrap:wrap;gap:6px}
.lpdate{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted);background:var(--panel)}
.lpdate b{font:500 12px var(--mono);color:var(--ink);margin-right:4px}
.lpdate.past{opacity:.5}
.lpdate.next{border-color:var(--coral);background:var(--cta-soft);color:var(--ink)}
.lphabits summary{cursor:pointer;font-size:14px}
.lphabits ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:4px;font-size:14px;color:var(--muted)}
.lpph{display:flex;justify-content:space-between;align-items:end;gap:12px}
.lpph .eyebrow{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.lpphc{font:600 13px var(--mono);color:var(--muted)}
.lpgoal{font-size:14px;color:var(--muted)}
.lpgoal b{color:var(--ink)}
.lpgate{font-size:13.5px;border-left:3px solid var(--coral);background:var(--cta-soft);padding:8px 12px;border-radius:0 8px 8px 0}
.lpweek{border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.lpweek>summary{display:flex;gap:10px;align-items:baseline;padding:11px 14px;cursor:pointer;list-style:none;flex-wrap:wrap}
.lpweek>summary::-webkit-details-marker{display:none}
.lpweek>summary::before{content:"›";color:var(--muted);transition:transform .15s;display:inline-block}
.lpweek[open]>summary::before{transform:rotate(90deg)}
.lpwn{font-weight:700;font-size:14.5px}
.lpwd{font:500 12px var(--mono);color:var(--muted)}
.lpwf{font-size:14.5px;color:var(--ink)}
.lpwc{margin-left:auto;font:500 12px var(--mono);color:var(--muted)}
.lptag{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--coral);color:#fff;border-radius:999px;padding:2px 8px}
.lpweek.now{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral) inset}
.lpweek.complete .lpwc{color:#07784A}
.lpweek.late .lpwc{color:var(--cta);font-weight:600}
.lptasks{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:0 14px 12px}
.lptask{display:flex;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.lptask label{display:flex;gap:10px;align-items:start;flex:1;cursor:pointer;min-width:0}
.lptask input{margin-top:3px;width:17px;height:17px;accent-color:var(--ink);flex:none}
.lptxt{font-size:14.5px;line-height:1.4;display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.lptxt small{font-size:12.5px;color:var(--muted)}
.lptxt .lpwhen{color:#07784A}
.lptask.done .lptxt>:first-child,.lptask.done .lptxt{color:var(--muted)}
.lptask.done .lptxt{text-decoration:line-through;text-decoration-color:rgba(14,59,67,.35)}
.lptask.done .lptxt small{text-decoration:none}
.lpwho{flex:none;font:600 11px var(--mono);border-radius:6px;padding:3px 7px;white-space:nowrap;margin-top:2px}
.lpwho-you{background:var(--mist);color:var(--ink);border:1px solid var(--line)}
.lpwho-claude{background:var(--ink);color:#fff}
.lpwho-both{background:var(--cta-soft);color:var(--cta-deep)}
.lpdel{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.lpadd{display:flex;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.lpadd input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font:14px var(--font)}
.lpadd select{border:1px solid var(--line);border-radius:10px;padding:0 6px;font:13px var(--font);background:var(--panel)}
@media (max-width:640px){
  .lptop{flex-direction:column}
  .lpscore{justify-items:start}
  .lptask{flex-wrap:wrap}
  .lptask label{flex-basis:calc(100% - 30px)}
  .lpwho{margin-left:27px}
  .lpwc{margin-left:0}
}

/* ---------- Admin: data and the nightly batch ---------- */
.adlede{max-width:80ch}
.dsnight{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--mist)}
.dsnight label{display:inline-flex;gap:6px;align-items:center;font-size:14px}
.dsnight .control{width:auto}
.dsstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.dsstats>div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:3px;align-content:start}
.dsstats small{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dsstats b{font-size:18px;font-weight:800}
.dsok{color:#07784A;font-weight:600}
.dsbad{color:var(--cta);font-weight:600}
.dsdue{color:var(--cta)}
.dsoff{color:var(--muted);font-size:13px}
.dslive{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--accent-soft);display:grid;gap:4px}
.dsbtns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dstable{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dsrow{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,1.1fr);gap:12px;padding:12px 14px;border-top:1px solid var(--line);align-items:start;background:var(--panel)}
.dsrow:first-child{border-top:0}
.dsrow.bad{background:#FFF6F4}
.dsrow.manual{background:var(--bg)}
.dsrow>div{display:grid;gap:3px;min-width:0}
.dsname b{font-size:14.5px}
.dschg{opacity:.85}
.dsevery select{max-width:100%}
.dslast span:first-child{font-size:13.5px}
.dsact{justify-items:start}
.dsact .btn{white-space:nowrap}
.dsnights{display:grid;gap:6px}
.dsnt{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.dsnt.bad{border-color:#F3C5BE}
.dsnt>summary{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:10px 14px;cursor:pointer}
.dsntsum{margin-left:auto;font-size:13.5px}
.dsntlist{list-style:none;margin:0;padding:0 14px 12px;display:grid;gap:4px;font-size:13.5px}
.dsstore{display:grid;gap:6px}
.dsstore>div{display:grid;grid-template-columns:110px 1fr 70px;gap:10px;align-items:center;font-size:13.5px}
.dsstore i{display:block;height:8px;border-radius:999px;background:var(--mint);width:var(--w)}
.dsstore b{text-align:right;font:500 12.5px var(--mono)}
.evsechead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.evplanned>summary{cursor:pointer;font-size:14px;padding:4px 0}
.evplanned .evlist{margin-top:8px}
@media (max-width:760px){
  .dsrow{grid-template-columns:1fr;gap:6px}
  .dsntsum{margin-left:0}
}
.evscroll{overflow-x:auto}
.evissue{border-top:1px solid var(--line);padding:6px 0}
.evissue>summary{cursor:pointer;font-size:13.5px}
.evissue .evtable{margin-top:6px}

/* Roofline icons (icons.svg): the teal line follows the text colour, the
   coral stroke stays coral; smaller icons draw heavier lines. */
.ico{width:1.2em;height:1.2em;flex:none;display:inline-block;vertical-align:-.22em}
.navitem .ico{width:19px;height:19px;--ico-w:3.4;--ico-wa:3.8}
.dcard .dico{width:38px;height:38px;--ico-w:2.6;--ico-wa:2.9;color:var(--ink)}
.soonhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:14px}
.soonhead h3{display:flex;align-items:center;gap:10px;margin:0}
.soonhead h3 .ico{width:26px;height:26px;--ico-w:3.2;--ico-wa:3.6}
.soonlead{font:500 14px var(--mono);color:var(--cta)}
.soontl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.soonstep{display:flex;flex-direction:column;gap:5px;padding-top:12px;border-top:3px solid var(--line);font-size:15px}
.soonstep.next{border-top-color:#FF6B5B}
.soontop{display:flex;align-items:center;gap:8px}
.soonstep .when{font:500 13px var(--mono);color:var(--muted);width:auto}
.soonstep.near .when{color:var(--cta);font-weight:600}
.kidchip{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#FFFFFF;background:var(--ink);flex:none}
.kidchip.k1{background:var(--cta)}
.kidchip.k2{background:#2E8B6F}

/* Tabs inside a card: a school's or a town's details, one subject at a time. */
/* flex:none: in the card's column a scrolling row may otherwise be squashed to nothing
   when the pane below it is long, and the tabs vanish. */
.cardtabs{display:flex;flex:none;flex-wrap:nowrap;gap:2px;margin:10px 0 8px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}
.cardtabs::-webkit-scrollbar{display:none}
/* More tabs off one edge: that edge fades, so it reads as a row to slide. */
.cardtabs.more-right{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
.cardtabs.more-left{-webkit-mask-image:linear-gradient(to left,#000 82%,transparent);mask-image:linear-gradient(to left,#000 82%,transparent)}
.cardtabs.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
.cardtab{flex:none;border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--muted);
  padding:7px 9px;border-radius:8px 8px 0 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cardtab:hover{color:var(--ink)}
.cardtab.on{color:var(--ink);border-bottom-color:var(--coral,#FF6B5B)}
.cardpane h4{margin:12px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cardl{margin:0;display:grid;gap:0}
.cardl>div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.cardl>div:last-child{border-bottom:0}
.cardl dt{font-size:13px;color:var(--muted)}
.cardl dd{margin:0;font-weight:600;font-size:14px}
.cardl .cellsub{display:block;font-weight:400}
.smverdict{margin:10px 0 0}
.pltdetail{grid-column:1/-1;cursor:default}
.cmpname{font-weight:700;text-align:left;color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.cmpname:hover{text-decoration-color:currentColor}

/* The schools wizard: Places' question card, over the map and the list. */
.scask{z-index:700}
.scask .chips{display:flex;flex-wrap:wrap;gap:6px}
.scask .chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}
.scask .chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.scask .wizchips{display:flex;flex-wrap:wrap;gap:6px}
.scaskwhere{position:relative}
.scaskchk{display:flex;gap:8px;align-items:baseline;font-size:14px}
.scask .pfn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mist);font-size:12px;font-weight:700}
.smwizbtn{flex:none;white-space:nowrap}
.scwhy{color:var(--teal-ink,#0B7D55);margin-top:3px}

/* GCSE and A level results by subject, in a school card's Results tab. */
.scsubjects{margin-top:14px}
.subjtable{width:100%;border-collapse:collapse;font-size:13px}
.subjtable th{font-size:12px;color:var(--muted);text-align:left;font-weight:600;padding:4px 0;border-bottom:1px solid var(--line)}
.subjtable td{padding:5px 0;border-bottom:1px solid var(--line)}
.subjtable .num{text-align:right;padding-left:10px;font-variant-numeric:tabular-nums}
.subjtable .overall td{font-weight:600}
.subjblock + .subjblock{margin-top:18px}

/* League tables: a reference table beside the journey, set apart on the right. */
.jr .jrside{margin-left:auto;border:1px dashed var(--line);background:transparent}
.jr .jrside .jrtxt b::before{content:"▤ ";color:var(--accent)}
.jr .jrside.on{background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent)}
.jr .jrside.on .jrtxt span{color:var(--muted);opacity:1}
.lgpanel{max-width:1200px}
.lghead{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.lghead h2{margin:0 0 4px}
.lghow{max-width:520px;font-size:13px}
.lghow summary{cursor:pointer;color:var(--accent);font-weight:600}
.lghow p{margin:8px 0}
.lgbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.lgbar .control{max-width:240px}
.lgcount{margin:4px 0 8px}
.lgscroll{overflow-x:auto}
.lgtable{width:100%;border-collapse:collapse;font-size:13px}
.lgtable th{font-size:12px;color:var(--muted);text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:bottom}
.lgtable td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.lgtable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lgtable .lgavg{display:block;font-weight:400;font-size:11px;white-space:nowrap}
.lgtable tbody tr{cursor:default}
.lgtable tbody tr.lgheld{cursor:pointer}
.lgtable tbody tr.lgheld:hover{background:var(--mist)}
.lgname{font-weight:600}
.lgwhere{display:block}
.lgband{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;white-space:nowrap;background:var(--mist)}
.lgband.b1,.lgband.b5{background:var(--accent-soft);color:var(--ink);font-weight:600}
.lgband.b10,.lgband.b25{background:var(--accent-soft)}
#lgMore{margin-top:10px}
@media (max-width:720px){.jr .jrside .jrtxt span{display:none}}

/* The card's Overview: the few things that decide a school, each in context. */
.cardl.ovl{margin-top:10px}
/* Label above the figure: the card is narrow, and a figure with its England
   and council comparison needs the full width. */
.cardl.ovl>div{grid-template-columns:1fr;gap:2px;padding:9px 0}
.cardl.ovl dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.cardl.ovl dd{font-weight:400}
.cardl.ovl dd b{font-weight:700;font-size:15px}
.cardl.ovl dd .micro{font-size:12.5px}
.cardl.ovl dd .linkbtn{display:inline;margin-left:4px;font-size:12px;font-weight:600}
.avgb{color:var(--muted);white-space:nowrap}
.ovmore{margin-top:12px}
.ovmore .linkbtn{display:inline;font-size:12px;padding:0}
.sclg{margin-top:2px}
.sclg b{color:var(--ink)}
.chip.lgpriv{border-style:dashed}
.lgf{display:flex;flex-direction:column;gap:2px}
.lgf .micro{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.lgbar{align-items:flex-end}

/* Watchlist alerts: new arrivals on New, changes since flagging or saving on
   Flagged and Saved. A dot on a phone, so the four tabs still fit one row. */
.statetab .tabalert{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--s5);color:#fff;vertical-align:1px;white-space:nowrap}
.wlhint .alertline,#wlHint .alertline{color:var(--s5);font-weight:600}
.changes.fresh{background:rgba(200,68,47,.08);border-radius:8px;padding:4px 6px}
.changes.fresh .chglabel{color:var(--s5)}
@media (max-width:560px){
  .statetab .tabalert{font-size:0;padding:0;width:8px;height:8px;margin-left:4px;vertical-align:2px}
}
.statetab .n.hot{background:var(--s5);color:#fff;opacity:1;padding:0 7px;border-radius:999px}
/* The map's own note: updating, zoom in, or nothing here (and where to look). */
.smhere.smnote{cursor:default;font-size:13px;font-weight:500;max-width:min(560px,calc(100% - 120px));text-align:center;line-height:1.35}
.smhere.smnote .linkbtn{color:#fff;text-decoration:underline;font-weight:700;margin-left:4px}
.smhere.smnote .spinner{width:12px;height:12px;vertical-align:-1px;margin-right:4px}
/* The key's letter rows: the letter in a fixed column, its meaning wrapping beside it. */
.smkeybody > .smkletter{align-items:flex-start}
.smkletter b{flex:none;width:20px;text-align:center;font-size:12px}
.smkletter span{min-width:0}
.smkeybody > .smkhead{display:block;margin-top:4px;font-weight:600}
/* A letter or pin never parts from its word when the key wraps. */
.smkeystatic .kpair{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.smkeystatic .smkletters{column-gap:10px;row-gap:2px}
/* Opened, the key scrolls inside itself rather than growing off the top of the map. */
.smkey details[open] .smkeybody{max-height:min(46vh,420px);overflow-y:auto;padding-right:4px}

/* Partner offers: set apart from the tools, labelled where they appear. */
.poffers{display:grid;gap:10px;margin-top:16px}
.poffer{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;background:var(--panel);position:relative}
.ptag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-bottom:6px}
.pofftext{margin:2px 0 8px}
.poffacts{display:flex;gap:8px;flex-wrap:wrap}
.pdisc{margin:8px 0 0}
.poptin{display:grid;gap:6px;margin-top:10px}
.poptin label{display:flex;gap:6px;align-items:flex-start;font-size:13px}
.adtable{width:100%;border-collapse:collapse;font-size:13px}
.adtable th,.adtable td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.adtable .bad{color:var(--s5)}
.poptin .btn{justify-self:start}
.lgtable tr.lgtier td{background:var(--mist);padding-top:10px}

/* Where a free household meets a Plus feature (plusPromptHtml). */
.plusprompt{display:grid;gap:8px;justify-items:start;background:var(--wash, #F4F1EA);border-radius:18px;padding:16px 18px;margin:6px 0}
.plusprompt p{margin:0}
.plusprompt a.btn,.acbtns a.btn{text-decoration:none}
.plusprompt.compact{padding:12px 14px}

/* Saved homes: what the family saved from the portals with the extension. */
.sv{display:grid;gap:16px;max-width:980px}
.svstates{display:flex;gap:8px;flex-wrap:wrap}
.svstates button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;cursor:pointer}
.svstates button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.svstates button b{font-weight:700;margin-left:4px}
.svlist{display:grid;gap:12px}
.svcard{border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px 18px;display:grid;gap:10px}
.svtop{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.svtop h3{font-size:17px;margin:0}
.svtop .svprice{margin-left:auto;text-align:right;font-weight:800;font-size:18px}
.svtop .svprice small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-2)}
.svchips{display:flex;gap:6px;flex-wrap:wrap}
.svchips span{background:var(--wash, #F4F1EA);border-radius:999px;padding:3px 10px;font-size:13px}
.svacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.svacts a.btn,.svempty a.btn{text-decoration:none}
.svnote{width:100%;min-height:42px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;resize:vertical}
.svview{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px;font-size:14.5px}
.svempty{border:1px dashed var(--line);border-radius:20px;padding:22px;display:grid;gap:8px;justify-items:start}

/* Before you offer: the check of one home (homecheck.py). */
.hc{display:grid;gap:18px;max-width:980px}
.hcform{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.hcform label{display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
.hcform .btn{height:42px;justify-content:center}
.hchead{display:grid;gap:6px;border:1px solid var(--line);border-radius:22px;padding:18px 20px;background:#fff}
.hchead h3{font-size:22px;margin:0}
.hchead .hcsum{font-size:18px;font-weight:800}
.hcacts{display:flex;gap:8px;flex-wrap:wrap}
.hcacts a.btn{text-decoration:none}
.hcgrid{display:grid;gap:12px}
.hcsec{border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:#fff;display:grid;gap:8px;break-inside:avoid}
.hcsec header{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hcsec h4{font-size:16px;margin:0}
.hcsec ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14.5px}
.hcsec .src{font-size:12px;color:var(--ink-2)}
.hcv{font:600 11.5px var(--mono, monospace);text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:3px 9px}
.hcv.good{background:#D5F5E8;color:#0A5C3F}.hcv.ok{background:#EEF3F2;color:#3F6A70}
.hcv.look{background:#FFE9E5;color:#A93122}.hcv.unknown{background:#F4F1EA;color:#6B6458}
.hcsec .lead{font-weight:600}
.hcsch{display:grid;gap:4px;font-size:14.5px}
.hcq{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hcq div{border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:#fff}
.hcq ol{margin:6px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
.hcnote{font-size:13px;color:var(--ink-2)}
.hcpast table{width:100%;border-collapse:collapse;font-size:14px}
.hcpast td,.hcpast th{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.hcmatches{display:flex;gap:6px;flex-wrap:wrap}
@media print{
  .topbar,.mainnav,.hcnoprint,.plandock,#planDock,.toolbar,footer{display:none !important}
  .hcsec,.hchead,.hcq div{border-color:#ccc}
  body{background:#fff}
}

/* What shows while the app loads, in place of a page that is about to change. */
.bootsplash{display:flex;align-items:center;justify-content:center;gap:12px;min-height:50vh;
  color:var(--muted);font-size:17px}
.bootsplash .spinner{width:20px;height:20px;color:var(--teal)}

/* The three steps are a flow: number, arrow, number. The arrow is coral, the
   one accent the icons use, and goes quiet until something is starred. */
.jr{align-items:center}
.jrarrow{display:flex;align-items:center;flex:none;color:var(--coral);padding:0 2px}
.jrarrow svg{width:34px;height:13px;display:block}
.jr.noshort .jrarrow.later{color:var(--line)}
.jr .jrnum{width:22px;height:22px;font-size:12px}
.jr .jrstep.on .jrnum{background:#fff;color:var(--ink);border-color:#fff}
.jr.noshort [data-step="compare"] .jrtxt span{color:var(--cta);font-weight:600}
.jr.noshort [data-step="compare"].on .jrtxt span{color:#FFB4A9}
@media (max-width:900px){.jrarrow svg{width:22px}}

/* ---- the sub-menu: what is inside Homes and Plans ---- */
.subnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 20px;background:var(--bg);
  border-bottom:1px solid var(--line);position:sticky;top:var(--topbar-h,56px);z-index:590}
.subnav[hidden]{display:none}
.subnav button{border:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:14.5px;
  padding:7px 14px;border-radius:999px;cursor:pointer}
.subnav button:hover{background:var(--mist)}
.subnav button.on{background:var(--ink);color:#fff}
.subnav .subsep{width:1px;height:20px;background:var(--line);margin:0 6px}
.jr .jrwiz{margin-left:8px;border:0;border-radius:999px;background:var(--cta);color:var(--cta-ink);font:inherit;
  font-weight:700;font-size:14px;padding:8px 16px;cursor:pointer}
.jr .jrwiz:hover{background:var(--cta-deep)}
/* catchment lookup */
.lk{max-width:880px;margin:0 auto;padding:8px 0 40px}
.lkform{margin:6px 0 18px}
.lkout{display:flex;flex-direction:column;gap:14px}
.lkcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.lkcard h3{margin:0 0 8px;font-size:17px}
.lkrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.lkrow:first-of-type{border-top:0}
.lkin{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--mint);font-weight:700;font-size:12.5px}
.lkout .lkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.lkout .lkgrid{grid-template-columns:1fr}}

/* ---- Plans: the family, applications ---- */
.pn .pnpanel[hidden]{display:none}
.fycards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:6px 0 20px}
.fycard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px}
.fywho{display:flex;gap:16px;align-items:center}
.fywho h3{margin:0;font-size:25px;letter-spacing:-.02em}
.fystage{display:inline-block;margin-top:5px;padding:4px 12px;border-radius:999px;background:var(--accent-soft);font-size:13px;font-weight:700}
.fyribbon{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.fystep{display:flex;align-items:center;gap:5px;white-space:nowrap}
.fystep i{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block}
.fystep.past i{background:var(--mint)}
.fystep.now{color:var(--ink);font-weight:700}
.fystep.now i{width:14px;height:14px;background:var(--coral)}
.fyline{flex:1 1 8px;height:2px;background:var(--line);min-width:6px}
.fynext{background:var(--cta-soft);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.fyeyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cta-deep)}
.fyschools,.fyprefs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fychip{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:inherit;font-size:13px}
.fychip.add{border-style:dashed;color:var(--muted);cursor:pointer}
.fypref{padding:5px 11px;border-radius:999px;background:var(--bg);font-size:12.5px;color:var(--muted)}
.fytools{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
@media (max-width:900px){.fytools{grid-template-columns:1fr}}
.fytool{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px}
.fytool.hot{border:2px solid var(--cta)}
.fytool h3{margin:0;font-size:19px}
.fydate{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.pakid{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;margin:0 0 18px}
.pakhead{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.pakhead h3{margin:0 0 2px;font-size:21px}
.palist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.parow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.pagrip{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.paname{flex:1 1 auto;display:flex;flex-direction:column;gap:1px;min-width:0}
.pachip{padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pa-ok{background:var(--mint)}.pa-mid{background:#FFF3C9}.pa-bad{background:var(--cta-soft)}.pa-none{background:var(--bg);color:var(--muted)}
.pamove{display:flex;gap:4px}
.pamove button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:15px}
.pamove button:disabled{opacity:.35;cursor:default}
.pawarn{background:var(--cta-soft);border-radius:10px;padding:10px 12px;margin:10px 0 0;font-size:14px}
.pafoot{margin-top:6px}

/* ---- the Plan page: your schools, then the plan that follows ---- */
.nextchoose{margin-bottom:14px}
.nextchoose .chooselist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:8px 0}
.nextcard .parow{margin:0 0 8px}
.ndrow{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.ndrow:first-child{border-top:0}
.ndline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.ndstop{display:inline-flex;flex-direction:column;gap:1px;padding:7px 14px;border-radius:14px;background:var(--accent-soft);font-size:13.5px}
.ndstop.now{background:var(--panel);border:1px solid var(--line)}
.ndstop.soon{background:var(--cta-soft)}
.ndstop.minor{opacity:.75}
.ndarrow{color:var(--coral);font-size:18px}

.dashresume{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 18px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;max-width:520px}
.dashresume[hidden]{display:none}
.dashresume b{font-size:15px}
.dashresume span{font-size:13.5px;color:var(--muted);flex:1 1 auto}
.dashresume i{font-style:normal;color:var(--coral);font-size:20px}
.dashresume:hover{border-color:var(--accent)}

/* ---- top-bar dropdowns ---- */
.navgroup{position:relative;display:inline-flex;align-items:center}
.navmenu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:250px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:800}
.navgroup.open .navmenu{display:flex;flex-direction:column;gap:2px}
.navmenu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:0;
  background:transparent;font:inherit;color:var(--ink);padding:9px 12px;border-radius:10px;cursor:pointer}
.navmenu button b{font-size:14.5px}
.navmenu button span{font-size:12.5px;color:var(--muted)}
.navmenu button:hover,.navmenu button:focus-visible{background:var(--mist)}
.navmenu button.on{background:var(--accent-soft)}
.navmenu button.on b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-right:8px}
@media (max-width:760px){.navmenu{left:auto;right:0}}
.jr.noshort [data-pltab="compare"] .jrtxt span{color:var(--cta);font-weight:600}

/* phone: a stage ribbon wraps instead of running off, and a ranked choice keeps its buttons */
.fyribbon{flex-wrap:wrap;row-gap:6px}
.parow{flex-wrap:wrap}

.wmahead{color:var(--cta)}

/* ---- phone: the five sections stay on ONE row, icon over label, alerts as a corner dot ---- */
@media (max-width:860px){
  .mainnav{flex-wrap:nowrap}
  .navgroup{flex:1 1 0;min-width:0;position:relative}
  .navgroup .navitem{width:100%;justify-content:center}
  .navmenu{position:fixed;left:8px;right:8px;min-width:0}
}
@media (max-width:620px){
  .navgroup .navitem{flex-direction:column;gap:2px;padding:7px 2px;font-size:11.5px;line-height:1.1}
  .navitem .ico{width:21px;height:21px}
  .navgroup .navbadge{position:absolute;top:3px;left:calc(50% + 4px);min-width:16px;height:16px;padding:0 4px;font-size:10px}
}

/* "Your schools" tray: one slim row, so the list above keeps its room. The
   chips scroll sideways instead of stacking, and long names are cut short
   (the full name is on the chip's tooltip and in Compare). */
.dockchips{flex-wrap:nowrap;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scrollbar-width:thin}
.dockchip{flex:none;max-width:200px;font-size:12.5px}
.dockchip .dockname{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 2px 4px 10px}
.dockchip .dockx{padding:2px 8px 2px 3px}
.dockhead{margin-bottom:2px}
.dockhead .btn.small{padding:4px 12px;font-size:13px}

/* Check a home: what to look at first; the ranking note folds away */
.hclooks{list-style:none;margin:10px 0 0;padding:12px 14px;background:var(--cta-soft);border-radius:12px;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.hclookhead{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cta-deep)}
.plhow{margin:4px 0 8px}
.plhow summary{cursor:pointer}
/* phone: the map key folds into More, and the wizard button stays whole */
@media (max-width:900px){
  .smkeystatic{display:none}
  #scWizBtn{flex:none;white-space:nowrap}
  .smsearch{flex:1 1 150px;min-width:130px}
}

/* Your family: the cards, then everything you can change, on one page */
.fyeditor{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.fyeditorhead{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}
#pfSteps{display:none}

.gridmore{display:flex;align-items:center;justify-content:center;gap:14px;padding:22px 0 40px}

/* what kinplace holds where you are looking */
.sccoverage{display:flex;gap:10px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;margin:8px 12px;padding:9px 12px;
  border-radius:12px;font-size:13px;line-height:1.4;background:var(--mist);color:var(--ink)}
.sccoverage.part{background:#FFF3C9}
.sccoverage.gap{background:var(--cta-soft)}
.sccoverage.note{background:var(--bg);border:1px solid var(--line)}

/* The map's own controls and panes use z-index up to 1000; keep them inside the map
   so the top-bar menus always sit over them. */
.leaflet-container{isolation:isolate}

/* ---- Your schools: one pill on the map, and Your plan as the sheet it opens ---- */
.scpill{position:absolute;right:16px;top:16px;z-index:500;display:flex;align-items:center;gap:6px;background:var(--panel);
  border-radius:999px;padding:5px 5px 5px 4px;box-shadow:0 6px 20px -8px rgba(14,59,67,.38);max-width:calc(100% - 100px)}
.scpill[hidden]{display:none}
.scpill.empty{padding:9px 16px;font-size:13px;color:var(--muted)}
.scpilllab{border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:6px 10px 6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.scpilllab:hover{background:var(--mist)}
.scstar{color:var(--coral)}
.scpill.pulse,.plandocktab span.pulse{animation:scpulse .7s ease}
@keyframes scpulse{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.scpill.pulse,.plandocktab span.pulse{animation:none}}
.docksechead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.docksechead h4{margin:0}
.dockrows{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dockrows li{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:12px;padding:2px 4px 2px 12px}
.dockrowname{border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-align:left;padding:8px 0;cursor:pointer;flex:1 1 auto;min-width:0}
.dockrowname:hover{text-decoration:underline}
.dockrows .dockx{border:0;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:6px 10px}
.dockrows .dockx:hover{color:var(--cta)}
#planDockBody section.flash{animation:secflash 1.2s ease}
@keyframes secflash{0%,60%{box-shadow:0 0 0 2px var(--coral) inset}100%{box-shadow:none}}
.smbackplan{align-self:flex-start;padding:0 0 6px}
@media (max-width:900px){.scpill{top:12px;right:12px}}
.docksum{margin:0 0 4px;font-size:13.5px;color:var(--muted)}
.docksum b{color:var(--ink)}

/* ---- schools list: tighter cards, the ones in your list shaded green ---- */
.smlist .scrow{padding:8px 10px;gap:9px}
.smlist .scname{line-height:1.25}
.smlist .scmeta{margin:2px 0}
.smlist .scscore{font-size:12px;line-height:1.3}
.smlist .sclg,.smlist .scscore .micro{font-size:12px;line-height:1.3}
.smlist .sclg{display:inline;margin:0}
.smlist .scwhy{display:inline;margin:0 0 0 8px;font-size:12px;line-height:1.3}
.smlist .scrow.picked{background:var(--mint);border-color:#8FD9BC;box-shadow:none}
.smlist .scrow.focus,.smlist .scrow.picked.focus{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.smlist .scrow.picked .star.on{background:#fff}

/* ---- the wizard can be put away ---- */
.scaskx{position:sticky;top:0;float:right;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;margin:-6px -8px 0 8px}
.scaskx:hover{color:var(--ink);border-color:var(--ink)}

/* ---- Your plan: a little less bland ---- */
.dockico{width:22px;height:22px;margin-right:8px;vertical-align:-5px;--ico-w:2.6;--ico-wa:3}
#planDockBody section h4{display:flex;align-items:center;margin:0 0 8px}
#planDockBody section .micro{font-weight:400}
.dockkids{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.dockkid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:8px 10px;border-radius:16px;background:var(--bg)}
.dockkid b{font-size:14px}
.docktowns{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.docktowns li{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:var(--cta-soft);font-weight:600;font-size:14px}
.docktowns .dockico{width:18px;height:18px;margin:0}
.dockrows li{background:var(--mint);border-color:#8FD9BC}
#planDockBody section{padding:14px 0}

/* the add button sits in the corner so the text can use the full width */
.smlist .scrow{position:relative}
.smlist .scrow .star{position:absolute;top:8px;right:10px}
.smlist .scrow .scname{padding-right:78px}
.smlist .scrow .scmeta{gap:4px 6px}
.smlist .scrow .scname{font-size:14px;line-height:1.2}
.smlist .scrow .scmeta{line-height:1.1;margin:3px 0 2px}
.smlist .scrow .scmeta .lab{padding:1px 7px;font-size:10px;line-height:1.5}
.smlist .scrow .scmeta .micro{font-size:11px;margin-left:2px}
.smlist .scrow .scscore,.smlist .scrow .sclg,.smlist .scrow .scwhy{font-size:11.5px;line-height:1.25}
.smlist .scrow .scwhy{margin-left:6px;white-space:nowrap}

.scwherekm{font:inherit;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:2px 6px;background:#fff;cursor:pointer}
#planDockBody section h4 .micro{margin-left:8px}
/* the cross stays in the corner and does not sit over the fields */
.scask form{position:relative}
.scaskx{position:sticky;top:6px;float:none;display:block;margin:0 0 -36px auto;width:34px;height:34px}
.scask form > .eyebrow{display:block;padding-right:44px}

/* ---- accessibility: focus you can see, targets you can hit ---- */
.dashfind:focus-within{box-shadow:0 0 0 3px var(--cta),0 12px 32px -16px rgba(14,59,67,.35)}
.pnname:focus-visible{border-bottom:2px solid var(--ink)}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.scrow:focus-visible,.dcard:focus-visible{outline-color:var(--cta)}
/* Small controls keep their look on a touch screen but get a 44px hit area. */
@media (pointer:coarse){
  .smtools button,.jrstep,.star,.dockx,.towchip button,.famchip,.adminbtn,.acctbtn,.scwherekm,#scWhereKm,.linkbtn,.dockrowname{position:relative}
  .smtools button::after,.jrstep::after,.star::after,.dockx::after,.towchip button::after,.famchip::after,.adminbtn::after,.acctbtn::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .navitem{min-height:44px}
  #scWhereKm{min-height:40px;padding:6px 10px}
}

/* ---- the county load card: stages, a moving stripe while it waits, the run as a whole ---- */
.natlive{position:sticky;top:70px;z-index:6;box-shadow:0 8px 22px -16px rgba(14,59,67,.5)}
.natlivehead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.natpips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}
.natpip{display:block;height:9px;border-radius:5px;background:var(--line);overflow:hidden;position:relative}
.natpip b{display:block;height:100%;background:#2F6FD6;transition:width .4s}
.natpip.done b{background:#2E7D4F}
.natpip.now.wait b{width:100% !important;background:repeating-linear-gradient(110deg,#2F6FD6 0 10px,#8DB3EE 10px 20px);background-size:200% 100%;animation:natstripe 1.4s linear infinite}
@keyframes natstripe{from{background-position:0 0}to{background-position:-40px 0}}
@media (prefers-reduced-motion:reduce){.natpip.now.wait b{animation:none}}
.natstage{font-size:14px}
.natwhy.waiting{color:#8F5500}
.natrun{display:grid;gap:5px;border-top:1px solid var(--line);padding-top:8px;font-size:13.5px}

/* ---- Places: the same shape as Schools (chips for your towns, one pill, Choose after Compare) ---- */
.plpanel .sctowns{padding:2px 4px 8px}
#plPill{z-index:600}
.plchoosebox{max-width:980px;margin:6px auto 30px}
.plchoosehead h2{font-size:1.6rem;margin:2px 0 6px}
.plpicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:14px 0}
.plpick{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.plpick.on{background:var(--mint);border-color:#8FD9BC}
.plpick header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.plpick h3{margin:0;font-size:1.2rem}
.plpickfacts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plpickfacts li{display:flex;align-items:baseline;gap:8px}
.plpickfacts b{font:800 1.25rem/1 var(--font)}.plpickfacts span{color:var(--muted);font-size:13.5px}
.plpickgo{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.plpicknext{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.plpickh{margin:22px 0 0;font-size:1.05rem}
.plpickempty{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 28px;max-width:640px}
.plpickempty h2{margin:0 0 6px}

.pl.plchoose{display:block !important}
.pl.plchoose[hidden]{display:none !important}
.plchoosebox{width:100%}

/* Places puts its panel on the left, as Schools does. On a phone the panel goes below the map. */
.plscan .plpanel{order:-1}
@media (max-width:980px){.plscan .plpanel{order:0}}

/* Council data requests (Admin, council table) */
.natreq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; font-size: 12px; color: var(--ink); }
.natreq i, .natreqsum i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.natreq small { color: var(--muted, #6b7c80); font-size: 11px; }
.natreq.needs { font-weight: 600; }
.natreq.needs b { color: #CF3F2E; }
.natreqsum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 14px 0 10px; padding: 10px 12px; border: 1px solid var(--line, #D8E0E2); border-radius: 12px; font-size: 13px; }
.natreqsum > b { margin-right: 6px; }
.natreqsum .needs { flex-basis: 100%; }
.natreqsum .needs b { color: #CF3F2E; }

.natsch { display: block; margin-top: 4px; font-size: 12px; }
.natschools { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line, #D8E0E2); border-radius: 10px; font-size: 12px; max-height: 320px; overflow: auto; }
.natschools p { margin: 4px 0; }
.natschlist { list-style: none; margin: 4px 0 8px; padding: 0; columns: 2 220px; column-gap: 18px; }
.natschlist li { break-inside: avoid; padding: 2px 0; }
.natschlist a { color: inherit; }

/* Key dates (Plans > Key dates): the household's timeline beside its calendar and email controls. */
.kdnexthero{background:var(--cta-soft);border:1px solid var(--cta);border-radius:20px;padding:14px 18px;display:grid;gap:4px;margin-bottom:16px}
.kdnexthero b{font-size:19px}
.kdgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.kdkids,.kdside{display:grid;gap:14px;min-width:0}
.kdkidhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.kdkidhead label.check{margin:0}
.kdlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kdev{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 8px;border-top:1px solid var(--line);border-radius:10px}
.kdev:first-child{border-top:0}
.kdev .kdwhen{display:grid;align-content:start}
.kdev.deadline .kdwhen b{color:var(--cta-deep)}
.kdev.next{background:var(--accent-soft);border-top-color:transparent}
.kdev.past{opacity:.6}
.kdsrcline{margin-top:2px}
.kdsrc{display:inline-block;font-size:11px;padding:0 6px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.kdsrc.council{background:var(--mint);border-color:transparent}
.kdcal{display:flex;flex-wrap:wrap;gap:6px}
.kdcal a.btn{text-decoration:none}
.kdside select,.kdside input[type=email]{width:100%}
.kddone summary{cursor:pointer;margin-top:6px}
.kdnext{margin:6px 0 10px;font-size:14px}
.kdtabnext{font-size:12px;opacity:.8;margin-left:4px}
@media (max-width:860px){
  .kdgrid{grid-template-columns:1fr}
  .kdev{grid-template-columns:1fr;gap:2px}
  .kdtabnext{display:none}
}