/* ============================================================================
   GOV.UK-styled theme for property-lookup.

   Built to the GOV.UK Design System, because the audience reads
   find-energy-certificate.service.gov.uk and the council planning registers
   every day — matching that idiom means matching what they already scan
   fluently.

   Two notes on honesty:

   - **The typeface is Arial, not GDS Transport.** Transport is licensed for
     use on GOV.UK services only, so a non-government tool may not use it.
     Arial is precisely what GOV.UK itself falls back to, so this is the
     correct substitute rather than an approximation of one.
   - **Yellow is Energy Trust's #ffd400 and GOV.UK's focus #ffdd00 at once** —
     they sit within a hair of each other, so the brand colour and the design
     system's focus state are the same swatch. Yellow therefore carries the
     identity (masthead rule, card rails) *and* the focus state, used exactly
     as GOV.UK uses it: never as text, always as a field with black on top.

   Palette is the published GOV.UK one — black #0b0c0c, white, link blue
   #1d70b8, green #00703c, red #d4351c, greys #f3f2f1 / #b1b4b6 / #505a5f.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  --gov-black:  #0b0c0c;
  --gov-white:  #ffffff;
  --gov-blue:   #1d70b8;
  --gov-green:  #00703c;
  --gov-green-dark: #002d18;
  --gov-red:    #d4351c;
  --gov-yellow: #ffd400;   /* Energy Trust's yellow == GOV.UK's focus yellow */
  --gov-grey-1: #505a5f;   /* secondary text                                */
  --gov-grey-2: #b1b4b6;   /* borders                                       */
  --gov-grey-3: #f3f2f1;   /* light background                              */

  --paper:      #f3f2f1;
  --surface:    #ffffff;
  --surface-2:  #f3f2f1;
  --ink:        #0b0c0c;
  --ink-soft:   #0b0c0c;
  --ink-faint:  #505a5f;
  --rule:       #b1b4b6;
  --rule-soft:  #dcdcdc;

  --accent:     #ffd400;
  --accent-ink: #1d70b8;
  --accent-wash:#fff7bf;

  --high:       #d4351c;
  --high-wash:  #f6d7d2;
  --medium:     #594d00;
  --medium-wash:#fff7bf;
  --info:       #0b0c0c;
  --info-wash:  #f3f2f1;
  --good:       #00703c;
  --good-wash:  #cce2d8;

  --btn-ink:    #ffffff;
  --gutter:     clamp(15px, 3vw, 30px);

  /* GDS Transport is GOV.UK-only; Arial is its own documented fallback. */
  --sans:  Arial, "Helvetica Neue", Helvetica, sans-serif;
  --serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* GOV.UK focus state: yellow field, black 4px underline. */
  --focus: 0 -2px var(--gov-yellow), 0 4px var(--gov-black);
}

/* GOV.UK has no dark theme. Rather than invent one, this is a faithful
   inversion that keeps every role: black ground, white text, yellow identity,
   links lifted to a legible tint of the same blue. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:      #0b0c0c;
    --surface:    #1a1c1e;
    --surface-2:  #131516;
    --ink:        #ffffff;
    --ink-soft:   #eceded;
    --ink-faint:  #b1b4b6;
    --rule:       #55595c;
    --rule-soft:  #33383b;
    --accent-ink: #7cb0e0;
    --accent-wash:#3d3400;
    --high:       #ff8f7e;
    --high-wash:  #3a1611;
    --medium:     #ffd400;
    --medium-wash:#332b00;
    --info:       #ffffff;
    --info-wash:  #26292b;
    --good:       #5fc38b;
    --good-wash:  #102c1e;
    --gov-grey-3: #26292b;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f3f2f1; --surface: #ffffff; --surface-2: #f3f2f1;
  --ink: #0b0c0c; --ink-soft: #0b0c0c; --ink-faint: #505a5f;
  --rule: #b1b4b6; --rule-soft: #dcdcdc;
  --accent-ink: #1d70b8; --accent-wash: #fff7bf;
  --high: #d4351c; --high-wash: #f6d7d2;
  --medium: #594d00; --medium-wash: #fff7bf;
  --info: #0b0c0c; --info-wash: #f3f2f1;
  --good: #00703c; --good-wash: #cce2d8;
  --gov-grey-3: #f3f2f1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0c0c; --surface: #1a1c1e; --surface-2: #131516;
  --ink: #ffffff; --ink-soft: #eceded; --ink-faint: #b1b4b6;
  --rule: #55595c; --rule-soft: #33383b;
  --accent-ink: #7cb0e0; --accent-wash: #3d3400;
  --high: #ff8f7e; --high-wash: #3a1611;
  --medium: #ffd400; --medium-wash: #332b00;
  --info: #ffffff; --info-wash: #26292b;
  --good: #5fc38b; --good-wash: #102c1e;
  --gov-grey-3: #26292b;
}

/* -------------------------------------------------------------------- base */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.32;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 40.0625em) { body { font-size: 16px; line-height: 1.35; } }

