/* =============================================================
   Investment report — screen preview and print are the same object.

   The pages are 16:9 slides, 338.67 x 190.5mm (13.333 x 7.5in), the standard
   presentation page — not A4. The document is read on a screen and shown in a
   room, so it is landscape, wider and shallower, and carries fewer blocks to
   a page. On screen the slides sit on a grey deck so the reader can see the
   pagination they are going to get; in print the deck disappears and each
   rectangle becomes a sheet. Nothing reflows between the two, which is the
   whole point: what the preview shows is what comes out.

   The @page rule that matches these dimensions is injected at runtime from
   report.jsx — see the note in the print block at the foot of this file.
   ============================================================= */

:root {
  --rp-page-w: 338.67mm;
  --rp-page-h: 190.5mm;
  --rp-pad-x: 20mm;
  --rp-head-h: 15mm;
  --rp-foot-h: 11mm;
  --rp-gap: 5mm;
  --rp-rule: #D6DCE8;
  --rp-rule-soft: #EAEEF5;
}

/* ---------- Overlay ---------- */
.rp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: #6B7385;
  display: flex; flex-direction: column;
}
.rp-scroll { flex: 1; overflow: auto; padding: 24px 0 60px; }

.rp-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px;
  background: var(--ad-navy-900); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.rp-bar-l { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.rp-bar-r { display: flex; align-items: center; gap: 8px; }

.rp-btn {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 16px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.28); background: transparent; color: #fff;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.rp-btn:hover { background: rgba(255,255,255,0.10); }
.rp-btn-primary { background: var(--ad-gold-500); border-color: var(--ad-gold-500); color: var(--ad-navy-900); }
.rp-btn-primary:hover { background: var(--ad-gold-400); border-color: var(--ad-gold-400); }

/* ---------- The measuring pass ----------
   Off-screen but laid out, because a display:none subtree has no height.
   Positioned rather than translated so it can never paint over the app. */
.rp-measure {
  position: fixed; top: 0; inset-inline-start: -10000px;
  width: var(--rp-page-w); visibility: hidden; pointer-events: none;
}
/* Each measured block sits in its own block formatting context, so the
   block's margins are INSIDE the rectangle we measure rather than collapsing
   out through the wrapper. Without this every block measures short and the
   packer overfills the page. */
.rp-m { display: flow-root; }

/* ---------- Page ---------- */
.rp-doc { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.rp-page {
  width: var(--rp-page-w); height: var(--rp-page-h);
  background: #fff; color: var(--ad-navy-900);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 var(--rp-pad-x);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.45);
  font-family: var(--font-body);
  font-size: 9.6pt; line-height: 1.55;
}

.rp-head {
  height: var(--rp-head-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--rp-rule);
  font-size: 7.6pt; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ad-navy-500);
}
.rp-head-l { display: flex; align-items: center; gap: 7px; }
.rp-head-org { font-weight: 700; color: var(--ad-navy-900); letter-spacing: 0.12em; }
.rp-head-logo { max-height: 9mm; max-width: 38mm; object-fit: contain; display: block; }
.rp-head-r { text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rp-content { flex: 1; padding: var(--rp-gap) 0; min-height: 0; overflow: hidden; }

.rp-foot {
  height: var(--rp-foot-h); flex-shrink: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  border-top: 1px solid var(--rp-rule);
  font-size: 7.2pt; color: var(--ad-navy-500);
}
.rp-foot-l { display: flex; align-items: center; gap: 6px; letter-spacing: 0.08em; text-transform: uppercase; }
.rp-foot-c { font-weight: 700; color: var(--ad-navy-900); white-space: nowrap; }
.rp-foot-r { text-align: end; }

/* ---------- Cover ---------- */
.rp-cover {
  padding: 0; justify-content: space-between;
  background: #fff;
}
.rp-cv-band {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 12mm;
  background: var(--ad-navy-900);
}
.rp-cv-band::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 34%;
  background: var(--ad-gold-500);
}
.rp-cover > *:not(.rp-cv-band) { padding-inline-start: 26mm; padding-inline-end: 18mm; position: relative; }

.rp-cv-top { padding-top: 14mm; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-cv-logo { max-height: 22mm; max-width: 70mm; object-fit: contain; display: block; }
.rp-cv-mark { display: flex; align-items: center; gap: 10px; }
.rp-cv-mark span {
  font-family: "Ador Hairline", system-ui, sans-serif;
  font-size: 30pt; font-weight: 500; letter-spacing: 0.16em; line-height: 1;
  color: var(--ad-navy-900);
}
.rp-cv-org { font-size: 10pt; font-weight: 600; color: var(--ad-navy-700); letter-spacing: 0.04em; }

.rp-cv-mid { padding-top: 10mm; }
.rp-cv-eyebrow {
  font-size: 8pt; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ad-gold-600); font-weight: 700;
}
.rp-cv-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30pt; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--ad-navy-900); margin: 6mm 0 0;
}
.rp-cv-project { font-size: 13pt; color: var(--ad-navy-700); margin-top: 4mm; font-weight: 600; }
.rp-cv-sub { font-size: 10pt; color: var(--ad-navy-500); margin-top: 2mm; }

