/* ============================================================
   Personal Impact Report — Modern UI
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --pi-900: #0f172a;
  --pi-800: #1e293b;
  --pi-700: #334155;
  --pi-600: #475569;
  --pi-400: #94a3b8;
  --pi-200: #e2e8f0;
  --pi-100: #f1f5f9;
  --pi-50:  #f8fafc;

  --orange:  #f97316;
  --orange-d:#c2410c;
  --orange-l:#fff7ed;
  --blue:    #3b82f6;
  --blue-d:  #1d4ed8;
  --blue-l:  #eff6ff;
  --green:   #10b981;
  --green-l: #ecfdf5;
  --red:     #ef4444;
  --red-l:   #fef2f2;
  --amber:   #f59e0b;
  --amber-l: #fffbeb;
  --indigo:  #6366f1;

  --radius:  14px;
  --radius-sm: 8px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.10);
  --transition: .2s ease;
}

/* ── Reset scoped to report ─────────────────────────────── */
.pi-report *,
.pi-report *::before,
.pi-report *::after {
  box-sizing: border-box;
}
.pi-report {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  color: var(--pi-800);
  background: var(--pi-50);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Hero header ─────────────────────────────────────────── */
.pi-hero {
  background: linear-gradient(135deg, var(--pi-900) 0%, #1e3a5f 50%, #1e293b 100%);
  color: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.pi-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 50%, rgba(59,130,246,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(249,115,22,.12) 0%, transparent 60%);
  pointer-events: none;
}
.pi-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.pi-hero__icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  backdrop-filter: blur(8px);
}
.pi-hero__text { flex: 1; min-width: 0; }
.pi-hero__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.pi-hero__title {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 0 0 8px;
}
.pi-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}
.pi-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pi-hero__meta-item svg { opacity: .7; }
.pi-hero__stats {
  flex-shrink: 0;
  display: flex;
  gap: 16px;
}
.pi-hero__stat {
  text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 20px;
  min-width: 90px;
  backdrop-filter: blur(8px);
}
.pi-hero__stat-val {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: block;
}
.pi-hero__stat-val--orange { color: var(--orange); }
.pi-hero__stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: block;
  margin-top: 5px;
}
/* Progress bar inside hero */
.pi-hero__progress {
  background: rgba(255,255,255,.1);
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
}
.pi-hero__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  border-radius: 999px;
  transition: width .8s ease;
}

/* ── Sticky nav ─────────────────────────────────────────── */
.pi-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pi-200);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.pi-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pi-nav__inner::-webkit-scrollbar { display: none; }
.pi-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pi-600);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  position: relative;
}
.pi-nav__link:hover { color: var(--pi-900); border-bottom-color: var(--pi-200); }
.pi-nav__link.is-active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.pi-nav__link-icon {
  width: 16px;
  height: 16px;
  opacity: .7;
}
.pi-nav__link.is-active .pi-nav__link-icon { opacity: 1; }
.pi-nav__print {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--pi-900);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
}
.pi-nav__print:hover { background: var(--pi-700); color: #fff; }

/* ── Page content shell ─────────────────────────────────── */
.pi-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ── Section header ─────────────────────────────────────── */
.pi-section-hd {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.pi-section-hd__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  background: var(--orange-l);
}
.pi-section-hd__icon--blue  { background: var(--blue-l); }
.pi-section-hd__icon--green { background: var(--green-l); }
.pi-section-hd__icon--indigo{ background: #eef2ff; }
.pi-section-hd__text h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin: 0 0 4px;
  color: var(--pi-900);
}
.pi-section-hd__text p {
  font-size: 13.5px;
  color: var(--pi-600);
  margin: 0;
  line-height: 1.5;
}

/* ── Card ───────────────────────────────────────────────── */
.pi-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--pi-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition);
  margin-bottom: 24px;
}
.pi-card:hover { box-shadow: var(--shadow-md); }
.pi-card__head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--pi-100);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pi-card__head-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--pi-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.pi-card__head-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pi-900);
  margin: 0;
  letter-spacing: -.1px;
}
.pi-card__head-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pi-100);
  color: var(--pi-600);
  letter-spacing: .3px;
}
.pi-card__body { padding: 24px; }
.pi-card__body--tight { padding: 0; }