/* GOV.UK links: blue, underlined, thickening on hover, yellow on focus. */
a, a.reg {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.1578em;
  font-weight: 400;
}
a:hover, a.reg:hover { text-decoration-thickness: max(3px, 0.1875rem, 0.12em); }
a:focus, a.reg:focus, .chipbtn:focus {
  outline: 3px solid transparent;
  background-color: var(--gov-yellow);
  box-shadow: var(--focus);
  color: var(--gov-black);
  text-decoration: none;
}

h1, h2, h3, h4, h5 { font-family: var(--sans); font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------------------- shell */

/* The GOV.UK black masthead with a yellow rule — the identity in one stroke. */
.top {
  background: var(--gov-black);
  border-bottom: 4px solid var(--gov-yellow);
}
.top-inner {
  max-width: none;
  width: 100%;
  padding: 10px var(--gutter);
  gap: 10px 20px;
}
.brand {
  color: var(--gov-white);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.brand span { color: var(--gov-yellow); }

main, footer {
  max-width: none;
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
main { padding-top: 20px; padding-bottom: 40px; gap: 30px; }
footer {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  font-size: 16px;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ inputs */

input[type="text"] {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.25;
  padding: 5px 8px;
  border: 2px solid var(--gov-black);
  border-radius: 0;
  background: var(--gov-white);
  color: var(--gov-black);
  height: 40px;
}
input[type="text"]:focus {
  outline: 3px solid var(--gov-yellow);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px;
  background: var(--gov-white);
}

/* GOV.UK button: solid, square, a 2px darker shadow that collapses on press. */
button {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.1875;
  padding: 8px 10px 7px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--gov-green);
  color: var(--gov-white);
  box-shadow: 0 2px 0 var(--gov-green-dark);
  cursor: pointer;
}
button:hover { background: #005a30; filter: none; }
button:active { box-shadow: none; transform: translateY(2px); }
button:focus {
  border-color: var(--gov-black);
  background: var(--gov-yellow);
  color: var(--gov-black);
  box-shadow: 0 2px 0 var(--gov-black);
  outline: 3px solid transparent;
}
button:disabled { opacity: 0.5; box-shadow: none; }

/* Secondary action — GOV.UK grey button. */
button.ghost {
  background: var(--gov-grey-3);
  color: var(--gov-black);
  box-shadow: 0 2px 0 #929191;
  font-weight: 400;
}
button.ghost:hover { background: #dbdad9; }
button.ghost[aria-pressed="true"] {
  background: var(--gov-black);
  color: var(--gov-white);
  box-shadow: 0 2px 0 var(--gov-yellow);
}

/* ------------------------------------------------------------------ panels */

/* GOV.UK builds sections from rules and space rather than boxes, but this is a
   dossier of parallel records, so each keeps a white sheet under a black
   heading rule — the way the EPC register separates one certificate from the
   next. */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: visible;
}
.panel > header {
  background: var(--surface);
  border-bottom: 2px solid var(--gov-black);
  padding: 15px 20px 12px;
  align-items: baseline;
}
.panel > header h2 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.panel-note { font-family: var(--sans); font-size: 16px; color: var(--ink-faint); }
.panel-body { padding: 20px; gap: 20px; background: var(--surface); }

.group-label {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 4px;
}

/* ------------------------------------------------------------------- cards */

@media (min-width: 48em) {
  .prop-cards { display: block; columns: 2; column-gap: 20px; }
  .prop-cards > * { break-inside: avoid; margin: 0 0 20px; display: block; }
  .prop-cards > .wide { column-span: all; }
}
@media (min-width: 80em)  { .prop-cards { columns: 3; } }
@media (min-width: 110em) { .prop-cards { columns: 4; } }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 20px;
  align-items: start;
}

.part-card, .part-card.mini {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}
.part-head, .part-card.mini .part-head {
  background: var(--surface);
  border-bottom: 2px solid var(--gov-black);
  border-left: 5px solid var(--gov-yellow);
  padding: 12px 15px 10px;
}
.part-head h4, .part-card.mini .part-head h4 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.part-head .meta { font-family: var(--sans); font-size: 16px; color: var(--ink-faint); }
.part-head .area { font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--ink); }

.part-sections { gap: 1px; background: var(--rule); }
.part-section, .part-card.mini .part-section { background: var(--surface); padding: 15px; gap: 12px; }
.part-section h5 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.part-section .desc { font-size: 19px; line-height: 1.32; }
.part-section .desc .scope, .part-floors .desc .scope { color: var(--ink-faint); font-size: 16px; }
.part-section .none { color: var(--ink-faint); font-size: 16px; }

/* ---- GOV.UK summary list: no dotted leaders, a rule under every row ------- */

.spec { gap: 0; max-width: none; }
.spec > div {
  display: grid;
  grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr);
  gap: 0 15px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 16px;
}
.spec > div:last-child { border-bottom: none; }
.spec dt { color: var(--ink-faint); white-space: normal; font-weight: 400; }
.spec .lead { display: none; }
.spec dd {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  max-width: none;
  font-variant-numeric: tabular-nums;
}

/* ---- the answer, first --------------------------------------------------- */

/* Stacked as blocks, not a wrapping flex row: inside a multi-column card the
   flex line did not break and the caption, figure and detail ran together. */
.lead-fact {
  display: block;
  border-bottom: 2px solid var(--gov-black);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.lead-fact .k {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.lead-fact .v, .lead-fact .v.accent {
  display: block;
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
}
.lead-fact .sub {
  display: block;
  font-size: 16px;
  color: var(--ink-faint);
  font-weight: 400;
  margin-top: 2px;
}

/* -------------------------------------------------------------------- rows */

#prop-list { display: grid; gap: 10px; }
@media (min-width: 48em)  { #prop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80em)  { #prop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 110em) { #prop-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#prop-list > button.ghost { grid-column: 1 / -1; justify-self: start; }

.cert, #prop-list .cert {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--rule);
  border-radius: 0;
  padding: 12px 15px;
  align-items: start;
  gap: 4px 15px;
  box-shadow: none;
}
.cert:hover, #prop-list .cert:hover { background: var(--gov-grey-3); border-left-color: var(--gov-black); }
.cert[aria-current="true"], #prop-list .cert[aria-current="true"] {
  border-left-color: var(--gov-yellow);
  background: var(--accent-wash);
  box-shadow: none;
}
.cert:focus { outline: 3px solid var(--gov-yellow); outline-offset: 0; }
.cert .addr { font-size: 19px; font-weight: 700; color: var(--ink); }
.cert .meta { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); }

/* GOV.UK tag: uppercase, bold, a coloured field. */
.cert .state, .badge, .pill {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px 3px;
  border-radius: 0;
  border: none;
  white-space: nowrap;
}
.cert .state { background: var(--info-wash); color: var(--ink); }
.cert .state.expired { background: var(--gov-red); color: var(--gov-white); }
.cert .state.soon { background: var(--accent-wash); color: var(--medium); }
.badge { background: var(--info-wash); color: var(--ink-faint); }
.badge.warn { background: var(--accent-wash); color: var(--medium); }
.pill.inside { background: var(--gov-black); color: var(--gov-white); }
.pill.inside-edge { background: var(--accent-wash); color: var(--medium); }
.pill.nearby { background: var(--info-wash); color: var(--ink); }

/* ----------------------------------------------------------------- tallies */

.tally, .totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
  max-width: 72rem;
  overflow: hidden;
}
.tally div, .totals div {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  padding: 15px;
  position: relative;
  flex: none;
}
.tally div:last-child, .totals div:last-child { border-right: none; }
.tally .n, .totals .n {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.tally .l, .totals .l {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-top: 4px;
}
.tally .expired { background: var(--high-wash); }
.tally .soon { background: var(--accent-wash); }
.tally .expired::before, .tally .soon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
}
.tally .expired::before { background: var(--gov-red); }
.tally .soon::before { background: var(--gov-yellow); }
.tally .expired .n { color: var(--gov-red); }
.tally .soon .n { color: var(--ink); }

/* ------------------------------------------------------------------ tables */

table.levels, .elements-table { font-size: 16px; border-collapse: collapse; }
.levels thead th, .elements-table thead th {
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--gov-black);
  padding: 10px 15px 10px 0;
}
.levels td, .elements-table td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 10px 15px 10px 0;
  vertical-align: top;
}
.levels tbody tr:nth-child(even) td,
.elements-table tbody tr:nth-child(even) td { background: transparent; }
.levels tr.total td { border-top: 2px solid var(--gov-black); border-bottom: none; font-weight: 700; }
.levels td.blank, .elements-table td.stars.blank { color: var(--ink-faint); }
.elements-table td.el { color: var(--ink); font-weight: 700; font-size: 16px; }
.elements-table td.stars { color: var(--ink); font-weight: 700; letter-spacing: 2px; }

/* ------------------------------------------------------ notices and blocks */

.msg { font-size: 16px; color: var(--ink-faint); max-width: 90ch; line-height: 1.4; }
.msg.error { color: var(--gov-red); font-weight: 700; }

/* GOV.UK notification banner: a heavy coloured rule, a labelled heading. */
.clean, .caution, .verify, .brief {
  border-radius: 0;
  border: 5px solid var(--gov-green);
  background: var(--surface);
  color: var(--ink);
  padding: 15px 20px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
}
.clean::before {
  content: "Confirmed";
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--gov-green);
  margin-bottom: 4px;
}
.caution { border-color: var(--gov-yellow); }
.caution::before {
  content: "Important";
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.verify { border-color: var(--gov-red); }
.verify h3 { color: var(--gov-red); font-size: 16px; }
.verify li { color: var(--ink); font-size: 16px; }
.brief { border-color: var(--gov-black); }

/* Designations read as GOV.UK inset text — a thick rule, no box. */
.desig, .panel-body > .desig {
  border-left: 10px solid var(--rule);
  padding: 10px 0 10px 15px;
  background: transparent;
}
.desig.high { border-left-color: var(--gov-red); }
.desig.medium { border-left-color: var(--gov-yellow); }
.desig.info { border-left-color: var(--rule); }
.desig-head strong { font-size: 19px; font-weight: 700; }
.desig-head .name { color: var(--ink-faint); font-size: 16px; }
.desig .facts { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); }
.desig p { font-size: 16px; max-width: 86ch; line-height: 1.4; }
.desig .detail { border-left: 4px solid var(--rule); color: var(--ink-faint); font-size: 16px; }