.rp-cv-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm;
  padding-top: 16mm;
}
.rp-cv-bt {
  font-size: 7.4pt; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ad-navy-500); font-weight: 700;
  padding-bottom: 2mm; margin-bottom: 3mm; border-bottom: 1px solid var(--rp-rule);
}
.rp-cv-row { display: flex; gap: 6px; font-size: 9pt; line-height: 1.5; margin-bottom: 1mm; }
.rp-cv-l { color: var(--ad-navy-500); }
.rp-cv-v { color: var(--ad-navy-900); font-weight: 500; }
.rp-cv-notes { font-size: 8.4pt; color: var(--ad-navy-500); margin-top: 2mm; font-style: italic; }

.rp-cv-foot { padding-bottom: 11mm; }
.rp-cv-conf {
  font-size: 8pt; line-height: 1.6; color: var(--ad-navy-700);
  border-inline-start: 3px solid var(--ad-gold-500); padding-inline-start: 4mm;
  max-width: 130mm;
}
.rp-cv-brand {
  display: flex; align-items: center; gap: 7px; margin-top: 6mm;
  font-size: 7.4pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ad-navy-500);
}

/* ---------- Contents ----------
   Two columns. On a shallow landscape slide a single column of eleven
   sections runs past the foot, and the contents page is the one page the
   paginator cannot rescue — it is built outside the packer, so it has to fit
   by construction. */
.rp-toc-list {
  list-style: none; margin: 5mm 0 0; padding: 0;
  columns: 2; column-gap: 14mm;
}
.rp-toc-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2.6mm 0; border-bottom: 1px solid var(--rp-rule-soft);
  font-size: 10pt; break-inside: avoid;
}
.rp-toc-n {
  font-family: var(--font-mono); font-size: 8pt; color: var(--ad-gold-600);
  font-weight: 700; min-width: 9mm;
}
.rp-toc-t { color: var(--ad-navy-900); font-weight: 500; }
.rp-toc-dots { flex: 1; border-bottom: 1px dotted var(--rp-rule); transform: translateY(-2px); }
.rp-toc-p { color: var(--ad-navy-700); font-weight: 600; }

/* ---------- Sections & text ---------- */
/* A slide header carries more weight than a page header: it is the first
   thing read from across a room. */
.rp-section { margin-bottom: 4mm; }
.rp-section-n {
  font-family: var(--font-mono); font-size: 8pt; font-weight: 700;
  color: var(--ad-gold-600); letter-spacing: 0.1em;
}
.rp-section-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21pt; line-height: 1.12; letter-spacing: -0.018em;
  color: var(--ad-navy-900); margin: 1mm 0 0;
  padding-bottom: 2.5mm; border-bottom: 2px solid var(--ad-navy-900);
}
.rp-section-s { font-size: 9pt; color: var(--ad-navy-500); margin-top: 2mm; }

.rp-h3 {
  font-size: 10.5pt; font-weight: 700; color: var(--ad-navy-900);
  margin: 5mm 0 2mm; padding-bottom: 1.5mm;
  border-bottom: 1px solid var(--rp-rule);
}
.rp-p { margin: 0 0 3mm; color: var(--ad-navy-800); text-align: justify; max-width: 215mm; }

