/* ============================================================
   Hallmark Property Reports — design tokens from Tools/STYLE-GUIDE.md
   Screen-first. Print rules at the bottom (last-resort Cmd-P).
   ============================================================ */

:root {
  --pri: #0f0a52;
  --pri-l: #1a1466;
  --pri-c: #130f55;
  --gold: #ffd700;
  --gold-dark: #b8860b;
  --gold-dim: rgba(255,215,0,.15);
  --sf: #ffffff;
  --sf-1: #f5f5f5;
  --sf-2: #eeeeee;
  --sf-3: #e0e0e0;
  --pos: #1a7f4b;
  --pos-bg: #edf7f0;
  --pos-ch: #22a06b;
  --neg: #c9302c;
  --neg-bg: #fef2f2;
  --tx: #1c1b21;
  --tx-2: #49454f;
  --tx-3: #79747e;

  --section-max: 880px;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(15, 10, 82, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  color: var(--tx);
  background: var(--sf-1);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ Layout ============ */
.report {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 0 0 80px;
}

.section {
  background: var(--sf);
  margin: 16px;
  padding: 40px 48px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (max-width: 700px) {
  .section { margin: 8px; padding: 28px 20px; }
}

/* ============ Cover ============ */
.cover {
  background: linear-gradient(135deg, var(--pri) 0%, var(--pri-l) 40%, var(--pri-c) 100%);
  color: #fff;
  text-align: center;
  padding: 80px 32px;
  border-radius: var(--radius);
  margin: 16px;
  box-shadow: var(--shadow);
}
.cover-logo { width: 96px; height: 96px; margin: 0 auto 24px; display: block; }
.cover-badge {
  display: inline-block;
  background: var(--gold-dim);
  border: 1px solid rgba(255, 215, 0, .3);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 24px;
}
.cover h1 {
  font-size: 38px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
}
.cover .subtitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}
.cover .address {
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 28px;
}
.cover-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 56px;
  max-width: 480px;
  margin: 0 auto;
}
.cover-meta-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 4px;
}
.cover-meta-value { font-size: 14px; font-weight: 600; }

/* ============ Headings ============ */
h2.section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--pri);
  margin-bottom: 6px;
}
.section-lead {
  color: var(--tx-2);
  margin-bottom: 24px;
  font-size: 15px;
}
.section-hdr {
  font-size: 11px;
  font-weight: 800;
  color: var(--pri);
  text-transform: uppercase;
  letter-spacing: .14em;
  border-left: 3px solid var(--gold-dark);
  padding-left: 10px;
  margin: 28px 0 12px;
}

/* ============ Tiles & cards ============ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}
.tile {
  background: var(--pri);
  color: #fff;
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
}
.tile .label {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 10px;
}
.tile .val {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.tile .val.pos { color: var(--pos-ch); }
.tile .sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
}

.callout {
  background: var(--pos-bg);
  border-left: 4px solid var(--pos);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
  font-size: 14px;
  color: var(--tx-2);
}
.callout.info { background: #f0f4ff; border-color: var(--pri); }
.callout strong { color: var(--tx); }

/* ============ Tables ============ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 13px;
}
table thead th {
  background: var(--pri);
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--sf-2);
}
table tbody tr:nth-child(even) td { background: var(--sf-1); }
table tbody tr.highlight td { background: #fff8d6; }

/* ============ Footer ============ */
.report-footer {
  text-align: center;
  padding: 32px 16px;
  color: var(--tx-3);
  font-size: 12px;
}
.report-footer a { color: var(--gold-dark); }

/* ============ Print fallback (Cmd-P) ============
   Web is the source of truth. Print is a courtesy.
   We keep it simple — no forced page breaks per section,
   just a clean A4 flow with sane page-break-inside on cards. */
@media print {
  body { background: #fff; }
  .report { max-width: none; padding: 0; }
  .section, .cover {
    box-shadow: none;
    margin: 0 0 12mm;
    border-radius: 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .cover { padding: 30mm 20mm; min-height: 240mm; }
  .tile, .callout, table { page-break-inside: avoid; break-inside: avoid; }
  h2, h3, .section-hdr { page-break-after: avoid; break-after: avoid; }
  @page { size: A4; margin: 16mm; }
}