/* Propeto storefront — "Propeto Intelligence". Structure from 1px hairlines and tonal
   layers. NO shadows, NO gradients. Colour encodes provenance and severity, never mood. */

:root {
  /* — mirror of frontend/app/brand-tokens.css. Keep in sync. — */
  --ink: #1a1c1e;
  --soft: #44474a;          /* secondary text */
  --canvas: #f8f9fa;
  --surface: #ffffff;
  --sunk: #f3f4f5;          /* table headers, footer bands */
  --muted-bg: #f1f5f9;
  --line: #e2e8f0;          /* hairline */
  --line-strong: #c2c7ca;   /* emphasis outline: could-not-check, quiet panels */
  --action: #004225;        /* British Racing Green — ACTIONS and success ONLY */
  --action-ink: #00351e;    /* hover/pressed */

  /* truth-status — brief §4 */
  --st-verified-fg: #1b5e45;  --st-verified-bg: #e7f3ef;  --st-verified-line: #cbe0d7;
  --st-confirmed-fg: #2b4a63; --st-confirmed-bg: #ebf0f5; --st-confirmed-line: #d3dde6;
  --st-stated-fg: #55585b;    --st-stated-bg: #eef0f2;    --st-stated-line: #dfe2e5;
  --st-inferred-fg: #44474a;  --st-inferred-line: #c2c7ca;
  --st-cnc-fg: #55606b;       --st-cnc-line: #c2c7ca;

  /* severity — brief §5 */
  --sev-decider: #ba1a1a;
  --sev-shaper: #d15100;
  --sev-solicitor: #73787b;
  --bad-bg: #ffdad6;  --bad-fg: #93000a;

  --r-chip: 2px;            /* badges, cards, panels — crisp */
  --r-ctl: 4px;             /* buttons, inputs */
  --sans: "Public Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

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

body {
  margin: 0;
  font: 400 16px/1.5 var(--sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* — type scale. Serif for headings + the one verdict sentence, nothing else. — */
h1 { font: 700 40px/48px var(--serif); letter-spacing: -.02em; margin: 0; }
h2 { font: 600 24px/32px var(--serif); margin: 0; }
h3 { font: 600 20px/28px var(--serif); margin: 0; }
.eyebrow { font: 600 11px/16px var(--sans); letter-spacing: .12em;
           text-transform: uppercase; color: var(--soft); }
.muted { color: var(--soft); }
.num { font-variant-numeric: tabular-nums; }   /* EVERY money/date/year figure */
p { text-wrap: pretty; }

/* — shell — */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line);
            padding: 18px 48px; display: flex; align-items: flex-end;
            justify-content: space-between; gap: 24px; }
.masthead-nav { display: flex; align-items: center; gap: 20px;
                font: 600 11px/16px var(--sans); letter-spacing: .1em;
                text-transform: uppercase; color: var(--soft); }
main { max-width: 1120px; margin: 0 auto; padding: 44px 48px 72px; }
main.narrow { max-width: 760px; }          /* checkout, auth, order states */
main.slim   { max-width: 480px; }          /* payment, OTP */

/* — lockup (brief §2, §11: optical centre — wordtext nudged down 1px) — */
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none;
          color: var(--ink); }
.lockup:hover { color: var(--ink); }
.lockup svg { height: 22px; width: auto; color: currentColor; display: block; }
.lockup-text { display: block; transform: translateY(1px); }
.lockup-name { display: block; font: 700 20px/22px var(--serif); letter-spacing: .01em; }
.lockup-sub  { display: block; font: 600 8px/12px var(--sans); letter-spacing: .32em;
               text-transform: uppercase; color: var(--soft); margin-top: 3px; }

/* — surfaces. NO shadow. Ever. — */
.card  { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-chip); padding: 24px 28px; }
.card--quiet { border-color: var(--line-strong); }     /* honesty panels */
.card--sunk  { background: var(--sunk); }
.seal { background: var(--ink); color: #fff; border-radius: var(--r-chip);
        padding: 24px 28px; }                          /* verdict / coverage statement */
.seal-label { font: 600 10px/14px var(--sans); letter-spacing: .22em;
              text-transform: uppercase; color: rgba(255,255,255,.62); }
