/* ===========================================================================
   /plan/ — Planning, without the map
   ---------------------------------------------------------------------------
   Same tokens, same type, same spacing as /rent/, so the two sections of the
   site are one site. The header furniture itself is not here at all — it is
   in shared/chrome.css, which this page loads first.

   Where it deliberately differs from /rent/: the unit here is a PROCESS, not
   a thing. A rental building is a fixed object with measurements, which is
   why those cards are compact and dense. An application is a position in a
   sequence that will change, so these cards lead with a sentence and the
   application page is laid out as four questions with the questions as the
   headings. More prose, fewer numbers, wider measure.
   ========================================================================= */
:root{
  --ink:#101418;
  --ink-2:#4a5560;
  --ink-3:#7c8793;
  --line:#e6e9ec;
  --line-2:#d2d7dd;
  --bg:#fbfbfc;
  --panel:#fff;
  --panel-2:#f4f6f8;

  --accent:#0f3b43;
  --accent-ink:#0f3b43;
  /* Planning is the purple half of the site — the same #5b3dc4 the map
     explorer's Applications tab has always used. It was briefly blue here,
     which made this section look like a third thing rather than the other
     half of a pair. shared/chrome.css reads --sect* for the brand's PLANNING
     label and for whatever is selected. */
  --aic:#5b3dc4;
  --sect:#5b3dc4;
  --sect-tint:#ece6fb;
  --sect-ink:#4a2fa8;
  --amber:#c77d03;
  --red:#d64541;

  --font:"Helvetica Neue",Helvetica,Roboto,Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --sh1:0 1px 2px rgba(16,20,24,.05),0 2px 8px rgba(16,20,24,.05);
  --sh2:0 2px 6px rgba(16,20,24,.07),0 12px 32px rgba(16,20,24,.09);
  --r:14px;
  --hdr-h:62px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;}
button{font-family:var(--font);}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
@media (max-width:640px){ .wrap{padding:0 16px;} }

/* ===== Header layout =====================================================
   The furniture is shared; only the bar that holds it is per-section, and it
   is the same 62px as /rent/ and map mode.
   ========================================================================= */
.hdr{position:sticky;top:0;z-index:600;height:var(--hdr-h);
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--panel);border-bottom:1px solid var(--line);}
/* .hdr-nav is in shared/chrome.css. */
.hdr-search{position:relative;flex:1 1 auto;max-width:380px;margin-left:auto;margin-right:2px;}
.hdr-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);pointer-events:none;}
.hdr-search input{width:100%;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 12px 9px 33px;font:inherit;font-size:13.5px;background:var(--panel);
  color:var(--ink);outline:none;}
.hdr-search input:focus{border-color:var(--aic);box-shadow:0 0 0 3px rgba(91,61,196,.12);}
.hdr-acct{display:flex;align-items:center;gap:6px;flex:none;}
.ac{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:var(--sh2);z-index:700;}
.ac-i{display:block;padding:9px 10px;border-radius:9px;text-decoration:none;}
.ac-i:hover,.ac-i.sel{background:var(--panel-2);}
.ac-t{display:block;font-size:13.5px;font-weight:600;line-height:1.25;}
.ac-s{display:block;font-size:12px;color:var(--ink-3);}
@media (max-width:860px){ .hdr-nav{display:none;} }

/* ===== Hero ==============================================================
   One question and one input. No filters, no counts as the headline, and no
   map: someone who walked past a notice sign wants to type the address on the
   sign and nothing else.
   ========================================================================= */
.hero{background:var(--panel);border-bottom:1px solid var(--line);
  padding:76px 0 56px;overflow:hidden;}
.hero h1{font-size:clamp(32px,5.2vw,56px);line-height:1.05;letter-spacing:-.035em;
  margin:0 0 16px;font-weight:700;max-width:16ch;}
.hero h1 em{font-style:normal;color:var(--aic);}
.hero-p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0 0 30px;}
.hero-f{display:flex;gap:10px;max-width:620px;}
.hero-f input{flex:1 1 auto;border:1px solid var(--line-2);border-radius:11px;
  padding:14px 16px;font:inherit;font-size:15px;background:var(--panel);outline:none;}