.listed li { border-bottom: 1px solid var(--rule-soft); font-size: 16px; padding: 8px 0; }
.listed li span:first-child { font-weight: 700; }
.listed .m { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); }

/* ----------------------------------------------------------- domain blocks */

.brief-band {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 10px solid var(--gov-yellow);
  border-radius: 0;
  box-shadow: none;
  padding: 15px 20px;
  gap: 12px 20px;
}
.brief-band .why { font-size: 16px; color: var(--ink-faint); max-width: 70ch; }
.brief-band button {
  font-size: 19px;
  font-weight: 400;
  background: var(--gov-green);
  color: var(--gov-white);
  border-color: transparent;
  box-shadow: 0 2px 0 var(--gov-green-dark);
  padding: 8px 14px 7px;
}

.fee {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--gov-black);
  border-radius: 0;
  padding: 20px;
}
.fee .figure {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.09;
}

.record-row {
  font-size: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.record-row .sub { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); }

.map-frame, .sv-frame { border: 1px solid var(--rule); border-radius: 0; }
.map-legend { font-size: 14px; color: var(--ink-faint); }

.w3w .words { font-family: var(--mono); font-weight: 700; font-size: 19px; color: #e11f26; }
.w3w .near { font-size: 16px; color: var(--ink-faint); }

.improve li { font-size: 16px; }
.hit { font-size: 16px; }
.hit .t { font-size: 19px; font-weight: 700; }
.hit .n { font-family: var(--mono); font-size: 14px; }
.hit:hover { background: var(--gov-grey-3); }

.chipbtn {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
  color: var(--accent-ink);
  text-decoration: underline;
}
.chipbtn:hover { background: var(--gov-grey-3); }

.scroll-note { font-family: var(--sans); font-size: 14px; color: var(--ink-faint); }
.reg { font-size: 16px; }
.actions { gap: 10px 15px; align-items: center; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 40.0625em) {
  .panel > header h2 { font-size: 20px; }
  .lead-fact .v { font-size: 27px; }
  .tally .n, .totals .n { font-size: 27px; }
  .fee .figure { font-size: 36px; }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .top { position: static; }
  .panel-body { padding: 15px; }

  /* A record row stacks: band, then the address on a full line, then its
     status. Left as a three-column grid the address column collapsed and
     "Grosvenor" broke mid-word. */
  .cert, #prop-list .cert {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 8px;
  }
  .cert .state { grid-column: 1 / -1; justify-self: start; }
  .cert.noband { grid-template-columns: minmax(0, 1fr); }
  .cert .addr { overflow-wrap: break-word; word-break: normal; hyphens: none; }

  /* The button takes the width; its explanation sits underneath. */
  .brief-band { flex-direction: column; align-items: stretch; }
  .brief-band button { width: 100%; }
  .brief-band .why { max-width: none; }

  .tally, .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally div, .totals div { border-bottom: 1px solid var(--rule); }
  .tally div:nth-child(2n), .totals div:nth-child(2n) { border-right: none; }
}