.verdict { font: 600 italic 22px/32px var(--serif); margin: 12px 0 0; max-width: 62ch; }
/* D1a: the lede must LAND — clearly heavier/larger/tighter than the body prose */
.verdict-lede { font: 700 27px/34px var(--serif); font-style: normal; letter-spacing: -.01em; }
.verdict-body { font: 400 italic 17px/27px var(--serif); color: rgba(255,255,255,.82); margin-top: 12px; }
/* D1b: "the single biggest issue…" — the engine's own sentence, verbatim, as a callout */
.verdict-keyline { font: 600 19px/28px var(--serif); font-style: normal; margin-top: 14px;
                   padding-left: 14px; border-left: 3px solid rgba(255,255,255,.62); }
/* D1c: verified headline strip — muted, subordinate to the lede, structured facts only */
.verdict-strip { font: 600 12px/18px var(--sans); letter-spacing: .08em;
                 text-transform: uppercase; color: rgba(255,255,255,.62); margin: 10px 0 0; }

/* — section rule: heading, hairline to the right, optional right-aligned meta — */
.section-head { display: flex; align-items: center; gap: 14px; margin-top: 56px; }
.section-head::after { content: ""; flex: 1; border-top: 1px solid var(--line); order: 1; }
.section-head > :not(h2) { order: 2; white-space: nowrap; }

/* — controls. Green means ACTION here, never status. — */
.btn { display: inline-block; font: 600 16px/22px var(--sans); color: #fff;
       background: var(--action); border: 1px solid var(--action);
       border-radius: var(--r-ctl); padding: 13px 22px; text-decoration: none;
       cursor: pointer; }
.btn:hover { background: var(--action-ink); color: #fff; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--muted-bg); color: var(--ink); }
.btn--sm { font-size: 14px; line-height: 20px; padding: 10px 18px; }
.btn--bad { background: transparent; color: var(--bad-fg); border-color: var(--bad-fg); }
.btn--bad:hover { background: var(--bad-bg); color: var(--bad-fg); }
.btn--block { display: block; width: 100%; text-align: center; }
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* form vertical rhythm — labels open a field group, submit sits clear of the fields */
form label { margin-top: 16px; }
form label:first-child { margin-top: 0; }
.field-row label { margin-top: 0; }
form .btn { margin-top: 20px; }
.row form .btn, .field-row .btn { margin-top: 0; }   /* inline forms (revoke, search) */

label { display: block; font: 600 11px/16px var(--sans); letter-spacing: .1em;
        text-transform: uppercase; color: var(--soft); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: 400 16px/24px var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); padding: 12px 14px;
}
input:focus-visible, select:focus-visible, a:focus-visible, .btn:focus-visible
  { outline: 2px solid var(--action); outline-offset: 2px; }
.field-note { font: 400 13px/19px var(--sans); color: var(--soft); margin: 6px 0 0; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.field-grow { flex: 1 1 280px; min-width: 0; }

/* landing rhythm: eyebrow over h1, lede under it, search card, section blocks */
.eyebrow + h1 { margin-top: 8px; }
.page-lede { color: var(--soft); max-width: 56ch; }
.hero-card { margin-top: 24px; }
.section-head + .card { margin-top: 16px; }

/* pack upload on the landing: a native file input styled as a drop zone — click to
   choose, or drag files onto it; the browser handles both with zero JS */
input[type="file"].file-drop {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-ctl);
  background: var(--sunk); padding: 26px 14px; cursor: pointer;
  font: 400 14px/20px var(--sans); color: var(--soft);
}
input[type="file"].file-drop::file-selector-button {
  font: 600 14px/20px var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--ink); border-radius: var(--r-ctl); padding: 8px 14px;
  margin-right: 12px; cursor: pointer;
}
input[type="file"].file-drop:hover,
input[type="file"].file-drop.is-drag { border-color: var(--ink); background: var(--muted-bg); }
.file-list { list-style: none; margin: 8px 0 0; padding: 0;
             font: 400 13px/20px var(--sans); color: var(--ink); }
