/* =========================================================================
   RealTAG · Report.Portal
   The consumer-facing report site. Three screens, one stylesheet:
     index.html    — type a PIN (or code + ZIP at a branded door)
     preview.html  — the representative's entry form
     report.html   — the report for /pin/{PIN}

   THE REPORT (report-ui SPEC, desktop.png / mobile.png / dektop-expanded-drawers.png):
   a white masthead (RealTAG left, the account's branding right), then on a light
   canvas: the head cards (prospect / address / homeowner, title / last sale), three
   fact columns (valuation + equity + liens, loan + foreclosure, property details),
   two expandable drawers (more lien details, neighborhood details), the satellite
   preview, and a footer with the contact block. Below 860px everything stacks into
   one column, the two head cards merge into one, the lien table becomes one block
   per lien, and the footer goes dark.

   Audience note: homeowners and leads following a printed or emailed link, on a
   phone as often as a desktop, with no account and no context. Large type, plain
   labels, N/A where the data is missing rather than a blank.

   Palette + type per the iLeads Brand Style Guide v29 and Registration.Portal so the
   public-facing sites look like one product.
   ========================================================================= */

/* Brand typefaces: Montserrat for headings and uppercase labels, Inter for body
   and UI text. Self-hosted variable fonts, latin subset, SIL OFL — see /fonts/OFL.txt.
   Root-relative URLs on purpose (see the note in index.html). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2-variations"),
       url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-var.woff2") format("woff2-variations"),
       url("/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #BF311A;              /* SEMANTIC red: the low end of the equity gauge. Never follows the accent. */
  --red-dark: #a52915;
  /* The brand ACCENT (specifications/custom-branding): links, buttons, focus ring, spinner,
     highlighted values, the drawer icon and label. report.js overrides these three on :root
     from the account's branding file; the defaults are the brand red. */
  --accent: #BF311A;
  --accent-dark: #a52915;
  --accent-ring: rgba(191, 49, 26, .12);
  --amber: #D9891F;
  --green: #4F9A2E;
  --ink: #131920;
  --ink-2: #3d4652;
  --ink-soft: #555;
  --muted: #888;
  --label: #4d6a86;          /* the blue-grey fact labels in the design */
  --canvas: #F3F4F6;
  --card: #fff;
  --border: #a6adb8;
  --border-soft: #e3e7eb;
  --row-line: #e9ecef;
  --bad: #a31515;           /* error text — matches Account.Portal */
  --bad-bg: #fdecea;
  --radius: 8px;
  --radius-sm: 6px;
  --page-max: 1020px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* Ensure the [hidden] attribute wins over display rules below. */
[hidden] { display: none !important; }

/* No flash (custom-branding §5.3): a door host starts with html.brand-pending (inline script in
   <head>) and report.js lifts it once the door's branding is applied. Visibility, not display,
   so the layout is already settled when the page appears. */
html.brand-pending .masthead,
html.brand-pending .page,
html.brand-pending .site-footer { visibility: hidden; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

::placeholder { color: #aeb5be; }

a { color: var(--accent); }

/* =========================================================================
   Masthead — two slots (specifications/custom-branding §3.1). RealTAG's logo and the
   account's logo each live in one slot; report.js moves them between the slots for the
   account's logo side and hides RealTAG's when the account hides it. The baseline is
   RealTAG left, the account's logo right (D19).
   ========================================================================= */
.masthead {
  background: var(--card);
  border-bottom: 1px solid var(--border-soft);
}

.masthead-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
}

/* Both logos hidden (RealTAG hidden, no account logo): the masthead collapses to its border. */
.masthead.is-empty .masthead-inner { min-height: 0; padding: 6px 20px; }

.masthead-slot { display: flex; align-items: center; min-width: 0; }
.masthead-right { justify-content: flex-end; }

.masthead-brand { display: inline-flex; align-items: center; }
.masthead-brand img { height: 36px; width: auto; }

/* The account's logo. An <a> with no href when the account gave no Learn more URL. */
.masthead-account { display: inline-flex; align-items: center; }
.masthead-account .branding-logo {
  max-height: 44px;
  max-width: 220px;
  width: auto;
  height: auto;
}

/* =========================================================================
   Shell
   ========================================================================= */
.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card {
  width: 100%;
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.card + .card { margin-top: 18px; }

h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.25;
}

.lede {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}

/* =========================================================================
   PIN entry (index.html / preview.html)
   ========================================================================= */
.pin-form { display: flex; flex-direction: column; gap: 14px; }

.pin-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--mono);
  /* Large, wide-tracked and uppercase: this is a code being transcribed off
     paper, so legibility beats density. */
  font-size: 1.5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}

