/* PackForge report styling.

   Direction: royal navy with a metallic sky gradient, taken from how the
   institutional property-intelligence houses present research - CoStar's navy
   masthead over a dense data body, PropertyData's dark panels, LonRes's deep
   slate. Every neutral is cool; there is no cream anywhere.

   Type stays salet.uk's: Fraunces for display, Inter for text, both
   self-hosted from node_modules and served at /fonts. Not a CDN, because
   /privacy names every sub-processor and a font CDN would silently add one.

   The chart palette was COMPUTED against this page's actual surfaces with the
   dataviz validator, not carried over: #1c5cab and #2a9d8f pass all six checks
   on the #f4f8fc paper. */

@import url("/fonts/inter/index.css");
@import url("/fonts/fraunces/index.css");

:root {
  /* Royal navy ground, metallic sky accents. The reference points are the
     institutional property-intelligence houses: CoStar's navy masthead over a
     dense data body, PropertyData's dark panels, LonRes's deep slate. The
     warm ivory is gone entirely - every neutral below is cool. */

  --navy-900: #08152c;      /* page ground */
  --navy-800: #0f2244;      /* masthead, panels */
  --navy-700: #17325f;
  --navy-600: #1f437c;

  /* Metallic sky: the light steel-blues that give the gradient its sheen. */
  --sky-500: #5b8fc9;
  --sky-400: #86b0dc;
  --sky-300: #aecbea;
  --sky-200: #d0e1f4;
  --sky-100: #e8f1fa;

  --paper: #f4f8fc;         /* cool near-white, never cream */
  --paper-2: #ffffff;
  --ink: #0b1626;
  --ink-2: #24374f;
  --slate: #5b6b80;         /* secondary text on paper */
  --mist: #93a3b6;
  --line: #d5e0ec;
  --line-dark: #1d3357;

  --gold: #c8a95e;          /* the one warm note, used sparingly as a rule */
  --blocker: #b3261e;
  --caution: #a15c07;
  --radius: 2px;

  --display: "Fraunces Variable", Georgia, "Times New Roman", serif;
  --sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Money lines up on the digit. One property, and it does more for how
   professional a data report looks than any amount of decoration. */
table, .range, .stat-value, td, th, .ch-label, .ch-axis {
  font-variant-numeric: tabular-nums;
}

main { max-width: 54rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
  font-weight: 600;
}
h1 { font-size: 2.5rem; line-height: 1.08; margin: 0 0 .5rem; }
h2 {
  font-size: 1.4rem; line-height: 1.25;
  margin: 3rem 0 .85rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
h3 { font-size: 1.05rem; margin: 2rem 0 .6rem; color: var(--ink-2); }
p { margin: 0 0 1rem; }
a { color: var(--navy-600); text-underline-offset: 2px; }

/* --- masthead: the metallic sky ---------------------------------------
   A real gradient with a light rake across it, so it reads as brushed metal
   catching the sky rather than a flat block of blue. */

.bar {
  background:
    radial-gradient(120% 180% at 12% -40%, rgba(174,203,234,.30) 0%, rgba(174,203,234,0) 55%),
    linear-gradient(104deg, var(--navy-900) 0%, var(--navy-700) 46%, var(--navy-600) 72%, #24518f 100%);
  border-bottom: 1px solid var(--line-dark);
  padding: 1rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: baseline;
  position: relative;
}
.bar::after {
  /* the metallic highlight */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%);
}
.brand {
  font-family: var(--display); font-weight: 600; font-size: 1.4rem;
  letter-spacing: -0.02em; text-decoration: none; color: #fff;
}
.brand span { color: var(--sky-400); }
.bar nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; }
.bar nav a { font-size: .875rem; text-decoration: none; color: var(--sky-300); }
.bar nav a:hover, .bar nav a.on { color: #fff; text-decoration: underline; }
.bar .link { color: var(--sky-300); }

/* --- the report as a document ----------------------------------------- */

.report {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0 0 3rem;
  margin-top: 1.5rem;
  box-shadow: 0 24px 60px -30px rgba(4, 14, 32, .65);
}
.report > *:not(.report-head):not(.sample-flag) { margin-left: 3.25rem; margin-right: 3.25rem; }
.report > section { margin-left: 3.25rem; margin-right: 3.25rem; }

/* The cover band: navy, metallic, the address in white. */
.report-head {
  background:
    radial-gradient(90% 160% at 88% -30%, rgba(174,203,234,.28) 0%, rgba(174,203,234,0) 60%),
    linear-gradient(100deg, var(--navy-900) 0%, var(--navy-700) 58%, var(--navy-600) 100%);
  color: #fff;
  padding: 2.75rem 3.25rem 2.5rem;
  position: relative;
}
.report-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--sky-400) 42%, transparent 100%);
}
.report-head h1 { color: #fff; margin-bottom: .35rem; }
.report-head .subject { color: var(--sky-300); font-size: 1.05rem; margin: 0; }
.report-head .eyebrow {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky-400); margin: 0 0 .85rem; font-weight: 600;
}