.file-list li { padding: 2px 0; border-bottom: 1px dashed var(--line); }
.file-list li:last-child { border-bottom: 0; }

/* short-lease toggle under the address search — years fields reveal on tick (CSS only) */
input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--action); }
.check-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.check-row label { margin: 0; font: 400 14px/20px var(--sans); letter-spacing: 0;
                   text-transform: none; color: var(--ink); cursor: pointer; }
.sl-years { margin-top: 12px; }
.sl-years > div { width: 132px; }
.check-row:not(:has(:checked)) + .sl-years { display: none; }

/* the two front doors: address search (PIP) beside auction-pack entry, equal columns */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px;
       align-items: stretch; }
.duo > .card { display: flex; flex-direction: column; margin-top: 0; }
.duo .duo-body { flex: 1; }
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: 12px; }
}

/* form errors — neutral chrome, bad-fg text; never a red card wall */
.form-error { color: var(--bad-fg); background: var(--bad-bg);
              border-radius: var(--r-chip); padding: 10px 12px;
              font: 400 14px/20px var(--sans); margin: 0 0 16px; }

/* OTP / access-code entry (brief §7) */
.otp-input { width: 160px; font-size: 22px; letter-spacing: .18em;
             font-variant-numeric: tabular-nums; }

/* — data rows: grid + gap, never inline flow — */
.rows { display: flex; flex-direction: column; }
.rows--panel { background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--r-chip); }
.row { display: grid; gap: 20px; align-items: baseline;
       padding: 15px 24px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-head { background: var(--sunk); border-bottom: 1px solid var(--line-strong);
            padding: 12px 24px; font: 600 11px/16px var(--sans);
            letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.row-total { border-top: 2px solid var(--ink); border-bottom: 0; }
.align-r { text-align: right; }

/* named grid shapes used across templates (mobile collapse handles the rest) */
.row--pay    { grid-template-columns: 1fr 120px; }
.row--facts  { grid-template-columns: 220px 1fr 150px; }
.row--orders { grid-template-columns: 1fr 110px 150px 90px; }
.row--finder { grid-template-columns: 1fr 116px 176px 128px 116px; }
.row--cover  { grid-template-columns: 160px 1fr 1fr; }
.row-head { display: grid; gap: 20px; }

/* — truth-status badges (brief §4). Filled = we hold evidence. — */
.st { display: inline-block; font: 600 11px/16px var(--sans); letter-spacing: .08em;
      text-transform: uppercase; border-radius: var(--r-chip); padding: 3px 7px;
      white-space: nowrap; border: 1px solid transparent; }
.st--verified  { color: var(--st-verified-fg);  background: var(--st-verified-bg);
                 border-color: var(--st-verified-line); }
.st--confirmed { color: var(--st-confirmed-fg); background: var(--st-confirmed-bg);
                 border-color: var(--st-confirmed-line); }
.st--stated    { color: var(--st-stated-fg);    background: var(--st-stated-bg);
                 border-color: var(--st-stated-line); }
.st--inferred  { color: var(--st-inferred-fg);  background: transparent;
                 border: 1px dashed var(--st-inferred-line); font-style: italic; }
.st--cnc       { color: var(--st-cnc-fg);       background: transparent;
                 border-color: var(--st-cnc-line); }
/* a found contradiction is evidence we HOLD — filled, and allowed to be red
   (unlike could-not-check, which is an absence and stays neutral) */
.st--contradicts { color: var(--bad-fg); background: var(--bad-bg);
                   border-color: #eec4be; }

/* status legend — 5-up, stacks on mobile (brief §4) */
.legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.legend p { font: 400 13px/19px var(--sans); color: var(--soft); margin: 8px 0 0; }

/* — severity (brief §5) — */
.flag { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-chip); padding: 20px 24px; margin-top: 16px; }
.flag--decider   { border: 2px solid var(--ink); border-left: 6px solid var(--sev-decider); }
.flag--shaper    { border-left: 4px solid var(--sev-shaper); }
.flag--solicitor { border-left: 4px solid var(--sev-solicitor); }
.flag-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.flag-head h3 { max-width: 62ch; }
.flag-do { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }

/* — subject block under the headline: the demise actually being sold, its warnings,
     and the address note explaining any marketed-label gap — */
.sold-interest { max-width: 72ch; margin-top: 6px; }
.sold-interest-warn { max-width: 72ch; margin-top: 4px; font-weight: 600;
                      color: var(--sev-decider); }
.address-note { max-width: 72ch; margin-top: 4px; }

.sev-head { display: flex; align-items: center; gap: 10px; margin-top: 40px; }
.sev-swatch { width: 16px; height: 16px; border-radius: 1px; }
.sev-swatch--decider   { background: var(--sev-decider); }
.sev-swatch--shaper    { background: var(--sev-shaper); }
.sev-swatch--solicitor { background: var(--sev-solicitor); }
.sev-label { font: 700 12px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* — source disclosure: native <details>, zero JS (brief §5) — */
details > summary { cursor: pointer; list-style: none; font: 600 14px/20px var(--sans);
                    color: var(--action); text-decoration: underline;
                    text-underline-offset: 2px; padding: 6px 0; }
details > summary::-webkit-details-marker { display: none; }

/* — condensed report: grouped findings + leading missing-docs block (report brief 31 Jul).
     No shadows, no gradients; the truth-status palette is untouched — grouping folds
     presentation only, every item keeps its own chip. — */
.count-badge { display: inline-block; min-width: 20px; text-align: center; padding: 0 7px;
               border: 1.5px solid var(--ink); border-radius: 999px;
               font: 700 12px/20px var(--sans); vertical-align: 2px; margin-left: 4px; }
.card--missing { border: 2px solid var(--ink); }       /* the pre-bid block leads — outlined,
                                                          never red: absence is not an alarm */
.grp-lede { margin: 6px 0 0; }
.grp-list { border-top: 1px solid var(--line); margin-top: 10px; }
.grp-list > .grp-row, .grp-list > details > summary.grp-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font: 400 15px/22px var(--sans); color: var(--ink); text-decoration: none; }
.grp-list summary.grp-row > span:first-child::after {
  content: " ▸ more"; font: 600 12px/16px var(--sans); color: var(--action); }
.grp-list details[open] > summary.grp-row > span:first-child::after { content: " ▾"; }
.grp-body { padding: 4px 0 14px 14px; border-bottom: 1px solid var(--line); }
.agrees-fold, .doc-table-fold { margin-top: 16px; }
.quote { border-left: 2px solid var(--ink); padding: 4px 0 4px 14px; margin-top: 12px; }
.quote p { font: italic 400 14px/21px var(--sans); color: var(--soft); margin: 0; }
.quote cite { display: block; font: 400 12px/18px var(--sans); color: var(--soft);
              font-style: normal; margin-top: 6px; }

/* — analysing: real pipeline stages, not a fake bar (brief §6) — */
.stages { list-style: none; margin: 16px 0 0; padding: 0; }
.stages li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0;
             border-top: 1px solid var(--line); font: 400 15px/22px var(--sans); }
.sq { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 1px; align-self: center; }
.sq--done    { background: var(--ink); }
.sq--current { background: transparent; border: 2px solid var(--ink); }
.sq--todo    { background: transparent; border: 1px solid var(--line-strong); }

/* — finder: years-remaining emphasis + band bars (brief §9) — */
.years { font: 600 17px/24px var(--sans); font-variant-numeric: tabular-nums; }
.band-70_80   { color: var(--sev-solicitor); }
.band-60_70   { color: var(--sev-shaper); }
.band-under_60 { color: var(--sev-decider); }
.row--band { border-left: 3px solid transparent; }
.row--band.band-l-70_80    { border-left-color: var(--sev-solicitor); }
.row--band.band-l-60_70    { border-left-color: var(--sev-shaper); }
.row--band.band-l-under_60 { border-left-color: var(--sev-decider); }
.band-card { border-left: 4px solid var(--line-strong); }
.band-card--70_80    { border-left-color: var(--sev-solicitor); }
.band-card--60_70    { border-left-color: var(--sev-shaper); }
.band-card--under_60 { border-left-color: var(--sev-decider); }
.band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.stat-fig { font: 600 28px/34px var(--serif); font-variant-numeric: tabular-nums; }
.foot-band { background: var(--sunk); border-top: 1px solid var(--line-strong);
             padding: 12px 24px; display: flex; justify-content: space-between;
             align-items: center; gap: 16px; flex-wrap: wrap;
             font: 400 13px/19px var(--sans); color: var(--soft); }

/* legacy helpers still used by admin templates — restyled, not removed */
.price { font: 700 28px/34px var(--serif); font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font: 600 11px/16px var(--sans); letter-spacing: .08em;
         text-transform: uppercase; border-radius: var(--r-chip); padding: 3px 7px;
         background: var(--sunk); color: var(--soft); border: 1px solid var(--line); }

/* — mobile. Diligence gets read at viewings; treat this as first-class. — */
@media (max-width: 760px) {
  h1 { font-size: 30px; line-height: 36px; }
  h2 { font-size: 20px; line-height: 28px; }
  .masthead { padding: 14px 20px; }
  main, main.narrow, main.slim { padding: 22px 20px 40px; }
  .card, .seal { padding: 18px 20px; }
  .verdict { font-size: 17px; line-height: 26px; }
  .verdict-lede { font-size: 19px; line-height: 28px; }
  .verdict-body { font-size: 15px; line-height: 24px; }
  .section-head { margin-top: 32px; }
  .lockup-name { font-size: 17px; line-height: 20px; }
  .lockup-sub { display: none; }     /* subtitle is illegible under ~10px */
  .legend { grid-template-columns: 1fr; }
  .band-grid { gap: 10px; }
  .band-grid .stat-fig { font-size: 20px; line-height: 26px; }
  /* every .row collapses to stacked label/value pairs */
  .row { grid-template-columns: 1fr !important; gap: 4px; padding: 14px 16px; }
  .row-head { display: none; }
  .row .align-r { text-align: left; }
  .btn { display: block; width: 100%; text-align: center; }  /* 48px min target;
         width needed because <button> won't stretch as a bare block */
  .row .btn, .field-row .btn { width: auto; display: inline-block; }  /* inline forms */
  input, select { padding: 13px 14px; font-size: 16px; } /* 16px = no iOS zoom */
}

/* — T6 analysing progress (appended section): indeterminate spinner + document bar.
     Hairline/tonal, monochrome ink — colour still encodes provenance only. The bar renders
     ONLY when the status endpoint reports real docs_read/docs_total figures. — */
.an-live { display: flex; align-items: center; gap: 10px; margin-top: 14px;
           font: 400 14px/20px var(--sans); }
.an-spin { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%;
           border: 2px solid var(--line); border-top-color: var(--ink);
           animation: an-spin .9s linear infinite; }
@keyframes an-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .an-spin { animation: none; } }
.an-bar { height: 4px; margin-top: 10px; background: var(--sunk);
          border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.an-bar-fill { display: block; height: 100%; width: 0; background: var(--ink); }


/* analysing page — per-stage spinner (running) / green tick (done) / hollow dot (pending) */
.stg { display: flex; gap: 12px; align-items: center; padding: 10px 0;
       border-top: 1px solid var(--line); }
.stg:first-child { border-top: 0; }
.stg-mark { flex: 0 0 16px; width: 16px; height: 16px; position: relative; box-sizing: border-box; }
.stg--pending .stg-mark { width: 10px; height: 10px; margin: 3px; border-radius: 50%;
                          border: 1px solid var(--line-strong); }
.stg--pending .stg-label { color: var(--muted); }
.stg--running .stg-mark { border: 2px solid var(--sunk); border-top-color: var(--ink);
                          border-radius: 50%; animation: an-spin .9s linear infinite; }
.stg--running .stg-label { color: var(--ink); font-weight: 600; }
.stg--done .stg-mark::after { content: "\2713"; position: absolute; inset: 0; line-height: 16px;
                              text-align: center; font-size: 15px; font-weight: 700;
                              color: #004225; }  /* British Racing Green — semantic success only */
@media (prefers-reduced-motion: reduce) { .stg--running .stg-mark { animation: none; } }
.an-count { margin-top: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }