/* ════════════════════════════════════════════════════════════════════ */
/*  report.css — report page styles                                      */
/*                                                                       */
/*  Loaded only on /report/<crd> via report.html. Contains the report    */
/*  container, branding bar, grade circles + distribution chart, BD      */
/*  universe chart, "Your Searched Adviser" subheader, section           */
/*  framework, all section content rules, comp/ks blurbs, intro card,    */
/*  Section 9 cohort tables, report footer, and Section 01+ rules.       */
/*                                                                       */
/*  Design tokens, reset, nav bar, term popover, and cart tray live      */
/*  in common.css. Search/results styles live in search.css.             */
/* ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════ */
/*  REPORT CONTAINER                      */
/* ═══════════════════════════════════════ */
.report {
  max-width: 1020px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════ */
/*  BACK TO ACCOUNT LINK                   */
/* ═══════════════════════════════════════ */
/* Mirrors .cmp-back on the comparison page (same font, weight, size,
   color, hover). The horizontal inset is 36px rather than 0 because the
   .report container has no padding of its own — 36px aligns the link with
   the brand bar and report sections (both padded 36px). */
.report-back {
  display: inline-block;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600; font-size: .86rem;
  color: var(--secondary, #4A7C8F);
  text-decoration: none;
  margin: 28px 36px 16px;
}
.report-back:hover { color: var(--accent, #E97132); }
.report-back-bottom { margin: 20px 36px 28px; }

/* ═══════════════════════════════════════ */
/*  BRANDING BAR                          */
/* ═══════════════════════════════════════ */
.brand-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 36px;
  border-bottom: 1px solid var(--border);
}
.brand-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════ */
/*  GRADE CIRCLES                         */
/* ═══════════════════════════════════════ */
.grade-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Aptos Narrow', 'Arial Narrow', var(--font-heading);
  font-weight: 700;
  font-size: 62px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.18);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  line-height: 1;
}
/* Minus grades need slightly smaller text to fit */
.grade-circle.has-minus { font-size: 52px; }

/* Grade chip COLORS moved to common.css (global home, next to the
   --grade-*-circle/-letter tokens) so every surface — report stamp,
   account chips, distribution bars — draws from one place. This file
   keeps only grade SIZING/SHAPE (.grade-circle below). */


/* ── Grade Distribution (Section 02) ── */
.dist-mini-block {
  background: linear-gradient(to right, #264F74 0%, #1B3A4B 50%, #0E2841 100%);
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  padding: 20px 24px 16px;
  margin: 20px 0 4px;
}
.dist-mini-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-align: center;
}
.dist-mini-chart-area {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  height: 90px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 10px;
}
.dist-mini-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 52px;
  position: relative;
}
.dist-mini-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: opacity 0.15s;
}
/* Inactive bars are slightly faded so the active grade stands out */
.dist-mini-bar.inactive { opacity: 0.45; }
/* Active bar gets a top marker dot */
.dist-mini-col.active-col .dist-mini-bar::after {
  content: '▲';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--accent);
}
.dist-mini-bar.g-a { background: var(--grade-a-circle); }
.dist-mini-bar.g-b { background: var(--grade-b-circle); }
.dist-mini-bar.g-c { background: var(--grade-c-circle); }
.dist-mini-bar.g-d { background: var(--grade-d-circle); }
.dist-mini-labels {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.dist-mini-label-col {
  flex: 1;
  max-width: 52px;
  display: flex;
  justify-content: center;
}
.dist-mini-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}
/* Active dot gets full opacity; others are faded */
.dist-mini-dot.inactive { opacity: 0.4; }
.dist-mini-dot.g-a { background: var(--grade-a-circle); color: var(--grade-a-letter); }
.dist-mini-dot.g-b { background: var(--grade-b-circle); color: var(--grade-b-letter); }
.dist-mini-dot.g-c { background: var(--grade-c-circle); color: var(--grade-c-letter); }
.dist-mini-dot.g-d { background: var(--grade-d-circle); color: var(--grade-d-letter); }
.dist-mini-footer {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-top: 12px;
}

