/* Council pages (/planning, /planning/:slug) only: chrome-assets.ejs loads this when server.js serves one.
   The 457 static files are Tailwind markup from generate-council-pages.js. They are restyled into the "Site Plan"
   brand here, not regenerated, so their markup, copy and sitemap lastmods stay exactly as they are (Lumen's call,
   20 Oct 2026). Every rule keys on the markup the generator writes: section order, ids, data-* hooks and its
   Tailwind class combinations. base.css is not loaded on these pages, so what they need from it is here, and
   chrome-assets.ejs leaves legacy-bridge.css (the other old pages' reskin) out of them: this file is the whole look.
   Progressive layer: /site/js/council.js draws the patch map, counts the numbers up and plays the reveals. */

/* ---------- 0. Emoji off, without touching the HTML ----------
   The generator writes emoji into link text ("🏠 Conservatory", "✅ Live data"). Emoji glyphs are drawn from this
   face at zero size, so they vanish wherever the --cx-* stacks below are used and every other character falls
   through to SF Pro. Where the local emoji font can't be matched the emoji simply shows, as before. */
@font-face {
  font-family: "pw-no-emoji";
  src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji"), local("Segoe UI Symbol");
  unicode-range: U+2600-27BF, U+2B00-2BFF, U+FE0F, U+200D, U+1F000-1FAFF;
  size-adjust: 0%;
}
:root {
  --cx-sans: "pw-no-emoji", var(--font-sans);
  --cx-display: "pw-no-emoji", var(--font-display);
  --cx-mono: "pw-no-emoji", var(--font-mono);
  --cx-sec: clamp(52px, 6vw, 88px);
  --cx-night: #0F1012;
  --cx-x: max(var(--gutter), calc((100% - var(--maxw)) / 2));   /* the container's side inset inside a full-bleed band */
}

/* ---------- 1. Page frame ----------
   Page width (Ben, 18 Oct 2026: the content "just spanning the width of the entire page"). No floating card; every
   block in <main> holds its content to the same container as .wrap (--maxw, --gutter, 16px minimum on phones).
   Tinted bands keep running edge to edge; only their content is held in. */
body.p-2 { padding: 0; background: var(--paper); font-family: var(--cx-sans); }
body.p-2 > main { max-width: none; border-radius: 0; box-shadow: none; overflow: clip; background: var(--paper); }
body.p-2 > .footer { margin: 0; }
main > [class~="px-6"] { padding-left: var(--cx-x); padding-right: var(--cx-x); }
/* The postcode capture card brings its own side padding; inside the container it would double. */
main > section > .pw-dc { padding-left: 0; padding-right: 0; }

/* ---------- 2. Type and colour inside <main> ----------
   A floor for every block, including the rare ones styled nowhere below: SF Pro, 600 at most, brand ink. */
body.p-2 > main {
  font-family: var(--cx-sans); color: var(--ink); letter-spacing: var(--track-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" 0;
}
body.p-2 > main :is(h1, h2, h3) { font-family: var(--cx-display); text-wrap: balance; }
body.p-2 > main :is(.font-extrabold, .font-bold, strong, b) { font-weight: 600; }
body.p-2 > main .text-gray-900 { color: var(--ink); }
body.p-2 > main :is(.text-gray-700, .text-gray-600) { color: var(--ink-2); }
body.p-2 > main :is(.text-gray-500, .text-gray-400) { color: var(--ink-3); }
body.p-2 > main .text-primary { color: var(--amber-ink); }
body.p-2 > main :is(.border-gray-100, .border-gray-200) { border-color: var(--rule); }
body.p-2 > main .material-icons-round { display: none; }   /* stock icon font: the drawings and type carry the page */
body.p-2 > main a.underline, body.p-2 > main p a.underline {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
body.p-2 > main :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }

/* Section rhythm and heads (h2 + its lead line), shared by every section */
body.p-2 > main > section { padding-top: var(--cx-sec); padding-bottom: var(--cx-sec); }
body.p-2 > main > section > h2, body.p-2 > main > section > .max-w-4xl > h2 {
  font-size: clamp(28px, 3.2vw, 46px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em;
  color: var(--ink); max-width: 24ch; margin: 0 0 16px;
}
body.p-2 > main > section > h2 + p, body.p-2 > main > section > .max-w-4xl > h2 + p {
  font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 46em; margin-bottom: clamp(28px, 3vw, 40px);
}
body.p-2 > main > section > h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: clamp(36px, 4vw, 52px) 0 16px; }
body.p-2 > main > :is(.border-t, .border-y) { border-color: var(--rule); }
/* bands: drawing paper replaces Tailwind's gray-50 */
body.p-2 > main > section.bg-gray-50 { background: var(--paper-2); border-color: var(--rule); }

/* Shared card look: hairline ring, 20 px corners, no Tailwind gray fill */
body.p-2 > main > section :where(.rounded-2xl, .rounded-xl):where(.bg-gray-50, .bg-white):not(.pw-dc-card) {
  background: var(--sheet); border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-instant) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
body.p-2 > main > section a:where(.rounded-2xl, .rounded-xl, .rounded-lg):hover { box-shadow: 0 0 0 1px var(--rule-2), 0 12px 28px -18px rgba(17, 18, 20, .28); }
body.p-2 > main .card-lift:hover { transform: translateY(-2px); }

/* ---------- 3. Hero band: drawing paper from under the pill header to the trade strip ---------- */
body.p-2 > main > .nav-spacer,
body.p-2 > main > div:has(> nav),
body.p-2 > main > section:first-of-type { background: var(--paper-2); }
/* Breadcrumb: small mono drawing note, "/" between steps */
body.p-2 > main > div:has(> nav) { padding-top: clamp(14px, 2vw, 26px); }
body.p-2 > main > div > nav:not(.nav) { gap: 0; font: 400 12.5px/1.4 var(--cx-mono); letter-spacing: 0; color: var(--ink-3); flex-wrap: wrap; }
body.p-2 > main > div > nav:not(.nav) a { color: var(--ink-3); transition: color var(--dur-instant); }
body.p-2 > main > div > nav:not(.nav) a:hover { color: var(--ink); }
body.p-2 > main > div > nav:not(.nav) > span:last-child { color: var(--ink-2); font-weight: 400; }
body.p-2 > main > div > nav:not(.nav) a::after { content: "/"; margin: 0 9px; color: var(--ink-4); }

body.p-2 > main > section:first-of-type {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; column-gap: clamp(32px, 5vw, 88px);
  padding-top: clamp(22px, 3vw, 40px); padding-bottom: clamp(40px, 5vw, 72px);
}
body.p-2 > main > section:first-of-type > .max-w-3xl { max-width: 44rem; display: flex; flex-direction: column; }
/* Status + region: the brand label (amber dot, amber ink), sentence case */
body.p-2 > main > section:first-of-type .inline-flex.rounded-full {
  align-self: flex-start; background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 22px; gap: 10px; flex-wrap: wrap; row-gap: 4px;
}
body.p-2 > main > section:first-of-type .inline-flex.rounded-full > span:first-child {
  display: inline-flex; align-items: center; gap: 9px; padding: 0; background: none; border-radius: 0;
  font: 600 14px/1 var(--cx-sans); letter-spacing: var(--track-label); text-transform: none; color: var(--amber-ink);
}
body.p-2 > main > section:first-of-type .inline-flex.rounded-full > span:first-child::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft);
}
body.p-2 > main > section:first-of-type .inline-flex.rounded-full > span:last-child {
  margin: 0; font: 500 14px/1 var(--cx-sans); letter-spacing: 0; color: var(--ink-3);
}
/* H1: SF Pro Display 600; the council's name sits on the amber highlighter */
body.p-2 > main > section:first-of-type h1 {
  font-size: clamp(38px, 4.15vw, 62px); line-height: .96; font-weight: 600; letter-spacing: -0.045em; color: var(--ink);
  margin: 0 0 24px; text-wrap: balance;
}
body.p-2 > main h1 .gradient-text {
  color: var(--ink); -webkit-text-fill-color: currentColor; background-clip: border-box; -webkit-background-clip: border-box;
  background: linear-gradient(var(--amber-field), var(--amber-field)) 0 82% / 100% 34% no-repeat;
  padding: 0 .05em; margin: 0 -.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.p-2 > main > section:first-of-type .max-w-3xl > p {
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 36em; margin-bottom: 14px; text-wrap: pretty;
}
body.p-2 > main > section:first-of-type .max-w-3xl > p + p { font-size: 16px; color: var(--ink-3); }
/* "Last updated": a dated drawing note */
body.p-2 > main > section:first-of-type .max-w-3xl > div.text-sm:not(.max-w-lg):not(.flex-wrap) {
  font: 400 12.5px/1.4 var(--cx-mono); letter-spacing: 0; color: var(--ink-3); margin: 6px 0 26px; gap: 8px;
}
body.p-2 > main > section:first-of-type .max-w-3xl > div.text-sm:not(.max-w-lg):not(.flex-wrap)::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3);
}