/* ---------- Verdict card ---------- */
.rp-verdict {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 4mm;
  border: 1px solid var(--rp-rule);
}
.rp-verdict-score {
  background: var(--ad-navy-900); color: #fff;
  padding: 4mm 6mm; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-width: 30mm;
}
.rp-vs-num { font-family: var(--font-display); font-size: 26pt; font-weight: 700; line-height: 1; }
.rp-vs-of { font-size: 7.4pt; letter-spacing: 0.12em; color: rgba(255,255,255,0.6); margin-top: 1mm; }
.rp-verdict-body { padding: 4mm 6mm; display: flex; flex-direction: column; justify-content: center; gap: 2mm; }
.rp-badge {
  display: inline-block; align-self: flex-start;
  font-size: 7.6pt; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  padding: 1.5mm 3mm; color: #fff;
}
.rp-badge.tone-good { background: var(--ad-success); }
.rp-badge.tone-mid  { background: var(--ad-navy-600); }
.rp-badge.tone-warn { background: var(--ad-warning); color: var(--ad-navy-900); }
.rp-badge.tone-bad  { background: var(--ad-danger); }
.rp-verdict-line { font-size: 12pt; font-weight: 700; color: var(--ad-navy-900); }

/* ---------- KPI grid ----------
   Six across on a landscape slide: twelve tiles resolve to two clean rows
   instead of the three a four-column grid would leave. */
.rp-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--rp-rule); border-width: 1px 0 0 1px;
  margin-bottom: 4mm;
}
.rp-kpi { padding: 3mm 4mm; border: 1px solid var(--rp-rule); border-width: 0 1px 1px 0; }
.rp-kpi-l {
  font-size: 7.2pt; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ad-navy-500); font-weight: 600;
}
.rp-kpi-v { font-size: 11.5pt; font-weight: 700; color: var(--ad-navy-900); margin-top: 1mm; }

/* ---------- Tables ---------- */
.rp-tt { margin: 4mm 0 2mm; }
.rp-tt-t {
  font-size: 8pt; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ad-navy-900); font-weight: 700;
}
.rp-tt-n { font-size: 8.2pt; color: var(--ad-navy-500); margin-top: 1.5mm; line-height: 1.5; }

.rp-table {
  width: 100%; border-collapse: collapse; margin-bottom: 3mm;
  font-size: 8.8pt;
}
.rp-table th {
  background: var(--ad-navy-900); color: #fff;
  font-size: 7.4pt; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 2.4mm 3mm; text-align: start; vertical-align: middle;
}
.rp-table td {
  padding: 2.2mm 3mm; border-bottom: 1px solid var(--rp-rule-soft);
  color: var(--ad-navy-800); vertical-align: top;
}
.rp-table tbody tr:nth-child(even) td { background: #FAFBFD; }
.rp-table tr.rp-tfoot td {
  background: var(--ad-navy-100) !important; font-weight: 700;
  color: var(--ad-navy-900); border-top: 1.5px solid var(--ad-navy-900);
  border-bottom: none;
}
/* Net and cumulative in the annual cash flow — the two rows a reader looks
   for first when the years run across. */
.rp-table tr.rp-em td {
  font-weight: 700; color: var(--ad-navy-900);
  border-top: 1px solid var(--rp-rule);
}

/* ---------- Statement rows ----------
   A cash flow statement is read by its shape: components sit indented under
   the subtotal they feed, subtotals rule off above themselves, and the
   result of the statement is heavier than either. */
.rp-table tr.rp-k-sub td:first-child {
  padding-inline-start: 7mm; color: var(--ad-navy-600); font-weight: 400;
}
.rp-table tr.rp-k-sub td { color: var(--ad-navy-600); }
.rp-table tr.rp-k-total td {
  font-weight: 700; color: var(--ad-navy-900);
  border-top: 1px solid var(--ad-navy-300);
  background: #F4F6FB !important;
}
.rp-table tr.rp-k-grand td {
  font-weight: 700; color: var(--ad-navy-900);
  border-top: 1.5px solid var(--ad-navy-900);
  border-bottom: 1px solid var(--ad-navy-300);
  background: var(--ad-navy-100) !important;
}
.rp-table tr.rp-k-cum td {
  font-weight: 600; color: var(--ad-navy-700);
  background: transparent !important; font-style: italic;
}
.rp-table tr.rp-cont td {
  background: transparent !important; border-bottom: 1px solid var(--rp-rule);
  font-size: 7.2pt; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ad-navy-400); padding: 1.4mm 3mm;
}
/* Severity stripe on the risk register, on the leading edge so it mirrors. */
.rp-table tr.lvl-danger  td:first-child { box-shadow: inset 3px 0 0 var(--ad-danger); }
.rp-table tr.lvl-warning td:first-child { box-shadow: inset 3px 0 0 var(--ad-warning); }
.rp-table tr.lvl-success td:first-child { box-shadow: inset 3px 0 0 var(--ad-success); }
html[dir="rtl"] .rp-table tr.lvl-danger  td:first-child { box-shadow: inset -3px 0 0 var(--ad-danger); }
html[dir="rtl"] .rp-table tr.lvl-warning td:first-child { box-shadow: inset -3px 0 0 var(--ad-warning); }
html[dir="rtl"] .rp-table tr.lvl-success td:first-child { box-shadow: inset -3px 0 0 var(--ad-success); }

