:root {
      --ink: #1a2340;
      --ink-soft: #46526b;
      --cream: #f7f3ec;
      --paper: #ffffff;
      --gold: #b58a3b;
      --gold-soft: #d9b977;
      --line: #e3ddd2;
      --good: #2f7d4a;
      --ok: #6ba368;
      --mid: #d1a33b;
      --warn: #d97a2b;
      --bad: #b0392f;
      --shadow: 0 2px 10px rgba(26, 35, 64, 0.08);
    }
    * { box-sizing: border-box; }
    .pgf-index-embed { margin: 0; padding: 0; }
    .pgf-index-embed {
      font-family: "Georgia", "Cambria", "Times New Roman", serif;
      background: var(--cream);
      color: var(--ink);
      line-height: 1.5;
    }

    /* ===== Login screen ===== */
    #login {
      position: fixed;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(26,35,64,0.92), rgba(26,35,64,0.78)),
        radial-gradient(circle at 20% 30%, rgba(181,138,59,0.4), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(217,185,119,0.3), transparent 55%);
      background-color: #1a2340;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px;
    }
    #login.hidden { display: none; }
    .login-card {
      background: var(--paper);
      width: 100%;
      max-width: 460px;
      border-radius: 8px;
      padding: 32px 36px 28px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.35);
      border-top: 4px solid var(--gold);
    }
    .login-card .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
    }
    .login-card .brand img { height: 56px; width: auto; }
    .login-card .brand h1 {
      font-size: 20px;
      margin: 0;
      letter-spacing: 0.4px;
    }
    .login-card .brand .tag {
      font-style: italic;
      color: var(--ink-soft);
      font-size: 12px;
    }
    .role-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 6px;
      overflow: hidden;
      margin: 8px 0 18px;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .role-toggle button {
      background: var(--cream);
      border: none;
      padding: 12px 8px;
      font-size: 13px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      cursor: pointer;
      color: var(--ink-soft);
      font-weight: 600;
      transition: background 0.15s;
    }
    .role-toggle button.on {
      background: var(--ink);
      color: var(--cream);
    }
    .role-desc {
      font-size: 12px;
      color: var(--ink-soft);
      font-family: "Helvetica Neue", Arial, sans-serif;
      margin: 0 0 16px;
      min-height: 36px;
    }
    .login-form label {
      display: block;
      font-size: 12px;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin: 10px 0 4px;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .login-form input[type="email"],
    .login-form input[type="password"],
    .login-form input[type="text"] {
      width: 100%;
      padding: 10px 12px;
      font-size: 14px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--paper);
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .login-form button.submit {
      width: 100%;
      margin-top: 18px;
      background: var(--ink);
      color: var(--cream);
      border: none;
      padding: 12px 16px;
      font-size: 13px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      border-radius: 4px;
      cursor: pointer;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .login-form button.submit:hover { background: var(--gold); }
    .login-foot {
      margin-top: 14px;
      font-size: 11px;
      color: var(--ink-soft);
      text-align: center;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .login-foot strong { color: var(--ink); }
    .ngo-search-wrap { position: relative; }
    .ngo-suggest {
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--paper);
      border: 1px solid var(--line);
      border-top: none;
      border-radius: 0 0 4px 4px;
      max-height: 220px;
      overflow-y: auto;
      z-index: 50;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 13px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }
    .ngo-suggest div {
      padding: 8px 10px;
      cursor: pointer;
      border-bottom: 1px solid var(--line);
    }
    .ngo-suggest div:last-child { border-bottom: none; }
    .ngo-suggest div:hover, .ngo-suggest div.hl { background: var(--cream); }
    .ngo-suggest .meta { color: var(--ink-soft); font-size: 11px; }

    /* ===== Masthead, nav ===== */
    .masthead {
      background: var(--paper);
      border-bottom: 3px solid var(--gold);
      padding: 20px 32px;
      display: flex;
      align-items: center;
      gap: 20px;
      box-shadow: var(--shadow);
    }
    .masthead img.logo { height: 64px; width: auto; }
    .masthead h1 { font-size: 26px; margin: 0; letter-spacing: 0.5px; }
    .masthead .tagline {
      font-style: italic;
      color: var(--ink-soft);
      font-size: 14px;
    }
    .masthead .session {
      margin-left: auto;
      display: flex;
      gap: 16px;
      align-items: center;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      color: var(--ink-soft);
    }
    .masthead .session .who strong { color: var(--ink); }
    .masthead .session .role-pill {
      background: var(--ink);
      color: var(--cream);
      padding: 3px 10px;
      border-radius: 999px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-size: 10px;
    }
    .masthead .session .logout {
      background: transparent;
      border: 1px solid var(--ink);
      color: var(--ink);
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 11px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      font-family: inherit;
    }
    .masthead .session .logout:hover {
      background: var(--ink);
      color: var(--cream);
    }
    .subnav {
      background: var(--ink);
      color: var(--cream);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 13px;
      padding: 10px 32px;
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      letter-spacing: 0.6px;
    }
    .subnav a {
      color: var(--cream);
      text-decoration: none;
      opacity: 0.85;
      cursor: pointer;
    }
    .subnav a:hover { opacity: 1; color: var(--gold-soft); }

    .layout {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 20px;
      padding: 20px 32px 40px;
      max-width: 1600px;
      margin: 0 auto;
    }
    @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

    .panel {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 18px 20px;
      box-shadow: var(--shadow);
    }
    .panel h2 {
      font-size: 16px;
      margin: 0 0 10px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 6px;
      letter-spacing: 0.4px;
    }
    .panel h3 {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin: 18px 0 8px;
      color: var(--ink-soft);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-weight: 600;
    }

    .filters label {
      display: block;
      font-size: 12px;
      color: var(--ink-soft);
      margin: 6px 0 4px;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .filters select, .filters input[type="number"], .filters input[type="text"] {
      width: 100%;
      padding: 6px 8px;
      font-size: 13px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--paper);
      font-family: inherit;
    }
    .chk-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      margin-top: 6px;
      font-size: 12px;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .chk-row label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      color: var(--ink);
    }

    .filter-actions {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin: 0 0 6px;
    }
    .filter-actions button {
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 4px;
      padding: 4px 7px;
      font-size: 11px;
      cursor: pointer;
      font-family: "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
    }
    .filter-actions button:hover {
      border-color: var(--gold);
    }
    .filter-count {
      font-size: 11px;
      color: var(--ink-soft);
      margin-left: 2px;
    }
    .chk-row label em {
      font-style: normal;
      color: var(--ink-soft);
      opacity: 0.75;
      font-size: 11px;
    }
    .cause-tiered-filter {
      display: block;
    }
    .cause-tier-block {
      width: 100%;
      margin-bottom: 10px;
    }
    .cause-filter-heading strong {
      color: var(--ink);
      font-size: 12px;
      letter-spacing: 0.2px;
      margin-right: 2px;
    }
    .cause-category-list,
    .cause-subgroup-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
    }
    .cause-category-list label,
    .cause-subgroup-options label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      color: var(--ink);
    }
    .cause-filter-hint,
    .cause-empty {
      width: 100%;
      margin: 0 0 6px;
      color: var(--ink-soft);
      font-size: 11px;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .cause-subcategory-panel {
      border-top: 1px solid var(--line);
      padding-top: 8px;
    }
    .cause-subcategory-list {
      display: grid;
      gap: 6px;
      width: 100%;
      max-height: 360px;
      overflow-y: auto;
      padding-right: 2px;
    }
    .cause-subgroup {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255,255,255,0.45);
      padding: 0;
    }
    .cause-subgroup summary {
      cursor: pointer;
      list-style-position: inside;
      padding: 7px 9px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-weight: 600;
    }
    .cause-subgroup summary em {
      font-weight: 400;
      font-size: 11px;
      color: var(--ink-soft);
      opacity: 0.8;
      white-space: nowrap;
    }
    .cause-subgroup-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      padding: 0 9px 7px;
    }
    .cause-subgroup-actions button {
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 4px;
      padding: 3px 6px;
      font-size: 10px;
      cursor: pointer;
      font-family: "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
    }
    .cause-subgroup-actions button:hover {
      border-color: var(--gold);
    }
    .cause-subgroup-options {
      padding: 0 9px 9px;
    }
    .slider-row {
      display: grid;
      grid-template-columns: 1fr 60px;
      gap: 8px;
      align-items: center;
      margin: 4px 0 2px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
    }
    .slider-row .lbl {
      display: flex;
      justify-content: space-between;
      grid-column: 1 / -1;
      color: var(--ink-soft);
    }
    .slider-row input[type="range"] { width: 100%; }
    .weight-controls {
      display: grid;
      grid-template-columns: 1fr 60px;
      gap: 8px;
      grid-column: 1 / -1;
      align-items: center;
    }
    .weight-controls input[type="number"] {
      width: 60px;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 4px 6px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      color: var(--ink);
      background: var(--cream);
    }
    .slider-row .wval {
      font-variant-numeric: tabular-nums;
      text-align: right;
      font-weight: 600;
      color: var(--ink);
    }
    .slider-total {
      margin-top: 6px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      color: var(--ink-soft);
      display: flex;
      justify-content: space-between;
    }
    .slider-total .warn { color: var(--warn); }
    .weight-status {
      margin-top: 6px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 11px;
      line-height: 1.45;
      border-radius: 4px;
      padding: 7px 8px;
      border: 1px solid var(--line);
      background: var(--cream);
      color: var(--ink-soft);
    }
    .weight-status.ok { color: var(--good); }
    .weight-status.warn {
      color: var(--warn);
      border-color: rgba(176,57,47,.35);
      background: rgba(176,57,47,.06);
    }

    button.btn {
      background: var(--ink);
      color: var(--cream);
      border: none;
      padding: 8px 14px;
      border-radius: 4px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      letter-spacing: 0.6px;
      cursor: pointer;
      text-transform: uppercase;
      margin-top: 12px;
    }
    button.btn.ghost {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--line);
    }
    button.btn:hover { background: var(--gold); }

    #map {
      height: 520px;
      width: 100%;
      border-radius: 6px;
      border: 1px solid var(--line);
    }
    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 14px;
    }
    .stat {
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px 12px;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .stat .num { font-size: 22px; font-weight: 700; color: var(--ink); }
    .stat .lab {
      font-size: 11px;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: 0.7px;
    }

    .ngo-list { margin-top: 18px; }
    .ngo-card {
      display: grid;
      grid-template-columns: 62px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      margin-bottom: 10px;
      cursor: pointer;
      transition: border-color 0.15s, transform 0.15s;
    }
    .ngo-card:hover {
      border-color: var(--gold);
      transform: translateY(-1px);
    }
    .ngo-card.active {
      border-color: var(--gold);
      box-shadow: 0 0 0 2px var(--gold-soft);
    }
    .score-badge {
      width: 62px; height: 62px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .score-badge .s { font-size: 20px; font-weight: 700; line-height: 1; }
    .score-badge .b { font-size: 9px; letter-spacing: 0.8px; margin-top: 2px; opacity: 0.9; }
    .ngo-name { font-weight: 600; font-size: 16px; }
    .ngo-meta {
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      color: var(--ink-soft);
    }
    .rank {
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 11px;
      color: var(--ink-soft);
      text-align: right;
    }
    .rank .big { font-size: 20px; font-weight: 700; color: var(--ink); }

    .detail-panel {
      margin-top: 12px;
      padding: 20px 22px;
      border: 1px solid var(--line);
      border-left: 4px solid var(--gold);
      background: var(--paper);
      border-radius: 6px;
    }
    .detail-panel h3 { margin-top: 0; font-size: 20px; }
    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 14px 0;
    }
    .pillar-grid .p {
      background: var(--cream);
      padding: 10px 12px;
      border-radius: 4px;
      border: 1px solid var(--line);
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .pillar-grid .p .nm {
      font-size: 11px;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }
    .pillar-grid .p .vl { font-size: 18px; font-weight: 700; }
    .pillar-bar {
      height: 4px;
      background: var(--line);
      border-radius: 2px;
      margin-top: 4px;
      overflow: hidden;
    }
    .pillar-bar > span { display: block; height: 100%; background: var(--gold); }

    .tag {
      display: inline-block;
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 2px 10px;
      margin: 0 4px 4px 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 11px;
      color: var(--ink-soft);
      letter-spacing: 0.3px;
    }
    .redflag {
      color: var(--bad);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      margin-top: 6px;
    }

    .band-Exceptional { background: #1c6b3a; }
    .band-Strong      { background: #2f7d4a; }
    .band-Sound       { background: #6ba368; }
    .band-Moderate    { background: #d1a33b; }
    .band-Weak        { background: #d97a2b; }
    .band-HighRisk    { background: #b0392f; }

    .methodology {
      columns: 2;
      column-gap: 40px;
      font-size: 14px;
    }
    @media (max-width: 780px) { .methodology { columns: 1; } }
    .methodology p { margin: 0 0 10px; break-inside: avoid; }

    .pgf-index-embed .pgf-index-local-footer {
      text-align: center;
      padding: 30px 20px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      color: var(--ink-soft);
      border-top: 1px solid var(--line);
      margin-top: 30px;
    }

    .maplibregl-popup-content { border-radius: 6px; font-family: "Helvetica Neue", Arial, sans-serif; margin: 10px 14px; font-size: 13px; }
    .maplibregl-popup-content strong { font-family: "Georgia", serif; font-size: 14px; }
    .maplibregl-popup-close-button { font-size: 18px; padding: 2px 8px; }
    .map-style-switcher { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; box-shadow: var(--shadow); font-family: "Helvetica Neue", Arial, sans-serif; font-size: 11px; }
    .map-style-switcher select { margin-top: 4px; width: 180px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font-size: 12px; }
    .legend {
      background: rgba(255, 255, 255, 0.95);
      padding: 8px 10px;
      border-radius: 4px;
      border: 1px solid var(--line);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 11px;
      line-height: 1.6;
    }
    .legend .sw {
      display: inline-block;
      width: 10px; height: 10px; border-radius: 50%;
      margin-right: 5px; vertical-align: middle;
    }

    /* ===== NGO self-scorecard view ===== */
    #ngoView { display: none; padding: 20px 32px 40px; max-width: 1100px; margin: 0 auto; }
    #ngoView .hero {
      background: var(--paper);
      border: 1px solid var(--line);
      border-left: 6px solid var(--gold);
      border-radius: 6px;
      padding: 28px 32px;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1fr 130px;
      gap: 24px;
      align-items: center;
    }
    #ngoView .hero h2 { font-size: 26px; margin: 0 0 6px; }
    #ngoView .hero .meta {
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 13px;
      color: var(--ink-soft);
      margin-bottom: 8px;
    }
    #ngoView .hero p { margin: 8px 0 0; font-size: 14px; }
    #ngoView .hero .score-badge {
      width: 130px; height: 130px;
      margin: 0 auto;
    }
    #ngoView .hero .score-badge .s { font-size: 44px; }
    #ngoView .hero .score-badge .b { font-size: 12px; margin-top: 4px; }
    #ngoView .grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }
    @media (max-width: 900px) { #ngoView .grid { grid-template-columns: 1fr; } }

    .pillar-row {
      display: grid;
      grid-template-columns: 200px 70px 1fr;
      gap: 14px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 13px;
    }
    .pillar-row:last-child { border-bottom: none; }
    .pillar-row .pname { font-weight: 600; }
    .pillar-row .pscore { font-size: 22px; font-weight: 700; text-align: center; }
    .pillar-row .pbar {
      height: 8px;
      background: var(--line);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .pillar-row .pbar > span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #d97a2b, #d1a33b 50%, #2f7d4a);
    }
    .pillar-row .pnote {
      grid-column: 1 / -1;
      font-size: 12px;
      color: var(--ink-soft);
      margin-top: 4px;
      padding-left: 4px;
    }

    .recs {
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 14px 18px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 13px;
    }
    .recs h4 {
      margin: 0 0 8px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--ink-soft);
    }
    .recs ul { margin: 0; padding-left: 18px; }
    .recs li { margin: 6px 0; }

    .trend-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 16px 18px;
      box-shadow: var(--shadow);
    }
    .trend-card h3 {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin: 0 0 10px;
      color: var(--ink-soft);
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    .trend-card svg { width: 100%; height: 130px; display: block; }
    .org-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 12px;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
    }
    .org-stats .b {
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 8px 10px;
      text-align: center;
    }
    .org-stats .b .v {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
    }
    .org-stats .b .l {
      font-size: 10px;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

.pgf-index-embed{position:relative;margin-top:24px;}
.pgf-index-hidden-shell{display:none !important;}
.pgf-index-intro{max-width:900px;margin:0 auto 18px;}
.pgf-index-intro h1{margin-bottom:12px;}