/* =========================================================================
   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;
  --red-dark: #a52915;
  --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; }

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(--red); }

/* =========================================================================
   Masthead — RealTAG left, the account's live branding 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;
}

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

.masthead-account {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.masthead-account .branding-logo {
  max-height: 44px;
  max-width: 220px;
  width: auto;
  height: auto;
}

.masthead-account .branding-tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.3;
}

/* =========================================================================
   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(--red);
  box-shadow: 0 0 0 3px rgba(191, 49, 26, .12);
}

.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(--red); color: #fff; }
.btn-primary:hover { background: var(--red-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; }

/* The door's own branding on the entry form. */
.entry-branding { margin-bottom: 14px; }

/* ---- Account branding block (shared by the entry card and the masthead) ---- */
.branding {
  display: flex;
  align-items: center;
  gap: 14px;
}

.branding-logo {
  max-height: 52px;
  max-width: 200px;
  width: auto;
  height: auto;
}

.branding-tagline {
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.4;
  margin: 0;
}

/* =========================================================================
   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(--red);
  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(--red); }

.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(--red);
  border-color: var(--red);
  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(--red);
}

.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 — copy is baked in here on purpose (report-ui SPEC D9), never snapshotted
   ========================================================================= */
.site-footer {
  flex-shrink: 0;
  background: var(--card);
  border-top: 1px solid var(--border-soft);
  color: var(--ink-2);
}

.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; }

.footer-blurb { margin: 0; font-size: .9rem; line-height: 1.55; max-width: 420px; }
.footer-blurb strong { color: var(--ink); }

.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: 16px; min-height: 0; }
  .masthead-brand img { height: 30px; }
  /* The mobile masthead shows the ACCOUNT's branding; RealTAG moves to the footer. */
  .masthead.has-branding .masthead-brand { display: none; }
  .masthead-account { align-items: flex-start; text-align: left; }
  .masthead-account .branding-logo { max-height: 40px; }

  .page { padding: 14px 12px 28px; }
  .card { padding: 20px; }
  h1 { font-size: 1.35rem; }
  .pin-input { font-size: 1.25rem; letter-spacing: .12em; }
  .branding { flex-direction: column; align-items: flex-start; }

  .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; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; padding: 26px 16px 20px; }
  .footer-blurb strong { color: #fff; }
  .footer-contact .label { color: #fff; }
  .footer-bar { border-top: 1px solid #2a3139; }
  .footer-bar-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}