/* ═══════════════════════════════════════ */
/*  BD Universe Chart (Firm Size)          */
/*  Used in BD report Grade Summary right  */
/*  panel as the structural parallel to    */
/*  the RIA grade-distribution chart.      */
/*  Single bar color (muted white) with    */
/*  active-bucket highlight via opacity +  */
/*  accent triangle marker. No per-bucket  */
/*  color tokens — Small/Medium/Large is   */
/*  descriptive, not a quality scale.      */
/* ═══════════════════════════════════════ */
.bd-univ-block {
  background: linear-gradient(to right, #264F74 0%, #1B3A4B 50%, #0E2841 100%);
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  padding: 20px 24px 16px;
  width: 300px;
  flex-shrink: 0;
  margin: 0;
}
.bd-univ-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-align: center;
}
.bd-univ-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  height: 90px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 10px;
}
.bd-univ-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  position: relative;
}
.bd-univ-bar {
  width: 100%;
  background: rgba(255,255,255,0.55);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  opacity: 0.45;
}
.bd-univ-col.active-col .bd-univ-bar { opacity: 1; }
.bd-univ-col.active-col .bd-univ-bar::after {
  content: '\25B2';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--accent);
}
.bd-univ-labels {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
}
.bd-univ-label-col {
  width: 60px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.bd-univ-label-col.active { color: rgba(255,255,255,0.92); }
.bd-univ-pcts {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.bd-univ-pct-col {
  width: 60px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.40);
}
.bd-univ-pct-col.active {
  color: var(--accent);
  font-weight: 600;
}
.bd-univ-footer {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-top: 12px;
}

/* Grade Summary context text */
.s02-section {
  background: var(--bg-subtle);
  margin-top: 12px;
}
.s02-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}
.s02-content-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
}
.s02-content-row .dist-mini-block {
  flex-shrink: 0;
  width: 300px;
  margin: 0;
}
.s02-context {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  flex: 1;
  padding-top: 4px;
}
.s02-grade-statement {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
}
.s02-percentile-note {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
  text-align: center;
}


/* ═══════════════════════════════════════ */
/*  SECTION 1: REPORT HEADER              */
/* ═══════════════════════════════════════ */
.report-header {
  background: var(--surface);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 3px solid var(--border);
}

/* BD grade — same size, right-justified in header */
.grade-bd-right {
  flex-shrink: 0;
  margin-left: auto;
  display: none;
}

/* Grade stamp — badge + Transparency Grade™ label, right-justified
   in the report header (report.html only; sample.html does not use
   the .grade-stamp wrapper and keeps the original left placement
   and shadow). */
.grade-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.grade-stamp .grade-circle {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.38);
}
.grade-stamp-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 13px;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.grade-stamp-label:hover {
  text-decoration: none;
}

/* Anchor-jump offset: the sticky nav bar (56px) otherwise covers the
   card's header row when the grade-stamp label link is clicked. */
#grade-summary-card,
#bd-grade-summary-card {
  scroll-margin-top: 76px;
}
.grade-stamp-label .tm {
  font-size: 9px;
  vertical-align: super;
  letter-spacing: 0;
}

#main-grade {
  flex-shrink: 0;
}

/* Firm name + inline type badges row */
.firm-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.firm-type-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.firm-type-plus {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}

/* Small inline header badges — replaces large 96px circles */
.reg-badge.reg-badge-header {
  width: 30px;
  height: 30px;
  font-size: 10px;
  letter-spacing: 0px;
}

.header-info { flex: 1; }

.firm-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.25;
}

.firm-meta {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
}

.firm-links {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.firm-links a {
  font-size: 12px;
  font-weight: 500;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.firm-links a svg {
  width: 12px;
  height: 12px;
  stroke: var(--secondary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════ */
/*  YOUR SEARCHED ADVISER                 */
/*  Prominent banner shown above the firm */
/*  report when an individual adviser was */
/*  the search target.                    */
/* ═══════════════════════════════════════ */
.iar-subheader {
  display: flex;
  flex-direction: column;
}

/* Generic "Your Searched …" banner — shared by adviser + firm bars */
.searched-bar {
  background: var(--primary);
  padding: 14px 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 4px solid var(--accent);
}
.searched-bar-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.searched-bar-icon svg {
  width: 30px;
  height: 30px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.searched-bar-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #FFFFFF;
  line-height: 1;
}

/* Body container — cards + compensation sub-container */
.iar-subheader-body {
  background: var(--surface);
  padding: 20px 36px 22px 36px;
}

/* Legacy — retained in case any other template still references it. */
.iar-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}
/* IAR card grid — three cards inside the searched-adviser body */
.iar-cards {
  display: flex;
  gap: 12px;
}

/* Adviser → firm grade bridge line under the overview cards.
   .grade-dot-inline is shared: bridge line + RIA Grade Summary statement. */
.iar-grade-bridge {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--primary);
  line-height: 1.6;
}
.iar-grade-bridge .bridge-firm {
  font-weight: 600;
}
.iar-grade-bridge .tm {
  font-size: 9px;
  vertical-align: super;
}
.iar-grade-bridge .bridge-soft-link {
  color: var(--secondary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.iar-grade-bridge .bridge-soft-link:hover {
  text-decoration: none;
}
.iar-grade-bridge .bridge-explicit-link {
  color: var(--secondary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.grade-dot-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: 'Aptos Narrow', 'Arial Narrow', var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
}
.grade-dot-inline.has-minus,
.grade-dot-inline.grade-bd {
  font-size: 12px;
}

/* Compensation sub-container inside Your Searched Adviser */
.iar-subheader-comp {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.iar-subheader-comp .section-question {
  margin-top: 0;
}
.iar-subheader-comp .reg-callout {
  margin-bottom: 0;
}

/* Professional Designations sub-container inside Your Searched Adviser.
   Sits between the three cards and the compensation sub-container.
   Hidden by default; shown only when the designations fetch returns
   one or more designations. */
.iar-subheader-credentials {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.iar-credentials-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
  margin-bottom: 8px;
}
.iar-credentials-intro {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.iar-comp-intro {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.iar-credentials-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  font-size: 14px;
  color: var(--primary);
  font-weight: 500;
}
.iar-credentials-list li {
  margin-bottom: 4px;
  line-height: 1.4;
}
.iar-credentials-footnote {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.55;
  font-style: italic;
}
/* ── Professional History: Disclosures ────────────────────────
   Sits BELOW .iar-subheader-comp (comp cards).  Parallel structure
   to .iar-subheader-credentials but with a per-event row layout
   instead of a bulleted list. */
.iar-subheader-disclosures {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.iar-disclosures-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
  margin-bottom: 8px;
}
.iar-disclosures-intro {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 12px;
}
.iar-disclosures-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px 0;
  padding: 0;
  list-style: none;
}
.iar-disclosure-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13.5px;
}
.iar-disclosure-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.iar-disclosure-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.iar-disclosure-type {
  flex: 1 1 auto;
  color: var(--primary);
  font-weight: 600;
}
.iar-disclosure-year {
  flex: 0 0 auto;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}
.iar-disclosure-resolution {
  flex: 0 0 auto;
  color: var(--text-light);
  font-size: 12px;
  font-style: italic;
  min-width: 110px;
  text-align: right;
}
.iar-disclosures-empty {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 12px;
}
.iar-disclosures-link {
  display: block;
  text-align: right;
  margin-top: 8px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
}
.iar-disclosures-footnote-ref {
  font-size: 11px;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  text-decoration: none;
  margin-left: 1px;
}
.iar-card {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 0;
}
.iar-card-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 2px;
}
.iar-reg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.iar-reg-firm {
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
  line-height: 1.3;
}
.iar-exp-value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}
.iar-exp-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
}

/* Registration badges for IAR */
.reg-badges {
  display: flex;
  gap: 6px;
}
.reg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0px;
  color: #FFFFFF;
}
.reg-badge-ia {
  background: #3B7BA8;
}
.reg-badge-bd {
  background: #3C4043;
}
.reg-badge-ins {
  background: #5B8A6F;
}
.reg-badge-inline {
  width: 28px;
  height: 28px;
  font-size: 10px;
  letter-spacing: 0.2px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin: 0 3px;
}

/* ═══════════════════════════════════════ */
/*  SECTION FRAMEWORK                     */
/* ═══════════════════════════════════════ */
.report-section {
  border-bottom: 1px solid var(--border);
  padding: 28px 36px;
}
.report-section:last-of-type {
  border-bottom: none;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.section-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.section-icon svg {
  width: 18px;
  height: 18px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Per-section icon badge fills — Editorial palette dark → light */
.section-icon-01 { background: var(--icon-01); }
.section-icon-02 { background: var(--icon-02); }
.section-icon-03 { background: var(--icon-03); }
.section-icon-04 { background: var(--icon-04); }
.section-icon-05 { background: var(--icon-05); }
.section-icon-06 { background: var(--icon-06); }
.section-icon-07 { background: var(--icon-07); }
.section-icon-08 { background: var(--icon-08); }
.section-icon-09 { background: var(--icon-09); }
.section-icon-10 { background: var(--accent); }

/* BD-only report section icons */
.section-icon-bd01 { background: var(--icon-01); }
.section-icon-bd02 { background: var(--icon-02); }
.section-icon-bd03 { background: var(--icon-03); }
.section-icon-bd04 { background: var(--icon-04); }

/* Shared card styles (RIA + BD reports) */
.intro-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.intro-card p { margin: 0 0 10px 0; }
.intro-card p:last-child { margin-bottom: 0; }
.intro-card strong { color: var(--primary); }

.bd-callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-subtle);
  border-radius: 0 6px 6px 0;
  padding: 13px 16px;
  margin: 14px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}

/* BD disclosure count cards */
.bd-disc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.bd-disc-cell {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
}
.bd-disc-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.bd-disc-count.has-disclosures { color: var(--accent); }
.bd-disc-type {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 5px;
}

/* BD other names inline list */
.bd-other-names {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 6px;
}
.bd-other-names span {
  display: inline-block;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  margin: 3px 4px 3px 0;
  font-size: 12px;
}

/* BD no-grade notice */
.bd-no-grade-notice {
  font-size: 13px;
  color: var(--text-light);
  font-style: italic;
  margin-top: 8px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-number {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: auto;
  letter-spacing: 1px;
}

/* Section content placeholder */
.section-content {
  min-height: 80px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border);
  border-radius: 6px;
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.section-content.populated {
  background: none;
  border: none;
  border-radius: 0;
  min-height: 0;
  font-style: normal;
}

/* ═══════════════════════════════════════ */
/*  POPULATED SECTION CONTENT             */
/* ═══════════════════════════════════════ */
.section-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.section-preamble {
  margin-bottom: 24px;
  color: var(--text);
}

.section-question {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin: 24px 0 10px 0;
}
.section-question:first-child {
  margin-top: 0;
}

.comp-types-list {
  margin: 10px 0 6px 18px;
  padding: 0;
  list-style: disc;
}
.comp-types-list li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.comp-types-list li strong {
  color: var(--primary);
  font-weight: 600;
}

/* IAR registration callout — used inside section body */
.reg-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 12px 0;
  font-size: 13.5px;
  line-height: 1.65;
}
.reg-callout-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Stack container — holds one or more reg-callout cards vertically.
   Used by Your Searched Adviser compensation block; in dual-registration
   cases it stacks IAR card, BR card, and dual-implications card. */
.reg-callout-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.reg-callout-stack .reg-callout {
  margin: 0;
}
/* Header label inside a reg-callout (e.g. "Dually Registered"). */
.reg-callout-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
  margin-bottom: 4px;
}