/* ── Metric chips grid ──────────────────────────────────── */
.pi-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.pi-chip {
  background: #fff;
  border: 1.5px solid var(--pi-200);
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: default;
}
.pi-chip:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pi-chip__val {
  font-size: 22px;
  font-weight: 900;
  color: var(--orange);
  display: block;
  line-height: 1.1;
}
.pi-chip__val--blue  { color: var(--blue); }
.pi-chip__val--green { color: var(--green); }
.pi-chip__val--red   { color: var(--red); }
.pi-chip__lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--pi-400);
  display: block;
  margin-top: 5px;
  line-height: 1.3;
}

/* ── Summary stat strip ─────────────────────────────────── */
.pi-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.pi-stat {
  background: #fff;
  border: 1px solid var(--pi-200);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow var(--transition);
}
.pi-stat:hover { box-shadow: var(--shadow-md); }
.pi-stat__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pi-stat__icon-wrap--orange { background: var(--orange-l); }
.pi-stat__icon-wrap--blue   { background: var(--blue-l); }
.pi-stat__icon-wrap--green  { background: var(--green-l); }
.pi-stat__icon-wrap--red    { background: var(--red-l); }
.pi-stat__icon-wrap--amber  { background: var(--amber-l); }
.pi-stat__text { min-width: 0; }
.pi-stat__val {
  font-size: 24px;
  font-weight: 900;
  color: var(--pi-900);
  line-height: 1;
  display: block;
}
.pi-stat__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pi-400);
  display: block;
  margin-top: 4px;
}
.pi-stat__desc {
  font-size: 12.5px;
  color: var(--pi-600);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Progress bar ───────────────────────────────────────── */
.pi-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pi-bar-row:last-child { margin-bottom: 0; }
.pi-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pi-700);
  min-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pi-bar-track {
  flex: 1;
  height: 8px;
  background: var(--pi-100);
  border-radius: 999px;
  overflow: hidden;
}
.pi-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), #fb923c);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.pi-bar-fill--blue {
  background: linear-gradient(90deg, var(--blue), #60a5fa);
}
.pi-bar-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--pi-700);
  min-width: 38px;
  text-align: right;
}

/* ── Legend ─────────────────────────────────────────────── */
.pi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.pi-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pi-600);
}
.pi-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pi-legend__dot--own       { background: var(--orange); }
.pi-legend__dot--supporter { background: var(--blue); }
.pi-legend__dot--variance  { background: var(--pi-400); }
.pi-legend__dot--green     { background: var(--green); }
.pi-legend__dot--red       { background: var(--red); }

/* ── Chart image wrap ───────────────────────────────────── */
.pi-chart-wrap {
  background: var(--pi-50);
  border: 1px solid var(--pi-200);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
}
.pi-chart-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.pi-chart-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--pi-400);
  margin-bottom: 12px;
}

/* ── Score table ────────────────────────────────────────── */
.pi-tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid var(--pi-200);
}
.pi-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 480px;
}
.pi-tbl thead th {
  background: var(--pi-900);
  color: rgba(255,255,255,.9);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 11px 14px;
  text-align: center;
  white-space: nowrap;
  border: none;
  position: sticky;
  top: 0;
  z-index: 10;
}
.pi-tbl thead th:first-child { text-align: left; }
.pi-tbl tbody td,
.pi-tbl tbody th {
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--pi-100);
  text-align: center;
}
.pi-tbl tbody tr:last-child td,
.pi-tbl tbody tr:last-child th { border-bottom: none; }
.pi-tbl tbody tr:hover td,
.pi-tbl tbody tr:hover th {
  background: var(--pi-50) !important;
}
.pi-tbl__row-lbl {
  text-align: left !important;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  padding-left: 16px !important;
}
.pi-tbl__row-own       { background: #fff7ed; color: var(--orange-d); }
.pi-tbl__row-supporter { background: var(--blue-l); color: var(--blue-d); }
.pi-tbl__row-variance  { background: var(--pi-50); color: var(--pi-700); }
.pi-tbl__row-even td   { background: var(--pi-50); }
.pi-tbl td.val-pos { color: var(--green); font-weight: 700; }
.pi-tbl td.val-neg { color: var(--red);   font-weight: 700; }

/* ── Detailed evidence table ─────────────────────────────── */
.pi-de-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--pi-200);
}
.pi-de-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pi-de-tbl th, .pi-de-tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pi-100);
}
.pi-de-tbl tr:last-child th,
.pi-de-tbl tr:last-child td { border-bottom: none; }
.pi-de-area {
  background: linear-gradient(135deg, var(--pi-900), #1e3a5f);
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
}
.pi-de-hd {
  background: var(--pi-100);
  color: var(--pi-600) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}
.pi-de-hd td { border-bottom: 2px solid var(--pi-200) !important; }
.pi-de-row:hover td { background: var(--pi-50); }
.pi-de-label {
  font-weight: 700;
  color: var(--pi-900);
  white-space: nowrap;
  font-size: 12px;
}
.pi-de-question {
  color: var(--pi-700);
  line-height: 1.5;
  max-width: 440px;
}
.pi-de-score {
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  font-size: 13px;
}
.pi-de-spacer td {
  height: 6px;
  background: var(--pi-50);
  border-bottom: 2px solid var(--pi-200) !important;
  padding: 0 !important;
}

/* ── Two-col grid ───────────────────────────────────────── */
.pi-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 820px) {
  .pi-grid-2 { grid-template-columns: 1fr; }
}

