/* ---------- Report Mode: A4 editorial page ---------- */
/* Typography follows HBCC Brand Guidelines 2025: Museo Sans / Museo Sans
   Rounded as primary, with Calibri/Arial as the approved fallback (used here
   directly, since Museo Sans isn't licensed for web embedding in this
   project). Hierarchy is built with weight and scale, not typeface, per the
   guidelines' "Font hierarchy" page. */

.report-shell {
  background: #d8d2c6;
  padding: 16px 0 48px;
  display: flex;
  justify-content: center;
}

.report-page {
  width: 210mm;
  height: 297mm;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(20, 20, 30, 0.22);
  padding: 13mm 15mm 10mm;
  display: flex;
  flex-direction: column;
  font-family: "Museo Sans", Calibri, Arial, sans-serif;
  color: #282b4d;
  position: relative;
  box-sizing: border-box;
}

.report-page-landscape {
  width: 297mm;
  height: 210mm;
  padding: 10mm 12mm 8mm;
  page: report-landscape;
}

.rp-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2mm;
}

.rp-eyebrow-block {
  text-align: right;
}

.rp-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6c6a72;
  line-height: 1.6;
}

.rp-eyebrow-strong {
  color: #0b422a;
  font-weight: 700;
}

.rp-title {
  font-family: "Museo Sans Rounded", "Museo Sans", Calibri, Arial, sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 6mm;
  border-bottom: 1.5px solid #282b4d;
  padding-bottom: 3mm;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.rp-title-sub {
  font-family: "Museo Sans", Calibri, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  font-size: 12.5px;
  letter-spacing: 0;
  color: #6c6a72;
  margin-left: auto;
}

/* KPIs */

.rp-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6mm;
  margin-bottom: 4mm;
  padding-bottom: 3mm;
  border-bottom: 0.75px solid #ddd6cb;
}

.rp-kpi-label {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c6a72;
  font-weight: 600;
  margin-bottom: 2px;
}

.rp-kpi-value {
  font-family: "Museo Sans Rounded", "Museo Sans", Calibri, Arial, sans-serif;
  font-weight: 900;
  font-size: 25px;
  color: #0b422a;
  line-height: 1.15;
}

.rp-kpi-sub {
  font-size: 9px;
  color: #6c6a72;
}

/* Trajectory */

.rp-trajectory {
  margin-bottom: 4mm;
}

.rp-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2mm;
}

.rp-section-head h2 {
  font-family: "Museo Sans Rounded", "Museo Sans", Calibri, Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: #282b4d;
}

.rp-section-sub {
  font-size: 9.5px;
  color: #6c6a72;
  font-style: italic;
}

.rp-trajectory svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Change row */

.rp-change-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8mm;
  margin-bottom: 3mm;
  padding-bottom: 3mm;
  border-bottom: 0.75px solid #ddd6cb;
}

.rp-change-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rp-change-label {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c6a72;
  font-weight: 600;
}

.rp-change-value {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.rp-change-up .rp-change-value { color: #0b422a; }
.rp-change-down .rp-change-value { color: #851613; }

.rp-change-sub {
  font-size: 8.5px;
  color: #6c6a72;
}

/* Ownership / roads / open space */

.rp-breakdown-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6mm;
  margin-bottom: 3mm;
  padding-bottom: 3mm;
  border-bottom: 0.75px solid #ddd6cb;
}

.rp-breakdown h3 {
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: #282b4d;
  margin: 0 0 2mm;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.rp-breakdown-sub {
  font-size: 7.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  font-style: italic;
  color: #9a968e;
  white-space: nowrap;
}

.rp-breakdown svg {
  width: 100%;
  height: auto;
  display: block;
}

.rp-empty {
  font-size: 9px;
  color: #6c6a72;
  font-style: italic;
}

/* Comparison */

.rp-comparison {
  margin-bottom: 4mm;
}

.rp-comparison h3 {
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: #282b4d;
  margin: 0 0 2mm;
}

.rp-comparison svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Glance */

.rp-glance {
  margin-top: auto;
  background: #f3efe7;
  padding: 4mm 5mm;
  border-left: 2.5px solid #0b422a;
}

.rp-glance h3 {
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 2mm;
  color: #0b422a;
}

.rp-glance ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
}

.rp-glance li {
  font-size: 9.5px;
  line-height: 1.4;
  color: #282b4d;
}

.rp-glance li strong {
  text-transform: uppercase;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  color: #6c6a72;
  margin-right: 5px;
}

/* Footer */

.rp-footer {
  margin-top: 3mm;
  padding-top: 2mm;
  border-top: 0.75px solid #ddd6cb;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6mm;
}

.rp-footer-note {
  font-size: 7.5px;
  color: #9a968e;
  text-align: right;
}

.rp-footer-logo {
  /* Brand guideline minimum primary-logo size is 23mm wide. */
  width: 23mm;
  height: auto;
  display: block;
}

/* ---------- Print ---------- */

@page {
  size: A4;
  margin: 0;
}

@page report-landscape {
  size: A4 landscape;
  margin: 0;
}

@media print {
  body.report-print-mode > *:not(.report-shell) {
    display: none !important;
  }
  body.report-print-mode .report-shell {
    background: none;
    padding: 0;
    display: block;
  }
  body.report-print-mode .report-toolbar {
    display: none !important;
  }
  .report-page {
    box-shadow: none;
    width: 210mm;
    height: 297mm;
    margin: 0;
    page-break-after: always;
  }
  .report-page-landscape {
    width: 297mm;
    height: 210mm;
  }
}

/* ---------- Detailed Data Tables (dense, workbook-style) ---------- */

.dt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 6.6px;
  table-layout: fixed;
}

.dt-table th,
.dt-table td {
  padding: 1.1px 3px;
  text-align: right;
  white-space: nowrap;
}

.dt-label {
  text-align: left;
  width: 78px;
}

.dt-head th {
  font-size: 6.3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6c6a72;
  border-bottom: 1px solid #282b4d;
  vertical-align: bottom;
  padding-bottom: 2px;
}

.dt-head .dt-group-m2 {
  border-right: none;
}

.dt-head .dt-group-pct:first-of-type,
.dt-row .dt-pct:first-of-type {
  border-left: 1.5px solid #282b4d;
}

.dt-section td {
  text-align: left;
  font-size: 7.2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0b422a;
  background: #eef0e6;
  padding: 2px 3px;
}

/* Column-family shading: m² (blue-grey) vs % (green) vs forecast (amber),
   layered so a cell can be both a %/m² column AND a forecast column. */
.dt-head .dt-group-m2,
td.dt-m2 {
  background: #eef2f7;
}

.dt-head .dt-group-pct,
td.dt-pct {
  background: #edf5ee;
}

.dt-head .dt-forecast,
td.dt-forecast {
  background: #fff6d9;
}

.dt-row:nth-child(odd) td.dt-label {
  background: #f6f3ed;
}

.dt-row:nth-child(even) td.dt-m2 {
  background: #e7edf4;
}

.dt-row:nth-child(even) td.dt-pct {
  background: #e6f0e8;
}

.dt-row:nth-child(even) td.dt-forecast {
  background: #ffeeb8;
}

.dt-total td {
  font-weight: 700;
  border-top: 0.75px solid #282b4d;
}

.dt-total td.dt-m2 {
  background: #d8e2ec;
}

.dt-total td.dt-pct {
  background: #d9ecdc;
}

.dt-total td.dt-forecast {
  background: #ffe28c;
}