.hero-f input:focus{border-color:var(--aic);box-shadow:0 0 0 3px rgba(91,61,196,.12);}
.hero-f button{flex:none;border:0;border-radius:11px;background:var(--accent);
  color:#fff;font-weight:600;font-size:15px;padding:14px 26px;cursor:pointer;}
.hero-f button:hover{background:#0b2f36;}
.hero-n{margin:16px 0 0;font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;}

/* ===== Page furniture ==================================================== */
.pg{padding:var(--pg-top) 24px 64px;}
.ph{position:relative;margin:0 0 var(--sp-ts);}
.ph-k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aic);margin-bottom:7px;}
.ph h1{font-size:var(--h-page);line-height:var(--h-page-lh);letter-spacing:var(--h-page-ls);
  margin:0 0 var(--sp-tt);font-weight:700;max-width:22ch;}
.ph-s{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:62ch;margin:0;}
.ph-s a{color:var(--accent);}
.sect{margin:0 0 46px;}
/* A section that IS the page needs the gap; one nested inside .pg does not,
   because .pg already carries it. */
#view > .sect{padding-top:var(--pg-top);}
.sect h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 15px;display:flex;align-items:center;gap:8px;}
.more{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;
  color:var(--accent);text-decoration:none;}
.more:hover{text-decoration:underline;}
.ml-n{background:var(--panel-2);color:var(--ink-2);border-radius:20px;
  padding:1px 8px;font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums;}

/* The snapshot warning. Quiet but unmissable, and repeated on every view that
   shows a status rather than stated once on the home page — most people
   arrive at a deep link and never see the home page. */
.snap{font-size:13px;line-height:1.55;color:var(--ink-2);background:#fffaf0;
  border:1px solid #f0dfbd;border-left:3px solid var(--amber);
  border-radius:10px;padding:11px 14px;margin:0 0 20px;max-width:78ch;}

/* ===== The application card ==============================================
   Leads with the address, because that is what was searched for, and carries
   a sentence rather than a row of codes.
   ========================================================================= */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));}
.pc{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);transition:box-shadow .15s,border-color .15s;}
.pc:hover{box-shadow:var(--sh1);border-color:var(--line-2);}
.pc-hit{display:block;padding:16px 17px;text-decoration:none;}
.pc-addr{font-size:16px;font-weight:700;letter-spacing:-.018em;
  line-height:1.25;}
.pc-dist{font-size:12.5px;color:var(--aic);font-weight:600;margin-top:3px;
  font-variant-numeric:tabular-nums;}
.pc-say{margin:9px 0 13px;font-size:14px;line-height:1.55;color:var(--ink-2);}
.pc-say b{color:var(--ink);font-weight:600;}
.pc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12px;color:var(--ink-3);}
.pc-when,.pc-who{font-variant-numeric:tabular-nums;}
.pc-who{font-weight:600;color:var(--ink-2);}

/* The stage, as a word rather than a City status string. Four colours,
   spaced so no two read as the same state. */
.stage{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:2px 9px;border-radius:20px;}
.st-rev{background:#e8f0fe;color:#1a4fbd;}   /* under review — the live one */
.st-ok {background:#e4f6ec;color:#15713f;}   /* approved */
.st-app{background:#f3ecfd;color:#5b3dc4;}   /* at the tribunal */
.st-cl {background:var(--panel-2);color:var(--ink-3);} /* closed */
.st-un {background:var(--panel-2);color:var(--ink-3);}

.pc-heart{position:absolute;top:10px;right:10px;z-index:2;
  width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;
  background:transparent;cursor:pointer;color:var(--ink-3);
  transition:color .15s,background .15s,transform .12s;}
.pc-heart svg{width:17px;height:17px;display:block;}
.pc-heart:hover{background:var(--panel-2);color:var(--ink-2);}
.pc-heart:active{transform:scale(.9);}
.pc-heart.on{color:var(--red);}
.pc-heart.on svg path{fill:currentColor;}
.pc-heart:focus-visible{outline:2px solid var(--aic);outline-offset:1px;}

/* ===== One application ===================================================
   Four questions, the headings ARE the questions. Wider measure than the
   rentals pages because the answers are sentences, not figures.
   ========================================================================= */
.app .ph .pc-heart{top:0;right:0;width:40px;height:40px;}
.app .pc-heart svg{width:21px;height:21px;}
.qa{border-top:1px solid var(--line);padding:30px 0 6px;max-width:78ch;}
.qa:first-of-type{border-top:0;padding-top:0;}
.qa h2{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;}
.lede{font-size:19px;line-height:1.45;letter-spacing:-.012em;margin:0 0 12px;}
.lede b{font-weight:700;}
.sub{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:0 0 12px;}
.sub a{color:var(--accent);}
/* Where the City's record is silent. Marked as a gap rather than left out —
   "how many homes" is the first thing everyone asks and the dataset does not
   carry it, so the page has to say so. */
.gap{font-size:13.5px;line-height:1.6;color:var(--ink-3);border-left:2px solid var(--line-2);
  padding:2px 0 2px 13px;margin:16px 0 0;}
.file{font-size:12.5px;color:var(--ink-3);margin-top:16px;}
.file code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--panel-2);padding:2px 6px;border-radius:5px;}

/* The stage track. The single most useful thing on the page for someone whose
   question is "is this actually happening" — a position in a sequence reads
   in a way that "NOAC Issued" never will. */
.track{display:flex;align-items:center;gap:0;margin:0 0 20px;flex-wrap:wrap;}
.tr-step{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ink-3);padding:6px 14px 6px 0;}
.tr-step + .tr-step{border-left:1px solid var(--line);padding-left:14px;}
.tr-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:none;}
.tr-step.on{color:var(--ink);}
.tr-step.on .tr-dot{background:var(--aic);box-shadow:0 0 0 3px rgba(91,61,196,.18);}

.acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px;}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:10px;}
.btn:hover{background:#0b2f36;}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line-2);}
.btn.ghost:hover{background:var(--panel-2);}

/* ===== Ward / applicant index ============================================ */
.wards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));}
.wd{display:flex;align-items:center;gap:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;text-decoration:none;}
.wd:hover{border-color:var(--line-2);box-shadow:var(--sh1);}
.wd-n{flex:none;min-width:36px;height:36px;padding:0 8px;border-radius:9px;
  background:var(--panel-2);color:var(--ink-2);display:grid;place-items:center;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
.wd-t{min-width:0;}
.wd-t b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wd-t span{display:block;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;}

/* ===== The explainer =====================================================
   Prose, at a reading measure. It is the most durable page in the section:
   it does not go stale when the data refreshes.
   ========================================================================= */
.prose{max-width:none;}
.prose h2{font-size:21px;letter-spacing:-.022em;font-weight:700;color:var(--ink);
  text-transform:none;margin:44px 0 14px;max-width:72ch;}
.prose p{font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:72ch;margin:0 0 14px;}
.steps{max-width:72ch;padding-left:22px;margin:0 0 18px;}
.steps li{font-size:15.5px;line-height:1.68;color:var(--ink-2);margin-bottom:13px;}
.steps li b{color:var(--ink);font-weight:600;}
.defs{max-width:72ch;margin:0 0 18px;}
.defs dt{font-size:15px;font-weight:700;color:var(--ink);margin-top:16px;}
.defs dd{margin:4px 0 0;font-size:15px;line-height:1.62;color:var(--ink-2);}

/* ===== Cards, empty states, My List ====================================== */
.cards3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.c3{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:19px 20px;text-decoration:none;}
.c3:hover{border-color:var(--line-2);box-shadow:var(--sh1);}
.c3 h3{margin:0 0 7px;font-size:16px;font-weight:700;letter-spacing:-.018em;}
.c3 p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);}
.empty{border:1px dashed var(--line-2);border-radius:var(--r);
  padding:44px 28px;text-align:center;background:var(--panel);}
.empty h1{font-size:var(--h-page);letter-spacing:var(--h-page-ls);
  line-height:var(--h-page-lh);margin:0 0 10px;}
.empty p{color:var(--ink-2);font-size:14.5px;max-width:52ch;margin:0 auto 20px;line-height:1.6;}
.ml-plans{list-style:none;margin:0;padding:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);overflow:hidden;}
.ml-plan{display:flex;align-items:center;gap:14px;padding:13px 16px;}
.ml-plan + .ml-plan{border-top:1px solid var(--line);}
.ml-plan-a{font-weight:600;font-size:14.5px;flex:1 1 auto;min-width:0;}
.ml-plan-s{font-size:12.5px;color:var(--ink-3);}
.ml-plan-go{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;flex:none;}
.ml-foot{border-top:1px solid var(--line);padding-top:22px;margin-top:30px;}
.ml-foot p{color:var(--ink-2);font-size:14px;max-width:62ch;margin:0 0 14px;}
.ml-foot b{color:var(--ink);}

/* ===== Footer — the same one /rent/ draws ================================ */
.ftr{border-top:1px solid var(--line);background:var(--panel);margin-top:40px;}
.ftr-in{max-width:1180px;margin:0 auto;padding:46px 24px 34px;display:grid;gap:34px;
  grid-template-columns:1.6fr 1fr 1fr 1fr;}
.ftr-brand{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-bottom:11px;}
.ftr-brand span{color:var(--ink-3);}
.ftr-col p{font-size:13px;line-height:1.62;color:var(--ink-3);margin:0;max-width:38ch;}
.ftr-col h4{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 11px;}
.ftr-col a{display:block;font-size:13.5px;color:var(--ink-2);text-decoration:none;
  padding:4px 0;}
.ftr-col a:hover{color:var(--ink);text-decoration:underline;}
.ftr-legal{max-width:1180px;margin:0 auto;padding:18px 24px 34px;
  border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--ink-3);}
@media (max-width:860px){ .ftr-in{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .ftr-in{grid-template-columns:1fr;gap:26px;} }

@media (max-width:640px){
  .hero{padding:52px 0 44px;}
  .hero-f{flex-direction:column;}
  .pg{padding:28px 16px 48px;}
  .grid{grid-template-columns:1fr;}
}

/* ===========================================================================
   The hero drawing, the tinted band, featured cards, the ward map and the
   research filters — added 16 Oct 2026.
   ========================================================================= */

/* ===== Hero, now two columns ============================================= */
/* Two columns, the drawing in the half of the hero that was empty — the same
   proportions /rent/ uses, so the two heroes are one design. It drops out
   under 1000px: it is a hover affordance on a page that has a real map
   further down, and on a phone it would be a tall grey picture. */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:48px;align-items:center;}
@media (max-width:1200px){ .hero-in{gap:32px;} }
.hero-t{min-width:0;}
/* DRAWN BIGGER THAN ITS COLUMN, AND CROPPED — the same treatment as /rent/'s
   hero drawing, down to the numbers, so the two sections read as one design.
   At 100% it is a diagram politely occupying half the hero; at this scale it
   is a drawing the page is a window onto, and the east end runs off the right
   margin on purpose.

   THE FADE HAPPENS INSIDE THE BOX. The radii are smaller than the element and
   the last stop is at 88%, so the lines are gone before they reach any edge —
   a mask whose transparent stop lands outside the box is opaque everywhere
   you can see it, and the drawing still ends at a hard cut. */