/* ---------- Finding lists ----------
   Two columns on a landscape slide. A single column across 298mm gives lines
   nobody can track back to the start of. */
.rp-list {
  list-style: none; margin: 0 0 3mm; padding: 0;
  columns: 2; column-gap: 12mm;
}
.rp-list li { break-inside: avoid; }
.rp-list li {
  position: relative; padding: 2mm 0 2mm 0; padding-inline-start: 6mm;
  border-bottom: 1px solid var(--rp-rule-soft);
  color: var(--ad-navy-800); font-size: 9pt; line-height: 1.55;
}
.rp-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 3.4mm;
  width: 2.6mm; height: 2.6mm;
}
.rp-list li b { color: var(--ad-navy-900); }
.rp-list.tone-good li::before { background: var(--ad-success); }
.rp-list.tone-bad  li::before { background: var(--ad-danger); }
.rp-list.tone-mid  li::before { background: var(--ad-gold-500); }
.rp-list.tone-warn li::before { background: var(--ad-warning); }

/* ---------- Charts ---------- */
.rp-chart { margin: 3mm 0 4mm; border: 1px solid var(--rp-rule); padding: 4mm; }
.rp-chart-body { margin-top: 3mm; }

/* Title on one side, the total on the other. A stacked chart shows shape but
   not size, so the size is stated rather than left to be added up by eye. */
.rp-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8mm;
}
.rp-chart-total {
  flex-shrink: 0; text-align: end;
  border-inline-start: 2px solid var(--ad-gold-500); padding-inline-start: 3mm;
}
.rp-ct-l {
  font-size: 7pt; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ad-navy-500); font-weight: 600;
}
.rp-ct-v { font-size: 10.5pt; font-weight: 700; color: var(--ad-navy-900); margin-top: 0.5mm; }

/* Ring and legend side by side — the landscape page has the width for it. */
.rp-donut-body { display: flex; align-items: center; gap: 10mm; margin-top: 3mm; }
/* The hole is the natural home for the total; Donut draws arcs only. */
.rp-donut-ring { flex-shrink: 0; position: relative; }
.rp-donut-centre {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; padding: 0 6mm;
}
.rp-dc-l {
  font-size: 6.4pt; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ad-navy-500); font-weight: 600; line-height: 1.2;
}
.rp-dc-v {
  font-size: 11pt; font-weight: 700; color: var(--ad-navy-900);
  margin-top: 0.8mm; line-height: 1.1;
}
.rp-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.rp-legend li {
  display: grid; grid-template-columns: 4mm 1fr auto auto;
  align-items: center; gap: 3mm;
  padding: 1.6mm 0; border-bottom: 1px solid var(--rp-rule-soft);
  font-size: 8.6pt;
}
.rp-swatch { width: 3mm; height: 3mm; display: block; }
.rp-legend-l { color: var(--ad-navy-800); min-width: 0; }
.rp-legend-v { color: var(--ad-navy-900); font-weight: 600; text-align: end; }
.rp-legend-p { color: var(--ad-navy-500); text-align: end; min-width: 13mm; }

/* ---------- Dialog ---------- */
.rp-modal-back {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(10,26,54,0.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.rp-modal {
  background: var(--bg-1); color: var(--fg-1);
  width: min(760px, 100%); max-height: 90vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-1);
  box-shadow: 0 30px 70px -20px rgba(10,26,54,0.55);
}
.rp-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--border-1);
}
.rp-modal-eyebrow {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ad-gold-600); font-weight: 700;
}
.rp-modal-head h2 { font-size: 20px; margin-top: 4px; letter-spacing: -0.01em; }
.rp-x {
  background: none; border: none; cursor: pointer; font-size: 24px; line-height: 1;
  color: var(--fg-3); padding: 0 4px;
}
.rp-x:hover { color: var(--fg-1); }

