/* p5.css — the Lead Fountain design system (both brands).
 *
 * Material, monochrome. Colour is deliberately absent: the only thing worth
 * colour-coding on this site is data coverage, and coverage is shown with three
 * weights of grey so a red/green reading can't be mistaken for good/bad quality.
 * Served locally — no CDN, no webfont, so the strict CSP holds and the page works
 * offline.
 *
 * Shared by every UK Planning API page AND the consumer checkout pages
 * (planning-check / planning-alerts / appeal-intelligence / design-statement).
 * The consumer additions at the bottom are scoped under body.consumer so they
 * can never restyle an API page by accident. Edit here, not per template.
 */

:root {
  --bg:        #FAFAFA;
  --surface:   #FFFFFF;
  --text:      #212121;
  --text-2:    #616161;
  --text-3:    #9E9E9E;
  --border:    #E0E0E0;
  --border-2:  #EEEEEE;
  --accent:    #212121;

  --e1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --e2: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
  --e3: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);

  --r: 4px;
  --u: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1 { font-size: 34px; font-weight: 500; letter-spacing: -.4px; line-height: 1.25; }
h2 { font-size: 22px; font-weight: 500; letter-spacing: -.2px; }
h3 { font-size: 16px; font-weight: 500; }
p  { color: var(--text-2); }
a  { color: var(--text); }

.lead      { font-size: 17px; color: var(--text-2); }
.muted     { color: var(--text-3); font-size: 13px; }
.eyebrow   { font-size: 11px; font-weight: 500; letter-spacing: 1.2px;
             text-transform: uppercase; color: var(--text-3); }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--e1);
  padding: 24px;
}
.card-2 { box-shadow: var(--e2); }
.card-flat { box-shadow: none; border: 1px solid var(--border); }

section { padding: 56px 0; }
section:last-of-type { padding-bottom: 40px; }
section + section { border-top: 1px solid var(--border-2); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #FFF;
  border: none;
  border-radius: var(--r);
  padding: 12px 24px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--e1);
  transition: box-shadow .15s ease, background .15s ease;
}
.btn:hover  { background: #000; box-shadow: var(--e2); }
.btn:active { box-shadow: var(--e1); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
}
.btn-ghost:hover { background: #F5F5F5; box-shadow: none; }

input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2);
        margin-bottom: 6px; }

/* Grid and flex children default to min-width:auto, which means they refuse to
 * shrink below their content. A <pre> with a long URL then pushes the whole page
 * wider than the viewport — measured at 89px of horizontal scroll on a 390px
 * screen before this rule. Everything that can hold wide content needs min-width:0. */
.two-col > *, .stats > *, .scroll-x { min-width: 0; }
pre, table { max-width: 100%; }

/* ── Stat grid ────────────────────────────────────────────────────────── */
/* Fixed 3 columns rather than auto-fit: six stats on auto-fit laid out 5 + 1,
 * leaving an orphan on its own row. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat  { background: var(--surface); border-radius: var(--r); box-shadow: var(--e1);
         padding: 20px; }
.stat .val { font-size: 26px; font-weight: 500; letter-spacing: -.5px; }
.stat .lbl { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* Four-up variant: the burndown has exactly four figures, and the 3-column
 * default left the fourth stranded on its own row. */
.stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stats-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .stats-4 { grid-template-columns: 1fr; } }

/* ── Coverage bars — the only place "colour" is encoded, as 3 greys ───── */
.cov-row   { display: grid; grid-template-columns: 1fr 64px; gap: 12px;
             align-items: center; padding: 6px 0;
             border-bottom: 1px solid var(--border-2); }
.cov-row:last-child { border-bottom: none; }
.cov-name  { font-size: 13px; }
.cov-track { height: 6px; background: #EEEEEE; border-radius: 3px; overflow: hidden;
             margin-top: 5px; }