/* Compensation method blurbs */
.comp-blurb {
  background: var(--surface);
  border-left: 3px solid var(--secondary);
  padding: 12px 18px;
  margin: 10px 0;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.65;
}
.comp-blurb-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.comp-blurb-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.comp-blurb-icon-check {
  background: #E97132;
  color: #fff;
}
.comp-blurb-icon-flag {
  background: var(--secondary);
  color: #fff;
  font-size: 14px;
  padding-bottom: 1px;
}
.comp-blurb-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
  margin-bottom: 4px;
}
.comp-blurb-text {
  color: var(--text);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Section footnote */
.s03-revenue-model-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 20px;
  padding: 10px 18px;
  background: var(--primary);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}
.s03-revenue-model-badge .rm-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.s03-revenue-model-badge .rm-value {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}
/* Row that holds the RIA Revenue Model badge alongside the Fee Calculator
   pill (P5). The row owns the vertical rhythm so the badge and pill align on
   a shared centre line; the badge's own 12/0/20 margin is neutralised only
   inside this row, leaving its standalone use (e.g. the BD report) untouched.
   flex-wrap lets the pill drop below the badge on narrow viewports. */
.s03-rm-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 20px;
}
.s03-rm-row .s03-revenue-model-badge {
  margin: 0;
}
.s03-comp-reference {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--bg-subtle);
  border-radius: 8px;
  border-left: 3px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary, var(--muted));
  line-height: 1.65;
}
.s03-comp-reference-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.s03-comp-reference p {
  margin: 0 0 8px 0;
}
.s03-comp-reference .comp-types-list {
  margin: 0;
  padding-left: 18px;
}
.s03-comp-reference .comp-types-list li {
  margin-bottom: 6px;
}