/* Postcode search: the homepage's field (sheet, 18 px corners, ink button inside) */
body.p-2 > main .max-w-lg:has(> .search-ring) { max-width: 560px; margin-bottom: 22px; }
body.p-2 > main form.search-ring, body.p-2 > main div.search-ring {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 48px;
  background: var(--sheet); border: 0; border-radius: 18px; overflow: visible;
  box-shadow: 0 0 0 1px var(--rule-2), 0 10px 30px -14px rgba(18, 20, 23, .18);
  transition: box-shadow var(--dur-instant);
}
body.p-2 > main .search-ring::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.p-2 > main .search-ring:focus-within { border-color: transparent; box-shadow: 0 0 0 1.5px var(--amber-deep), 0 0 0 5px var(--amber-wash), 0 10px 30px -14px rgba(18, 20, 23, .18); }
body.p-2 > main .search-ring > input {
  flex: 1; min-width: 0; height: 48px; padding: 0 4px; background: transparent; border: 0;
  font: 400 17px/1 var(--cx-sans); letter-spacing: var(--track-ui); color: var(--ink);
}
body.p-2 > main .search-ring > input::placeholder { color: var(--ink-3); opacity: 1; }
body.p-2 > main .search-ring > input:focus-visible { box-shadow: none; }
body.p-2 > main .search-ring > button {
  flex: none; height: 48px; min-width: 120px; padding: 0 22px; border-radius: var(--r-btn); justify-content: center;
  background: var(--ink); color: var(--paper); font: 600 16px/1 var(--cx-sans); letter-spacing: -0.01em; gap: 8px;
  transition: background-color var(--dur-instant) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
body.p-2 > main .search-ring > button:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); transform: none; }
body.p-2 > main .search-ring > button:active { transform: translateY(1px); }
/* the /planning filter field has a leading icon span of its own */
body.p-2 > main div.search-ring > input { padding-left: 4px; font-size: 16px; }

/* Three trust points under the search: amber ticks, small ink-2 */
body.p-2 > main > section:first-of-type .max-w-3xl > .flex-wrap { gap: 10px 22px; }
body.p-2 > main > section:first-of-type .max-w-3xl > .flex-wrap > div { gap: 8px; font-size: 14px; color: var(--ink-2); }
body.p-2 > main > section:first-of-type .max-w-3xl > .flex-wrap > div::before {
  content: ""; flex: none; width: 14px; height: 14px; background: var(--amber-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The trade strip (radar-promo.js puts it after the hero): a slim row at the foot of the paper band.
   Its own stylesheet is injected after this one, hence main > for the extra weight. */
body.p-2 > main > .pw-radar-strip {
  margin: 0; padding: 14px var(--cx-x) 16px; border: 0; border-top: 1px solid var(--rule); border-radius: 0;
  background: var(--paper-2); font-family: var(--cx-sans); gap: 8px 18px; min-height: var(--cx-strip);
}
/* radar-promo.js always adds the strip when scripts run, a moment after the first paint: its height is held in the
   hero's last grid row until it arrives, so nothing below moves */
:root { --cx-strip: 65px; }
:is(.pw-motion, .pw-static) body.p-2 > main:has(> section[data-radar-promo]) > section:first-of-type::before {
  content: ""; display: block; grid-column: 1 / -1; grid-row: 20; height: var(--cx-strip);
}
:is(.pw-motion, .pw-static) body.p-2 > main:has(> section[data-radar-promo]) > section:first-of-type:has(+ .pw-radar-strip)::before { display: none; }
body.p-2 > main > .pw-radar-strip .pw-radar-strip-tag {
  padding: 0; border: 0; background: none; border-radius: 0; gap: 8px;
  font: 500 11.5px/1.3 var(--cx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink);
}
body.p-2 > main > .pw-radar-strip .pw-radar-strip-tag::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--amber); }
body.p-2 > main > .pw-radar-strip .material-icons-round { display: none; }
body.p-2 > main > .pw-radar-strip .pw-radar-strip-text { color: var(--ink-2); font-size: 14.5px; }
body.p-2 > main > .pw-radar-strip .pw-radar-strip-text strong { color: var(--ink); font-weight: 600; }
body.p-2 > main > .pw-radar-strip .pw-radar-strip-link {
  padding: 0 14px; height: 34px; border-radius: 10px; background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2);
  font: 600 13.5px/34px var(--cx-sans); letter-spacing: -0.01em;
}
body.p-2 > main > .pw-radar-strip .pw-radar-strip-link:hover { background: var(--paper); transform: none; color: var(--ink); }

/* ---------- 4. The patch sheet (drawn by council.js) ----------
   Desktop: the hero's second column. Its space is held from the first paint whenever the page runs scripts (the
   motion gate's pw-motion / pw-static classes are set before anything renders), so drawing it moves nothing; the
   holder is invisible, so if council.js never arrived the worst case is white space. Phones and tablets: the
   sheet goes after the "Search ... Planning Applications" band, below the fold at load, so it shifts nothing
   on screen either. */