.pin-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.pin-hint {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: .55; cursor: default; }

.form-error {
  margin: 0;
  padding: 10px 12px;
  background: var(--bad-bg);
  color: var(--bad);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}

/* The ZIP row on a door's entry form (D12). Same input styling as the PIN. */
.zip-row { margin-top: 10px; }
.zip-input { letter-spacing: .08em; }

/* =========================================================================
   Loading / not found states
   ========================================================================= */
.state { text-align: center; padding: 18px 0; }

.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.notfound-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 10px;
}

.notfound-actions { margin-top: 20px; }

/* The preview strip (SPEC §11.3): unmistakable, above the report. */
.preview-strip {
  width: 100%;
  background: #fff8e6;
  color: #8a6100;
  border: 1px solid #f0dca8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .9rem;
  margin-bottom: 16px;
  text-align: center;
}

/* =========================================================================
   THE REPORT (report.js builds everything inside .report)
   ========================================================================= */
.report {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A report card: white, soft border, no padding of its own - sections pad. */
.rcard {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* ---- Labels and values ------------------------------------------------- */
.label {
  display: block;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.value { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.value-lg { font-size: 1.35rem; }
.value-accent { color: var(--accent); }

.na { color: var(--muted); font-weight: 600; }

/* ---- Head cards: prospect / address / homeowner, then title / last sale --- */
.head-wrap { display: flex; flex-direction: column; gap: 14px; }

.head-card {
  display: grid;
  grid-template-columns: 1fr 1.5fr .7fr;
}

.title-card {
  display: grid;
  grid-template-columns: 2.2fr .7fr .7fr;
}

.head-cell { padding: 20px 24px; min-width: 0; }
.head-cell + .head-cell { border-left: 1px solid var(--border-soft); }
.title-card .head-cell + .head-cell { border-left: none; }
.head-cell .value { overflow-wrap: anywhere; }

/* ---- The three fact columns ---------------------------------------------- */
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.col { padding: 18px 20px 8px; }

.section-title {
  margin: 14px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title:first-child { margin-top: 0; }

/* Label / value rows */
.facts { margin: 0; padding: 0; list-style: none; }

.fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--row-line);
  font-size: .86rem;
}

.fact:last-child { border-bottom: none; }
.fact-label { color: var(--label); flex: 0 0 auto; }
.fact-value { overflow-wrap: anywhere; }
.fact-value { font-weight: 700; text-align: right; color: var(--ink); }

/* Low / middle / high range (valuation, equity) */
.range { margin: 6px 0 12px; }

.range-values {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
}

.range-values .low { color: var(--red); }
.range-values .mid { color: var(--amber); }
.range-values .high { color: var(--green); }

.range-bar {
  height: 6px;
  border-radius: 3px;
  margin: 8px 0 6px;
  background: linear-gradient(90deg, var(--red) 0%, var(--amber) 50%, var(--green) 100%);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Drawers (more lien details, neighborhood details) -------------------- */
.drawer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.drawer-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  background: #fff;
}

.drawer[open] .drawer-icon,
.drawer.is-open .drawer-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.drawer-title {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.drawer-summary {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: .86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-action {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.drawer-body {
  border-top: 1px solid var(--border-soft);
  padding: 18px 20px 20px;
}

/* The lien table (desktop) */
.lien-table-wrap { overflow-x: auto; }

.lien-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  border: 1px solid var(--border-soft);
}

.lien-table th,
.lien-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--row-line);
  text-align: left;
  vertical-align: top;
}

.lien-table thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: none;
}

.lien-table thead th.lien-head { font-family: var(--font); font-size: .86rem; letter-spacing: 0; text-transform: none; }

.lien-table tbody th {
  width: 22%;
  min-width: 150px;
  font-weight: 700;
  color: var(--label);
  background: #fafbfc;
  border-right: 1px solid var(--border-soft);
}

.lien-table td { border-right: 1px solid var(--row-line); }
.lien-table td:last-child { border-right: none; }

/* The stacked lien blocks (mobile) */
.lien-stack { display: none; flex-direction: column; gap: 12px; }

.lien-block { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }

.lien-block-title {
  background: var(--ink);
  color: #fff;
  padding: 9px 14px;
  font-weight: 700;
  font-size: .9rem;
}

.lien-block .facts { padding: 4px 14px; }

/* ---- Neighborhood drawer: intro line, two rows of stat tiles, the comparison line, the sales ---- */
.nb-intro { margin: 0 0 14px; color: var(--ink-soft); font-size: .86rem; line-height: 1.45; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  background: #f7f8fa;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-width: 0;
}

.stat .label { margin-bottom: 4px; }
.stat-value { display: block; font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.stat-sub { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }

.nb-compare {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--row-line);
  font-size: .84rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.nb-compare strong { color: var(--ink); }

.nb-sub {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

.sales-table-wrap { overflow-x: auto; }

.sales-table { width: 100%; border-collapse: collapse; font-size: .84rem; }

.sales-table th,
.sales-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--row-line);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}

.sales-table thead th {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
  border-bottom: 1px solid var(--ink);
}

.sales-table .num { text-align: right; }
.sales-table td.addr { white-space: normal; min-width: 180px; font-weight: 600; }
.sales-table td.addr small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }
.sales-table tbody tr:last-child td { border-bottom: none; }

.sales-stack { display: none; flex-direction: column; gap: 10px; }

.sale-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.sale-card-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: .9rem; }
.sale-card-meta { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.sale-card-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 8px; font-size: .82rem; }
.sale-card-facts span { color: var(--label); }
.sale-card-facts b { color: var(--ink); }