.wsk{position:relative;min-width:0;}
.wsk-art{position:relative;height:420px;overflow:hidden;
  width:calc(100% + 270px);margin-left:-60px;
  -webkit-mask-image:radial-gradient(68% 70% at 50% 50%, #000 26%, rgba(0,0,0,.55) 60%, transparent 88%);
  mask-image:radial-gradient(68% 70% at 50% 50%, #000 26%, rgba(0,0,0,.55) 60%, transparent 88%);}
.wsk-art svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  display:block;width:124%;height:auto;}
@media (max-width:1200px){ .wsk-art{height:360px;width:calc(100% + 120px);margin-left:-30px;} }
/* The mesh is texture, not a layer you point at: same stroke as /rent/'s
   outlines, no pointer events, so the ward above it always takes the hover. */
.wsk-mesh path{fill:none;stroke:#d4d9e0;stroke-width:0.7;stroke-linejoin:round;
  pointer-events:none;}
/* The wards sit over it with no fill of their own, so what you see at rest is
   the neighbourhood mesh — identical to /rent/ — and what lights up under the
   cursor is a whole ward. */
.wsk-g path{fill:rgba(0,0,0,0);stroke:transparent;stroke-width:0.7;
  stroke-linejoin:round;cursor:pointer;transition:fill .12s ease,stroke .12s ease;}
/* The one difference from /rent/: the hatch is purple, not black. */
.wsk-g path:hover{fill:url(#wskHatch);stroke:#5b3dc4;stroke-width:1.4;}
/* The caption is the readout; it holds its height so the hero does not jump
   as the cursor crosses a boundary. */
.wsk-cap{min-height:46px;margin-top:6px;text-align:center;font-size:13px;
  color:var(--ink-3);line-height:1.3;position:relative;z-index:2;}
.wsk-cap b{display:block;font-size:26px;font-weight:700;color:var(--ink);
  letter-spacing:-.03em;line-height:1.1;}
.wsk-cap span{display:block;}
@media (max-width:1000px){ .hero-in{grid-template-columns:1fr;} .wsk{display:none;} }

/* ===== A tinted band =====================================================
   The same device /rent/ uses between home-page sections, in this section's
   purple rather than its amber. It fades to the page background rather than
   ending on a line, so the band reads as a wash and not as a coloured box.
   The cards on top stay white and lift off it. */
.sect-wash{background:linear-gradient(180deg,#f4f1fc 0%,#faf8fe 58%,var(--bg) 100%);
  border-top:1px solid #e7e0f8;border-bottom:1px solid var(--line);}
/* A tinted band needs its own inset, or its top border sits on the title.
   12px against a 40px heading was the tightest thing on the site. */
.pg-tight{padding-top:var(--sp-band);padding-bottom:calc(var(--sp-band) - 12px);}
.sect-top{border-top:1px solid #e7e0f8;padding-top:var(--sp-band);}

/* ===== Section headings, borrowed from /rent/ ============================ */
.sect-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:var(--sp-ts);flex-wrap:wrap;}
/* The page title. One size for the whole site — see --h-page in
   shared/chrome.css. */
.sect-hd h2{margin:0;font-size:var(--h-page);font-weight:700;
  letter-spacing:var(--h-page-ls);line-height:var(--h-page-lh);
  text-transform:none;color:var(--ink);}
.sect-hd p{margin:var(--sp-tt) 0 0;font-size:14px;line-height:1.6;
  color:var(--ink-2);max-width:68ch;}
.sect-hd p a{color:var(--accent);}
.sect-more{text-decoration:none;font-size:13.5px;font-weight:600;
  color:var(--accent);white-space:nowrap;}
.sect-more:hover{text-decoration:underline;}

/* ===== Featured cards ====================================================
   Taller than an ordinary card and carrying two things the others do not: the
   project's working name where there is one, and the size that put it on the
   list — the number has to be visible or "featured" is a claim with no
   evidence behind it. */
.grid-feat{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.pc-feat{border-color:var(--line-2);}
.pc-feat .pc-hit{padding:18px 19px;}
.pc-proj{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sect-ink);margin-bottom:5px;}
.pc-size{font-size:13px;font-weight:600;color:var(--ink-2);margin-top:4px;
  font-variant-numeric:tabular-nums;}

/* ===== The ward map ======================================================
   Lifted from /rent/'s neighbourhoods page so the two halves behave the same.
   ========================================================================= */
.hmap{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:20px;align-items:start;}
.hmap-map{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 10px 4px;}
.hmap-canvas{position:relative;z-index:0;height:540px;border-radius:11px;overflow:hidden;}
.hmap-read{min-height:42px;padding:10px 4px 2px;border-top:1px solid var(--line);margin-top:8px;}
.hmap-read b{display:block;font-size:15px;font-weight:700;letter-spacing:-.015em;}
.hmap-read span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;}
.hmap-key{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 4px 4px;
  font-size:11.5px;color:var(--ink-3);}
.wk-i{display:inline-flex;align-items:center;gap:5px;}
.wk-sw{width:13px;height:9px;border-radius:2px;display:inline-block;}
.hmap-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);}
.hl-srch{position:relative;padding:10px;border-bottom:1px solid var(--line);}
.hl-srch svg{position:absolute;left:21px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);pointer-events:none;}
.hl-srch input{width:100%;border:1px solid var(--line-2);border-radius:9px;
  padding:8px 10px 8px 32px;font:inherit;font-size:13px;outline:none;background:var(--panel);}
.hl-srch input:focus{border-color:var(--sect);box-shadow:0 0 0 3px rgba(91,61,196,.12);}
.hl-scroll{max-height:520px;overflow-y:auto;padding:6px;}
.hl-r{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;
  width:100%;border:0;background:transparent;font-family:var(--font);
  cursor:pointer;text-align:left;}
.hl-r[hidden]{display:none;}
.hl-r:hover,.hl-r.on{background:var(--sect-tint);}
.hl-r.sel{background:var(--sect);color:#fff;}
.hl-r.sel .hl-n{color:rgba(255,255,255,.72);}
.hl-sw{flex:none;width:10px;height:10px;border-radius:3px;}
.hl-nm{flex:1;min-width:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hl-n{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.hl-none{padding:18px;text-align:center;font-size:13px;color:var(--ink-3);}
.hres{margin-top:36px;padding:30px 0 10px;border-top:1px solid var(--line);}
.hres[hidden]{display:none;}
.hres-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:20px;}
.hres-hd h3{margin:0;font-size:var(--h-page);font-weight:800;
  letter-spacing:-.03em;}
.hres-hd p{margin:5px 0 0;max-width:66ch;font-size:13.5px;line-height:1.55;
  color:var(--ink-2);}
.hres-hd p a{color:var(--accent);}
.hres-x{flex:none;border:1px solid var(--line-2);background:var(--panel);
  color:var(--ink-2);font-family:var(--font);font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:9px;cursor:pointer;}
.hres-x:hover{background:var(--panel-2);color:var(--ink);}
.hres-sub{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:26px 0 12px;}
@media (max-width:980px){
  .hmap{grid-template-columns:1fr;}
  .hmap-canvas{height:400px;}
  .hl-scroll{max-height:300px;}
}

/* ===== The research filter panel ========================================= */
/* ---- The filter bar -------------------------------------------------------
   One row of dropdowns, matching /rent/'s buildings list. This was six
   stacked rows plus a paragraph of caveats standing above the results. See
   researchPanel() in app.js.
   -------------------------------------------------------------------------- */
.fp{margin-bottom:18px;}
.fp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fp-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;display:block;}

.fdd{position:relative;}
.fdd > summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;border:1px solid var(--line-2);border-radius:999px;
  padding:9px 14px;font-size:13.5px;color:var(--ink-2);
  background:var(--panel);white-space:nowrap;max-width:min(340px,80vw);
  transition:border-color .15s,background .15s,color .15s;}
.fdd > summary::-webkit-details-marker{display:none;}
.fdd > summary::marker{content:"";}
.fdd > summary:hover{border-color:var(--ink-3);color:var(--ink);}
.fdd > summary b{font-weight:600;color:var(--ink);flex:none;}
.fdd > summary span{font-weight:500;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.fdd > summary .fdd-c{flex:none;color:var(--ink-3);transition:transform .15s ease;}
.fdd.on > summary{border-color:var(--sect);background:var(--sect-tint);}
.fdd.on > summary span{color:var(--ink);}
.fdd[open] > summary{border-color:var(--sect);box-shadow:0 0 0 3px rgba(91,61,196,.18);}
.fdd[open] > summary .fdd-c{transform:rotate(180deg);}
.fdd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:650;
  width:330px;max-width:92vw;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px;box-shadow:var(--sh2);}
.fdd-menu > .fp-sel{width:100%;}
.fdd-am{width:380px;}
.fdd-stack{width:300px;display:flex;flex-direction:column;gap:12px;}
/* The caveats, folded. Open to read them; they are not worth 90px of
   standing text above every search. */
.fp-caveat{margin-top:10px;}
.fp-caveat > summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-3);}
.fp-caveat > summary::-webkit-details-marker{display:none;}
.fp-caveat > summary::marker{content:"";}
.fp-caveat > summary::before{content:"\24d8";font-size:13px;}
.fp-caveat > summary:hover{color:var(--ink);}
.fp-caveat p{margin:8px 0 0;font-size:12.5px;line-height:1.6;max-width:84ch;
  color:var(--ink-3);}
