/* Propeto — Property Intelligence · "Institutional Precision" design system.
   Source: docs/design/institutional_precision.DESIGN.md (Stitch package).
   The Modern Surveyor: slate legal-ink structure, cyan reserved for ACTIONS/focus/
   progress only, tonal layers + 1px outlines, one very soft ambient shadow permitted
   (0 4px 12px @5% primary). Pills forbidden except status badges. 8px baseline. */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* colors — DESIGN.md frontmatter */
  --surface: #f8f9fa;
  --surface-low: #f3f4f5;
  --surface-container: #edeeef;
  --card: #ffffff;
  --ink: #041a23;              /* primary — legal ink */
  --on-ink: #ffffff;
  --ink-container: #1a2f38;
  --ink-soft: #42474a;         /* on-surface-variant */
  --outline: #c2c7ca;          /* outline-variant — 1px structure */
  --outline-strong: #73787b;
  --cyan: #006876;             /* secondary — ACTIONS / focus / progress ONLY */
  --cyan-container: #58e6ff;
  --on-cyan-container: #006573;
  --tertiary: #11303c;
  --tertiary-soft: #7b98a7;
  --error: #ba1a1a;
  --error-bg: #ffdad6;
  --amber: #8a5a00;            /* report palette (findings/status), never cyan */
  --amber-bg: #fdf3e1;
  --green: #1b5e20;            /* verified — report palette */
  --green-tint: #e7f3ef;
  --blue-grey: #ebf0f5;
  --hover: #f1f5f9;
  --border: #e2e8f0;           /* card border per DESIGN.md components */
  /* shape — Soft(1): sm .125rem badges, .25 controls, .5 cards */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-card: 0.5rem;
  --shadow-ambient: 0 4px 12px rgba(4, 26, 35, 0.05);   /* the ONE permitted shadow */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Hanken Grotesk', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 24px;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 767px) { .container { padding: 0 16px; } }

/* ---------- type ---------- */
h1, .display { font-family: var(--serif); font-weight: 700; font-size: 48px; line-height: 56px; letter-spacing: -0.02em; margin: 0 0 16px; }
@media (max-width: 767px) { h1, .display { font-size: 28px; line-height: 36px; } }
h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 32px; margin: 0 0 12px; }
h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 28px; margin: 0 0 8px; }
.label-caps {
  font-size: 12px; font-weight: 600; line-height: 16px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft);
}
.mono, .data, .ref { font-family: var(--mono); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.data { font-size: 15px; }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; line-height: 20px; }
a { color: var(--ink); }
a.quiet { color: var(--ink-soft); text-decoration: none; }
a.quiet:hover { color: var(--ink); }

/* ---------- brand ---------- */
.brand { text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 26px; width: auto; flex: none; display: block; }
.brand .strapline { align-self: center; }
.brand .wordmark { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.brand .strapline { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 767px) { .brand .strapline { display: none; } }

/* ---------- header / footer ---------- */
.site-header { background: var(--card); border-bottom: 1px solid var(--border); padding: 16px 0; }
.site-header .container { display: flex; align-items: center; gap: 32px; }
.nav { margin-left: auto; display: flex; gap: 24px; align-items: center; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.nav a:hover, .nav a.active { color: var(--ink); }
.site-footer { border-top: 1px solid var(--border); margin-top: 96px; padding: 32px 0 48px; color: var(--ink-soft); font-size: 14px; }
.site-footer .container { display: flex; flex-direction: column; gap: 12px; }
.site-footer .cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer a { color: var(--ink-soft); }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-block; padding: 10px 20px; border-radius: var(--radius);
  font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; line-height: 20px;
}
.btn-primary { background: var(--ink); color: var(--on-ink); }           /* structural */
.btn-primary:hover { background: var(--ink-container); }
.btn-action { background: var(--cyan); color: #fff; }                    /* THE action: pay/submit/finalise */
.btn-action:hover { background: #00525d; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--hover); }
.btn-quiet { background: transparent; color: var(--ink-soft); border-color: var(--border); }
.btn-quiet:hover { background: var(--hover); color: var(--ink); }
.btn-danger { background: transparent; color: var(--error); border-color: var(--error); }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.btn-sm { padding: 5px 12px; font-size: 13px; }

/* Report actions as icons, right-aligned (UI-TWEAKS #6). Quiet by default — these sit beside
   the analysis, they are not THE action, so no cyan fill; cyan stays on the focus ring only.
   36px square clears the 24px minimum target and lands on the 8px baseline. */
/* address left, actions right, both on the header's baseline; stacks under 767px so a long
   address never squeezes the icons off the row. */
.report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.report-head h1 { flex: 1; min-width: 0; }
@media (max-width: 767px) { .report-head { display: block; } }
.report-actions { display: flex; justify-content: flex-end; gap: 8px; }
.report-actions form { display: contents; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink-soft); cursor: pointer;
}
.btn-icon:hover { background: var(--hover); color: var(--ink); border-color: var(--outline-strong); }
.btn-icon:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin: 16px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--outline); border-radius: var(--radius);
  font-family: var(--sans); font-size: 15px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0, 104, 118, .18); }