/* ---- Satellite preview ------------------------------------------------------ */
.map-card { padding: 18px 20px 20px; }

.map-frame {
  width: 100%;
  aspect-ratio: 16 / 5.5;
  min-height: 220px;
  border: none;
  border-radius: var(--radius-sm);
  display: block;
  background: #dfe3e8;
}

.map-missing {
  width: 100%;
  aspect-ratio: 16 / 5.5;
  min-height: 220px;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%) 0 0 / 28px 28px,
    #cfd6dd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: .9rem;
  text-align: center;
  padding: 20px;
}

.map-missing .mono { font-family: var(--mono); font-size: .82rem; color: var(--ink-soft); }

/* ---- Report meta line -------------------------------------------------------- */
.report-meta {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  text-align: right;
}

.report-meta .pin { font-family: var(--mono); letter-spacing: .1em; }

.report-actions { margin-top: 6px; }

/* =========================================================================
   Footer — RealTAG's copy is baked in here on purpose (report-ui SPEC D9), never
   snapshotted. report.js rebuilds the upper section from the account's branding file when
   the account's details are on (.is-account) and removes it when the footer is off
   (.is-off). The bar at the bottom always remains (specifications/custom-branding §3.3-3.4).
   ========================================================================= */
.site-footer {
  flex-shrink: 0;
  background: var(--card);
  border-top: 1px solid var(--border-soft);
  color: var(--ink-2);
}

.site-footer.is-off .footer-inner { display: none; }

.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px 20px 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}

.footer-brand img { height: 34px; width: auto; display: block; margin-bottom: 14px; }
/* The account's logo in its footer block: the same box as the header, never upscaled. */
.footer-brand .footer-account-logo { height: auto; max-height: 44px; max-width: 220px; }
/* The account's name in place of a logo it has not uploaded. */
.footer-name { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); }

.footer-blurb { margin: 0; font-size: .9rem; line-height: 1.55; max-width: 420px; }
.footer-blurb strong { color: var(--ink); }
.footer-blurb .footer-learn { display: inline-block; margin-top: 10px; font-weight: 700; }

.footer-contact .label { margin-bottom: 10px; }
.footer-contact p { margin: 0 0 4px; font-size: .9rem; line-height: 1.5; }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

.footer-bar { background: var(--ink); color: #b7bcc4; }

.footer-bar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: .8rem;
}

.footer-bar a { color: #e6e8eb; text-decoration: none; }
.footer-bar a:hover { text-decoration: underline; }

/* =========================================================================
   Small screens (mobile.png)
   ========================================================================= */
@media (max-width: 860px) {
  .masthead-inner { padding: 14px 16px; min-height: 0; }
  /* Both logos stay in the phone header, smaller: the footer no longer guarantees a RealTAG
     logo, so the header cannot drop it (custom-branding §3.1). */
  .masthead-brand img { height: 24px; }
  .masthead-account .branding-logo { max-height: 32px; max-width: 160px; }

  .page { padding: 14px 12px 28px; }
  .card { padding: 20px; }
  h1 { font-size: 1.35rem; }
  .pin-input { font-size: 1.25rem; letter-spacing: .12em; }

  .report { gap: 12px; }

  /* The two head cards become ONE card: their cells flow into a single grid. */
  .head-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 6px 0;
  }
  .head-card, .title-card { display: contents; }
  .head-cell { padding: 12px 16px; }
  .head-cell + .head-cell, .title-card .head-cell + .head-cell { border-left: none; }
  .cell-prospect, .cell-address { grid-column: 1 / -1; }
  .cell-homeowner { grid-column: 1; grid-row: 3; }
  .cell-title { grid-column: 2; grid-row: 3; }
  .cell-saledate { grid-column: 1; grid-row: 4; }
  .cell-saleprice { grid-column: 2; grid-row: 4; }
  .value-lg { font-size: 1.25rem; }

  .columns { grid-template-columns: 1fr; gap: 12px; }
  .col { padding: 16px 16px 6px; }

  .drawer-toggle { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .drawer-title { white-space: normal; }
  .drawer-summary { flex-basis: 100%; order: 3; padding-left: 34px; white-space: normal; }
  .drawer-action { margin-left: auto; }
  .drawer-body { padding: 14px; }

  .lien-table-wrap { display: none; }
  .lien-stack { display: flex; }

  .stat-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat-value { font-size: 1rem; }
  .sales-table-wrap { display: none; }
  .sales-stack { display: flex; }

  .map-card { padding: 14px; }
  .map-frame, .map-missing { aspect-ratio: 16 / 9; min-height: 180px; }

  .report-meta { text-align: left; }

  /* Dark footer on mobile */
  .site-footer { background: var(--ink); color: #c9cdd3; border-top: none; }
  /* The account's details keep the light footer: its logo was supplied for white (custom-branding §3.3). */
  .site-footer.is-account { background: var(--card); color: var(--ink-2); border-top: 1px solid var(--border-soft); }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; padding: 26px 16px 20px; }
  .site-footer:not(.is-account) .footer-blurb strong { color: #fff; }
  .site-footer:not(.is-account) .footer-contact .label { color: #fff; }
  .footer-bar { border-top: 1px solid #2a3139; }
  .footer-bar-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}