body.p-2 > main > section:first-of-type > .cx-sheet { width: 100%; }
@media (min-width: 1024px) {
  body.p-2 > main > section:first-of-type { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  :is(.pw-motion, .pw-static) body.p-2 > main > section:first-of-type::after { content: ""; display: block; }
  :is(.pw-motion, .pw-static) body.p-2 > main > section:first-of-type::after,
  body.p-2 > main > section:first-of-type > .cx-sheet { grid-column: 2; grid-row: 1 / span 8; margin-top: 4px; aspect-ratio: 5 / 4.3; width: 100%; }
  body.p-2 > main > section:first-of-type:has(> .cx-sheet)::after { display: none; }
  body.p-2 > main > section:first-of-type > :not(.cx-sheet) { grid-column: 1; }
}
body.p-2 > main > .cx-sheet-band { padding: clamp(36px, 6vw, 56px) var(--cx-x) 0; }
body.p-2 > main > .cx-sheet-band > .cx-sheet { aspect-ratio: 1 / 1.06; width: 100%; max-width: 560px; margin: 0 auto; }
@media (min-width: 600px) { body.p-2 > main > .cx-sheet-band > .cx-sheet { aspect-ratio: 5 / 4.3; } }
.cx-sheet { position: relative; margin: 0; min-width: 0; }
.cx-sheet-paper {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; overflow: hidden;
  background-color: var(--sheet); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  background-image: linear-gradient(var(--scrim) 1px, transparent 1px), linear-gradient(90deg, var(--scrim) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
.cx-sheet-art { position: relative; flex: 1; min-height: 0; padding: 18px 18px 6px; }
.cx-sheet-art > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cx-sheet-title {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: end;
  padding: 12px 18px 14px; border-top: 1px solid var(--rule); background: var(--sheet);
  font: 400 11px/1.45 var(--cx-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.cx-sheet-title b { display: block; font-weight: 500; font-size: 12px; letter-spacing: .07em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-sheet-title .cx-count { color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.cx-sheet-title .cx-attrib { grid-column: 1 / -1; text-transform: none; letter-spacing: 0; font-size: 10px; color: var(--ink-3); opacity: .9; }

/* map ink: blueprint boundary, blueprint wash, amber application dots. Stroke widths are set by council.js in the
   drawing's own units (so the boundary can still be drawn on with pathLength). */
.cx-map .cx-patch-fill { fill: var(--blue-wash); }
.cx-map .cx-patch { fill: none; stroke: var(--blue); stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cx-map .cx-patch-halo { fill: none; stroke: var(--blue); stroke-opacity: .14; stroke-linejoin: round; }
.cx-map .cx-dot { fill: var(--amber); stroke: var(--sheet); transform-box: fill-box; transform-origin: center; }
.cx-map .cx-dot.is-new { fill: var(--amber-deep); }
.cx-map .cx-ring { fill: none; stroke: var(--amber-deep); transform-box: fill-box; transform-origin: center; opacity: 0; }
.cx-map .cx-north path, .cx-map .cx-scalebar path { fill: none; stroke: var(--ink-2); }
.cx-map .cx-north text, .cx-map .cx-scalebar text { font-family: var(--font-mono); fill: var(--ink-2); letter-spacing: .06em; }
.cx-map .cx-scalebar rect { fill: var(--ink-2); }
/* many councils in one frame (the UK, a region): outlines only, a wash and a dot where there is live data */
.cx-map--area .cx-patch-fill { fill: transparent; }
.cx-map--area .cx-patch-fill.is-on { fill: var(--amber-wash); }
.cx-map--area .cx-patch--thin { stroke: var(--blue); stroke-opacity: .55; }

/* The latest application, as a floating pin card (real filing, postcode district only) */
.cx-callout {
  position: absolute; z-index: 3; left: -18px; bottom: 74px; max-width: min(300px, 78%);
  display: grid; gap: 4px; padding: 11px 14px 12px; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-3);
  font: 400 13px/1.4 var(--cx-sans); color: var(--ink-2);
}
.cx-callout-k { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1.3 var(--cx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); }
.cx-callout-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-deep); box-shadow: 0 0 0 3px var(--amber-soft); }
.cx-callout-d { color: var(--ink); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The location plan, a second sheet tucked behind (illustrative, as on the homepage) */
.cx-behind {
  position: absolute; z-index: 1; top: -26px; right: -30px; width: 54%; aspect-ratio: 360 / 262; transform: rotate(3.2deg);
  border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-2); padding: 10px 12px 26px; overflow: hidden;
  background-image: linear-gradient(var(--scrim) 1px, transparent 1px), linear-gradient(90deg, var(--scrim) 1px, transparent 1px);
  background-size: 14px 14px;
}
.cx-behind > span { position: absolute; left: 12px; right: 12px; bottom: 8px; font: 400 9.5px/1 var(--cx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-sheet--plan .cx-sheet-art { display: grid; place-items: center; padding: 26px 26px 10px; }

/* drawings.css, the location-plan part, for the sheets above (drawings.css itself is not loaded here) */
.cx-sheet .drawing { width: 100%; height: auto; overflow: visible; }
.cx-sheet .drawing .lyr { --p: 1; }
.cx-sheet .drawing .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.cx-sheet .drawing .ln.ink { stroke: var(--ink); stroke-width: 1.5; }
.cx-sheet .drawing .ln.faint { stroke: var(--ink-4); stroke-width: .8; }
.cx-sheet .drawing .ln.faint.fine { stroke-width: .5; }
.cx-sheet .drawing .ln.red { stroke: var(--draw-proposed); stroke-width: 1.2; }
.cx-sheet .drawing .ln.site { stroke: var(--site-red); }
.cx-sheet .drawing .ln.red.heavy.site { stroke-width: 1.8; }
.cx-sheet .drawing .ln.ink.fine { stroke-width: .7; }
.cx-sheet .drawing .hatch-line { stroke: var(--amber); stroke-width: 1.4; opacity: .6; }
.cx-sheet .drawing .fill-hatch { opacity: calc(var(--p) * .9); }
.cx-sheet .drawing .lp-fp { fill: var(--paper-3); stroke: var(--ink-4); stroke-width: .6; opacity: var(--p); }
.cx-sheet .drawing text { font-family: var(--cx-mono); font-size: 7.5px; letter-spacing: .06em; fill: var(--ink-2); opacity: var(--p); }
.cx-sheet .drawing text.faint-t { fill: var(--ink-3); }

/* ---------- 5. "Search ... Planning Applications": a calm band between the hero and the data ---------- */
body.p-2 > main > section[data-pw-page-type] { background: var(--paper); border: 0; border-bottom: 1px solid var(--rule); }
body.p-2 > main > section[data-pw-page-type] > .max-w-3xl { display: grid; justify-items: center; gap: 0; }
body.p-2 > main > section[data-pw-page-type] .w-16.h-16 { display: none; }
body.p-2 > main > section[data-pw-page-type] h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 14px; max-width: 20ch; }
body.p-2 > main > section[data-pw-page-type] h2 + p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 34em; margin: 0 auto 26px; }
/* Buttons: squared, ink primary, ghost secondary */
body.p-2 > main a.btn-3d.bg-primary, body.p-2 > main > section[data-pw-page-type] a.bg-primary {
  height: 56px; padding: 0 26px; border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: none;
  font: 600 17px/1 var(--cx-sans); letter-spacing: -0.01em; gap: 10px;
}
body.p-2 > main a.btn-3d.bg-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); transform: none; box-shadow: none; }
body.p-2 > main a.btn-3d.bg-primary::after {
  content: ""; width: 14px; height: 14px; background: currentColor; transition: transform var(--dur-quick) var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 8h10M9.5 4.5 13 8l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 8h10M9.5 4.5 13 8l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.p-2 > main a.btn-3d.bg-primary:hover::after { transform: translateX(3px); }
body.p-2 > main > section[data-pw-page-type] a.bg-white {
  height: 56px; padding: 0 24px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2);
  font: 600 17px/1 var(--cx-sans); letter-spacing: -0.01em;
}
body.p-2 > main > section[data-pw-page-type] a.bg-white:hover { background: var(--paper-2); }

/* ---------- 6. The numbers ---------- */
/* Application types: data cards, big number, amber bar */
body.p-2 > main > section:has(> .grid > div > .w-full.bg-gray-200) > p { font: 400 13px/1.55 var(--cx-mono); letter-spacing: 0; color: var(--ink-3); max-width: none; }
body.p-2 > main > section > .grid:has(> div > .w-full.bg-gray-200) { gap: 14px; }
body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) { padding: 22px 22px 20px; display: flex; flex-direction: column; }
body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) > .flex:first-child { margin-bottom: 14px; }
body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) h3 { font: 600 15px/1.3 var(--cx-sans); letter-spacing: -0.01em; color: var(--ink); }
body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) > .items-end { align-items: baseline; gap: 8px; margin-bottom: 14px; }
body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) .text-2xl {
  font: 600 clamp(36px, 3.4vw, 48px)/1 var(--cx-display); letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums;
}
body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) .items-end > .text-sm { margin: 0; font-size: 14px; color: var(--ink-3); }
body.p-2 > main .w-full.bg-gray-200.h-2 { height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; margin-top: auto; }
body.p-2 > main .w-full.bg-gray-200.h-2 > .bg-primary { height: 6px; border-radius: 3px; background: var(--amber); transform-origin: left center; }
body.p-2 > main .w-full.bg-gray-200.h-2 + p { font: 400 12px/1.4 var(--cx-mono); letter-spacing: 0; color: var(--ink-3); margin-top: 10px; }