.fp-caveat b{color:var(--ink-2);}
.fp-reset{margin-left:auto;border:0;background:transparent;color:var(--ink-3);
  font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;
  padding:8px 10px;border-radius:999px;transition:color .15s,background .15s;}
.fp-reset:hover{background:var(--panel-2);color:var(--ink);}
.fp-reset[hidden]{display:none;}
@media (max-width:560px){
  .fdd,.fdd > summary{width:100%;max-width:none;}
  .fdd > summary{justify-content:space-between;}
  .fdd-menu,.fdd-am,.fdd-stack{width:100%;}
}
.fp-sel{border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;
  font:inherit;font-size:13.5px;background:var(--panel);color:var(--ink);outline:none;
  max-width:100%;}
.fp-sel:focus{border-color:var(--sect);box-shadow:0 0 0 3px rgba(91,61,196,.12);}
.fp-sort{min-width:220px;}
.fp-note{font-size:12px;color:var(--sect-ink);font-weight:600;}
.fp-clear{margin-left:auto;border:0;background:transparent;color:var(--ink-3);
  font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;
  padding:6px 2px;text-decoration:underline;}
.fp-clear:hover{color:var(--ink);}
.fp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.fp-f{display:block;min-width:0;}
.fp-f .fp-sel,.fp-f .fp-addr{width:100%;}
.fp-addr{border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;
  font:inherit;font-size:13.5px;background:var(--panel);color:var(--ink);outline:none;}
.fp-addr:focus{border-color:var(--sect);box-shadow:0 0 0 3px rgba(91,61,196,.12);}
.cbx-grid{display:flex;flex-wrap:wrap;gap:8px 20px;}
/* The native input stays, so it is still a real checkbox for keyboards and
   screen readers, and .box is drawn over it. Same approach as /rent/. */
.cbx{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;
  color:var(--ink-2);}
.cbx input{position:absolute;opacity:0;width:0;height:0;}
.cbx .box{width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:5px;
  display:grid;place-items:center;color:transparent;background:var(--panel);
  transition:background .12s,border-color .12s,color .12s;flex:none;}