.section-footnote {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.section-footnote a {
  color: var(--muted);
  text-decoration: underline;
}
.section-footnote a:hover {
  color: var(--secondary);
}
.fn-ref {
  font-size: 10px;
  vertical-align: super;
  color: var(--secondary);
  font-weight: 600;
  cursor: default;
}

/* ═══════════════════════════════════════ */
/*  REPORT FOOTER                         */
/* ═══════════════════════════════════════ */
.report-footer {
  padding: 24px 36px;
  border-top: 2px solid var(--primary);
  background: var(--bg-subtle);
}
.footer-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.footer-text strong {
  color: var(--text-light);
}

/* ═══════════════════════════════════════ */
/*  SECTION 01: FIRM OVERVIEW             */
/* ═══════════════════════════════════════ */

/* Stat strip */
.s01a-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  background: var(--bg-page);
}
.s01a-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 0;
}
.s01a-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--icon-01);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s01a-stat-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s01a-stat-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin-bottom: 2px;
}
.s01a-stat-value {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.s01a-stat-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}
.s01a-stat-warn {
  font-size: 11px;
  color: #9C5B00;
  margin-top: 2px;
  font-style: italic;
}

/* Client focus badges inside stat card */
.s01a-client-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.s01a-client-badge {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--secondary);
  color: #fff;
  border-radius: 20px;
  padding: 2px 9px;
}
.s01a-client-badge.institutional {
  background: var(--muted);
}

/* Client Relationship block */
.s01a-client-rel {
  margin-bottom: 24px;
}
.s01a-client-rel-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin-bottom: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.s01a-client-rel-cards {
  display: flex;
  gap: 12px;
}
.s01a-client-rel-card {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 0;
}
.s01a-client-rel-card .s01a-stat-label { margin-bottom: 4px; }
.s01a-client-rel-note {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
  font-style: italic;
}

/* Two-column checklist layout */
.s01a-two-col {
  display: flex;
  gap: 24px;
}
.s01a-col {
  flex: 1;
  min-width: 0;
}
.s01-reg-description {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 20px;
  line-height: 1.6;
}
.s01-institutional-notice {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg-subtle);
  border-left: 3px solid var(--secondary);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.s01a-col-head {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.s01a-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.s01a-row:last-child { border-bottom: none; }
.s01a-row.off { color: var(--muted); }
.s01a-check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.s01a-check-icon.yes {
  background: #E97132;
  color: #fff;
}
.s01a-check-icon.no {
  background: var(--border);
  color: var(--muted);
}
.s01a-other-text {
  font-size: 11.5px;
  color: var(--text-light);
  font-style: italic;
  padding: 2px 0 5px 26px;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}

/* ─────────────────────────────────────────────────────────────
   LIVE LOADING STATUS + SKELETON FILL
   .report-loading  slim status strip at the top of the report, shown
                    while the async adviser data assembles and hidden by
                    finishLoading() (adds .is-done).
   .ar-skel         reserved-space shimmer used by the credentials and
                    disclosures blocks so their content fills in place
                    instead of popping in and shoving the sections below.
   ───────────────────────────────────────────────────────────── */
.report-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
}
.report-loading.is-done { display: none; }

.report-loading-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--secondary);
  border-radius: 50%;
  animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }

.ar-skel {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg,
      var(--bg-subtle) 25%, var(--border) 37%, var(--bg-subtle) 63%);
  background-size: 400% 100%;
  animation: ar-shimmer 1.4s ease infinite;
}
.ar-skel-line { height: 0.72em; margin: 0.34em 0; }
@keyframes ar-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .report-loading-spinner { animation-duration: 1.8s; }
  .ar-skel { animation: none; }
}