/* ── Divider ─────────────────────────────────────────────── */
.pi-hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--blue), transparent);
  border-radius: 999px;
  margin: 32px 0;
  opacity: .35;
}

/* ── Page intro text (from CMS) ──────────────────────────── */
.pi-intro {
  background: #fff;
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
  font-size: 14px;
  line-height: 1.7;
  color: var(--pi-700);
}

/* ── Supporter comments ──────────────────────────────────── */
.pi-comments-list { list-style: none; padding: 0; margin: 0; }
.pi-comment-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pi-100);
}
.pi-comment-item:last-child { border-bottom: none; }
.pi-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.pi-comment-text {
  font-size: 13.5px;
  color: var(--pi-700);
  line-height: 1.6;
  flex: 1;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pi-card, .pi-chip, .pi-stat {
  animation: fadeUp .35s ease both;
}
.pi-card:nth-child(2)  { animation-delay: .05s; }
.pi-card:nth-child(3)  { animation-delay: .1s; }
.pi-card:nth-child(4)  { animation-delay: .15s; }

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 640px) {
  .pi-hero__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 20px; }
  .pi-hero__stats { width: 100%; }
  .pi-hero__stat  { flex: 1; }
  .pi-body        { padding: 20px 16px 48px; }
  .pi-nav__inner  { padding: 0 12px; }
  .pi-nav__print span { display: none; }
  .pi-chips       { grid-template-columns: repeat(3, 1fr); }
  .pi-stats       { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .pi-chips { grid-template-columns: repeat(2, 1fr); }
  .pi-stats { grid-template-columns: 1fr; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .pi-nav,
  .pi-nav__print,
  .pi-hero__stats,
  .dont-print { display: none !important; }

  .pi-hero {
    background: var(--pi-900) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pi-card {
    box-shadow: none !important;
    border: 1px solid #ddd;
    break-inside: avoid;
    animation: none !important;
  }
  .pi-report { background: #fff; }
  .pi-body   { padding: 16px 0; }
  .pi-hr     { opacity: .15 !important; }
}

/* ============================================================
   EXTENDED STYLES  — appended during UI redesign
   ============================================================ */

/* ── Override legacy site chrome inside PI / Leadership reports ── */

/* base.blade.php extends layouts.default directly and sets
   @section('hideSiteHeader') so the site <header> is never rendered.
   The rules below handle the <main class="wrapper"> padding that the
   site stylesheet applies, so our full-bleed pi-report shell works.  */

/* Strip site's main wrapper constraints on report pages */
.personal-impact main.wrapper,
.leadership-profile main.wrapper {
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* page-wrap can sometimes add top padding via site styles */
.personal-impact .page-wrap,
.leadership-profile .page-wrap {
  padding-top: 0 !important;
}

/* Footer spacing */
.personal-impact .footer,
.leadership-profile .footer {
  margin-top: 0;
}

/* Prevent the legacy .menu styles from leaking into the new pi-nav */
.pi-nav.menu,
.pi-nav.menu--last {
  all: unset;
  display: block;
}

/* The site stylesheet sometimes applies min-height / background to
   .wrapper — let the pi-report background show through.             */
.personal-impact .wrapper,
.leadership-profile .wrapper {
  background: transparent !important;
  min-height: unset !important;
}

/* ── Scroll-margin for anchor links inside the nav ───────── */
.pi-card,
.pi-section-hd {
  scroll-margin-top: 60px;
}

/* ── Additional hero layout fix for very wide screens ───── */
@media (min-width: 1400px) {
  .pi-hero__inner {
    padding-left: 48px;
    padding-right: 48px;
  }
  .pi-nav__inner,
  .pi-body {
    max-width: 1360px;
  }
}

/* ── Tablet layout (641px – 960px) ──────────────────────── */
@media (max-width: 960px) {
  .pi-hero__stats {
    gap: 10px;
  }
  .pi-hero__stat {
    min-width: 76px;
    padding: 12px 14px;
  }
  .pi-hero__stat-val {
    font-size: 22px;
  }
  .pi-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .pi-tbl {
    font-size: 11.5px;
  }
  .pi-tbl thead th,
  .pi-tbl tbody td,
  .pi-tbl tbody th {
    padding: 9px 10px;
  }
  .pi-de-tbl th,
  .pi-de-tbl td {
    padding: 10px 12px;
  }
}

/* ── Small mobile (≤ 640px) already in base file, but additions: -- */
@media (max-width: 640px) {
  .pi-section-hd {
    flex-direction: column;
    gap: 10px;
  }
  .pi-section-hd__icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 10px;
  }
  .pi-section-hd__text h2 {
    font-size: 17px;
  }
  .pi-card__head {
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 16px;
  }
  .pi-card__body {
    padding: 16px;
  }
  .pi-bar-label {
    min-width: 80px;
    font-size: 11px;
  }
  .pi-comment-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .pi-stat__val {
    font-size: 20px;
  }
  .pi-hero__inner {
    padding: 24px 16px 20px;
  }
  .pi-hero__title {
    font-size: 20px;
  }
  /* Stack hero stats as a row of 2 */
  .pi-hero__stats {
    flex-wrap: wrap;
  }
  .pi-hero__stat {
    flex: 1 1 calc(50% - 8px);
    min-width: unset;
  }
}

/* ── Very small screens (≤ 380px) ───────────────────────── */
@media (max-width: 380px) {
  .pi-nav__link {
    padding: 12px 10px;
    font-size: 12px;
    gap: 4px;
  }
  .pi-nav__link-icon {
    display: none;
  }
}

/* ── Reduced-motion: disable all animations / transitions ── */
@media (prefers-reduced-motion: reduce) {
  .pi-card,
  .pi-chip,
  .pi-stat {
    animation: none !important;
    transition: none !important;
  }
  .pi-bar-fill,
  .pi-hero__progress-fill {
    transition: none !important;
  }
}

/* ── Focus-visible keyboard indicators ───────────────────── */
.pi-nav__link:focus-visible,
.pi-nav__print:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Smooth scrolling for the whole report ───────────────── */
.pi-report {
  scroll-behavior: smooth;
}

/* ── Staggered card animation delays (up to 6 siblings) ─── */
.pi-card:nth-child(1) { animation-delay: .00s; }
.pi-card:nth-child(2) { animation-delay: .06s; }
.pi-card:nth-child(3) { animation-delay: .12s; }
.pi-card:nth-child(4) { animation-delay: .18s; }
.pi-card:nth-child(5) { animation-delay: .24s; }
.pi-card:nth-child(6) { animation-delay: .30s; }

/* ── pi-intro links ──────────────────────────────────────── */
.pi-intro a {
  color: var(--orange);
  text-decoration: underline;
}
.pi-intro a:hover {
  color: var(--orange-d);
}

/* ── Detailed-evidence: score colour helpers ─────────────── */
.pi-de-tbl .val-pos { color: var(--green);  font-weight: 700; }
.pi-de-tbl .val-neg { color: var(--red);    font-weight: 700; }

/* ── Supporter comment item hover ────────────────────────── */
.pi-comment-item {
  transition: background var(--transition);
  border-radius: var(--radius-sm);
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.pi-comment-item:hover {
  background: var(--pi-50);
}

/* ── Card head — badge colour variants ───────────────────── */
.pi-card__head-badge--green {
  background: var(--green-l);
  color: #065f46;
}
.pi-card__head-badge--orange {
  background: var(--orange-l);
  color: var(--orange-d);
}
.pi-card__head-badge--red {
  background: var(--red-l);
  color: #991b1b;
}

/* ── Horizontal divider gradient ────────────────────────────
   Already defined in base file; add a margin variant          */
.pi-hr--tight {
  margin: 20px 0;
}

/* ── Empty state card ────────────────────────────────────── */
.pi-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--pi-600);
}
.pi-empty__icon {
  font-size: 44px;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}
.pi-empty__text {
  font-size: 14px;
  margin: 0;
}

/* ── Utility: visually-hidden (screen-reader only) ───────── */
.pi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════
   PRINT STYLES  (extended)
   ══════════════════════════════════════════════════════════ */
@media print {

  /* Show the whole pi-report even if body has a dark background */
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Ensure hero prints with readable dark background */
  .pi-hero {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #fff !important;
  }

  /* One area-card per page in detailed evidence */
  .pi-card.print-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Hide interactive elements */
  .pi-nav,
  .pi-nav__print,
  .pi-hero__stats,
  .dont-print {
    display: none !important;
  }

  /* Remove shadows, animations, hover effects */
  .pi-card,
  .pi-chip,
  .pi-stat {
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* Reset body padding */
  .pi-body {
    padding: 8px 0 !important;
    max-width: 100% !important;
  }

  /* Keep table colours in print */
  .pi-tbl thead th,
  .pi-de-area {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ensure progress bars don't print as blank */
  .pi-bar-fill,
  .pi-bar-fill--blue {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Chart images — keep them from breaking */
  .pi-chart-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pi-chart-wrap img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Section headers shouldn't break from the card that follows */
  .pi-section-hd {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Stat strip — lay flat in 2 columns */
  .pi-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .pi-intro {
    border-left-color: #333 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   AREA FILTER BAR  — added for interactive area filtering
   ============================================================ */

/* ── Filter bar wrapper ─────────────────────────────────── */
.pi-filter {
  background: #fff;
  border-bottom: 1px solid var(--pi-200);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  position: sticky;
  top: 49px;          /* sits just below the pi-nav (≈49px tall) */
  z-index: 190;
  padding: 10px 0;
}

.pi-filter__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pi-filter__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--pi-400);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Chips scroll row ────────────────────────────────────── */
.pi-filter__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;   /* prevent clipped box-shadow */
  flex: 1;
}
.pi-filter__chips::-webkit-scrollbar { display: none; }

/* ── Individual chip / button ────────────────────────────── */
.pi-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--pi-200);
  background: #fff;
  color: var(--pi-600);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background   .18s ease,
    border-color .18s ease,
    color        .18s ease,
    box-shadow   .18s ease,
    transform    .15s ease;
  outline: none;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pi-filter__chip-icon {
  font-size: 14px;
  line-height: 1;
}

.pi-filter__chip-label {
  /* keep visible even when icon is present */
}

/* Hover state */
.pi-filter__chip:hover {
  border-color: var(--chip-colour, var(--orange));
  color: var(--chip-colour, var(--orange));
  background: color-mix(in srgb, var(--chip-colour, var(--orange)) 8%, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Fallback for browsers without color-mix (Safari < 16.2) */
@supports not (color: color-mix(in srgb, red 8%, #fff)) {
  .pi-filter__chip:hover {
    background: var(--pi-50);
  }
}

/* Active / selected state */
.pi-filter__chip.is-active {
  background: var(--chip-colour, var(--orange));
  border-color: var(--chip-colour, var(--orange));
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transform: translateY(-1px);
}

/* "All Areas" chip uses a fixed dark colour */
.pi-filter__chip--all {
  --chip-colour: var(--pi-800);
}

/* Focus-visible ring */
.pi-filter__chip:focus-visible {
  outline: 3px solid var(--chip-colour, var(--orange));
  outline-offset: 2px;
}

/* ── Area pill (inline badge on main-report cards) ───────── */
.pi-area-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-colour, var(--orange)) 12%, #fff);
  color: var(--chip-colour, var(--orange));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-left: 8px;
}
@supports not (color: color-mix(in srgb, red 12%, #fff)) {
  .pi-area-pill { background: var(--pi-100); color: var(--pi-700); }
}

/* ── Variance inline block ───────────────────────────────── */
.pi-area-variance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 4px;
}
.pi-area-variance--pos {
  background: var(--green-l);
  color: #065f46;
}
.pi-area-variance--neg {
  background: var(--red-l);
  color: #991b1b;
}
.pi-area-variance strong {
  font-size: 15px;
  font-weight: 900;
}
.pi-area-variance__note {
  font-size: 11.5px;
  font-weight: 500;
  opacity: .75;
  margin-left: auto;
}

/* ── Filtered-out state: hide with fade ─────────────────── */
.pi-area-row {
  transition: opacity .2s ease, transform .2s ease;
}
.pi-area-row.pi-hidden {
  display: none !important;
}

/* ── Entering animation for newly-visible rows ───────────── */
@keyframes piRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pi-area-row.pi-visible {
  animation: piRowIn .25s ease both;
}

/* ── Empty state ─────────────────────────────────────────── */
.pi-filter-empty {
  /* shown/hidden via JS display property */
}

/* ── Active filter indicator strip below the bar ────────── */
.pi-filter__active-label {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 24px 0;
  font-size: 11.5px;
  color: var(--pi-400);
  font-weight: 600;
}
.pi-filter__active-label strong {
  color: var(--pi-700);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .pi-filter {
    top: 45px;
  }
  .pi-filter__label {
    display: none;   /* save space on tablet */
  }
}

@media (max-width: 640px) {
  .pi-filter {
    top: 41px;
    padding: 8px 0;
  }
  .pi-filter__inner {
    padding: 0 12px;
    gap: 6px;
  }
  .pi-filter__chip {
    padding: 6px 11px;
    font-size: 12px;
  }
  .pi-filter__chip-icon {
    font-size: 13px;
  }
}

/* ── Print: hide the entire filter bar ──────────────────── */
@media print {
  .pi-filter { display: none !important; }
  .pi-area-row.pi-hidden { display: block !important; }  /* restore all for print */
}

/* ============================================================
   ALL REPORTS PAGE  (pi-all)
   ============================================================ */

/* ── Body reset for the standalone all-reports layout ─────── */
.pi-all-page {
  margin: 0;
  padding: 0;
  background: var(--pi-50);
}
.pi-all-page main {
  display: block;
}

/* ── Hero ────────────────────────────────────────────────── */
.pall-hero {
  background: linear-gradient(135deg, var(--pi-900) 0%, #1e3a5f 55%, #1e293b 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pall-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 40%, rgba(59,130,246,.2) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(249,115,22,.13) 0%, transparent 60%);
  pointer-events: none;
}
.pall-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 32px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pall-hero__identity {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.pall-hero__icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
}
.pall-hero__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 5px;
}
.pall-hero__name {
  font-size: clamp(20px, 3.5vw, 32px);
  font-weight: 900;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  line-height: 1.1;
}
.pall-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
}
.pall-hero__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.pall-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
  border: none;
  letter-spacing: .3px;
}
.pall-btn--ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.25);
}
.pall-btn--ghost:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* KPI strip */
.pall-hero__kpis {
  position: relative;
  background: rgba(0,0,0,.2);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pall-hero__kpis::-webkit-scrollbar { display: none; }
.pall-kpi {
  flex: 1;
  min-width: 110px;
  padding: 16px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.pall-kpi:last-child { border-right: none; }
.pall-kpi__icon { font-size: 18px; display: block; margin-bottom: 4px; }
.pall-kpi__val {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  display: block;
  line-height: 1;
}
.pall-kpi__lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  display: block;
  margin-top: 5px;
}
.pall-kpi--green .pall-kpi__val { color: #34d399; }
.pall-kpi--amber  .pall-kpi__val { color: #fbbf24; }

/* ── Sticky section nav ──────────────────────────────────── */
.pall-nav {
  position: sticky;
  top: 0;
  z-index: 210;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pi-200);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.pall-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pall-nav__inner::-webkit-scrollbar { display: none; }
.pall-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 13px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pi-600);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.pall-nav__link:hover { color: var(--pi-900); }
.pall-nav__link.is-active { color: var(--orange); border-bottom-color: var(--orange); }
.pall-nav__expand,
.pall-nav__collapse {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--pi-200);
  background: #fff;
  color: var(--pi-700);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.pall-nav__expand:hover,
.pall-nav__collapse:hover { background: var(--pi-50); border-color: var(--pi-400); }
.pall-nav__collapse { margin-left: 6px; }

/* ── The filter bar sits below the section nav on this page ─ */
.pi-all .pi-filter {
  top: 47px;
  z-index: 205;
}

/* ── Section wrappers ───────────────────────────────────── */
.pall-section {
  margin-bottom: 48px;
  scroll-margin-top: 100px;
}

/* ── Area overview grid (Big Picture cards) ─────────────── */
.pall-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.pall-area-card {
  background: #fff;
  border: 1.5px solid var(--pi-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  animation: fadeUp .3s ease both;
}
.pall-area-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pall-area-card__top {
  background: linear-gradient(135deg, color-mix(in srgb, var(--area-colour) 12%, #fff), #fff);
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--area-colour, var(--pi-200));
}
@supports not (color: color-mix(in srgb, red 12%, #fff)) {
  .pall-area-card__top { background: var(--pi-50); }
}
.pall-area-card__icon { font-size: 18px; flex-shrink: 0; }
.pall-area-card__name {
  font-size: 12px;
  font-weight: 800;
  color: var(--pi-900);
  flex: 1;
  min-width: 0;
}
.pall-area-card__score {
  font-size: 32px;
  font-weight: 900;
  color: var(--pi-900);
  padding: 12px 14px 4px;
  line-height: 1;
}
.pall-area-card__bar {
  height: 6px;
  background: var(--pi-100);
  margin: 0 14px 4px;
  border-radius: 999px;
  overflow: hidden;
}
.pall-area-card__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.pall-area-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pi-400);
  padding: 0 14px 12px;
  margin: 0;
}

/* Performance level pill */
.pall-level {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pall-level--green { background: var(--green-l);  color: #065f46; }
.pall-level--blue  { background: var(--blue-l);   color: var(--blue-d); }
.pall-level--amber { background: var(--amber-l);  color: #92400e; }
.pall-level--red   { background: var(--red-l);    color: #991b1b; }

/* ── Accordion component ────────────────────────────────── */
.pall-accordion {
  background: #fff;
  border: 1.5px solid var(--pi-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.pall-accordion:hover { box-shadow: var(--shadow-md); }
.pall-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pi-900);
  transition: background var(--transition);
  border-left: 4px solid var(--area-colour, var(--pi-200));
}
.pall-accordion__trigger:hover { background: var(--pi-50); }
.pall-accordion__trigger[aria-expanded="true"] { background: var(--pi-50); }
.pall-accordion__icon { font-size: 18px; flex-shrink: 0; }
.pall-accordion__title { flex: 1; min-width: 0; }
.pall-accordion__scores {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.pall-accordion__chevron {
  flex-shrink: 0;
  transition: transform .2s ease;
}
.pall-accordion__trigger[aria-expanded="true"] .pall-accordion__chevron {
  transform: rotate(180deg);
}
.pall-accordion__body {
  padding: 20px;
  border-top: 1px solid var(--pi-100);
  animation: fadeUp .2s ease both;
}
.pall-accordion__body[hidden] { display: none; }

/* Score pills inside accordion header */
.pall-score-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pall-score-pill--own { background: var(--orange-l); color: var(--orange-d); }
.pall-score-pill--sup { background: var(--blue-l);   color: var(--blue-d); }
.pall-var--pos { background: var(--green-l);  color: #065f46; }
.pall-var--neg { background: var(--red-l);    color: #991b1b; }
.pall-var--zero{ background: var(--pi-100);   color: var(--pi-600); }

/* ── Comparison row inside accordion ────────────────────── */
.pall-comparison { display: flex; flex-direction: column; gap: 10px; }
.pall-comparison__row {
  display: flex;
  align-items: center;
  gap: 0;
}
.pall-comparison__lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--pi-700);
  min-width: 110px;
}
.pall-comparison__val {
  font-size: 13px;
  font-weight: 800;
  color: var(--pi-800);
  min-width: 42px;
  text-align: right;
}
.pall-gap-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  margin-top: 6px;
}
.pall-var--pos.pall-gap-badge { background: var(--green-l); color: #065f46; }
.pall-var--neg.pall-gap-badge { background: var(--red-l);   color: #991b1b; }
.pall-var--zero.pall-gap-badge { background: var(--pi-100); color: var(--pi-600); }
.pall-gap-badge strong { font-size: 15px; font-weight: 900; }
.pall-gap-badge span:last-child { font-size: 11.5px; opacity: .8; margin-left: auto; }

/* ── Development Insights grid ──────────────────────────── */
.pall-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.pall-insight-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid var(--pi-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.pall-insight-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pall-insight-card__hd {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--pi-100);
}
.pall-insight-card--green .pall-insight-card__hd { background: var(--green-l);  color: #065f46; }
.pall-insight-card--amber  .pall-insight-card__hd { background: var(--amber-l); color: #92400e; }
.pall-insight-card--blue   .pall-insight-card__hd { background: var(--blue-l);  color: var(--blue-d); }
.pall-insight-card--red    .pall-insight-card__hd { background: var(--red-l);   color: #991b1b; }
.pall-insight-card > p,
.pall-insight-list { padding: 16px 18px; margin: 0; }
.pall-insight-list { list-style: none; }
.pall-insight-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--pi-100);
  font-size: 12.5px;
  color: var(--pi-800);
}
.pall-insight-list li:last-child { border-bottom: none; }
.pall-insight-list__label { flex: 1; padding-right: 8px; font-weight: 600; }
.pall-insight-list__score {
  font-weight: 900;
  color: var(--pi-900);
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Floating action button (FAB) ───────────────────────── */
.pall-fab {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 500;
}
.pall-fab__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pi-900);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: background var(--transition), transform var(--transition);
}
.pall-fab__btn:hover { background: var(--pi-700); transform: scale(1.06); }
.pall-fab__menu {
  position: absolute;
  bottom: 62px;
  right: 0;
  background: #fff;
  border: 1px solid var(--pi-200);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  overflow: hidden;
  animation: fadeUp .18s ease both;
}
.pall-fab__menu[hidden] { display: none; }
.pall-fab__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pi-700);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
  border-bottom: 1px solid var(--pi-100);
}
.pall-fab__item:last-child { border-bottom: none; }
.pall-fab__item:hover { background: var(--pi-50); color: var(--pi-900); }
.pall-fab__print { color: var(--pi-900); font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .pall-hero__inner { padding: 28px 20px 20px; }
  .pall-area-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pall-insights-grid { grid-template-columns: 1fr 1fr; }
  .pall-kpi { padding: 12px 14px; }
  .pall-kpi__val { font-size: 18px; }
}
@media (max-width: 640px) {
  .pall-hero__identity { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pall-hero__icon { display: none; }
  .pall-hero__kpis { flex-wrap: nowrap; }
  .pall-kpi { min-width: 90px; }
  .pall-nav__expand, .pall-nav__collapse { display: none; }
  .pall-area-grid { grid-template-columns: repeat(2, 1fr); }
  .pall-insights-grid { grid-template-columns: 1fr; }
  .pall-accordion__scores { display: none; }
  .pall-fab { bottom: 16px; right: 16px; }
  .pi-body { padding: 16px 12px 48px; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .pall-nav, .pall-fab, .pi-filter,
  .pall-hero__actions, .dont-print { display: none !important; }

  .pall-hero {
    background: var(--pi-900) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pall-accordion__body[hidden] { display: block !important; }
  .pall-accordion__body { border-top: 1px solid #ddd; }
  .pall-section { break-inside: avoid; margin-bottom: 24px; }
  .pall-area-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; }
  .pall-insights-grid { grid-template-columns: repeat(2,1fr) !important; }
  .pi-all-page body, .pi-report { background: #fff !important; }
  .pi-body { padding: 0 !important; }
  .pi-area-row.pi-hidden { display: block !important; }
}