.cbx .box svg{width:13px;height:13px;}
.cbx input:checked + .box{background:var(--sect);border-color:var(--sect);color:#fff;}
.cbx input:focus-visible + .box{box-shadow:0 0 0 3px rgba(91,61,196,.22);}
.cbx input:checked ~ span:last-child{color:var(--ink);font-weight:600;}
.fp-foot{color:var(--ink-3);}
.fp-foot p{margin:0;font-size:12.5px;line-height:1.6;max-width:84ch;}
.fp-foot b{color:var(--ink-2);}
.r-count{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:14px;
  font-variant-numeric:tabular-nums;}
.r-more{display:block;margin:22px auto 0;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink);font-family:var(--font);font-size:14px;
  font-weight:600;padding:11px 22px;border-radius:10px;cursor:pointer;}
.r-more:hover{background:var(--panel-2);}

/* ===== Card head: address, type code, then the date ======================
   The submission date moved up under the address, where it reads as part of
   the heading rather than as one more chip arguing with the stage badge at
   the bottom. The type code sits beside the address because "SPA" is the
   first thing a professional reader looks for. */
/* The heart is absolutely positioned at the top right of the card, so the
   whole head row reserves its width — padding the address alone left the type
   chip sitting underneath it. */
.pc-head{display:flex;align-items:flex-start;gap:9px;padding-right:34px;}
.pc-addr{flex:1 1 auto;min-width:0;}
.pc-code{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:3px 7px;border-radius:6px;background:var(--panel-2);color:var(--ink-2);
  white-space:nowrap;margin-top:2px;}
.pc-feat .pc-code{background:var(--sect-tint);color:var(--sect-ink);}
.pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px;
  font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.pc-sep{color:var(--line-2);}
.pc-dist{color:var(--sect);font-weight:600;}
.pc-who{font-weight:600;color:var(--ink-2);}
.pc-foot{margin-top:12px;}

/* ===== The file table on an application page =============================
   First on the page and before any prose: a consultant pulling comparables
   reads this and leaves. */
.facts{margin:0 0 4px;padding:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--panel);}
.facts-r{display:grid;grid-template-columns:minmax(140px,30%) 1fr;gap:0;}
.facts-r + .facts-r{border-top:1px solid var(--line);}
.facts dt{padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--ink-3);
  background:var(--panel-2);margin:0;}
.facts dd{padding:10px 14px;margin:0;font-size:14px;color:var(--ink);
  font-variant-numeric:tabular-nums;}
@media (max-width:560px){ .facts-r{grid-template-columns:1fr;}
  .facts dt{padding-bottom:2px;background:var(--panel);} }
/* The gloss for a reader who needs the term unpacked, set quieter than the
   technical sentence above it so a professional can skip it. */
.sub-plain{color:var(--ink-3);font-size:13.5px;}
.qa code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--panel-2);padding:1px 5px;border-radius:4px;}
.qa-wide{max-width:none;}
.defs code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--panel-2);padding:1px 6px;border-radius:4px;color:var(--ink-2);}
.prose ul.steps{list-style:disc;}

/* ===== The councillor line and the locator map =========================== */
.ward-cllr{margin:12px 0 0;font-size:14px;color:var(--ink-2);}
.ward-cllr-k{font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-right:8px;}
.ward-cllr a{color:var(--accent);font-weight:600;}
.ward-cllr-t{font-size:12px;color:var(--ink-3);}
.hres-hd-map{align-items:flex-start;}
.keymap{flex:none;width:208px;}
.keymap-art{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px;}
.keymap svg{width:100%;height:auto;display:block;}
.keymap .km-off{fill:#eef0f2;stroke:#fff;stroke-width:.8;}
.keymap .km-on{fill:var(--sect);stroke:#fff;stroke-width:.9;}
.keymap-cap{margin-top:7px;text-align:center;font-size:12px;}
.keymap-cap a{color:var(--accent);text-decoration:none;font-weight:600;}
.keymap-cap a:hover{text-decoration:underline;}
.wk-note{color:var(--ink-3);}
@media (max-width:760px){ .keymap{display:none;} }

/* ===== The drawer — the same one /rent/ carries ========================== */
.hdr-burger{flex:none;width:36px;height:36px;border:0;background:transparent;
  border-radius:9px;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;}
.hdr-burger:hover{background:var(--panel-2);color:var(--ink);}
.hdr-burger svg{width:21px;height:21px;}
.drawer-scrim{position:fixed;inset:0;z-index:900;background:rgba(16,20,24,.40);
  opacity:0;transition:opacity .24s ease;}
.drawer-scrim.on{opacity:1;}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(324px,88vw);z-index:901;
  background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;
  transform:translateX(-100%);transition:transform .24s ease;}
.drawer.on{transform:translateX(0);}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);font-weight:700;}
.drawer-x{width:30px;height:30px;border:0;background:var(--panel-2);border-radius:8px;
  color:var(--ink-3);cursor:pointer;font-size:13px;}