/* The statistics card becomes the night data band, like the homepage's */
body.p-2 > main > section:has(> .bg-gray-900) {
  background: var(--cx-night); color: #F4F2EC; position: relative; isolation: isolate;
  padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px);
}
body.p-2 > main > section:has(> .bg-gray-900)::before {   /* a faint dot field, the GB map's texture */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 181, 46, .16) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask: linear-gradient(100deg, transparent 30%, #000 85%); mask: linear-gradient(100deg, transparent 30%, #000 85%);
}
body.p-2 > main > section > .bg-gray-900 { background: none; border-radius: 0; padding: 0; }
:root[data-theme="dark"] body.p-2 > main > section:has(> .bg-gray-900) { background: #0A0B0D; border-block: 1px solid var(--rule); }
body.p-2 > main > section > .bg-gray-900 > h2 {
  gap: 0; margin: 0 0 clamp(28px, 4vw, 52px); font: 600 clamp(28px, 3.2vw, 46px)/1.04 var(--cx-display); letter-spacing: -0.035em; color: #F4F2EC; max-width: 20ch;
}
body.p-2 > main > section > .bg-gray-900 > .grid { gap: 0; border-top: 1px solid #2A2D33; border-bottom: 1px solid #2A2D33; }
body.p-2 > main > section > .bg-gray-900 > .grid > div { padding: 22px 16px 24px 0; display: flex; flex-direction: column-reverse; gap: 12px; justify-content: flex-end; }
body.p-2 > main > section > .bg-gray-900 > .grid > div > .text-3xl {
  font: 600 clamp(40px, 5vw, 76px)/.95 var(--cx-display); letter-spacing: -0.04em; color: #F4F2EC; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.p-2 > main > section > .bg-gray-900 > .grid > div > .text-3xl.text-primary { color: #FFB52E; }
body.p-2 > main > section > .bg-gray-900 > .grid > div > .text-sm { margin: 0; font: 500 11px/1.3 var(--cx-mono); letter-spacing: .07em; text-transform: uppercase; color: #8C9098; }
body.p-2 > main > section > .bg-gray-900 > p { margin-top: 18px; font: 400 12px/1.5 var(--cx-mono); letter-spacing: 0; color: #8C9098; }

/* "What PlanWatch is tracking": label, prose, three guide cards */
body.p-2 > main > section .inline-flex.bg-primary\/10 {
  padding: 0; background: none; border-radius: 0; gap: 9px; margin-bottom: 18px;
  font: 600 14px/1 var(--cx-sans); letter-spacing: var(--track-label); text-transform: none; color: var(--amber-ink);
}
body.p-2 > main > section .inline-flex.bg-primary\/10::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
body.p-2 > main > section > .max-w-4xl { max-width: 52rem; }
body.p-2 > main > section > .max-w-4xl > p:not(.text-sm) { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin-bottom: 16px; max-width: 64ch; text-wrap: pretty; }
body.p-2 > main > section > .max-w-4xl > .grid { gap: 12px; margin-top: 28px; }
body.p-2 > main > section > .max-w-4xl > .grid > a.rounded-xl { padding: 18px 18px 20px; border-radius: 16px; position: relative; }
body.p-2 > main > section > .max-w-4xl > .grid > a.rounded-xl > p:first-child { font: 600 15px/1.3 var(--cx-sans); color: var(--ink); margin-bottom: 6px; padding-right: 22px; }
body.p-2 > main > section > .max-w-4xl > .grid > a.rounded-xl > p + p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
body.p-2 > main > section > .max-w-4xl > .grid > a.rounded-xl::after {
  content: ""; position: absolute; right: 16px; top: 20px; width: 13px; height: 13px; background: var(--ink-3); transition: transform var(--dur-quick) var(--ease-out), background-color var(--dur-instant);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 8h10M9.5 4.5 13 8l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 8h10M9.5 4.5 13 8l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.p-2 > main > section > .max-w-4xl > .grid > a.rounded-xl:hover::after { transform: translateX(3px); background: var(--amber-ink); }

/* ---------- 7. Local stories (enriched councils) ---------- */
/* Planning battles: no red (red is a site boundary only), a dated sheet per story */
body.p-2 > main > section > .space-y-6 > div.rounded-2xl { padding: clamp(20px, 2.4vw, 30px); }
body.p-2 > main > section > .space-y-6 > div.rounded-2xl .bg-red-100 { display: none; }
body.p-2 > main > section > .space-y-6 > div.rounded-2xl h3 { font: 600 clamp(18px, 1.5vw, 21px)/1.25 var(--cx-display); letter-spacing: -0.02em; color: var(--ink); }
body.p-2 > main > section > .space-y-6 > div.rounded-2xl .flex.items-center.gap-3 { flex-wrap: wrap; row-gap: 6px; }
body.p-2 > main > section .rounded-full.bg-gray-200, body.p-2 > main > section .rounded-full.bg-blue-100 {
  padding: 3px 8px; border-radius: 6px; background: var(--paper-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule);
  font: 400 11.5px/1.3 var(--cx-mono); letter-spacing: 0;
}
body.p-2 > main > section > .space-y-6 > div.rounded-2xl p.text-sm { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
body.p-2 > main .bg-amber-50.rounded-lg {
  max-width: 74ch; margin-top: 4px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--amber-wash); box-shadow: inset 2px 0 0 var(--amber);
}
body.p-2 > main .bg-amber-50.rounded-lg p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
body.p-2 > main .bg-amber-50.rounded-lg strong { color: var(--amber-ink); font-weight: 600; }
/* Major developments: blueprint is reserved for "your patch", so the tags go neutral */
body.p-2 > main > section > .grid.md\:grid-cols-2 > div.rounded-2xl { padding: 24px; }
body.p-2 > main > section > .grid.md\:grid-cols-2 > div.rounded-2xl h3 { font: 600 17px/1.3 var(--cx-sans); letter-spacing: -0.015em; }
body.p-2 > main > section > .grid.md\:grid-cols-2 > div.rounded-2xl > .flex { flex-wrap: wrap; row-gap: 6px; }
body.p-2 > main > section > .grid.md\:grid-cols-2 > div.rounded-2xl p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
/* What makes planning here different: a short list with amber dots */
body.p-2 > main > section > h2.text-xl { font-size: clamp(26px, 2.6vw, 36px); }
body.p-2 > main > section > .bg-amber-50.rounded-2xl { background: var(--sheet); border: 0; box-shadow: var(--sh-1); border-radius: var(--r-lg); padding: 22px 24px; max-width: 52rem; }
body.p-2 > main > section > .bg-amber-50.rounded-2xl li { gap: 14px; }
body.p-2 > main > section > .bg-amber-50.rounded-2xl li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--amber); }
body.p-2 > main > section > .bg-amber-50.rounded-2xl li > span { font-size: 16px; color: var(--ink-2); }
body.p-2 > main > section > p.text-sm.max-w-3xl { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
/* Key areas: squared chips */
body.p-2 > main > section > .flex.flex-wrap > span.rounded-full {
  padding: 8px 13px; border-radius: 10px; background: var(--sheet); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 14.5px; font-weight: 500;
}
/* What you can find (councils without live numbers yet) */
body.p-2 > main > section > .grid > .card-lift:has(> h3) { padding: 24px; }
body.p-2 > main > section > .grid > .card-lift > h3 { font: 600 17px/1.3 var(--cx-sans); letter-spacing: -0.015em; color: var(--ink); margin-bottom: 8px; }
body.p-2 > main > section > .grid > .card-lift > h3::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--amber); }
body.p-2 > main > section > .grid > .card-lift > p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- 8. Recent applications: rows in one sheet, like the product's list ---------- */
body.p-2 > main > section:has(.font-mono) > h2 { font-size: clamp(28px, 3.2vw, 46px); }
body.p-2 > main > section > .space-y-3 { background: var(--sheet); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
body.p-2 > main > section > .space-y-3 > div.rounded-xl ~ div.rounded-xl { margin-top: 0; }   /* beats Tailwind's space-y-3 */
body.p-2 > main > section > .space-y-3 > div.rounded-xl.rounded-xl { border-radius: 0; box-shadow: none; padding: 16px 20px; border-top: 1px solid var(--rule); background: transparent; }
body.p-2 > main > section > .space-y-3 > div.rounded-xl:first-child { border-top: 0; }
body.p-2 > main > section > .space-y-3 > div.rounded-xl:hover { background: var(--paper-2); }
body.p-2 > main > section > .space-y-3 .font-mono {
  padding: 2px 7px; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule);
  font: 400 12px/1.5 var(--cx-mono); letter-spacing: 0;
}
body.p-2 > main > section > .space-y-3 .font-mono + span { font: 400 12px/1.5 var(--cx-mono); color: var(--ink-3); }
body.p-2 > main > section > .space-y-3 p.text-sm { font-size: 15px; color: var(--ink); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.p-2 > main > section > .space-y-3 p.text-xs { font-size: 13px; color: var(--ink-3); }
/* status: amber = in progress, green = approved, ink = anything else (never red) */
body.p-2 > main > section > .space-y-3 span.rounded-full { padding: 4px 9px; font: 500 12px/1 var(--cx-sans); letter-spacing: 0; border-radius: 999px; max-width: 13em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p-2 > main > section > .space-y-3 span.bg-yellow-100 { background: var(--amber-soft); color: var(--amber-ink); }
body.p-2 > main > section > .space-y-3 span.bg-green-100 { background: var(--green-wash); color: var(--green-ink); }
body.p-2 > main > section > .space-y-3 span.bg-red-100 { background: var(--paper-3); color: var(--ink-2); }

/* The official portal: a plain sheet with an ink link (blue is for patches and boundaries) */
body.p-2 > main > div:has(> .bg-blue-50) { padding-top: 0; padding-bottom: var(--cx-sec); }
body.p-2 > main > div > .bg-blue-50 {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center;
  padding: 22px 24px; background: var(--paper-2); border: 0; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--rule);
}
body.p-2 > main > div > .bg-blue-50 > div { margin: 0; }
body.p-2 > main > div > .bg-blue-50 p.text-blue-900 { font: 600 16px/1.3 var(--cx-sans); color: var(--ink); }
body.p-2 > main > div > .bg-blue-50 p.text-blue-700 { grid-column: 1; margin: 0; font-size: 15px; color: var(--ink-2); }
body.p-2 > main > div > .bg-blue-50 > a {
  grid-column: 2; grid-row: 1 / span 2; height: 46px; padding: 0 18px; border-radius: var(--r-btn); background: var(--ink); color: var(--paper);
  font: 600 15px/46px var(--cx-sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
body.p-2 > main > div > .bg-blue-50 > a:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); color: var(--paper); text-decoration: none; }

/* The applications map (the 15 test councils in lib/council-map-cohort.js) */
body.p-2 > main > section#map #council-map { border-radius: var(--r-lg) !important; box-shadow: var(--sh-1); background: var(--paper-2) !important; }
body.p-2 > main > section#map #council-map-status { font: 400 12.5px/1.5 var(--cx-mono); color: var(--ink-3); }
body.p-2 > main > section#map .leaflet-container { font-family: var(--font-sans); }
body.p-2 > main > section#map .leaflet-bar a { font: 500 18px/30px var(--font-sans); color: var(--ink); }

/* ---------- 9. Objecting: numbered grounds on drawing paper ---------- */
body.p-2 > main > section#objecting { counter-reset: cx-ground; }
body.p-2 > main > section#objecting .grid { gap: 10px; margin-bottom: 26px; }
body.p-2 > main > section#objecting .grid > a {
  counter-increment: cx-ground; gap: 14px; padding: 15px 16px; border: 0; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-1);
}
body.p-2 > main > section#objecting .grid > a::before {
  content: counter(cx-ground, decimal-leading-zero); flex: none; font: 500 12px/1 var(--cx-mono); letter-spacing: 0; color: var(--amber-ink);
}
body.p-2 > main > section#objecting .grid > a > span:last-child { font-size: 15.5px; font-weight: 500; color: var(--ink); }
body.p-2 > main > section#objecting .max-w-4xl > p.text-sm { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
body.p-2 > main > section#objecting .max-w-4xl > p.text-sm a { color: var(--ink); font-weight: 500; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- 10. FAQ: hairline list, plus that turns to a cross (as on the homepage) ---------- */
body.p-2 > main > section#faq { background: var(--paper); border: 0; }
body.p-2 > main > section#faq > h2 { margin-bottom: clamp(26px, 3vw, 40px); }
body.p-2 > main > section#faq > .max-w-3xl { max-width: 52rem; }
body.p-2 > main > section#faq > .space-y-6 > details ~ details { margin-top: 0; }
body.p-2 > main > section#faq details { border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body.p-2 > main > section#faq details:last-child { border-bottom: 1px solid var(--rule); }
body.p-2 > main > section#faq summary {
  list-style: none; position: relative; padding: 20px 40px 20px 0; background: none;
  font: 500 17px/1.45 var(--cx-sans); letter-spacing: var(--track-ui); color: var(--ink);
}
body.p-2 > main > section#faq summary::-webkit-details-marker { display: none; }
body.p-2 > main > section#faq summary:hover { background: none; color: var(--amber-ink); }
body.p-2 > main > section#faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: linear-gradient(var(--ink-2), var(--ink-2)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) center / 1.5px 12px no-repeat;
  transition: transform var(--dur-quick) var(--ease-out);
}
body.p-2 > main > section#faq details[open] summary::after { transform: rotate(45deg); }
body.p-2 > main > section#faq details > div { padding: 0 40px 22px 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }

/* ---------- 11. Save a postcode: the money moment, on an amber field ---------- */
body.p-2 > main > section:has(> .pw-dc) { padding-top: 0; padding-bottom: var(--cx-sec); }
body.p-2 > main .pw-dc { padding: 0; }
body.p-2 > main .pw-dc .pw-dc-card {
  max-width: none; margin: 0; padding: clamp(28px, 4.4vw, 60px); border: 0; border-radius: var(--r-xl);
  background: var(--amber-field); color: #111214; box-shadow: 0 30px 70px -40px rgba(138, 75, 4, .55);
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(28px, 5vw, 72px);
}
@media (min-width: 900px) {
  body.p-2 > main .pw-dc .pw-dc-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
  body.p-2 > main .pw-dc .pw-dc-card > :is(.pw-dc-eyebrow, .pw-dc-heading, .pw-dc-desc) { grid-column: 1; }
  body.p-2 > main .pw-dc .pw-dc-card > :is(.pw-dc-form, .pw-dc-msg, .pw-dc-fine, .pw-dc-secondary) { grid-column: 2; }
  body.p-2 > main .pw-dc .pw-dc-card > .pw-dc-form { grid-row: 1 / span 3; align-self: end; }
}
body.p-2 > main .pw-dc .pw-dc-eyebrow {
  justify-self: start; margin-bottom: 18px; padding: 0; border-radius: 0; background: none; gap: 9px;
  font: 600 14px/1 var(--cx-sans); letter-spacing: var(--track-label); text-transform: none; color: #111214;
}
body.p-2 > main .pw-dc .pw-dc-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #111214; box-shadow: 0 0 0 4px rgba(17, 18, 20, .12); }
body.p-2 > main .pw-dc .pw-dc-heading {
  font: 600 clamp(28px, 3vw, 44px)/1.02 var(--cx-display); letter-spacing: -0.035em; color: #111214; margin: 0 0 14px; max-width: 18ch; text-wrap: balance;
}
body.p-2 > main .pw-dc .pw-dc-desc { font-size: 16.5px; line-height: 1.6; color: #2B2D31; margin: 0 0 4px; max-width: 34em; }
body.p-2 > main .pw-dc .pw-dc-form { gap: 10px; margin-top: 22px; }
body.p-2 > main .pw-dc .pw-dc-field {
  flex: 0 0 auto; height: 54px; padding: 0 16px; border: 0; border-radius: var(--r-md); background: #fff; color: #111214;
  box-shadow: inset 0 0 0 1px rgba(17, 18, 20, .16); font: 400 16px/1 var(--cx-sans);
}
/* in the stacked (phone) form a field must not take its 12rem flex-basis as height; side by side it grows */
@media (min-width: 640px) { body.p-2 > main .pw-dc .pw-dc-field { flex: 1 1 12rem; } }
body.p-2 > main .pw-dc .pw-dc-field::placeholder { color: #6B6F77; }
body.p-2 > main .pw-dc .pw-dc-field:focus { box-shadow: inset 0 0 0 1.5px #111214, 0 0 0 4px rgba(17, 18, 20, .1); background: #fff; }
body.p-2 > main .pw-dc .pw-dc-submit {
  height: 54px; padding: 0 24px; border-radius: var(--r-btn); background: #111214; color: #FFBE3B;
  font: 600 16px/1 var(--cx-sans); letter-spacing: -0.01em;
}
body.p-2 > main .pw-dc .pw-dc-submit:hover:not(:disabled) { background: #2B2D31; transform: none; }
body.p-2 > main .pw-dc .pw-dc-msg { font-size: 14.5px; font-weight: 600; color: #111214; }
body.p-2 > main .pw-dc .pw-dc-msg--ok::before { content: "\2713\00a0"; }
body.p-2 > main .pw-dc .pw-dc-msg--err { color: #111214; }
body.p-2 > main .pw-dc .pw-dc-fine { font-size: 13px; color: #3E3A31; margin-top: 12px; }
body.p-2 > main .pw-dc .pw-dc-secondary { justify-self: start; margin-top: 10px; font-size: 14.5px; font-weight: 600; color: #111214; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- 12. Nearby councils, guides, sources ---------- */
body.p-2 > main > section > .grid > a.card-lift:has(> div.text-xs) { padding: 16px 16px 15px; border-radius: 14px; display: grid; gap: 4px; }
body.p-2 > main > section > .grid > a.card-lift > div.font-semibold { font: 600 15px/1.3 var(--cx-sans); color: var(--ink); margin: 0; }
body.p-2 > main > section > .grid > a.card-lift > div.text-xs { font: 400 12px/1.3 var(--cx-mono); letter-spacing: 0; color: var(--ink-3); }
body.p-2 > main > section > .mt-6 > a.text-primary, body.p-2 > main > section a[href="/planning"].text-primary {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15.5px; font-weight: 500;
  background: linear-gradient(var(--amber), var(--amber)) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; text-decoration: none;
}
/* guide cards */
body.p-2 > main > section.bg-gray-50 > .grid > a.card-lift { padding: 18px 18px 20px; border-radius: 16px; }
body.p-2 > main > section.bg-gray-50 > .grid > a.card-lift > div.font-semibold { margin-bottom: 4px; }
body.p-2 > main > section.bg-gray-50 > .grid > a.card-lift > div.text-xs { font: 400 13.5px/1.45 var(--cx-sans); color: var(--ink-3); }
/* "Do I need planning permission for...?" and friends: squared link chips */
body.p-2 > main > section > .grid > a.rounded-lg {
  display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 12px;
  background: var(--sheet); box-shadow: var(--sh-1); color: var(--ink); font: 500 14.5px/1.3 var(--cx-sans); letter-spacing: var(--track-ui);
  text-indent: -0.28em;   /* the space the hidden emoji leaves */
}
body.p-2 > main > section > .grid > a.rounded-lg:hover { color: var(--amber-ink); }
body.p-2 > main > section > h2.text-xl { margin-bottom: 26px; }
/* data sources: mono label, ink links */
body.p-2 > main > section > h3.uppercase { margin: 0 0 12px; font: 500 11.5px/1.3 var(--cx-mono); letter-spacing: .07em; color: var(--ink-3); }
body.p-2 > main > section:has(> h3.uppercase) { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
body.p-2 > main > section > h3.uppercase + ul { font-size: 14px; color: var(--ink-3); }
body.p-2 > main > section > h3.uppercase + ul a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
body.p-2 > main > section > h3.uppercase + ul a:hover { text-decoration-color: var(--amber); }
/* a local recommendation (local-promos.js) */
body.p-2 > main > section:has(a[href*="utm_campaign=local_promo"]) > p.uppercase { font: 500 11.5px/1.3 var(--cx-mono); letter-spacing: .07em; color: var(--ink-3); }
body.p-2 > main > section:has(a[href*="utm_campaign=local_promo"]) > h2 { font-size: clamp(24px, 2.2vw, 32px); }

/* ---------- 13. Demand Radar card: the trade crossover on the night band ----------
   (.pw-radar's styles sit inline in the page after this file, hence the extra weight) */
body.p-2 > main > section[data-radar-promo] { padding-top: 0; padding-bottom: var(--cx-sec); }
body.p-2 > main > section[data-radar-promo] .pw-radar {
  background: var(--cx-night); color: #B9BCC3; border-radius: var(--r-xl); padding: clamp(28px, 4.4vw, 60px);
  font-family: var(--cx-sans); position: relative; overflow: hidden; isolation: isolate;
}
body.p-2 > main > section[data-radar-promo] .pw-radar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 181, 46, .2) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask: radial-gradient(60% 90% at 100% 50%, #000, transparent); mask: radial-gradient(60% 90% at 100% 50%, #000, transparent);
}
body.p-2 > main > section[data-radar-promo] .pw-radar-eyebrow {
  padding: 0; border: 0; background: none; border-radius: 0; gap: 9px; margin: 0 0 18px;
  font: 600 14px/1 var(--cx-sans); letter-spacing: var(--track-label); text-transform: none; color: #FFC95C;
}
body.p-2 > main > section[data-radar-promo] .pw-radar-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFB52E; box-shadow: 0 0 0 4px rgba(255, 181, 46, .18); }
body.p-2 > main > section[data-radar-promo] .pw-radar-title { font: 600 clamp(28px, 3.2vw, 46px)/1.04 var(--cx-display); letter-spacing: -0.035em; color: #F4F2EC; max-width: 22ch; margin: 0 0 18px; text-wrap: balance; }
body.p-2 > main > section[data-radar-promo] .pw-radar-body { font-size: 16.5px; line-height: 1.65; color: #B9BCC3; max-width: 60ch; }
body.p-2 > main > section[data-radar-promo] .pw-radar-body strong { color: #F4F2EC; font-weight: 600; }
body.p-2 > main > section[data-radar-promo] .pw-radar-demand { border-radius: 16px; border-color: #2A2D33; background: rgba(255, 255, 255, .03); }
body.p-2 > main > section[data-radar-promo] .pw-radar-live strong { font-weight: 600; }
body.p-2 > main > section[data-radar-promo] .pw-radar-chip { border-radius: 10px; font-weight: 500; border-color: rgba(255, 181, 46, .28); background: rgba(255, 181, 46, .1); color: #FFC95C; }
body.p-2 > main > section[data-radar-promo] .pw-radar-chip--claimed { border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .05); color: #8C9098; }
body.p-2 > main > section[data-radar-promo] .pw-radar-cta {
  height: 56px; padding: 0 26px; border-radius: 14px; background: #FFBE3B; color: #111214; box-shadow: none;
  font: 600 17px/1 var(--cx-sans); letter-spacing: -0.01em;
}
body.p-2 > main > section[data-radar-promo] .pw-radar-cta:hover { background: #FFC955; transform: none; box-shadow: none; }
body.p-2 > main > section[data-radar-promo] .pw-radar-fine { font: 400 12px/1.6 var(--cx-mono); letter-spacing: 0; color: #8C9098; }
/* the corner prompt it adds, body-level */
body.p-2 .pw-radar-nudge { font-family: var(--font-sans); border-radius: 18px; border-color: var(--rule); box-shadow: var(--sh-3); }
body.p-2 .pw-radar-nudge .pw-radar-nudge-tag { padding: 0; border: 0; background: none; border-radius: 0; font: 500 11px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--amber-ink); }
body.p-2 .pw-radar-nudge .pw-radar-nudge-tag .material-icons-round { display: none; }
body.p-2 .pw-radar-nudge .pw-radar-nudge-text strong { font-weight: 600; }
body.p-2 .pw-radar-nudge .pw-radar-nudge-cta { border-radius: 10px; background: var(--ink); color: var(--paper); box-shadow: none; font-weight: 600; font-family: var(--font-sans); }
body.p-2 .pw-radar-nudge .pw-radar-nudge-cta:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); color: var(--paper); }

/* ---------- 14. Community discussion (comments.js) ---------- */
body.p-2 > main > .pw-comments { max-width: calc(52rem + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) var(--cx-sec); font-family: var(--cx-sans); }
body.p-2 .pw-comments .pw-c-h { font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--cx-display); letter-spacing: -0.03em; color: var(--ink); }
body.p-2 .pw-comments .pw-c-h span { color: var(--ink-3); font-weight: 500; }
body.p-2 .pw-comments .pw-c-sub { color: var(--ink-3); font-size: 15px; }
body.p-2 .pw-comments .pw-c-box { border-color: var(--rule-2); border-radius: var(--r-md); background: var(--sheet); color: var(--ink); }
body.p-2 .pw-comments .pw-c-btn { border-radius: var(--r-btn); background: var(--ink); color: var(--paper); height: 44px; padding: 0 18px; }
body.p-2 .pw-comments .pw-c-signin { border-color: var(--rule); border-radius: 14px; background: var(--paper-2); color: var(--ink-2); }
body.p-2 .pw-comments .pw-c-signin a { color: var(--ink); font-weight: 600; text-decoration-color: var(--amber); }
body.p-2 .pw-comments .pw-c-item { border-color: var(--rule); border-radius: 14px; background: var(--sheet); }
body.p-2 .pw-comments .pw-c-who { font-weight: 600; color: var(--ink); }
body.p-2 .pw-comments .pw-c-when { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
body.p-2 .pw-comments .pw-c-body { color: var(--ink-2); }
body.p-2 .pw-comments .pw-c-msg { color: var(--amber-ink); }

/* ---------- 15. /planning: the directory ---------- */
body.p-2 > main > section:first-of-type > h1 { grid-column: 1; }
body.p-2 > main > section:first-of-type > h1 + p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 34em; margin-bottom: 26px; }
body.p-2 > main > section:first-of-type > .max-w-md { max-width: 520px; margin-bottom: 0; }
body.p-2 > main > section:first-of-type > .max-w-md .search-ring::before { display: none; }
body.p-2 > main > section:first-of-type > .max-w-md .search-ring { padding: 6px 8px; }
body.p-2 > main > section:first-of-type > .max-w-md .search-ring > .material-icons-round { display: block; font: 0/0 var(--cx-sans); color: transparent; width: 34px; height: 20px; margin-left: 8px; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4.5 4.5'/%3E%3C/svg%3E") left center / 18px 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4.5 4.5'/%3E%3C/svg%3E") left center / 18px 18px no-repeat; }
body.p-2 > main > section#council-list { padding-top: clamp(48px, 6vw, 88px); }
body.p-2 > main .country-section { margin-bottom: clamp(48px, 6vw, 88px); }
body.p-2 > main .country-section > h2 {
  gap: 0; margin: 0 0 clamp(20px, 2.5vw, 32px); padding-bottom: 16px; border-bottom: 1px solid var(--ink);
  font: 600 clamp(32px, 3.8vw, 56px)/1 var(--cx-display); letter-spacing: -0.04em; color: var(--ink);
}
body.p-2 > main .country-section > h2 > span.bg-primary { display: none; }
body.p-2 > main .region-section { margin-bottom: clamp(28px, 3vw, 40px); }
body.p-2 > main .region-section > h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font: 600 clamp(19px, 1.6vw, 22px)/1.2 var(--cx-display); letter-spacing: -0.02em; color: var(--ink); }
body.p-2 > main .region-section > h3 > span { font: 400 12px/1 var(--cx-mono); letter-spacing: 0; color: var(--ink-3); }
body.p-2 > main .region-section > .grid { gap: 0 24px; }
body.p-2 > main a.council-link, body.p-2 > main a.council-link:hover {
  min-height: 46px; padding: 11px 2px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; gap: 10px;
  transition: color var(--dur-instant);
}
body.p-2 > main a.council-link > span:first-child { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
body.p-2 > main a.council-link:hover > span:first-child { color: var(--amber-ink); }
body.p-2 > main a.council-link > span[title] { width: 8px; height: 8px; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
/* the UK map on /planning: a taller sheet, so Great Britain and Northern Ireland read at a useful size.
   It is a desktop picture; phones go straight from the filter to the list. */
@media (min-width: 1024px) {
  body.p-2 > main > section:first-of-type:has(> h1) { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
  :is(.pw-motion, .pw-static) body.p-2 > main > section:first-of-type:has(> h1)::after,
  body.p-2 > main > section:first-of-type:has(> h1) > .cx-sheet { aspect-ratio: 4 / 4.9; }
}

/* ---------- 16. Motion (only with html.pw-motion: never for crawlers, tall renderers or reduced motion) ---------- */
/* The hero's text is never hidden at load (it is the page's largest paint); only the highlighter swipes in. */
@keyframes cx-highlight { from { background-size: 0% 34%; } to { background-size: 100% 34%; } }
.pw-motion body.p-2 > main > section:first-of-type h1 .gradient-text { animation: cx-highlight 640ms var(--ease-out) 220ms both; }
/* scroll reveals: council.js marks what is below the fold at load (.cx-rv.cx-wait) and adds .cx-in on the way in */
.cx-rv { transition: opacity 240ms cubic-bezier(.16, 1, .3, 1), transform 260ms cubic-bezier(.16, 1, .3, 1), filter 240ms cubic-bezier(.16, 1, .3, 1); }
.cx-rv.cx-i1 { transition-delay: 35ms; } .cx-rv.cx-i2 { transition-delay: 70ms; } .cx-rv.cx-i3 { transition-delay: 105ms; } .cx-rv.cx-i4 { transition-delay: 140ms; }
.cx-rv.cx-wait:not(.cx-in) { opacity: 0; transform: translateY(12px); filter: blur(2px); }
.cx-rv.cx-instant { transition: none !important; }
.cx-bar-wait .bg-primary { transform: scaleX(0); }
.cx-bar-in .bg-primary { transform: scaleX(1); transition: transform 900ms var(--ease-out); }
/* the sheet: boundary draws, wash fades in, dots land */
.cx-sheet.is-drawing .cx-patch { stroke-dashoffset: 1; }
.cx-sheet.is-drawing .cx-patch-fill, .cx-sheet.is-drawing .cx-patch-halo { opacity: 0; }
.cx-sheet.is-drawn .cx-patch { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-draw); }
.cx-sheet.is-drawn .cx-patch-fill, .cx-sheet.is-drawn .cx-patch-halo { opacity: 1; transition: opacity 600ms var(--ease-out) 650ms; }
.cx-sheet .cx-dot.cx-pop { animation: cx-pop 420ms var(--ease-spring) both; }
@keyframes cx-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cx-sheet.is-live .cx-ring { animation: cx-ping 2.4s var(--ease-out) 3; }
@keyframes cx-ping { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(4.2); } }
.cx-sheet .cx-callout, .cx-sheet .cx-behind { transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out); }
.cx-sheet.is-drawing .cx-callout { opacity: 0; transform: translateY(10px); }
.cx-sheet.is-drawing .cx-behind { opacity: 0; transform: rotate(0deg) translate(-12px, 12px); }
.cx-sheet.is-drawing .drawing .lyr { --p: 0; }
.cx-sheet.is-drawn .drawing .lyr { transition: --p var(--dur-draw) var(--ease-draw); }
@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------- 17. Phones ---------- */
@media (max-width: 1023px) {
  body.p-2 > main > section:first-of-type h1 { font-size: clamp(36px, 8.4vw, 60px); }
  body.p-2 > main > section:first-of-type h1 br { display: none; }   /* one flowing line pair: "Planning Applications / in Leeds" */
  .cx-callout { left: 10px; bottom: 64px; }
  .cx-behind { display: none; }
}
@media (max-width: 767px) {
  .cx-callout { max-width: calc(100% - 20px); padding: 8px 11px; }
  .cx-callout-d { display: none; }   /* the date and district carry it at this size */
  /* application types two by two */
  body.p-2 > main > section > .grid:has(> div > .w-full.bg-gray-200) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) { padding: 16px 14px 14px; }
  body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) .text-2xl { font-size: 32px; }
  body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) > .items-end { flex-wrap: wrap; row-gap: 2px; margin-bottom: 12px; }
  body.p-2 > main .grid > div:has(> .w-full.bg-gray-200) h3 { font-size: 14px; }
  body.p-2 > main .w-full.bg-gray-200.h-2 + p { font-size: 11px; }
  /* recent applications: meta, then the description, then status, stacked */
  body.p-2 > main > section > .space-y-3 > div.rounded-xl.rounded-xl { padding: 14px 16px; }
  body.p-2 > main > section > .space-y-3 > div > .flex.justify-between { flex-direction: column; gap: 8px; }
  body.p-2 > main > section > .space-y-3 > div > .flex.justify-between > .flex-1 { width: 100%; }
  body.p-2 > main > section > .space-y-3 > div > .flex.justify-between > span.rounded-full { max-width: 100%; }
  body.p-2 > main > section > .space-y-3 .font-mono + span { white-space: nowrap; }
  /* the trade strip stacks */
  :root { --cx-strip: 140px; }
  body.p-2 > main > .pw-radar-strip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
  body.p-2 > main > .pw-radar-strip .pw-radar-strip-text { flex: none; }
  body.p-2 > main > section > .bg-gray-900 > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.p-2 > main > section > .bg-gray-900 > .grid > div:nth-child(odd) { padding-right: 16px; }
  body.p-2 > main > section > .bg-gray-900 > .grid > div:nth-child(-n + 2) { border-bottom: 1px solid #2A2D33; }
  body.p-2 > main > div > .bg-blue-50 { grid-template-columns: minmax(0, 1fr); }
  body.p-2 > main > div > .bg-blue-50 > a { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
  body.p-2 > main > section[data-pw-page-type] .flex-wrap > a { width: 100%; justify-content: center; }
  body.p-2 > main > section > .grid > a.card-lift:has(> div.text-xs) { min-width: 0; }
  body.p-2 > main > section#faq summary { font-size: 16px; }
  .cx-sheet-title { grid-template-columns: minmax(0, 1fr); }
}
/* Hero postcode search on a phone: the input is flex-1 but kept its intrinsic width (min-width: auto), so it
   pushed the Search button past the edge ("Sea"). */
@media (max-width: 420px) {
  body.p-2 > main .search-ring { padding-left: 40px; }
  body.p-2 > main .search-ring::before { left: 14px; }
  body.p-2 > main .search-ring > button { min-width: 0; padding: 0 16px; font-size: 15px; height: 46px; }
  body.p-2 > main .search-ring > input { font-size: 16px; }
}

/* ---------- 18. Display ad slots (lib/ad-slots.js) ----------
   Rendered only when ads are on or previewed. Quiet on purpose: no frame, the site's own small label, the same
   container, and each box reserves the height of the ad it will hold at that width, so filling it never moves the page. */
.pw-ad { padding: var(--s-6) var(--cx-x); font-family: var(--font-sans); }
.pw-ad-label { display: block; width: fit-content; margin: 0 auto var(--s-2); font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: var(--track-label); color: var(--ink-3); }
.pw-ad-box { position: relative; margin: 0 auto; }
.pw-ad--leader .pw-ad-box { width: 100%; max-width: 320px; min-height: 100px; }
.pw-ad--rect .pw-ad-box { width: 100%; max-width: 300px; min-height: 250px; }
.pw-ad-size--lg { display: none; }
/* Below 360px a 320 or 300 wide ad cannot sit inside 16px gutters, so the slot runs to the edges. */
@media (max-width: 359px) { .pw-ad { padding-left: 0; padding-right: 0; } }
/* 728 x 90 from the first width where it fits inside the gutters. */
@media (min-width: 810px) {
  .pw-ad--leader .pw-ad-box, .pw-ad--rect .pw-ad-box { max-width: 728px; min-height: 90px; }
  .pw-ad-size--sm { display: none; }
  .pw-ad-size--lg { display: inline; }
}
/* The rail lives in the right-hand margin, so it only exists where the margin can hold 160px with room
   to spare. It starts below the hero and stays in view while the page scrolls. */
.pw-ad--rail { display: none; }
@media (min-width: 1680px) {
  .pw-ad--rail { display: block; position: absolute; top: 0; bottom: 0; padding: 0; width: 160px; right: calc(((100% - var(--maxw)) / 2 - 160px) / 2); pointer-events: none; }
  .pw-ad--rail .pw-ad-stick { position: sticky; top: calc(var(--nav-clear) + var(--s-5)); margin-top: 760px; pointer-events: auto; }
  .pw-ad--rail .pw-ad-box { width: 160px; min-height: 600px; }
}
/* Preview (?adpreview=1 on dev): show where the slots sit and what size each one holds. */
.pw-ad--preview .pw-ad-box { display: grid; place-items: center; border-radius: var(--r-md); background: repeating-linear-gradient(135deg, var(--paper-2) 0 10px, var(--paper-3) 10px 11px); box-shadow: inset 0 0 0 1px var(--rule); }
.pw-ad--preview .pw-ad-size { font: 500 12px/1 var(--font-mono); color: var(--ink-3); }