.cov-fill  { height: 100%; border-radius: 3px; }
.cov-usable   .cov-fill { background: #212121; }
.cov-partial  .cov-fill { background: #9E9E9E; }
.cov-unusable .cov-fill { background: #E0E0E0; }
.cov-pct   { font-size: 12px; text-align: right; color: var(--text-2);
             font-variant-numeric: tabular-nums; }
.cov-unusable .cov-name, .cov-unusable .cov-pct { color: var(--text-3); }

.pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px;
        border: 1px solid var(--border); color: var(--text-2); background: #F5F5F5; }

/* ── Tables ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3);
     padding: 8px 10px; border-bottom: 1px solid var(--border); }
td { padding: 10px; border-bottom: 1px solid var(--border-2); }
tr:last-child td { border-bottom: none; }

/* ── Code ─────────────────────────────────────────────────────────────── */
pre  { background: #212121; color: #EEEEEE; padding: 16px 18px; border-radius: var(--r);
       font-size: 12.5px; line-height: 1.6; overflow-x: auto;
       font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { background: #F5F5F5; padding: 2px 6px; border-radius: 3px; font-size: 12.5px;
       font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre code { background: none; padding: 0; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav { border-bottom: 1px solid var(--border); background: var(--surface); }
.nav-inner { max-width: 960px; margin: 0 auto; padding: 14px 24px;
             display: flex; align-items: center; gap: 24px; }
.nav .brand { font-weight: 500; letter-spacing: -.2px; text-decoration: none; }
.nav a { font-size: 14px; color: var(--text-2); text-decoration: none; }
.nav a:hover { color: var(--text); }
.nav .spacer { flex: 1; }

/* ── Explorer ─────────────────────────────────────────────────────────── */
.explorer-results { margin-top: 8px; max-height: 240px; overflow-y: auto;
                    border: 1px solid var(--border); border-radius: var(--r);
                    background: var(--surface); display: none; }
.explorer-results.open { display: block; }
.explorer-results button {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  background: none; border: none; border-bottom: 1px solid var(--border-2);
  font: inherit; font-size: 14px; cursor: pointer; color: var(--text);
}
.explorer-results button:hover { background: #F5F5F5; }
.explorer-results button:last-child { border-bottom: none; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  h1 { font-size: 27px; }
  section { padding: 40px 0; }
  .two-col { grid-template-columns: 1fr; }
  .wrap, .wrap-narrow { padding: 0 18px; }
  /* One scrollable row, not a wrapping block. The nav used to put the brand
     on its own line and wrap the links beneath it, which was fine at three
     links and became two stacked rows (119px of chrome before any content)
     once the homepage reached seven. Scrolling the strip keeps every
     destination reachable without hiding any behind a menu, and follows the
     same rule as .scroll-x below: wide content scrolls inside itself, never
     the page body. */
  .nav-inner { gap: 18px; flex-wrap: nowrap; overflow-x: auto; padding: 12px 18px;
               -webkit-overflow-scrolling: touch;
               scrollbar-width: none; -ms-overflow-style: none; }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav .brand { flex: 0 0 auto; }
  .nav-inner a { white-space: nowrap; }
  /* The spacer is flex:1 — in a nowrap strip it would absorb the width and
     shove every link off-screen. */
  .nav .spacer { display: none; }
  .card { padding: 20px; }

  /* Tables scroll themselves rather than dragging the page sideways.
     /api-docs has 12 tables and /mcp-setup renders one per tool group; only
     one of those was ever wrapped in .scroll-x, so both pages scrolled the
     body horizontally on a phone — the exact thing the .scroll-x rule below
     exists to prevent. Doing it here rather than wrapping each table means a
     table added later is covered by default instead of regressing silently.
     Tables already inside .scroll-x are unaffected: the inner box simply
     never needs to scroll. */
  main table { display: block; width: 100%; overflow-x: auto; }
  /* Long unbreakable tokens (under_consideration, conditions_discharged)
     were what pushed these tables past the viewport in the first place.
     Letting them break means most tables now fit outright, and the scroll
     above is only a fallback rather than the normal experience — clipped
     text at the edge reads as broken to anyone who doesn't spot that the
     table scrolls. */
  main table code { overflow-wrap: anywhere; }
  /* Except the identifier column. Breaking a parameter or field name across
     lines ("postcod/e", "agent_i/d") looks like a rendering fault and makes
     the thing you are scanning for harder to find; these names are short, so
     an extra few pixels of column is the better trade. */
  main table td:first-child code,
  main table th:first-child code { overflow-wrap: normal; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}

/* Wide content must scroll inside itself, never the page body. */
.scroll-x { overflow-x: auto; }

/* ── Consumer checkout pages (Planning History Report brand) ──────────────
 * Everything below is scoped under body.consumer: these classes exist in the
 * four product flows and their completion pages, several of which are toggled
 * by page JavaScript ('active', 'done', 'hidden', 'preview empty') — so the
 * NAMES must not change without changing that JS, and nothing here may leak
 * onto API pages, some of which define .sub/.free/.intro of their own. */

body.consumer .flow { max-width: 620px; margin: 0 auto; padding: 40px 24px 64px; }
body.consumer .flow h1 { font-size: 26px; margin-bottom: 6px; }
body.consumer .flow-head { max-width: 620px; margin: 0 auto; padding: 48px 24px 0; }
body.consumer .flow-head h1 { margin-bottom: 8px; }
body.consumer .flow-head .lead { max-width: 540px; }
body.consumer .hidden { display: none !important; }

body.consumer .sub { color: var(--text-2); font-size: 15px; margin-bottom: 28px; }
body.consumer .price { font-weight: 500; color: var(--text); }
body.consumer .section { margin-bottom: 20px; }

/* Progress indicator (planning-check): three stages, greys not colours.
 * JS toggles 'active'/'done' on each .step. */
body.consumer .steps { display: flex; gap: 8px; margin-bottom: 28px; }
body.consumer .steps .step { flex: 1; text-align: center; font-size: 12px;
  color: var(--text-3); padding-bottom: 8px; border-bottom: 2px solid var(--border-2); }
body.consumer .steps .step.active { color: var(--text); border-color: var(--text);
  font-weight: 500; }
body.consumer .steps .step.done { color: var(--text-2); border-color: var(--text-3); }

/* Result/preview boxes. One monochrome style — the content says whether the
 * history is clean or busy; the box does not colour-code it. */
body.consumer .preview, body.consumer .app-preview, body.consumer .info-box,
body.consumer .success {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--text); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 16px; font-size: 14px; color: var(--text-2); }
body.consumer .preview strong, body.consumer .app-preview strong,
body.consumer .success strong { display: block; font-size: 15px; color: var(--text);
  margin-bottom: 3px; }
body.consumer .preview.empty { border-left-color: var(--text-3); }

/* Errors: monochrome but unmissable — solid dark, inverted. */
body.consumer .error { background: var(--accent); color: #FFF; border-radius: var(--r);
  padding: 11px 14px; font-size: 13px; margin-bottom: 16px; box-shadow: var(--e1); }

/* Two spinner shapes share one class name across the pages' JS:
 * <span class="spinner"> is the ring injected into a dark button;
 * <div class="spinner"> is a quiet status line, display:none until JS shows it. */
body.consumer span.spinner { display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #FFF; border-radius: 50%;
  animation: consumer-spin .7s linear infinite; margin-right: 8px; vertical-align: middle; }
body.consumer div.spinner { display: none; text-align: center; padding: 8px 0;
  font-size: 14px; color: var(--text-2); }
@keyframes consumer-spin { to { transform: rotate(360deg); } }

/* Lookup tabs (appeal-intelligence). JS toggles 'active'. */
body.consumer .tabs { display: flex; gap: 8px; margin-bottom: 20px; }
body.consumer .tab { flex: 1; padding: 10px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface); font: inherit; font-size: 14px;
  cursor: pointer; color: var(--text-2); text-align: center; }
body.consumer .tab.active { border-color: var(--text); color: var(--text);
  background: #F5F5F5; font-weight: 500; }
body.consumer .panel { display: none; }
body.consumer .panel.active { display: block; }

/* Forms */
body.consumer input, body.consumer select, body.consumer textarea { margin-bottom: 16px; }
body.consumer .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.consumer .field { margin-bottom: 2px; }
body.consumer .optional { color: var(--text-3); font-weight: 400; font-size: 12px; }
body.consumer .checkbox-row { display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; }
body.consumer .checkbox-row input[type=checkbox] { width: 18px; height: 18px;
  accent-color: var(--accent); flex-shrink: 0; margin: 0; }
body.consumer .checkbox-row label { font-size: 14px; color: var(--text-2);
  margin: 0; font-weight: 400; }
body.consumer .char-count { font-size: 12px; color: var(--text-3); text-align: right;
  margin-top: -10px; margin-bottom: 10px; }

body.consumer .btn-block { display: block; width: 100%; text-align: center; }
body.consumer .lookup-btn { display: block; width: 100%; padding: 11px;
  background: transparent; color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r); font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; margin-bottom: 16px; }
body.consumer .lookup-btn:hover { background: #F5F5F5; }
body.consumer .divider { border: none; border-top: 1px solid var(--border-2);
  margin: 20px 0; }
body.consumer .price-note, body.consumer .price-tag, body.consumer .trust {
  text-align: center; font-size: 12.5px; color: var(--text-3); margin-top: 14px;
  line-height: 1.6; }

/* Feature cards: text-only, flat — no icons, no colour. */
body.consumer .features { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
  max-width: 720px; margin: 40px auto 0; }
body.consumer .feature { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px; }
body.consumer .feature h3 { font-size: 14px; margin-bottom: 5px; }
body.consumer .feature p { font-size: 13px; color: var(--text-2); line-height: 1.55; }

/* Completion pages */
body.consumer .done-card { text-align: center; padding: 40px 32px; }
body.consumer .tick { width: 52px; height: 52px; margin: 0 auto 18px;
  border: 1px solid var(--border); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 26px; color: var(--text);
  background: var(--surface); box-shadow: var(--e1); }
body.consumer .next-steps { background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 20px 22px; text-align: left; margin: 24px 0; }
body.consumer .next-steps h3 { font-size: 12px; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
body.consumer .next-steps .step { display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 10px; font-size: 14px; }
body.consumer .next-steps .step:last-child { margin-bottom: 0; }
body.consumer .step-num { background: var(--accent); color: #FFF; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; flex-shrink: 0; margin-top: 1px; }
body.consumer .step-text { color: var(--text-2); line-height: 1.5; }
body.consumer .upsell { border-top: 1px solid var(--border-2); padding-top: 22px;
  margin-top: 24px; }
body.consumer .upsell p { font-size: 14px; color: var(--text-2); margin-bottom: 14px; }
body.consumer .back { display: inline-block; margin-top: 22px; font-size: 14px;
  color: var(--text-2); text-decoration: none; }
body.consumer .back:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 520px) {
  body.consumer .row { grid-template-columns: 1fr; }
  body.consumer .flow, body.consumer .flow-head { padding-left: 18px;
    padding-right: 18px; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
/* Moved here from _p5_footer.html: the footer appears on every page, so its
 * rules belong in the shared sheet rather than being re-parsed inline each
 * time (and inline <style> is the kind of thing a strict CSP later blocks). */
.p5-footer { border-top: 1px solid #E0E0E0; margin-top: 56px; padding: 28px 24px;
               background: #FAFAFA; }
  .p5-footer-inner { max-width: 960px; margin: 0 auto; display: flex; gap: 32px;
                     flex-wrap: wrap; justify-content: space-between;
                     font-size: 13px; line-height: 1.7; color: #616161; }
  .p5-footer strong { color: #212121; }
  .p5-footer a { color: #616161; text-decoration: none; }
  .p5-footer a:hover { color: #212121; text-decoration: underline; }
  .p5-footer-links { display: flex; flex-direction: column; gap: 2px; }
  @media (max-width: 560px) { .p5-footer-inner { flex-direction: column; gap: 20px; } }