.drawer-x:hover{background:var(--line);color:var(--ink);}
.drawer-sect{padding:15px 10px 11px;}
.drawer-sect + .drawer-sect{border-top:1px solid var(--line);}
.drawer-sect h4{margin:0 0 7px;padding:0 10px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.drawer-sect a{display:block;text-decoration:none;font-size:13.5px;
  color:var(--ink-2);padding:8px 10px;border-radius:9px;}
.drawer-sect a:hover{background:var(--sect-tint);color:var(--sect-ink);}
.drawer-foot{margin:4px 12px 22px;padding:14px;border-radius:12px;
  background:var(--panel-2);font-size:11.5px;line-height:1.55;color:var(--ink-3);}
body.drawer-open{overflow:hidden;}

/* The header gained a Tools item, which left the search field shrinking
   towards its own magnifier icon on a laptop. It has a floor now and is
   dropped outright once there is not room for it — a search box too narrow to
   read an address in is worse than no search box, and every view has its own
   search anyway. */
.hdr-search{min-width:210px;}
@media (max-width:1180px){ .hdr-search{max-width:280px;} }
@media (max-width:1040px){ .hdr-search{display:none;} }

/* ===== The header actions on an application page ========================= */
.ph-acts{position:absolute;top:0;right:0;display:flex;align-items:center;gap:8px;}
.app .ph{padding-right:220px;}
.ph-ext{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);
  font-size:13px;font-weight:600;padding:9px 13px;border-radius:10px;
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
.ph-ext svg{width:14px;height:14px;flex:none;}
.ph-ext:hover{background:var(--sect-tint);color:var(--sect-ink);border-color:var(--sect);}
.app .ph .pc-heart{position:static;}
@media (max-width:760px){
  .app .ph{padding-right:0;}
  .ph-acts{position:static;margin-top:16px;}
}

/* ===== Thumb rules, as a page ============================================
   Reuses the .facts table from an application page — same two-column label /
   value shape, so a reference table reads the same wherever it appears. */
.tr-sect{margin:0 0 30px;max-width:78ch;}
.tr-sect h2{font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sect-ink);margin:0 0 12px;}
.tr-sect .facts dd{font-variant-numeric:normal;}

/* ===== A capped group of cards ============================================
   Six, then a button. See cardGroup() in app.js for why.

   The heading is the thing the eye should land on when scrolling a ward page,
   so it is no longer the same 13px grey uppercase label as every other
   section title — it takes the stage's own colour, the one the cards already
   carry, and a size that reads as a divider rather than a caption.
   ========================================================================= */
.grp{margin-bottom:34px;}
.grp-hd{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap;}
.grp-t{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);display:inline-flex;align-items:center;gap:9px;}
/* The dot is the stage colour; .st-* set a background, which is exactly what
   is wanted on a 9px round. */
.grp-t::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:currentColor;}
.grp-t.st-rev{color:#1a4fbd;}
.grp-t.st-ok {color:#15713f;}
.grp-t.st-app{color:#5b3dc4;}
.grp-t.st-cl, .grp-t.st-un{color:var(--ink-3);}
.grp-n{background:var(--panel-2);color:var(--ink-2);border-radius:20px;
  padding:2px 9px;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;}
.grp-note{font-size:12.5px;color:var(--ink-3);}
.grp-rest{margin-top:14px;}
.grp-rest[hidden]{display:none;}
.grp-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);
  font-family:var(--font);font-size:13.5px;font-weight:600;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;}
.grp-more:hover{border-color:var(--sect);color:var(--ink);background:var(--sect-tint);}
.grp-plus{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--sect);color:#fff;font-size:13px;font-weight:700;line-height:1;
  transition:transform .15s ease;}
.grp-more.open .grp-plus{transform:rotate(45deg);}
.grp-all{display:inline-block;margin-top:4px;font-size:14px;font-weight:600;
  color:var(--accent);text-decoration:none;}
.grp-all:hover{text-decoration:underline;}