.rp-modal-body { padding: 20px 24px; overflow: auto; }
.rp-modal-note { font-size: 12.5px; color: var(--fg-2); line-height: 1.6; margin-bottom: 18px; }
.rp-fs {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 700;
  padding-bottom: 6px; margin: 20px 0 12px; border-bottom: 1px solid var(--border-1);
}
.rp-fs:first-of-type { margin-top: 0; }
.rp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

.rp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rp-field-l { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.rp-field-h { font-size: 10.5px; color: var(--fg-3); }
.rp-field input, .rp-field select {
  font-family: var(--font-body); font-size: 13px;
  padding: 9px 10px; background: var(--bg-1); color: var(--fg-1);
  border: 1px solid var(--border-2); width: 100%; min-width: 0;
}
.rp-field input:focus, .rp-field select:focus { outline: 2px solid var(--ad-gold-400); outline-offset: -1px; }
.rp-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-logo-row input[type="file"] { font-size: 11.5px; border: none; padding: 0; width: auto; }
.rp-logo-prev { max-height: 30px; max-width: 90px; object-fit: contain; }
.rp-clear {
  background: none; border: 1px solid var(--border-2); cursor: pointer;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 9px; color: var(--fg-2);
}

.rp-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border-1); background: var(--bg-2);
}
.rp-modal-foot .rp-btn { border-color: var(--border-2); color: var(--fg-1); }
.rp-modal-foot .rp-btn:hover { background: var(--bg-2); }
.rp-modal-foot .rp-btn-primary { background: var(--ad-navy-900); border-color: var(--ad-navy-900); color: #fff; }
.rp-modal-foot .rp-btn-primary:hover { background: var(--ad-navy-800); border-color: var(--ad-navy-800); }

@media (max-width: 700px) {
  .rp-grid2 { grid-template-columns: 1fr; }
  .rp-cv-meta { grid-template-columns: 1fr; }
}

/* =============================================================
   Print
   ============================================================= */
@media print {
  /* NOTE: the @page rule is NOT here. model.html carries its own inline
     `@page { margin: 13mm }` for printing the dashboard, and because that
     <style> comes after this stylesheet it would win the cascade and inset
     these full-bleed pages by 13mm — pushing every sheet onto two. The report
     injects its own @page from JS while it is open, which lands last in the
     head and therefore wins, and is removed again on close so the dashboard's
     own print behaviour is untouched. See RP_PAGE_RULE in report.jsx. */

  /* The report replaces the app rather than sitting on top of it. Hiding
     #root wholesale is why none of the dashboard's own print rules have to
     be unpicked here. */
  body.rp-active > #root { display: none !important; }
  body.rp-active { background: #fff !important; overflow: visible !important; }

  .rp-overlay {
    position: static !important; inset: auto !important;
    background: #fff !important; display: block !important;
  }
  .rp-scroll { overflow: visible !important; padding: 0 !important; }
  .rp-bar { display: none !important; }
  .rp-doc { display: block !important; gap: 0 !important; }

  .rp-page {
    box-shadow: none !important;
    break-after: page; page-break-after: always;
    /* The last sheet must not emit a trailing blank page. */
  }
  .rp-page:last-child { break-after: auto; page-break-after: auto; }

  /* Backgrounds carry meaning here — the navy header bands, the severity
     stripes, the gold cover rule — so they must survive the print pipeline. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* Nothing to report on yet. */
.rp-empty {
  border-inline-start: 3px solid var(--ad-warning);
  background: var(--bg-2); padding: 18px 20px;
}
.rp-empty-t { font-size: 15px; font-weight: 700; color: var(--fg-1); margin-bottom: 8px; }
.rp-empty p { font-size: 13px; line-height: 1.65; color: var(--fg-2); }

/* Standing note under a fieldset legend in the report dialog — explains what
   the whole group is for, so each field's own hint can stay short. */
.rp-fs-hint {
  font-size: 11.5px; line-height: 1.55; color: var(--fg-3);
  margin: -6px 0 12px;
}