input[type=file] { font-size: 14px; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 24px; margin-bottom: 16px;
}
.card.raised { box-shadow: var(--shadow-ambient); }
.card.decider { border: 2px solid var(--ink); }
.card:hover.linkable { background: var(--hover); }
.card h3 { margin-top: 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- truth-status & state badges (semantics retained, palette per DESIGN.md) */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  line-height: 16px; vertical-align: middle;
}
.badge-verified   { color: var(--green); background: var(--green-tint); }
.badge-confirmed  { color: #2c4a63; background: var(--blue-grey); }
.badge-stated     { color: var(--ink-soft); background: var(--surface-container); }
.badge-inferred   { color: var(--ink-soft); background: transparent; border: 1px dashed var(--outline-strong); font-style: italic; }
.badge-nocheck    { color: #5a6672; background: #eef1f4; }   /* could-not-check: honest neutral, never a tick */
.badge-error      { color: var(--error); background: var(--error-bg); }
.badge-amber      { color: var(--amber); background: var(--amber-bg); }
.badge-active     { color: var(--on-cyan-container); background: rgba(88, 230, 255, .25); }  /* in-progress states only */

/* order statuses */
.st-awaiting_payment { color: var(--amber); background: var(--amber-bg); }
.st-received  { color: #2c4a63; background: var(--blue-grey); }
.st-awaiting_upload { color: var(--amber); background: var(--amber-bg); }
.st-analysing { color: var(--on-cyan-container); background: rgba(88, 230, 255, .25); }  /* progress = cyan */
.st-ready     { color: var(--green); background: var(--green-tint); }
.st-cancelled { color: var(--ink-soft); background: var(--surface-container); }
.st-refunded  { color: var(--ink-soft); background: var(--surface-container); }
.st-needs_attention { color: var(--error); background: var(--error-bg); }

/* ---------- order step indicator (Checkout → Payment → Upload → Analysis → Report) */
.steps { display: flex; gap: 0; margin: 24px 0; padding: 0; list-style: none; flex-wrap: wrap; }
.steps li { flex: 1; min-width: 96px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding-top: 14px; position: relative; }
.steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--surface-container); }
.steps li.done::before { background: var(--ink); }
.steps li.current::before { background: var(--cyan); }       /* progress = cyan */
.steps li.current { color: var(--cyan); }
.steps li.done { color: var(--ink); }

/* ---------- coverage statement block ---------- */
.coverage { background: var(--ink); color: #fff; border-radius: var(--radius-card); padding: 24px 32px; margin: 24px 0; }
.coverage .label-caps { color: #8197a2; }
.coverage p { font-family: var(--serif); font-size: 22px; line-height: 30px; font-weight: 600; margin: 6px 0 0; }

/* ---------- financial buckets ---------- */
.bucket { border-left: 4px solid var(--border); padding: 4px 0 4px 16px; margin: 12px 0; }
.bucket .label-caps { margin-bottom: 2px; }
.bucket .amount { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bucket-confirmed { border-left-color: var(--green); }
.bucket-estimated { border-left-color: #9aa4ae; }
.bucket-contingent { border-left-style: dashed; border-left-color: #9aa4ae; }
.bucket-seller { border-left-color: var(--ink); }

/* ---------- tables ---------- */
table.list { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
table.list th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-low); }
table.list td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; vertical-align: top; }
table.list td.ref, table.list td.mono { font-family: var(--mono); font-size: 13px; }
table.list tr:last-child td { border-bottom: none; }
table.list tr:hover td { background: var(--hover); }

/* ---------- quotes / citations ---------- */
.source-quote { border-left: 3px solid var(--border); padding: 4px 0 4px 16px; margin: 8px 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }

/* ---------- misc ---------- */
.stack-lg { margin-top: 48px; }
.stack-md { margin-top: 24px; }
.stack-sm { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row .spacer { flex: 1; }
.flash { border: 1px solid var(--green); background: var(--green-tint); color: var(--green); padding: 12px 16px; border-radius: var(--radius); margin: 16px 0; font-size: 14px; font-weight: 500; }
.flash.err { border-color: var(--error); background: var(--error-bg); color: var(--error); }
/* inline field-level rejection (e.g. a bad discount code) — the message sits with the
   input it belongs to, so it needs the colour without the banner's box. */
.err-text { color: var(--error); }
.flash.info { border-color: var(--outline); background: var(--surface-low); color: var(--ink-soft); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0 8px 20px; border-left: 2px solid var(--border); position: relative; font-size: 14px; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.timeline li .mono { color: var(--ink-soft); }
.hero { padding: 96px 0 64px; }
@media (max-width: 767px) { .hero { padding: 48px 0 32px; } }
.hero p.lede { font-size: 18px; line-height: 28px; color: var(--ink-soft); max-width: 640px; }
.hero-search { display: flex; gap: 12px; max-width: 640px; margin-top: 24px; }
.hero-search input { flex: 1; }
@media (max-width: 767px) { .hero-search { flex-direction: column; } }
.expiry-ok { color: var(--green); font-weight: 600; }
.expiry-soon { color: var(--amber); font-weight: 600; }
.expiry-gone { color: var(--error); font-weight: 600; }
.admin-banner { background: var(--ink); color: #fff; font-size: 13px; padding: 6px 0; }
.admin-banner .container { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-banner a { color: #8197a2; text-decoration: none; }
.admin-banner a:hover, .admin-banner a.active { color: #fff; }
.disclaimer { font-size: 13px; line-height: 19px; color: var(--ink-soft); border-top: 1px solid var(--border); padding-top: 12px; }
.disclaimer strong { color: var(--ink); }
.price { font-family: var(--serif); font-size: 32px; font-weight: 700; }
.price .per { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.teaser { border: 1px dashed var(--outline-strong); border-radius: var(--radius-card); padding: 16px 20px; margin: 16px 0; background: var(--surface-low); }
.kpi { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 40px; }
.kpi-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- postcode picker (search) ---------- */
.picker-list { list-style: none; margin: 12px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.picker-list li { break-inside: avoid; border-bottom: 1px solid var(--border); }
.picker-list a { display: block; padding: 8px 4px; text-decoration: none; color: var(--ink); font-size: 14px; }
.picker-list a:hover { background: var(--hover); color: var(--cyan); }
@media (max-width: 767px) { .picker-list { columns: 1; } }

/* ---------- order offers (3-up) ---------- */
.offer { cursor: pointer; margin: 0; position: relative; text-transform: none; letter-spacing: 0; display: block; }
.offer input[type=radio] { width: auto; margin-right: 6px; }
.offer .price { display: block; font-family: var(--mono); font-size: 24px; margin: 8px 0; color: var(--ink); }
.offer-blurb { font-weight: 400; color: var(--ink-soft); display: block; margin-top: 6px; }
.offer.selected, .offer-row.selected { border-color: var(--ink); }
.offer.selected { border-width: 2px; }
.offer.recommended { border: 2px solid var(--cyan); }
.offer-flag { position: absolute; top: -10px; right: 12px; }
.offer-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border);
             border-radius: var(--radius); padding: 8px 10px; margin-top: 10px; cursor: pointer;
             font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); }

/* ---------- analysis progress (stage bar + timer) ---------- */
.aprog { margin-top: 6px; }
.aprog-bar { display: flex; gap: 3px; margin-bottom: 4px; }
.aprog-seg { height: 6px; flex: 1; background: var(--surface-container); border-radius: 2px; }
.aprog-seg.done { background: var(--cyan); }
.aprog-seg.live { background: var(--cyan); opacity: .45; animation: aprog-pulse 1.4s ease-in-out infinite; }
@keyframes aprog-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.aprog-label { color: var(--ink-soft); text-transform: capitalize; }
.aprog-compact { max-width: 150px; }
.aprog-compact .aprog-bar { margin-bottom: 2px; }
.aprog-compact .aprog-seg { height: 4px; }
.aprog-compact .aprog-label { font-size: 12px; }

/* ---------- "Continue with Google" — Google brand guidelines ----------
   The mark, its 18px size, the 12px gap, the #747775 outline and the 40px height are
   GOOGLE's to specify, not ours. They are hard-coded on purpose and must NOT be themed to
   Institutional Precision — a recoloured G is an off-brand G. Only the label font follows
   our stack, which the guidelines permit. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
  background: #fff; border: 1px solid #747775; border-radius: 4px;
  color: #1f1f1f; font-family: var(--sans); font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.btn-google:hover { background: #f7f8f8; }
.btn-google:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn-google svg { flex: none; display: block; }

/* ---------- landing: the two entry paths, side by side ----------
   "No pack yet → search the record" | "Have the pack → upload it" — parallel choices at a
   glance, not a stack that implies one comes first. Collapses to stacked before the columns
   cramp (the dropzone needs room to read as a drop target). */
.entry-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 24px; }
@media (max-width: 900px) { .entry-paths { grid-template-columns: 1fr; } }
/* in the row each path owns its column: the 640px caps and auto-margins that centred them
   as stacked blocks would now fight the grid */
.entry-paths p.lede,
.entry-paths .hero-search { max-width: none; }
.entry-paths .hero-search { margin-top: 16px; }
.entry-paths > #pack { max-width: none; margin: 0; }

/* ---------- homepage dropzone ---------- */
.dropzone { display: block; border: 2px dashed var(--outline); border-radius: var(--radius-card);
            padding: 36px 24px; text-align: center; cursor: pointer; background: var(--surface-low);
            text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); }
.dropzone:hover, .dropzone.dz-over { border-color: var(--cyan); background: var(--hover); }
.dropzone input[type=file] { display: none; }
.dz-picked { display: block; margin-top: 8px; }
/* the submit sits INSIDE the drop target, centred (UI-TWEAKS #9). .dropzone is already
   text-align:center, so the inline-block button centres itself; cursor:pointer is reset from
   the label's so it reads as a button, not more drop area. */
.dz-upload { margin-top: 16px; cursor: pointer; }

/* ---------- interactive report ---------- */
.report-verdict { display: inline-block; padding: 8px 16px; font-family: 'Hanken Grotesk', sans-serif;
                  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff;
                  background: var(--ink); }
.rv-ready_to_bid { background: #1f5c3d; }
.rv-proceed_with_caution, .rv-further_investigation_required { background: #7a5a12; }
.rv-not_bid_ready, .rv-skip { background: #8a2b2b; }
.rv-cant_tell { background: var(--nocheck, #5a6a72); }
.badge-alert { background: #f7e9e9; color: #8a2b2b; border: 1px solid #d9b8b8; }
details.finding > summary::-webkit-details-marker { display: none; }
details.finding[open] > summary { margin-bottom: 12px; }
#rv-columns { align-items: start; }
@media (max-width: 900px) { #rv-columns { grid-template-columns: 1fr !important; } }

@media print {
  nav, .admin-banner, form, .btn, #pip-export-pdf, script { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}