.report section:first-of-type h2 { border-top: 0; padding-top: 0; }

.disclaimer {
  background: transparent; border-left: 2px solid var(--sky-500);
  padding: .3rem 0 .3rem 1.15rem; font-size: .95rem;
  color: var(--slate); margin: 2rem 0;
}

.range {
  font-family: var(--display); font-variation-settings: "opsz" 72;
  font-size: 2.7rem; line-height: 1.05; letter-spacing: -0.03em;
  font-weight: 600; color: var(--navy-700); margin: .5rem 0 .25rem;
}

.lead { font-size: 1.2rem; line-height: 1.55; color: var(--slate); max-width: 38rem; }
.fine { font-size: .875rem; color: var(--slate); }
.src { font-size: .75rem; color: var(--mist); margin: .35rem 0 0; }
.subject { color: var(--slate); }
.limit { border-left: 2px solid var(--line); padding-left: .9rem; color: var(--slate); font-size: .92rem; }

/* --- stats ------------------------------------------------------------- */

.stats { display: grid; gap: 1rem; margin: 0 0 1rem; }
@media (min-width: 34rem) { .stats { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.stat {
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 2px solid var(--sky-500); padding: .85rem 1rem;
}
.stat-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--slate); font-weight: 600; }
.stat-value { display: block; font-size: 1.35rem; font-weight: 600; color: var(--navy-700); line-height: 1.25; margin-top: .15rem; }
.stat-note { display: block; font-size: .78rem; color: var(--mist); margin-top: .2rem; line-height: 1.45; }

.area-block { margin: 0 0 2.25rem; }
.area-block h3 { margin-top: 1.75rem; }

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

.grid { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .92rem; }
.grid th, .grid td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--slate); border-bottom: 1px solid var(--navy-700);
}
.grid tbody tr:hover { background: var(--sky-100); }
.grid { display: block; overflow-x: auto; }
@media (min-width: 40rem) { .grid { display: table; } }

/* --- findings ---------------------------------------------------------- */

.finding { background: var(--paper-2); border-left: 2px solid var(--mist); padding: .9rem 1.1rem; margin: 0 0 .85rem; }
.finding.blocker { border-left-color: var(--blocker); }
.finding.caution { border-left-color: var(--caution); }
.finding p { margin: 0 0 .4rem; }
.finding .tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--slate); font-weight: 700; }
.finding.blocker .tag { color: var(--blocker); }
.finding.caution .tag { color: var(--caution); }
.finding .cite { font-size: .78rem; color: var(--mist); margin: 0; }

/* --- forms, buttons, cards --------------------------------------------- */

.card, .note, .form, .sample-cta, .status-panel {
  background: var(--paper); border: 1px solid var(--line);
  padding: 1.5rem; border-radius: var(--radius);
}
.card h2, .sample-cta h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.hero { padding: 1.5rem 0 .5rem; color: var(--paper); }
.hero h1 { color: #fff; }
.hero .lead, .hero-samples { color: var(--sky-300); }
.hero-samples a { color: var(--sky-400); font-weight: 600; }
.cards { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
.price { font-weight: 700; color: var(--navy-600); }

.form { display: grid; gap: 1rem; }
label { display: grid; gap: .3rem; font-size: .95rem; }
label.check { grid-template-columns: auto 1fr; align-items: start; gap: .5rem; }
input, textarea, select {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-2); width: 100%; color: var(--ink);
}
input[type="checkbox"] { width: auto; }
input:focus, textarea:focus { outline: 2px solid var(--sky-500); outline-offset: 1px; }

.btn {
  display: inline-block; background: var(--navy-700); color: #fff; border: 0;
  border-radius: var(--radius); padding: .75rem 1.3rem; font: inherit;
  font-weight: 600; text-decoration: none; cursor: pointer; justify-self: start;
}
.btn:hover { background: var(--navy-600); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--navy-600); text-decoration: underline; cursor: pointer; }
.link.danger { color: var(--blocker); }
.inline { display: inline; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }

.error { background: #fdf0ef; border-left: 2px solid var(--blocker); padding: .8rem 1rem; }
.notice { background: var(--sky-100); border-left: 2px solid var(--sky-500); padding: .8rem 1rem; }
.sample-flag {
  background: var(--navy-800); color: var(--sky-300); font-size: .85rem;
  padding: .7rem 3.25rem; margin: 0; border-bottom: 1px solid var(--line-dark);
}

.pill { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 2px; }
.pill.complete { border-color: var(--navy-600); color: var(--navy-600); }
.pill.failed { border-color: var(--blocker); color: var(--blocker); }
.pill.running, .pill.queued { border-color: var(--caution); color: var(--caution); }

.status-panel { margin: 1.5rem 3.25rem; }
.dots::after { content: ""; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { to { content: "...."; } }

footer {
  border-top: 1px solid var(--line-dark); padding: 1.75rem 1.5rem 3rem;
  max-width: 54rem; margin: 0 auto; color: var(--mist); font-size: .85rem;
}
footer a { color: var(--sky-400); }

/* --- charts ------------------------------------------------------------
   Palette computed with the dataviz validator against THIS page's paper
   (#f4f8fc): #1c5cab and #2a9d8f pass all six checks, including contrast. */

.report {
  --ch-1: #1c5cab;
  --ch-2: #2a9d8f;
  --ch-surface: var(--paper-2);
  --ch-ink: var(--ink);
  --ch-muted: #93a3b6;
  --ch-grid: #dfe8f2;
  --ch-axis: #c3cfdd;
}
.chart { margin: 1.5rem 0 1.25rem; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart figcaption { font-size: .8rem; color: var(--slate); margin-top: .6rem; line-height: 1.5; }
.ch-label { font: 600 12px/1 "Inter Variable", Helvetica, Arial, sans-serif; fill: var(--ink); }
.ch-axis { font: 400 11px/1 "Inter Variable", Helvetica, Arial, sans-serif; fill: var(--slate); }
.ch-band-letter { font: 700 13px/1 "Inter Variable", Helvetica, Arial, sans-serif; fill: #10240f; }
.ch-band-range { font: 400 11px/1 "Inter Variable", Helvetica, Arial, sans-serif; fill: #10240f; opacity: .78; }

@media (max-width: 40rem) {
  .report { margin: 1rem -1.5rem 0; border-left: 0; border-right: 0; }
  .report > *:not(.report-head):not(.sample-flag), .report > section { margin-left: 1.25rem; margin-right: 1.25rem; }
  .report-head { padding: 2rem 1.25rem 1.75rem; }
  .sample-flag { padding-left: 1.25rem; padding-right: 1.25rem; }
  .status-panel { margin: 1.25rem; }
  h1 { font-size: 1.9rem; }
  .range { font-size: 2rem; }
}

@media print {
  body { background: #fff; }
  .bar, .sample-cta, .actions, footer { display: none; }
  main { max-width: none; padding: 0; }
  .report { border: 0; box-shadow: none; margin: 0; }
  .report-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report section, .area-block, .chart, .finding { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .grid { display: table; font-size: .78rem; }
  a { text-decoration: none; color: inherit; }
}

/* --- section separation ------------------------------------------------
   Every section looked identical, so the report read as one long column.
   Three devices now tell them apart, in increasing strength:
     a numbered index, so the reader always knows where they are;
     a surface change on the sections that state a cost or a certificate,
       which are the ones a buyer returns to;
     a coloured rule keyed to the section's job.
   The colours are the validated categorical hues, used as identity marks on
   the rule only - never on text, and never as the sole carrier of meaning,
   because the heading always says what the section is. */

.sec { position: relative; padding-top: .25rem; }
.sec-no {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  color: var(--sky-500); margin: 2.75rem 0 -.5rem;
}
.sec h2 { border-top: 0; padding-top: .35rem; margin-top: 0; }
.sec h2::after {
  content: ""; display: block; width: 2.75rem; height: 3px;
  margin-top: .7rem; border-radius: 2px; background: var(--sky-500);
}

/* Job-keyed rules. Evidence is blue, money is rust, condition is teal. */
.sec-valuation h2::after,
.sec-comparables h2::after,
.sec-like_for_like h2::after { background: #1c5cab; }
.sec-stamp_duty h2::after,
.sec-rent h2::after { background: #c4501c; }
.sec-epc h2::after { background: #2a9d8f; }
.sec-area h2::after { background: var(--navy-700); }

/* The two sections a buyer comes back to sit on their own surface, lifted
   off the paper so they are findable by thumb as much as by eye. */
.sec-stamp_duty, .sec-epc {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sky-500);
  padding: .5rem 1.75rem 1.5rem;
  margin-top: 2.5rem;
}
.sec-stamp_duty { border-left-color: #c4501c; }
.sec-epc { border-left-color: #2a9d8f; }
.sec-stamp_duty .sec-no, .sec-epc .sec-no { margin-top: 1.5rem; }

/* Area sub-blocks: each its own card, so ten sources do not blur into one. */
.area-block {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.25rem;
}
.area-block h3 {
  margin: 0 0 .75rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy-700);
}
.area-block .grid { margin-bottom: .5rem; }

@media (max-width: 40rem) {
  .sec-stamp_duty, .sec-epc { padding: .5rem 1rem 1.25rem; }
  .area-block { padding: 1rem; }
}

@media print {
  .sec-stamp_duty, .sec-epc, .area-block { border-width: 1px; }
  .sec-no { color: var(--slate); }
}