/* ==========================================================================
   Azuros — design system
   Ocean / blue economy feel, inspired by the original theme, but reset.
   ========================================================================== */

/* Self-hosted Inter (variable font). Without this @font-face the
   `--font-body` "Inter" name resolves to nothing and the site silently
   falls back to the system sans-serif stack. The ttf carries a wght axis
   of 100–900, so one file covers every weight we use; declare the full
   range here so the browser interpolates instead of synthesising bold.
   The url is written naively — the file ships under /assets/ and the path
   resolves at the origin root. `swap` shows fallback text immediately and
   swaps to Inter when the font loads, avoiding invisible-text FOIT. */
@font-face {
  font-family: "Inter";
  src: url(/assets/fonts/inter/Inter-VariableFont.ttf) format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --c-ink:        #0b1e2d;
  --c-ink-soft:   #3a4f61;
  /* AA on white (≈5.5:1) and on --c-surface-2 (≈5.0:1).
     Original #6b7c8c failed AA on both — flagged by Lighthouse on
     card body copy and the contact lede. */
  --c-ink-muted:  #5a6b7a;
  --c-surface:    #ffffff;
  --c-surface-2:  #eef5f9;
  --c-border:     #d6e3ec;

  --c-azur:       #3bb4d1;   /* brand, unchanged from original */
  /* Slightly darker than the original #1b7a93 so .accent text on
     --c-surface-2 clears AA (≈5.3:1, was 4.48). White text on this
     as a CTA background lands at ≈5.8:1. */
  --c-azur-ink:   #176e85;
  --c-azur-wash:  #e7f5fa;
  --c-ocean:      #0d3b52;
  --c-ocean-deep: #06263a;
  --c-accent:     #f5a65b;

  --c-ok:    #2f8f5a;
  --c-err:   #c04848;

  /* Type */
  --font-body:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Comfortaa", var(--font-body);

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  /* Asymmetric "tear" shape used on cards, icon pills and form fields.
     Three tight corners, one large sweep on the bottom-right. Ported from
     the original azuros.ai theme. */
  --r-tear:    12px 12px 42px 12px;
  --r-tear-sm:  6px  6px 18px  6px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(11,30,45,0.06);
  --shadow-2: 0 10px 28px rgba(11,30,45,0.08);
  --shadow-3: 0 30px 70px rgba(11,30,45,0.14);

  /* Layout */
  --max-w: 1180px;
  --gutter: clamp(1rem, 2vw, 2rem);
  --nav-h: 72px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--nav-h);   /* default: push content below the fixed nav */
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-surface);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Pages whose first section is a .hero let the hero extend behind the nav */
body:has(> main > .hero:first-child),
body:has(> main #hero) {
  padding-top: 0;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-azur-ink);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--c-azur); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.25rem, 3vw + 1.25rem, 3.25rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem); }
h3 { font-size: clamp(1.35rem, 1vw + 0.9rem, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

.accent {
  /* --c-azur-ink (≈5.0:1 on --c-surface-2) passes AA; the lighter
     --c-azur fails on washed backgrounds. Brand cyan still used
     elsewhere; this is the text-on-light variant. */
  color: var(--c-azur-ink);
  font-weight: 700;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--measure { max-width: 760px; }
.container--measure-wide { max-width: 880px; }

/* Wizard steps flagged `:wide?` use the bare `.container` so they
   can host the three-column SDG editor + budget table. Bump the
   ceiling above the global 1180 here so those steps get extra
   horizontal room — the SDG step's left focused-goal card and the
   right allocations rail were sitting flush against the wizard
   step's bracket otherwise. */
.wizard .container:not(.container--measure):not(.container--measure-wide) {
  max-width: 1320px;
}

.section {
  padding-block: clamp(3rem, 5vw, 5.5rem);
  position: relative;
  background: var(--c-surface);  /* opaque so sections cover the fixed
                                    home-page hero background */
}
.section-soft { background: var(--c-surface-2); }

.section-header {
  max-width: 660px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-header h2 { margin-bottom: 0.5rem; }
.section-header h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0.75rem auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg,
                              var(--c-azur-ink) 0%,
                              #7ce0f5 50%,
                              var(--c-azur-ink) 100%);
  background-size: 220% 100%;
  animation: accent-shimmer 7s ease-in-out infinite;
}
@keyframes accent-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .section-header h2::after { animation: none; background: var(--c-azur); }
}
.section-header h3,
.section-header h4 {
  /* Eyebrow / subtitle sibling of the section <h2>. h3 is the semantic
     choice (heading order); h4 kept for any legacy callers. */
  color: var(--c-ink-soft);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0.25rem 0 0;
}
.section-header p {
  color: var(--c-ink-muted);
  font-size: 1.05rem;
}

/* ==========================================================================
   Top nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  /* Dark translucent glass — lets the fixed hero photo peek through on the
     home page and reads as a coherent ocean bar on subpages. */
  background: rgba(6, 38, 58, 0.62);
  backdrop-filter: saturate(1.25) blur(14px);
  -webkit-backdrop-filter: saturate(1.25) blur(14px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Safety net: when the page body doesn't render a `.hero` band the
   header would be white-on-white (transparent bg, white nav text).
   The selector below catches every workspace page that uses
   `layout/page` without a hero -- the header takes the same dark-
   glass treatment as `.is-scrolled` from page-load on. Using `:has()`
   so handlers never have to remember to set a flag; if a page lacks
   a hero, the header adapts automatically.

   `is-scrolled` still wins in the cascade because azuros.js toggles
   it dynamically on scroll; both states converge on the same look. */
body:not(:has(main .hero)) .site-header {
  background: rgba(6, 38, 58, 0.92);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Header text stays white across both scroll states (transparent over the
   hero photo, dark-glass when scrolled — both support white). */
.site-header .brand { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.25); }
.site-header .brand:hover { color: #fff; }
.site-header .nav__list a {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.site-header .nav__list a:hover {
  color: #fff;
  background: rgba(255,255,255,0.10);
}
/* Active page: drop the pill and lay a thin underline along the
   link's bottom edge. The pill made the active item look "raised"
   off the row -- with the underline every link sits on the same
   visual baseline and the Sign-in CTA on the right is the only
   pill in the bar (so it reads unambiguously as the action). */
.site-header .nav__list a.active {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 -2px 0 0 rgba(255,255,255,0.92);
  border-radius: 0;
}
.site-header .nav__auth-button {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.site-header .nav__auth-button:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
}
.site-header .nav-toggle {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

.brand {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0;
  color: var(--c-ink);
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { color: var(--c-azur-ink); }

/* Stretch the nav across the remaining header width. The items
   group is centred between brand and auth via twin auto-margins
   (one on the first item, one on `.nav__auth`); flexbox splits
   the leftover space 50/50 between the two auto-margins, so the
   items group sits symmetrically between the logo on the left and
   the Sign-in / account-chip on the right -- regardless of how
   many items the role-aware nav decides to render. */
.nav { display: flex; flex: 1; }

.nav__list {
  display: flex;
  flex: 1;
  gap: 0.35rem;
  align-items: center;
  list-style: none;
  padding: 0; margin: 0;
}
.nav__list > li:first-child { margin-left: auto; }
.nav__list a {
  display: inline-block;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav__list a:hover {
  color: var(--c-ink);
  background: var(--c-surface-2);
}
.nav__list a.active {
  color: var(--c-azur-ink);
  background: transparent;
  box-shadow: inset 0 -2px 0 0 var(--c-azur-ink);
  border-radius: 0;
}

/* Hairline divider between the public-anchor block and the
   workspace block (Dashboard / Matches / Conversations / …). Shows
   only when a user is signed in; the server emits the <li> in
   azuros.views.layout/nav-separator. A single thin rule, no
   label, no shadow -- Tufte's data-rule. */
.nav__separator {
  align-self: stretch;
  width: 1px;
  background: var(--c-border);
  margin: 0.5rem 0.5rem;
  list-style: none;
}

/* Auth-state slot. Sits at the far-right of the nav row via
   `margin-left: auto`, which pairs with the `margin-left: auto`
   on the first item to centre the items group between brand and
   auth (the two autos split the slack 50/50). */
.nav__auth {
  margin-left: auto;
  padding-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav__auth--signed-in { gap: 0.55rem; }
/* Click-to-open account dropdown menu — replaces the older
   hover-reveal pill. The trigger button is the compact pill
   (avatar + name + caret); the menu panel reveals email, role,
   and account actions on click. Behaviour lives in azuros.js. */
.nav__account {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* Vertical padding sized to land the trigger at the same height
     as the Dashboard nav link (`.nav__list a`, padding 0.55/0.8)
     so the two read as a single button row instead of two
     mismatched widgets. The two-line content (name over role
     pill) does most of the vertical work, so the actual padding
     here is small. */
  padding: 0.3rem 0.85rem 0.3rem 0.3rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  /* Same drop-shadow trick the nav links use to stay legible over
     the hero photo and the dark-glass scrolled state alike. */
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(6,38,58,0.14);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nav__account-trigger:hover,
.nav__account-trigger:focus-visible,
.nav__account-trigger[aria-expanded="true"] {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 12px 30px rgba(6,38,58,0.2);
  outline: none;
}

.nav__account-dot {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-azur), #8ee8f7);
  color: #06263a;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55);
}
.nav__account-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  line-height: 1.1;
  /* The dot is fixed-size, the caret is fixed-size — give the text
     column the responsibility for the trigger's overall height so
     the pill stays slim and consistent across name/role lengths. */
}
.nav__account-name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}
/* Role pill INSIDE the closed trigger — visually the same as the
   role pill on the open menu's header. Shared visuals are
   factored into the combined selector below; layout-specific
   bits (spacing, alignment) sit on each variant. */
.nav__account-trigger-role {
  align-self: flex-start;
  /* Negative margin equal to the pill's left padding so the
     INNOVATOR text optically aligns with the start of "Kai
     Baptiste" above it, instead of the pill's left edge sitting
     where the name text starts. The chip background extends a
     few pixels left of the column for free. */
  margin-left: -0.5rem;
  /* The trigger has a global `text-shadow` for legibility on the
     hero photo, but the role pill has its own colored bg so the
     shadow muddies the reading. Reset it. */
  text-shadow: none;
}
.nav__account-caret {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform .16s ease;
}
.nav__account-trigger[aria-expanded="true"] .nav__account-caret {
  transform: rotate(180deg);
}

/* Menu panel — opens below the trigger, right-aligned to its
   right edge so it doesn't overflow the viewport on narrow
   screens. Hidden by default (the trigger uses aria-expanded +
   the [hidden] attribute to toggle). */
.nav__account-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 14rem;
  padding: 0.4rem;
  background: rgba(11,30,45,0.94);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0.6rem;
  box-shadow: 0 18px 44px rgba(6,38,58,0.4);
  color: rgba(255,255,255,0.92);
}
.nav__account-menu[hidden] {
  display: none;
}

.nav__account-menu-header {
  padding: 0.55rem 0.7rem 0.65rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav__account-menu-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}
.nav__account-menu-email {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  word-break: break-all;
}
/* Shared pill visuals — the role label appears in two places now
   (closed-trigger and expanded-menu header). Factor out the
   colored chip so both stay visually identical without
   duplicating ~6 properties. */
.nav__account-trigger-role,
.nav__account-menu-role {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(110,108,255,0.22);
  color: #c8c6ff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.nav__account-menu-role {
  margin-top: 0.25rem;
  align-self: flex-start;
}
/* "Screamy" admin variant — warm orange instead of the cool
   purple regular roles use, plus a brighter alpha so the
   elevated-permissions case is visually distinct from
   investor / innovator at a glance. Reuses the impersonation
   banner's #ea580c orange so both signals (admin role +
   impersonation overlay) come from the same colour family. */
.nav__account-trigger-role.nav__account-role--admin,
.nav__account-menu-role.nav__account-role--admin {
  background: rgba(234, 88, 12, 0.28);
  color: #ffb98c;
  box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.4);
}

.nav__account-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.nav__account-menu-form {
  margin: 0;
  /* `display: contents` was the original here so the submit
     button could participate directly in the parent flex layout,
     but Safari (≤16.3) is documented as swallowing the first
     click on form submits when the form element is contents — the
     user lands on the open menu, clicks Sign out once with no
     visible effect, and only the second click actually fires
     submit. Drop the trick: the inner button is `width: 100%`
     anyway, so a plain block form holds it just fine, the visual
     is identical, and the click → submit chain stays standards-
     simple across browsers. */
  display: block;
}
/* Set on submit by the JS feedback handler so a second click on
   a still-loading page can't fire a second POST. CSS-only — we
   intentionally avoid the `disabled` attribute because some
   browsers (Safari) appear to cancel an in-flight form submit
   when the submit button gets disabled mid-flight. */
.nav__account-menu-form.is-submitting {
  pointer-events: none;
  opacity: 0.7;
}
.nav__account-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav__account-menu-item:hover,
.nav__account-menu-item:focus-visible {
  background: rgba(255,255,255,0.08);
  outline: none;
  color: #fff;
}
.nav__account-menu-item i.bi {
  width: 1rem;
  text-align: center;
  opacity: 0.85;
}
.nav__account-menu-item--danger:hover,
.nav__account-menu-item--danger:focus-visible {
  background: rgba(239,77,77,0.18);
  color: #ffd6d6;
}
.nav__auth-link {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav__auth-link:hover {
  color: var(--c-ink);
  background: var(--c-surface-2);
}
.nav__auth-form { margin: 0; }
.nav__auth-button {
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* CTA pill (Sign in) -- crop a few px off the top so the pill
   doesn't poke above the menu-item row; the text baseline stays
   aligned with the menu items because the bottom padding matches
   `.nav__list a` exactly. The selector includes `.nav__list a` to
   beat the descendant-selector specificity of the generic link
   rule that would otherwise restore the symmetric padding. */
.nav__list a.nav__auth-link--cta {
  color: #fff;
  /* darker brand variant so white text passes AA (≈5.4:1).
     --c-azur on its own was ≈2.8:1 and got flagged. */
  background: var(--c-azur-ink);
  box-shadow: 0 4px 12px rgba(27,122,147,0.3);
  padding-top: 0.35rem;
  padding-bottom: 0.55rem;
}
.nav__auth-link--cta:hover {
  color: #fff;
  background: var(--c-ocean);
  box-shadow: 0 6px 16px rgba(13,59,82,0.4);
}
.nav__auth-sep {
  color: var(--c-ink-soft);
  opacity: 0.4;
  font-size: 0.85rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.65rem;
  color: var(--c-ink);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    inset: var(--nav-h) 0 auto 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-2);
    display: none;
    padding: 0.75rem var(--gutter) 1rem;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { padding: 0.85rem 0.5rem; }
  /* Vertical hairline becomes a horizontal divider rule in the
     drawer; the column-break geometry doesn't translate, but the
     group separation still reads at-a-glance. */
  .nav__separator {
    width: auto;
    height: 1px;
    margin: 0.4rem 0;
    align-self: stretch;
  }
  .nav__auth {
    align-items: flex-start;
    padding: 0.55rem 0 0;
  }
  .nav__account-pill {
    width: fit-content;
    padding: 0.45rem 0.5rem 0.45rem 0.4rem;
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-ink);
  }
  .nav__account-logout {
    max-width: 8rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav__account-logout-button {
    border-left-color: var(--c-border);
  }
  .nav__account-logout-label {
    max-width: 4.5rem;
    opacity: 1;
  }
  /* Drawer opens onto a solid white panel — force dark text regardless of
     the header's scroll state. */
  .site-header .nav[data-open="true"] .nav__list a {
    color: var(--c-ink-soft);
    text-shadow: none;
    background: transparent;
  }
  .site-header .nav[data-open="true"] .nav__auth-button {
    color: var(--c-ink-soft);
    text-shadow: none;
    background: transparent;
  }
  .site-header .nav[data-open="true"] .nav__list a.active {
    color: var(--c-azur-ink);
    background: var(--c-azur-wash);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 85vh;
  /* extra top padding so hero text clears the (now-overlaying) nav */
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 7vw, 6rem));
  padding-bottom: clamp(8rem, 13vw, 11rem);
  background: var(--c-ocean-deep);  /* fallback while photos load */
}

/* Crossfading Ken Burns backdrop */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* On the home page, pin the backdrop to the viewport so the Ken Burns
   cross-fade keeps drifting behind the translucent nav as you scroll. On
   subpages the `.hero--sub` background stays absolute and scrolls off with
   its section. */
.hero:not(.hero--sub) > .hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 100vh;
  z-index: 0;
}
.hero-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
  animation: hero-kenburns 30s infinite;
}
/* First image visible immediately so hero doesn't flash the dark fallback */
.hero-bg__img:nth-child(1) { opacity: 1; animation-delay:  0s; }
.hero-bg__img:nth-child(2) { animation-delay: 10s; }
.hero-bg__img:nth-child(3) { animation-delay: 20s; }

@keyframes hero-kenburns {
  0%   { opacity: 0; transform: scale(1.02); }
  6%   { opacity: 1; }
  33%  { opacity: 1; }
  40%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* Dark overlay so text remains readable on top of any photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,38,58,0.55) 0%, rgba(6,38,58,0.45) 60%, rgba(6,38,58,0.75) 100%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg__img { animation: none; opacity: 1; }
  .hero-bg__img:nth-child(n+2) { display: none; }
}

.hero h2 {
  font-family: var(--font-brand);
  color: #fff;
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 0.25em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero h3 {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.2vw + 0.9rem, 1.75rem);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
.hero p {
  color: rgba(255,255,255,0.82);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.2rem);
  margin: 0 auto;
  max-width: 48ch;
}

/* Animated parallax waves, pinned to bottom of hero */
.hero-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(80px, 11vw, 150px);
  z-index: 2;
  pointer-events: none;
}
.hero-waves .parallax > use {
  animation: hero-wave-move 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.hero-waves .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 9s; }
.hero-waves .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 13s; }
.hero-waves .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 17s; }
.hero-waves .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 26s; }

@keyframes hero-wave-move {
  0%   { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d( 85px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-waves .parallax > use { animation: none; }
  html { scroll-behavior: auto; }
}

/* Subpage hero — shorter, single photo, same ocean overlay.
   Used on About / Blueprint / Investors / Innovators / News / Privacy / Terms. */
.hero--sub {
  min-height: 68vh;
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(6.5rem, 11vw, 9rem);
}

/* Slim variant for workspace / dashboard pages — the user is here to
   work, not to be welcomed for half a screen, so shrink the hero so
   the actual content lands above the fold on a regular laptop. */
.hero--sub.hero--app {
  min-height: clamp(220px, 28vh, 320px);
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 2.5vw, 2rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero--sub .hero-bg__img {
  opacity: 1;
  transform: scale(1.02);
  animation: hero-sub-drift 38s ease-in-out infinite alternate;
}
@keyframes hero-sub-drift {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-2%, -1.25%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--sub .hero-bg__img { animation: none; transform: scale(1.02); }
}
.hero--sub h1 {
  font-family: var(--font-brand);
  color: #fff;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 0.25em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero--sub h2 {
  color: #fff;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  margin: 0 0 0.3em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero--sub p.lede {
  color: rgba(255,255,255,0.88);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.2rem);
  max-width: 56ch;
  margin: 0 auto;
}
.hero--sub .meta {
  margin-top: 1rem;
  color: rgba(255,255,255,0.72);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--r-tear-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  /* white-on-cyan needs the darker --c-azur-ink (≈5.4:1) to pass AA;
     light --c-azur was ≈2.4:1. Hover deepens further. */
  background: var(--c-azur-ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(27,122,147,0.35);
}
.btn-primary:hover {
  background: var(--c-ocean);
  color: #fff;
  box-shadow: 0 10px 22px rgba(13,59,82,0.4);
}

.btn-outline {
  background: transparent;
  color: var(--c-azur-ink);
  border-color: var(--c-azur-ink);
}
.btn-outline:hover {
  background: var(--c-azur-wash);
  color: var(--c-azur-ink);
}

/* Destructive action — used on Delete project / similar danger ops.
   Matches the .wizard-alert--error palette so the same red reads
   consistently as "this is a destructive action" across the app. */
.btn-danger {
  background: #fff;
  color: #b3261e;
  border: 1px solid color-mix(in srgb, #b3261e 35%, transparent);
}
.btn-danger:hover {
  background: #fdecea;
  color: #8c1d18;
  border-color: #b3261e;
  box-shadow: 0 6px 18px rgba(179, 38, 30, .18);
}

/* ==========================================================================
   Banner card (launch notice)
   ========================================================================== */

.banner {
  background: linear-gradient(135deg, #fff 0%, var(--c-azur-wash) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  box-shadow: var(--shadow-2);
  position: relative;
  margin-top: -2.5rem;   /* lift up into hero wave */
  z-index: 4;
}
.banner h3 { margin: 0 0 0.4rem; color: var(--c-ink); }
.banner p { margin: 0; color: var(--c-ink-soft); max-width: 60ch; margin-inline: auto; }

/* ==========================================================================
   Services / icon cards
   ========================================================================== */

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* grid-3 uses flex so an orphan last row (e.g. 5-in-3) centers cleanly. */
.grid-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.grid-3 > * {
  flex: 0 0 calc((100% - 3rem) / 3);
}
@media (max-width: 900px) {
  .grid-3 > * { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 600px) {
  .grid-3 > * { flex-basis: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  isolation: isolate;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear);
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow:
    0 1px 2px rgba(11,30,45,0.04),
    0 8px 20px -12px rgba(11,30,45,0.18);
  /* Background needs to crossfade in sync with the goo backdrop shape
     behind it (`.services-goo__shape::before`) — without it, the card
     body snaps from white to dark while the backdrop is still mid-
     transition, which reads as a flicker. */
  transition:
    transform 1s cubic-bezier(0.2, 0.8, 0.4, 1),
    background 1s ease,
    box-shadow 1s ease,
    border-color 1s ease;
}
.card__icon {
  transition:
    background 1s ease,
    color 1s ease,
    box-shadow 1s ease,
    transform 1s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.card__title,
.card__title a,
.card__text {
  transition: color 1s ease;
}

/* Shared-filter goo group.
   All service cards render their visual fill into ONE filtered backdrop
   layer, so the goo filter can merge shapes + the cursor ball into a single
   organic mass. Each `.card[data-goo]` contributes only content (icon +
   text); its background, border, and shadow are stripped so the shape in
   the backdrop layer is the sole visible fill. */
.services-goo {
  position: relative;
}
.services-goo__layer {
  position: absolute;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
  filter: url(#azuros-goo);
}
.services-goo .grid {
  position: relative;
  z-index: 1;
}
.services-goo__shape {
  position: absolute;
  background: var(--c-surface);
  border-radius: var(--r-tear);
}
/* Dark "selected" fill lives on a pseudo overlay so opacity can crossfade
   cleanly both directions — solid colors and linear-gradients aren't
   CSS-interpolable, so swapping backgrounds directly would snap. The
   ~1s crossfade matches the card body's background transition so the
   foreground content and the goo backdrop move together. */
.services-goo__shape::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
                              #0d3b52 0%,
                              #164f6d 55%,
                              #0d3b52 100%);
  opacity: 0;
  transition: opacity 1s ease;
}
.services-goo__shape.is-near::before {
  opacity: 1;
}
.services-goo__cursor {
  position: absolute;
  /* Sized 50px (not 34) so it survives the shared goo filter's alpha
     threshold (`α × 20 − 9` in #azuros-goo) when a card's dark shape
     is in the same filter pipeline. A 34px disc blurred at σ=12 lands
     at peak α ≈ 0.63 alone — marginal, and gets eaten by the threshold
     once a large darkened shape is also contributing premultiplied
     colour to the filter pass. 50px clears the threshold reliably and
     produces a nicer teardrop bridge into the card during merge. */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0d3b52;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  /* Longer scale/opacity transitions make the ball feel like a viscous
     drop instead of a snappy dot — better match for the gooey backdrop. */
  transition:
    transform .55s cubic-bezier(0.2, 0.8, 0.4, 1),
    opacity .4s ease-out;
}
.services-section.is-ball-in .services-goo__cursor {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Belt-and-suspenders: the stretched-link pseudo on each service card
   carries an `<a>` underneath it. Some browsers don't always cascade the
   `.is-ball-in *` cursor:none rule onto the link's pseudo region during
   class transitions, so the native pointer can peek through for a frame
   as the proximity class flips. Pin cursor:none directly on the cards
   and their links to suppress that flash entirely. */
.card[data-goo],
.card[data-goo] *,
.card[data-goo] .card__link,
.card[data-goo] .card__link::before { cursor: none; }

/* Floating ball for non-goo opt-in sections */
.floating-ball {
  position: fixed;
  top: 0; left: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #0d3b52;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 58;
  transition:
    transform .25s cubic-bezier(0.2, 0.8, 0.4, 1),
    opacity .2s ease-out;
}
.floating-ball.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Small always-visible pointer dot — rides on top of whichever ball is
   active so the user sees the exact cursor position even when the ball
   has merged into a dark selected card. */
.ball-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-azur);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 62;
  transition:
    transform .2s cubic-bezier(0.2, 0.8, 0.4, 1),
    opacity .15s ease-out;
}
body.has-ball-cursor .ball-cursor-dot {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Hide native cursor on opt-in sections (and their descendants). */
.is-ball-in,
.is-ball-in * { cursor: none; }

@media (hover: none), (pointer: coarse) {
  .services-goo__cursor,
  .floating-ball,
  .ball-cursor-dot { display: none; }
  .is-ball-in,
  .is-ball-in * { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .services-goo__cursor,
  .floating-ball,
  .ball-cursor-dot { display: none; }
}

/* data-goo card: keep a quiet fallback shell so cards remain visible before
   JS initialises, on touch devices, and when reduced motion disables goo. */
.card[data-goo] {
  background: rgba(255,255,255,0.76);
  border-color: rgba(214,227,236,0.9);
  box-shadow:
    0 1px 2px rgba(11,30,45,0.04),
    0 14px 34px -26px rgba(6,38,58,0.42);
}
.card[data-goo].is-near,
.card[data-goo]:hover {
  background: linear-gradient(135deg,
                              #0d3b52 0%,
                              #164f6d 55%,
                              #0d3b52 100%);
  transform: none;
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(11,30,45,0.05),
    0 26px 52px -18px rgba(6,38,58,0.48),
    0 0 0 3px rgba(59,180,209,0.18);
}
/* Stretched link — the title anchor covers the whole card via a positioned
   pseudo, so clicking anywhere on the card navigates. Keeps text selectable
   for anything not inside the anchor itself. */
.card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.card[data-goo].is-near .card__icon,
.card[data-goo]:hover .card__icon {
  background: var(--c-azur);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(59,180,209,0.18);
  transform: scale(1.08);
}
.card[data-goo].is-near .card__title,
.card[data-goo].is-near .card__title a,
.card[data-goo]:hover .card__title,
.card[data-goo]:hover .card__title a { color: #fff; }
.card[data-goo].is-near .card__text,
.card[data-goo]:hover .card__text { color: rgba(255,255,255,0.78); }

/* Non-goo cards keep the original hover treatment. */
.card:not([data-goo]):hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(11,30,45,0.05),
    0 26px 52px -18px rgba(6,38,58,0.55),
    0 0 0 3px rgba(59,180,209,0.28);
}
.card:not([data-goo]):hover .card__icon {
  background: var(--c-azur);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(59,180,209,0.18);
  transform: scale(1.08);
}
.card:not([data-goo]):hover .card__title,
.card:not([data-goo]):hover .card__title a { color: #fff; }
.card:not([data-goo]):hover .card__text { color: rgba(255,255,255,0.78); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-tear-sm);
  background: var(--c-azur-wash);
  color: var(--c-azur-ink);
  font-size: 1.25rem;
  margin-bottom: 0.85rem;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.card__title {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
  color: var(--c-ink);
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--c-azur-ink); }

.card__text {
  color: var(--c-ink-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ==========================================================================
   Split (Why Us)
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

.visual-block {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(140deg, var(--c-azur) 0%, var(--c-azur-ink) 55%, var(--c-ocean) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  margin: 0;
}
.visual-block svg {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: auto;
}
.visual-block--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reverse visual/content order on wide screens — image on the left */
@media (min-width: 861px) {
  .split--reverse > :first-child { order: 2; }
  .split--reverse > :last-child  { order: 1; }
}

/* Accent-marked list used inside content bodies */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  display: grid;
  gap: 0.55rem;
}
.feature-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--c-ink-soft);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c-azur);
  transform: rotate(45deg);
}

/* Long-form prose (privacy, terms) */
.prose {
  max-width: 70ch;
  margin-inline: auto;
  color: var(--c-ink-soft);
}
.prose h3, .prose h4 {
  margin-top: 2.25rem;
  color: var(--c-ink);
  font-size: 1.15rem;
  font-weight: 600;
}
.prose h3:first-child,
.prose h4:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 1em; }
.prose ul { padding-left: 1.1rem; }
.prose ul li { margin-bottom: 0.35rem; }
.prose strong { color: var(--c-ink); }
.prose a { color: var(--c-azur-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-azur); }

/* Pill tag used on the subpage hero (e.g. "Legal", "Company news") */
.eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.28);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   Contact form
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info {
  position: relative;
  align-self: stretch;
  background: linear-gradient(140deg, #0d3b52 0%, #06263a 100%);
  color: #fff;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border-radius: var(--r-tear);
  box-shadow:
    0 1px 2px rgba(6,38,58,0.12),
    0 18px 38px -18px rgba(6,38,58,0.45);
  overflow: hidden;
}
.contact-info::after {
  /* soft halo in the bottom-right corner echoing the tear shape */
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,180,209,0.22) 0%, rgba(59,180,209,0) 70%);
  pointer-events: none;
}
.contact-info dl {
  display: grid;
  gap: 1.35rem;
  margin: 0;
  position: relative;
  z-index: 1;
}
.contact-info dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.contact-info dd {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.55;
}
.contact-info a {
  color: var(--c-azur);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.contact-info a:hover { color: #fff; }

form.azuros-form {
  display: grid;
  gap: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  box-shadow: var(--shadow-1);
}
form.azuros-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
form.azuros-form legend {
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 0.25rem;
}
.form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-field { display: grid; gap: 0.35rem; }
.form-field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.form-field input:not([type="checkbox"]),
.form-field textarea,
.form-field select {
  font: inherit;
  color: var(--c-ink);
  background: #eef3f6;
  border: 1px solid transparent;
  border-radius: var(--r-tear-sm);
  padding: 0.85rem 1rem;
  width: 100%;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}
.form-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink-muted) 50%),
    linear-gradient(135deg, var(--c-ink-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--c-ink-muted);
  opacity: 1;
}
.form-field input:not([type="checkbox"]):hover,
.form-field textarea:hover,
.form-field select:hover {
  background: #e5edf1;
}
.form-field input:not([type="checkbox"]):focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--c-azur);
  box-shadow: 0 0 0 3px rgba(59,180,209,0.22);
}
.form-field textarea { min-height: 150px; resize: vertical; }

.required { color: var(--c-err); }
.field-hint,
.form-note,
.form-status--note {
  color: var(--c-ink-muted);
}
.field-hint {
  font-size: 0.85rem;
  margin: 0;
}
.field-error {
  color: var(--c-err);
  font-size: 0.85rem;
  margin: 0;
}
/* Inputs that failed validation get a red outline + a translucent
   ring so the eye lands on them quickly. Driven by aria-invalid
   which f/field sets whenever the field has an :error. */
.form-field [aria-invalid="true"] {
  border-color: var(--c-err) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-err) 18%, transparent);
}
/* Subtle pulse while HTMX is mid-flight on the field. Lets the user
   see the validation request was kicked off without a heavy spinner. */
.form-field.htmx-request [aria-invalid],
.form-field input.htmx-request,
.form-field textarea.htmx-request {
  opacity: .85;
}
.form-note,
.form-status--note { margin-top: 2rem; }
.checkbox-grid {
  display: grid;
  gap: 0.65rem;
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--c-ink-soft);
}
.checkbox-row input {
  margin-top: 0.28rem;
  accent-color: var(--c-azur-ink);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.dev-signin-form__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-status { font-size: 0.9rem; min-height: 1.4em; margin: 0; }
.form-status.ok   { color: var(--c-ok); }
.form-status.err  { color: var(--c-err); }
.form-status.busy { color: var(--c-ink-muted); }
.form-status.form-status--note { margin-top: 2rem; }

/* ==========================================================================
   Platform app surfaces
   ========================================================================== */

.role-chooser__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* Inline name capture above the role cards, only rendered when the
   user arrived without a `:name` (email/password signup path). */
.role-chooser__name {
  margin: 0 auto clamp(1.5rem, 2.5vw, 2rem);
  max-width: 32rem;
  text-align: left;
}
.role-chooser__name label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.role-chooser__name input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  background: #fff;
  font: inherit;
  font-size: 1rem;
}
.role-chooser__name input:focus {
  outline: 2px solid var(--c-azur-ink);
  outline-offset: 1px;
  border-color: transparent;
}
.role-card {
  font: inherit;
  color: var(--c-ink-soft);
  text-align: left;
  background: linear-gradient(135deg, #fff 0%, var(--c-azur-wash) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}
.role-card:hover,
.role-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
  border-color: var(--c-azur);
  box-shadow: var(--shadow-2);
}
.role-card__title {
  display: block;
  color: var(--c-ink);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.role-card__tagline {
  display: block;
  color: var(--c-azur-ink);
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.role-card__lede { margin-bottom: 1.1rem; }
.role-card__cta {
  color: var(--c-azur-ink);
  font-weight: 700;
}

/* Innovator cockpit: attention banner, 4-tile money strip,
   pipeline funnel, and a secondary project-counts line. Lives
   directly under the AI chat strip on the innovator dashboard.
   Tier-1 of the cockpit proposal. */
.dashboard-attention {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: .85rem 1.1rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-accent) 14%, #fff) 0%,
    #fff 80%
  );
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  border-radius: var(--r-tear);
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow-1);
}
.dashboard-attention:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(11,30,45,.04),
              0 14px 36px -20px rgba(192, 99, 32, .35);
}
.dashboard-attention__icon {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c-accent) 22%, #fff);
  color: color-mix(in srgb, var(--c-accent) 60%, var(--c-ink));
  border-radius: 50%;
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.dashboard-attention__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.dashboard-attention__title {
  font-weight: 700;
  color: var(--c-ink);
}
.dashboard-attention__sub {
  color: var(--c-ink-soft);
  font-size: .88rem;
}
.dashboard-attention__cta {
  flex: 0 0 auto;
  color: var(--c-azur-ink);
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
}

/* Pipeline funnel: a horizontal bar with one segment per state,
   sized proportionally to the count. Empty lanes still render
   (min flex-grow) so the operator sees the full shape of the
   pipeline even when traffic is light. */
.dashboard-funnel {
  margin: 0 0 1.5rem;
}
.dashboard-funnel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
}
.dashboard-funnel__eyebrow {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-azur);
  font-weight: 700;
}
.dashboard-funnel__total {
  font-size: .82rem;
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
.dashboard-funnel__bar {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  min-height: 3.4rem;
}
.dashboard-funnel__seg {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Each segment owns a per-state tint via data-state below. The
     zero-count tabs go partially transparent so the proportional
     reading of the bar isn't muddied. */
}
.dashboard-funnel__seg + .dashboard-funnel__seg {
  border-left: 1px solid var(--c-border);
}
.dashboard-funnel__seg[data-empty="true"] {
  opacity: .55;
}
.dashboard-funnel__seg-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--c-ink);
  padding: .4rem .6rem;
  transition: background .12s ease;
}
.dashboard-funnel__seg-link:hover {
  background: rgba(0,0,0,.05);
}
.dashboard-funnel__seg-count {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dashboard-funnel__seg-label {
  margin-top: .25rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-soft);
  text-align: center;
}
.dashboard-funnel__seg[data-state="new"]       { background: color-mix(in srgb, var(--c-azur)   12%, transparent); }
.dashboard-funnel__seg[data-state="replied"]   { background: color-mix(in srgb, var(--c-ocean)  10%, transparent); }
.dashboard-funnel__seg[data-state="scheduled"] { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.dashboard-funnel__seg[data-state="committed"] { background: color-mix(in srgb, var(--c-ok)     14%, transparent); }
.dashboard-funnel__seg[data-state="dropped"]   { background: color-mix(in srgb, var(--c-ink)     6%, transparent); }

/* Thin secondary line beneath the cockpit: project counts + saves,
   anchor-list-styled. Was a full tile-band before — too heavy now
   that money signals are the headline. */
.dashboard__project-counts {
  margin: 0 0 1.5rem;
  color: var(--c-ink-soft);
  font-size: .9rem;
}
.dashboard__project-counts a {
  color: var(--c-azur-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Nav-link attention badge: small pill that appears next to a
   nav label when there's a count to surface (Inbox / Conversations
   "ball is in your court"). Renders only when count > 0. */
.nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-left: .35rem;
}
/* Zero-state: hide the dot but keep the layout footprint, so the
   Conversations link's width is identical whether or not anything
   needs a reply. Centered top-nav otherwise shifts sideways on
   every render that flips the badge state. */
.nav__badge[data-empty="true"] {
  visibility: hidden;
}

/* Cockpit variant: 4 columns instead of 3 for the innovator's
   money-first tiles. Same tile visual; wider grid.

   The `.dashboard__stats.dashboard__stats--four` compound selector
   is intentional -- the plain `.dashboard__stats` rule below sets
   `grid-template-columns: repeat(3, ...)` with equal specificity,
   and since it appears later in the file it would otherwise win
   the cascade. Bumping the modifier to two classes forces the
   wider grid for any element that opts in. */
.dashboard__stats.dashboard__stats--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .dashboard__stats.dashboard__stats--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dashboard__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: 1.5rem;
}
.dashboard__stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-1);
}
.dashboard__stat-label,
.dashboard__stat-sub {
  display: block;
  color: var(--c-ink-muted);
  font-size: 0.86rem;
}
.dashboard__stat-value {
  display: block;
  color: var(--c-ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0.35rem 0;
}

/* Linked-stat variant — the value is wrapped in an anchor so the
   whole number is clickable. Used by the investor 'Saved' stat to
   deep-link into /projects?show=saved. */
.dashboard__stat-value-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.dashboard__stat-value-link:hover .dashboard__stat-value,
.dashboard__stat-value-link:focus-visible .dashboard__stat-value {
  color: var(--c-azur-ink);
}
.dashboard__stat[data-clickable="true"] {
  transition: box-shadow .12s ease, transform .12s ease;
}
.dashboard__stat[data-clickable="true"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -16px rgba(11, 30, 45, 0.28);
}

/* `stat-card` rendered as an anchor (whole tile is clickable, not
   just the number). Same hover lift as data-clickable above; the
   trailing arrow chip nudges the operator that the tile filters
   into a richer list. */
a.dashboard__stat--link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: box-shadow .12s ease, transform .12s ease;
}
a.dashboard__stat--link:hover,
a.dashboard__stat--link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -16px rgba(11, 30, 45, 0.28);
  outline: none;
}
a.dashboard__stat--link:hover .dashboard__stat-value,
a.dashboard__stat--link:focus-visible .dashboard__stat-value {
  color: var(--c-azur-ink);
}
a.dashboard__stat--link::after {
  content: "→";
  position: absolute;
  right: 1rem;
  top: 1rem;
  color: var(--c-ink-muted);
  font-size: 1rem;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
a.dashboard__stat--link:hover::after,
a.dashboard__stat--link:focus-visible::after {
  opacity: 1;
  transform: translateX(3px);
}

/* "Since you last visited" strip on the dashboard. Tinted card
   with an eyebrow + count line + up-to-3-item preview list. Sits
   above the count tiles so the operator's eye lands on activity
   first. */
.dashboard__updates {
  background: linear-gradient(180deg,
              rgba(11, 119, 175, 0.045),
              rgba(11, 119, 175, 0.015));
  border: 1px solid rgba(11, 119, 175, 0.22);
  border-radius: var(--r-tear);
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
}
.dashboard__updates-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.dashboard__updates-eyebrow {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-azur-ink);
  font-weight: 600;
}
.dashboard__updates-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  flex: 1 1 auto;
}
.dashboard__updates-more {
  margin-left: auto;
  font-size: .9rem;
  color: var(--c-azur-ink);
  text-decoration: none;
  white-space: nowrap;
}
.dashboard__updates-more:hover {
  text-decoration: underline;
}
.dashboard__updates-list {
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .92rem;
}
.dashboard__updates-item a {
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 500;
}
.dashboard__updates-item a:hover {
  color: var(--c-azur-ink);
}
.dashboard__updates-meta {
  color: var(--c-ink-muted);
}

/* Filter chips at the top of /projects/mine. The active chip is
   tinted so the operator can see which tile they followed in. */
.mine-filter {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.mine-filter__chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-ink-muted);
  text-decoration: none;
  font-size: .9rem;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mine-filter__chip:hover {
  border-color: var(--c-azur-ink);
  color: var(--c-azur-ink);
}
.mine-filter__chip--active {
  background: var(--c-azur-ink);
  border-color: var(--c-azur-ink);
  color: var(--c-paper);
}
.mine-filter__chip--active:hover {
  color: var(--c-paper);
}

/* ---- dashboard intro + actions row -------------------------------- */

.dashboard__intro h2 {
  margin: 0 0 .25rem;
  font-size: clamp(1.4rem, 2vw + .8rem, 1.85rem);
  letter-spacing: -.01em;
}
.dashboard__intro p {
  margin: 0 0 1.25rem;
  color: var(--c-ink-muted);
}

.dashboard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 1.4rem;
}

.dashboard__list-heading {
  margin: 1.5rem 0 .75rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.dashboard__empty {
  background: color-mix(in srgb, var(--c-azur-ink) 4%, #fff);
  border: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
  border-radius: var(--r-md);
  padding: 1.25rem 1.4rem;
}
.dashboard__empty p { margin: 0 0 .75rem; }
.dashboard__empty p:last-child { margin: 0; }

/* ---- innovator project cards (Resume / Edit list) ----------------- */

.dashboard-projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.dashboard-project {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1.1rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-azur-ink);
  border-radius: var(--r-md);
  padding: .9rem 1rem;
  box-shadow: 0 1px 0 rgba(11, 30, 45, 0.04);
  transition: box-shadow .12s ease, transform .12s ease;
}
.dashboard-project:hover {
  box-shadow: 0 8px 22px -16px rgba(11, 30, 45, 0.28);
  transform: translateY(-1px);
}

/* Stretched-link pattern — the title <a> draws an invisible ::before
   over the whole card so anywhere on the row clicks through to the
   project. Action buttons sit on top via z-index so they keep their
   own routes. */
.dashboard-project__title-link {
  color: var(--c-ink);
  text-decoration: none;
}
.dashboard-project__title-link:hover { color: var(--c-azur-ink); }
.dashboard-project__title-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
}
.dashboard-project__thumb,
.dashboard-project__body,
.dashboard-project__actions {
  position: relative;
  z-index: 1;
}
.dashboard-project__actions a {
  position: relative;
  z-index: 3;
}
.dashboard-project[data-status="live"] { border-left-color: #3f7e44; }
.dashboard-project[data-status="draft"] { border-left-color: #bf8b2e; }
@media (max-width: 720px) {
  .dashboard-project {
    grid-template-columns: 1fr;
  }
}

.dashboard-project__thumb {
  margin: 0;
  width: 120px;
  height: 80px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--c-azur-ink) 8%, #fff);
}
.dashboard-project__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .dashboard-project__thumb { width: 100%; height: 140px; }
}

.dashboard-project__head {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.dashboard-project__status {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-ink) 6%, #fff);
  color: var(--c-ink-muted);
}
.dashboard-project[data-status="live"] .dashboard-project__status {
  background: rgba(63, 126, 68, .12);
  color: #2e5d33;
}
.dashboard-project[data-status="draft"] .dashboard-project__status {
  background: rgba(191, 139, 46, .14);
  color: #8a6a23;
}
.dashboard-project__title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.dashboard-project__summary {
  margin: 0 0 .55rem;
  color: var(--c-ink-muted);
  font-size: .92rem;
  line-height: 1.45;
}
.dashboard-project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 .55rem;
  font-size: .85rem;
}
.dashboard-project__meta > div { display: contents; }
.dashboard-project__meta dt {
  margin: 0 .25rem 0 0;
  color: var(--c-ink-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .7rem;
  font-weight: 700;
  align-self: center;
}
.dashboard-project__meta dd {
  margin: 0 1rem 0 0;
  color: var(--c-ink);
  font-weight: 500;
}

.dashboard-project__progress {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .82rem;
  color: var(--c-ink-muted);
}
.dashboard-project__progress-bar {
  flex: 1 1 0;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-ink) 10%, transparent);
  overflow: hidden;
}
.dashboard-project__progress-bar > span {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  background: var(--c-azur-ink);
  border-radius: inherit;
  transition: width .25s cubic-bezier(.2, .9, .18, 1);
}
.dashboard-project__progress[data-ready="true"] .dashboard-project__progress-bar > span {
  background: #3f7e44;
}
.dashboard-project__progress-label { white-space: nowrap; }

.dashboard-project__actions {
  display: flex;
  gap: .55rem;
  align-items: center;
}
@media (max-width: 720px) {
  .dashboard-project__actions { justify-self: stretch; }
}

/* ---- investor feed cards ----------------------------------------- */

.dashboard-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.dashboard-feed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(11, 30, 45, 0.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard-feed-card__overlay-link,
.project-card__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.dashboard-feed-card__overlay-link:focus-visible,
.project-card__overlay-link:focus-visible {
  outline: 3px solid var(--c-azur);
  outline-offset: -4px;
}
.dashboard-feed-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(11, 30, 45, 0.25);
}
.dashboard-feed-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--c-azur-ink) 8%, #fff);
}
.dashboard-feed-card__body {
  padding: .85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1 1 auto;
}
.dashboard-feed-card__title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -.005em;
}
.dashboard-feed-card:hover .dashboard-feed-card__title { color: var(--c-azur-ink); }
.dashboard-feed-card__summary {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: .9rem;
  line-height: 1.45;
}
.dashboard-feed-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: .35rem .75rem;
  margin: auto 0 0;
  padding-top: .55rem;
  border-top: 1px solid var(--c-border);
  font-size: .8rem;
}
.dashboard-feed-card__meta > div { display: contents; }
.dashboard-feed-card__meta dt {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dashboard-feed-card__meta dd {
  margin: 0 0 .35rem;
  font-weight: 500;
  color: var(--c-ink);
}

/* ---- Meta pills ----------------------------------------------------------
   Region / Maturity / Budget pills on project cards. A single shared block
   overrides the older "display: contents" treatments so each meta entry is
   one inline pill with a category-tinted background. Tints are kept soft
   (low-alpha mixes against the surface) so the row stays calm against
   denser content like the title + summary.                                */
.dashboard-project__meta,
.dashboard-feed-card__meta,
.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.dashboard-project__meta > div,
.dashboard-feed-card__meta > div,
.project-card__meta > div {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--meta-bg, color-mix(in srgb, var(--c-ink) 6%, transparent));
  border: 1px solid var(--meta-border, color-mix(in srgb, var(--c-ink) 10%, transparent));
  line-height: 1;
}
.dashboard-project__meta > div > dt,
.dashboard-feed-card__meta > div > dt,
.project-card__meta > div > dt {
  margin: 0;
  padding: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--meta-label, var(--c-ink-muted));
  /* Uppercase glyphs have no descenders, so they sit a hair high inside
     a centered box. A small downward nudge optically centres them
     against the mixed-case value beside them. */
  transform: translateY(.04em);
}
.dashboard-project__meta > div > dd,
.dashboard-feed-card__meta > div > dd,
.project-card__meta > div > dd {
  margin: 0;
  padding: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--meta-value, var(--c-ink));
}

/* Per-category tints — soft mixes against the brand palette so the pills
   read as a group while each category still has its own identity.        */
[data-meta="region"] {
  --meta-bg: color-mix(in srgb, var(--c-azur) 12%, transparent);
  --meta-border: color-mix(in srgb, var(--c-azur) 28%, transparent);
  --meta-label: var(--c-azur-ink);
  --meta-value: var(--c-ocean);
}
[data-meta="maturity"] {
  --meta-bg: color-mix(in srgb, var(--c-ok) 12%, transparent);
  --meta-border: color-mix(in srgb, var(--c-ok) 30%, transparent);
  --meta-label: color-mix(in srgb, var(--c-ok) 80%, var(--c-ink));
  --meta-value: color-mix(in srgb, var(--c-ok) 85%, var(--c-ink));
}
[data-meta="budget"] {
  --meta-bg: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --meta-border: color-mix(in srgb, var(--c-accent) 32%, transparent);
  --meta-label: color-mix(in srgb, var(--c-accent) 65%, var(--c-ink));
  --meta-value: color-mix(in srgb, var(--c-accent) 75%, var(--c-ink));
}
[data-meta="saved"] {
  --meta-bg: color-mix(in srgb, var(--c-ocean) 8%, transparent);
  --meta-border: color-mix(in srgb, var(--c-ocean) 18%, transparent);
  --meta-label: var(--c-ink-muted);
  --meta-value: var(--c-ink);
}
/* SDG-fit pill — used on /matches rows where the percentage of
   SDG-overlap is a continuous value, not a fact like the others.
   Picked the ocean tint so it reads as belonging to the same
   palette without colliding with region/maturity/budget. */
[data-meta="sdg"] {
  --meta-bg: color-mix(in srgb, var(--c-ocean) 10%, transparent);
  --meta-border: color-mix(in srgb, var(--c-ocean) 22%, transparent);
  --meta-label: color-mix(in srgb, var(--c-ocean) 70%, var(--c-ink));
  --meta-value: color-mix(in srgb, var(--c-ocean) 80%, var(--c-ink));
}

/* Per-pill fit signal: the pill itself encodes the literal fact,
   and a small annotation glyph at the end communicates whether
   that fact MATCHES the investor's preferences. Match → green
   check; gap → muted grey dash. The glyph sits inside the pill
   so we don't burn a second row on what's a single bit of info
   per pill. */
.project-card__meta > div[data-fit]::after {
  margin-left: .35rem;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
}
.project-card__meta > div[data-fit="match"]::after {
  content: "✓";
  color: var(--c-ok);
}
.project-card__meta > div[data-fit="gap"]::after {
  content: "—";
  color: var(--c-ink-muted);
}

/* /matches row variant: the row card has plenty of horizontal
   width, so the four pills should render as a compact INLINE
   strip rather than stacked label-over-value tiles. Each pill
   becomes "LABEL value ✓" on a single text line, halving its
   vertical footprint and letting more of them fit in the
   available width before any wrap is needed.

   Why scoped via `.match-row__meta` rather than rewriting the
   global pill CSS: the /projects card grid is a narrow column
   where the existing label-on-top layout reads well; we only
   need the inline form here. */
.match-row__meta {
  flex-wrap: wrap;            /* pills wrap as a group when out of width */
  row-gap: .5rem;
  column-gap: .55rem;
  align-items: center;
}
.match-row__meta.project-card__meta > div {
  /* A later cascade rule (`.project-card__meta > div { display:
     grid }` at the project-card section) flips the pill back to
     a 2-row grid -- defeating the inline-flex set by the global
     pill base. Re-assert inline-flex here so label/value/glyph
     ride one text line. */
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  padding-block: .35rem;
  flex-direction: row;
  flex-wrap: nowrap;
  /* `align-items: center` rather than `baseline` so the uppercase
     label (no descenders, smaller size) reads as VISUALLY centered
     against the mixed-case value beside it. Baseline alignment
     parks the label flush with the value's baseline, which looks
     like it's floating high. */
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.match-row__meta.project-card__meta > div > dt,
.match-row__meta.project-card__meta > div > dd {
  display: inline;
  margin: 0;
  /* Same line-height on both so flex center has a single optical
     midpoint to align against, regardless of font-size delta. */
  line-height: 1;
}
.match-row__meta.project-card__meta > div > dt {
  /* Strip the global label's translateY(.04em) -- that was a
     compensator for a different layout context (label-on-top
     grid) and reads as a half-pixel sag here. */
  transform: none;
}
.match-row__meta > div > dt {
  /* Label loses the optical translate (irrelevant on the same
     baseline as the value) and grows a hair so its uppercase
     reads at speed. */
  transform: none;
  font-size: .66rem;
}
.match-row__meta > div > dd {
  font-size: .88rem;
}

.project-filters {
  display: grid;
  gap: 1rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1rem, 2vw, 1.35rem);
  background: linear-gradient(135deg, #fff 0%, var(--c-azur-wash) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.project-filters__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}
.project-filters__row--primary { grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); }
.project-filters__row--budget { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-filters .form-field { margin: 0; }
.project-filters__actions {
  display: flex;
  gap: .65rem;
  align-items: center;
  flex-wrap: wrap;
}
.project-filter-note {
  margin: -0.75rem 0 1.5rem;
  color: var(--c-ink-soft);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear);
  box-shadow: var(--shadow-1);
  transition: box-shadow .12s ease, transform .12s ease;
}
.project-card:hover {
  box-shadow: 0 10px 28px -18px rgba(11, 30, 45, 0.28);
  transform: translateY(-1px);
}
.project-card__cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}
.project-card__badges {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin: 0 0 .75rem;
}
.project-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-badge--match {
  background: var(--c-azur-wash);
  color: var(--c-azur-ink);
}
.project-badge--saved {
  background: #fff4e7;
  color: #9a5a15;
}

/* "Verified business" trust badge — green pill paired with a patch-
   check icon + text label so the signal never rides on colour alone.
   Shared across project cards, the matches list, and the detail hero
   (the hero gives it a translucent treatment to sit on the photo). */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--c-ok) 14%, #fff);
  color: #126a2f;
}
.verified-badge__icon { font-size: .85em; }
.match-row__badges { margin: 0 0 .35rem; }
.project-hero__chips .verified-badge {
  background: rgba(255, 255, 255, .9);
  color: #0f5c29;
  backdrop-filter: blur(2px);
}

.project-card__title { margin-bottom: 0.45rem; }

.project-card:hover .project-card__title { color: var(--c-azur-ink); }
.project-card .project-save-form {
  position: relative;
  z-index: 2;
}
.project-save-form {
  margin: 0;
}
.project-save-form--compact {
  margin-top: auto;
  padding-top: 1rem;
}
.project-save-form .btn {
  justify-content: center;
  width: 100%;
}
.project-save-form__button--saved {
  border-color: var(--c-border);
  color: var(--c-ink-soft);
}
.project-card__summary { color: var(--c-ink-soft); }
.project-card__meta,
.project-detail__meta {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0;
}
.project-card__meta > div,
.project-detail__meta > div {
  display: grid;
  gap: 0.15rem;
}
.project-card__meta dt,
.project-detail__meta dt {
  color: var(--c-ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.project-card__meta dd,
.project-detail__meta dd {
  margin: 0;
  color: var(--c-ink-soft);
}
.project-detail__meta {
  border-top: 1px solid var(--c-border);
  padding-top: 1rem;
}

.project-table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.project-table th,
.project-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.project-table th {
  color: var(--c-ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.project-table tr:last-child td { border-bottom: 0; }
.tag {
  display: inline-block;
  color: var(--c-azur-ink);
  background: var(--c-azur-wash);
  border-radius: 99px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.project-publish-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-top: 1rem;
}
.project-publish-form__hint { margin: 0; }

@media (max-width: 900px) {
  .project-filters__row,
  .project-filters__row--primary,
  .project-filters__row--budget { grid-template-columns: 1fr 1fr; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .role-chooser__grid,
  .dashboard__stats,
  .project-grid { grid-template-columns: 1fr; }
  .project-filters__row,
  .project-filters__row--primary,
  .project-filters__row--budget { grid-template-columns: 1fr; }
  .project-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--c-ocean-deep);
  color: rgba(255,255,255,0.78);
  padding-block: 2.25rem 1.5rem;
  margin-top: 4rem;
}
.site-footer a { color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: #fff; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.88rem;
}
.site-footer__legal .build-info {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Utilities + misc
   ========================================================================== */

.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;
}

.scroll-top {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c-azur);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 40;
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: var(--c-azur-ink); color: #fff; }

/* Entrance animation driven by azuros.js */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Cursor magnifier — a bell-curve radial displacement applied to the live
   backdrop. The lens element itself is transparent; the distortion comes
   entirely from `backdrop-filter: url(#cursor-lens)`. At r = 1 the map
   encodes zero displacement, so the rim blends seamlessly with the page —
   no border, no mask, no fake glass needed.
   ========================================================================== */

.cursor-lens {
  /* Deactivated — the JS still builds the lens element and filters, but the
     visual is suppressed here. Flip `display` back to empty to re-enable. */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  background: transparent;
  transition: opacity .25s ease;
  will-change: transform;
  isolation: isolate;
}
.cursor-lens--srgb {
          backdrop-filter: url(#cursor-lens-srgb);
  -webkit-backdrop-filter: url(#cursor-lens-srgb);
}
.cursor-lens--linear {
          backdrop-filter: url(#cursor-lens-linear);
  -webkit-backdrop-filter: url(#cursor-lens-linear);
}
body.is-pointing .cursor-lens { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cursor-lens { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-lens { display: none; }
}

/* ==========================================================================
   Project-creation wizard
   --------------------------------------------------------------------------
   Tab strip across the top + step body container + review summary blocks.
   Mirrors the Kickstarter project-creation pattern (see
   doc/design/references/kickstarter/) adapted to our impact-investment
   model and palette.
   ========================================================================== */

/* Slim wizard header — replaces the big subpage hero. */
.wizard-header {
  background: #fff;
  padding: .75rem 0 .65rem;
  border-bottom: 1px solid var(--c-border);
}

/* Wizard pages have no hero photo behind the fixed top nav, so the
   transparent default leaves white nav text on a near-white body.
   Force the dark-glass treatment whenever a wizard is on the page.
   Project detail pages have a hero photo, but the project's cover
   image can be any tone — including bright / pale — so a transparent
   nav reads as missing. Same fix: pin the dark glass so the bar is
   always legible. */
body:has(.wizard) .site-header,
body:has(.project-detail) .site-header {
  background: rgba(6, 38, 58, 0.62);
  backdrop-filter: saturate(1.25) blur(14px);
  -webkit-backdrop-filter: saturate(1.25) blur(14px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
.wizard-header__kicker {
  margin: 0 0 .15rem;
  color: var(--c-ink-muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.wizard-header__title {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw + 0.75rem, 2.05rem);
  letter-spacing: -.01em;
  line-height: 1.2;
}

/* Status row + pill on the wizard header — visible only when the
   project is already live, so the innovator knows their edits
   bypass the publish guard and update the public page directly. */
.wizard-header__row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.wizard-header__pill {
  display: inline-block;
  padding: .15rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-ink) 6%, #fff);
  color: var(--c-ink-muted);
}
.wizard-header__pill[data-status="live"] {
  background: rgba(63, 126, 68, .14);
  color: #2e5d33;
}
.wizard-header__pill[data-status="draft"] {
  background: rgba(191, 139, 46, .14);
  color: #8a6a23;
}
.wizard-header__notice {
  margin: .5rem 0 0;
  padding: .5rem .75rem;
  background: rgba(63, 126, 68, .08);
  border: 1px solid rgba(63, 126, 68, .22);
  border-left: 3px solid #3f7e44;
  border-radius: var(--r-sm);
  color: #2e5d33;
  font-size: .85rem;
}
.wizard-header__notice .bi { margin-right: .25rem; }

/* Tailwind-style numbered-circles progress indicator. Connector
   line between steps lives on each step's ::after, tinted by that
   step's own state — so a "done" step paints a brand-tinted line
   forward to the next step. */
.wizard-progress {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  padding: .7rem 0 .75rem;
  /* Pinned just under the fixed top nav so the user can always see
     where they are in the flow. The header above scrolls away. */
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  box-shadow: 0 1px 0 rgba(11, 30, 45, 0.04);
}
.wizard-progress__list {
  /* Flex (not grid) so the step row literally cannot wrap regardless
     of how many steps the wizard grows to. `flex: 1 1 0` on each
     child equalises the column widths; `min-width: 0` is what lets
     long labels truncate inside their cell rather than forcing the
     row past 100% and onto a second line. The earlier grid version
     relied on a `--wizard-step-count` custom property nobody set,
     so adding the 7th step silently wrapped. */
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: var(--max-w);
}
.wizard-progress__step {
  flex: 1 1 0;
  min-width: 0;
}
.wizard-progress__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
}
.wizard-progress__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(1.1rem - 1px);   /* vertical centre of the 2.2rem circle */
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--c-border);
  z-index: 0;
  transition: background-color .15s ease;
}
.wizard-progress__step[data-state="done"]::after {
  background: var(--c-azur-ink);
}
.wizard-progress__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}
.wizard-progress__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--c-border);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-muted);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wizard-progress__step[data-state="done"] .wizard-progress__circle {
  background: var(--c-azur-ink);
  border-color: var(--c-azur-ink);
  color: transparent;        /* hide the digit so the ✓ shows alone */
  position: relative;
}
.wizard-progress__step[data-state="done"] .wizard-progress__circle::before {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
}
.wizard-progress__step[data-state="active"] .wizard-progress__circle {
  border-color: var(--c-azur-ink);
  color: var(--c-azur-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-azur-ink) 12%, transparent);
}
.wizard-progress__label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-ink-muted);
  white-space: nowrap;
  /* Truncate rather than push the row to a second line. The full
     label is still in the DOM (and read by screen readers), only
     the visual gets clipped when the viewport's tight. */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: .01em;
}
.wizard-progress__step[data-state="active"] .wizard-progress__label {
  color: var(--c-ink);
  font-weight: 600;
}
.wizard-progress__step[data-state="done"] .wizard-progress__label {
  color: var(--c-ink);
}
.wizard-progress__link:hover .wizard-progress__circle {
  border-color: var(--c-azur);
}
@media (max-width: 640px) {
  /* Hide labels on narrow screens; circles + connector still tell
     you where you are. */
  .wizard-progress__label { display: none; }
}

/* Wizard-step-specific section padding — tighter than the marketing
   sections we use elsewhere. */
.section--tight { padding-block: clamp(.5rem, 1vw, .9rem); }

/* Step heading inside the card. */
.wizard__heading {
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: .75rem;
}
.wizard__heading h2 {
  margin: 0 0 .25rem;
  font-size: 1.55rem;
  letter-spacing: -.01em;
}
.wizard__lede {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---- step body ------------------------------------------------------- */

/* Card chrome around the active step. The outer card carries a thick
   brand-blue accent on the left edge, with the rounded corners
   tucking it into a bracket — so the page reads as a coloured slab
   anchoring the form rather than a faint outline. */
.wizard__step {
  --step-accent: var(--c-azur-ink);
  position: relative;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent);
  border-left: 6px solid var(--step-accent);
  border-radius: var(--r-md);
  /* Wider horizontal padding so the inner content (e.g. the SDG
     editor's three-column grid) has breathing room from the card's
     left/right edges — without this the focused-goal card on the
     left and the rail on the right sit flush against the bracket. */
  padding:
    clamp(1.1rem, 1.8vw, 1.6rem)
    clamp(1.5rem, 3.5vw, 3rem)
    clamp(1.5rem, 3.5vw, 3rem);
  box-shadow:
    0 1px 0 rgba(11, 30, 45, 0.04),
    0 10px 28px -18px rgba(11, 30, 45, 0.22);
}

/* Sub-grouping inside the step card — each fieldset gets its own
   coloured left bracket, cycling through accent palette so the page
   has visual rhythm and the user can tell sections apart at a glance.
   Higher-specificity selector overrides the base
   `form.azuros-form fieldset { border: 0 }` reset. */
.wizard__step form.azuros-form fieldset {
  --accent: var(--c-azur);
  position: relative;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 4%, #fff);
  padding: .9rem 1.1rem 1rem;
  margin: 0 0 1rem;
}
.wizard__step form.azuros-form fieldset:last-of-type { margin: 0; }

/* Cycle accent colours across the form's fieldsets so each section
   has its own bracket. Order starts with amber to contrast against
   the outer step's brand-blue bracket — otherwise the first child
   reads as a continuation of the parent. */
.wizard__step form.azuros-form fieldset:nth-of-type(5n+1) { --accent: #bf8b2e; }
.wizard__step form.azuros-form fieldset:nth-of-type(5n+2) { --accent: #3f7e44; }
.wizard__step form.azuros-form fieldset:nth-of-type(5n+3) { --accent: #3bb4d1; }
.wizard__step form.azuros-form fieldset:nth-of-type(5n+4) { --accent: #5b6a7d; }
.wizard__step form.azuros-form fieldset:nth-of-type(5n+5) { --accent: #1b7a93; }

.wizard__step form.azuros-form legend {
  padding: 0 .45rem;
  margin: 0 0 0 -.45rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.wizard-form .form-row { gap: 1rem; }

/* Bottom action row: shared across every form-driven step. */
.wizard__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
}
.wizard__actions-left,
.wizard__actions-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* ---- maturity-style choice grid -------------------------------------- */

.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
@media (min-width: 720px) {
  .choice-grid { grid-template-columns: 1fr 1fr; }
}
.choice-card {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.choice-card:hover {
  border-color: var(--c-azur);
  box-shadow: var(--shadow-1);
}
.choice-card input[type="radio"] {
  margin-top: .25rem;
}
.choice-card:has(input:checked) {
  border-color: var(--c-azur-ink);
  background: var(--c-azur-wash);
}
.choice-card__label {
  color: var(--c-ink);
  font-weight: 500;
  line-height: 1.3;
}

/* ---- review step ----------------------------------------------------- */

.wizard-review {
  display: grid;
  gap: 1.1rem;
}

.review-snapshot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 1rem;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--c-azur-ink) 20%, var(--c-border));
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--c-azur) 16%, transparent), transparent 34%),
    linear-gradient(135deg, #fff 0%, #f7fbfd 100%);
  padding: clamp(1rem, 2vw, 1.45rem);
}
.review-snapshot__main h3 {
  margin: .15rem 0 .35rem;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -.03em;
}
.review-snapshot__summary {
  margin: 0;
  max-width: 68ch;
  color: var(--c-ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}
.review-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}
.review-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-azur) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-azur-ink) 18%, var(--c-border));
  color: var(--c-ink);
  font-size: .86rem;
  font-weight: 600;
}
.review-readiness {
  display: grid;
  align-content: center;
  gap: .2rem;
  border-radius: var(--r-md);
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: 0 12px 26px -22px rgba(11, 30, 45, .5);
}
.review-readiness[data-ready="true"] {
  border-color: color-mix(in srgb, var(--c-ok) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-ok) 7%, #fff);
}
.review-readiness__label,
.review-card__eyebrow,
.review-metric__label {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.review-readiness strong {
  color: var(--c-ink);
  font-size: 1.1rem;
}
.review-readiness p {
  margin: 0;
  color: var(--c-ink-soft);
  line-height: 1.45;
}

.review-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.review-metric,
.review-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 10px 24px -22px rgba(11, 30, 45, .42);
}
.review-metric {
  display: grid;
  gap: .25rem;
  padding: .85rem 1rem;
}
.review-metric__value {
  color: var(--c-ink);
  font-size: 1.08rem;
  line-height: 1.25;
}

.review-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
  gap: 1rem;
  align-items: start;
}
.review-card {
  padding: 1rem;
}
.review-card--wide {
  grid-column: 1 / -1;
}
.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .85rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--c-border);
}
.review-card__header h3 {
  margin: .12rem 0 0;
  font-size: 1.18rem;
  letter-spacing: -.015em;
}
.review-card__edit {
  flex: 0 0 auto;
  color: var(--c-azur-ink);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.review-card__edit:hover { text-decoration: underline; }

.review-story {
  display: grid;
  gap: .75rem;
}
.review-story__section {
  --accent: var(--c-azur);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  padding: .75rem .85rem;
}
.review-story__section h4 {
  margin: 0 0 .35rem;
  color: var(--c-ink);
  font-size: .95rem;
}
.review-story__section p {
  margin: 0 0 .55rem;
  color: var(--c-ink-soft);
  line-height: 1.55;
}
.review-story__section p:last-child { margin-bottom: 0; }

.review-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.25rem;
  margin: 0;
}
.review-rows--compact {
  margin-bottom: .85rem;
}
.review-row {
  display: contents;
}
.review-row__label {
  font-size: .82rem;
  color: var(--c-ink-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  align-self: center;
}
.review-row__value {
  margin: 0;
  color: var(--c-ink);
  line-height: 1.5;
}
.review-row__missing {
  color: var(--c-ink-muted);
  font-style: italic;
}
.review-row__total {
  margin: .85rem 0 0;
  color: var(--c-ink-soft);
  font-size: .9rem;
}
/* Allocation summary on the review step — visual rhyme with the
   compact-editor's chip rail: tiny bullet bar + Goal NN kicker. */
.review-allocations {
  display: grid;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.review-allocations__row {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .35rem .65rem .55rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: #fff;
}
.review-allocations__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--sdg-allocation-pct, 0%);
  background: var(--sdg-color, var(--c-azur));
  border-bottom-left-radius: var(--r-sm);
}
.review-allocations__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .72rem;
  color: var(--sdg-color);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.review-allocations__name {
  color: var(--c-ink);
  font-weight: 500;
}
.review-allocations__pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-surface-2);
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .82rem;
}

.wizard-review__incomplete {
  background: var(--c-azur-wash);
  border: 1px solid color-mix(in srgb, var(--c-azur-ink) 25%, var(--c-border));
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
  color: var(--c-ink);
}
.wizard-review__incomplete ul {
  margin: .35rem 0 0;
  padding-left: 1.25rem;
}
.wizard-review__incomplete a {
  color: var(--c-azur-ink);
  font-weight: 500;
}
.wizard-review__publish {
  border: 1px solid color-mix(in srgb, var(--c-ok) 35%, var(--c-border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-ok) 7%, #fff);
  padding: 1rem 1.15rem;
  color: var(--c-ink-soft);
}
.wizard-review__publish p { margin: 0; }
.wizard-review__publish-consequence {
  margin-top: .6rem !important;
  font-size: .92rem;
  color: var(--c-ink);
}
.wizard-review__publish-consequence .bi {
  color: var(--c-azur-ink);
  margin-right: .3rem;
}

/* Danger zone — soft-delete affordance under the publish CTA.
   Matched to the wizard-alert error palette so it reads at a glance
   as "this is destructive". */
.wizard-review__danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: .9rem 1.1rem;
  background: #fdecea;
  border: 1px solid color-mix(in srgb, #b3261e 28%, transparent);
  border-left: 4px solid #b3261e;
  border-radius: var(--r-md);
}
.wizard-review__danger h4 {
  margin: 0 0 .15rem;
  font-size: .92rem;
  font-weight: 700;
  color: #b3261e;
}
.wizard-review__danger p {
  margin: 0;
  color: var(--c-ink);
  font-size: .88rem;
}

/* Owner-tools danger zone on the public detail page sidebar.
   Smaller / quieter than the wizard-review version because the
   primary surface there is the public investor view. */
.project-owner-tools__danger {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed color-mix(in srgb, #b3261e 30%, transparent);
}
.project-owner-tools__danger .btn { width: 100%; }

@media (max-width: 860px) {
  .review-snapshot,
  .review-card-grid,
  .review-metrics {
    grid-template-columns: 1fr;
  }
  .review-card--wide {
    grid-column: auto;
  }
}

/* ==========================================================================
   Budget editor (wizard step 4 + review)
   --------------------------------------------------------------------------
   Layout: donut + per-phase legend on top, line-item table below. Each
   row carries `--phase-color` so the colour stripe + dot pick up the
   phase the row is tagged with. JS in budget-editor.js re-paints the
   donut + legend numbers on every keystroke.
   ========================================================================== */

.budget-editor {
  display: grid;
  gap: 1.25rem;
}

.budget-editor__top {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(220px, 280px) 1fr;
  align-items: start;
}
@media (max-width: 720px) {
  .budget-editor__top { grid-template-columns: 1fr; }
}

.budget-editor__chart {
  display: grid;
  place-items: center;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.budget-donut { width: 100%; max-width: 260px; height: auto; }
.budget-donut__slice { transition: opacity .15s ease; }

.budget-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.budget-legend__item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1.1fr) minmax(0, 1.6fr) auto auto;
  align-items: center;
  gap: .65rem;
  padding: .45rem .65rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: .9rem;
}
.budget-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--phase-color, #9aa5b8);
}
.budget-legend__label {
  color: var(--c-ink);
  font-weight: 600;
}
.budget-legend__tagline {
  color: var(--c-ink-muted);
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.budget-legend__amount {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.budget-legend__pct {
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
  text-align: right;
}

/* ---- line-item table ------------------------------------------------- */

.budget-editor__lines {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: .75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.budget-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.budget-table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-muted);
  text-align: left;
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--c-border);
}
.budget-table__amount { text-align: right; }
.budget-table__remove { width: 2rem; }

.budget-line { border-bottom: 1px solid var(--c-border); }
.budget-line:last-child { border-bottom: 0; }
.budget-line > td {
  padding: .5rem .55rem;
  vertical-align: middle;
}

.budget-line__phase {
  display: flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.budget-line__phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--phase-color, #9aa5b8);
  flex: 0 0 auto;
}
.budget-line__phase-select {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: .2rem .35rem;
  font-size: .9rem;
  color: var(--c-ink);
  cursor: pointer;
}
.budget-line__phase-select:hover,
.budget-line__phase-select:focus-visible {
  border-color: var(--c-border);
  background: #fff;
  outline: none;
}

.budget-line__label-input,
.budget-line__description-input,
.budget-line__amount-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: .35rem .45rem;
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--c-ink);
}
.budget-line__label-input:hover,
.budget-line__description-input:hover,
.budget-line__amount-input:hover,
.budget-line__label-input:focus-visible,
.budget-line__description-input:focus-visible,
.budget-line__amount-input:focus-visible {
  border-color: var(--c-border);
  background: #fff;
  outline: none;
}

.budget-line__amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.budget-line__amount .budget-line__currency {
  color: var(--c-ink-muted);
  margin-right: .15rem;
}
.budget-line__amount-input {
  width: 8em;
  text-align: right;
}
/* Hide spinner buttons in the amount column (Chrome/Safari and Firefox)
   so the column reads as plain numerics. */
.budget-line__amount-input::-webkit-outer-spin-button,
.budget-line__amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.budget-line__amount-input { -moz-appearance: textfield; }

.budget-line__remove-btn {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-ink-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.budget-line__remove-btn:hover {
  color: #b3261e;
  border-color: rgba(179, 38, 30, .25);
  background: rgba(179, 38, 30, .06);
}

/* Bottom action row: Add line + grand total. */
.budget-editor__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .25rem 0;
  border-top: 1px solid var(--c-border);
  margin-top: .25rem;
}
.budget-editor__total {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.budget-editor__total-label {
  color: var(--c-ink-muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.budget-editor__total-amount {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* ---- review-step variant -------------------------------------------- */

.review-budget {
  margin-top: .9rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: .5rem .75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.budget-table--review { font-size: .92rem; min-width: 620px; }
.budget-table--review td { padding: .4rem .55rem; }
.budget-table--review tr { border-bottom: 1px solid var(--c-border); }
.budget-table--review tr:last-child { border-bottom: 0; }

/* ==========================================================================
   Cover image preview (basics step) + summary hero (review step)
   --------------------------------------------------------------------------
   The basics-step preview lets the user see the URL render before
   leaving the page; the review-step hero shows the same image at
   2:1 ratio above the snapshot row.
   ========================================================================== */

.cover-image {
  display: grid;
  gap: .85rem;
}

.cover-image__preview {
  margin: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-azur-ink) 6%, #fff),
    color-mix(in srgb, var(--c-azur-ink) 2%, #fff));
  border: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
  display: grid;
}
.cover-image__preview[data-empty="true"] .cover-image__img { display: none; }
.cover-image__preview[data-empty="false"] .cover-image__placeholder { display: none; }

.cover-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-area: 1 / 1 / 2 / 2;
}

.cover-image__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: .5rem .75rem;
  background: linear-gradient(0deg, rgba(11, 30, 45, .55), rgba(11, 30, 45, 0));
  color: #fff;
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  pointer-events: none;
}
.cover-image__preview[data-empty="true"] .cover-image__meta {
  position: static;
  background: none;
  color: var(--c-ink-muted);
  align-self: center;
  justify-self: center;
  flex-direction: column;
  text-align: center;
}
.cover-image__placeholder {
  font-size: .9rem;
  color: var(--c-ink-muted);
}
.cover-image__dims {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cover-image__warn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .55rem;
  background: rgba(255, 255, 255, .92);
  color: #b07a08;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.cover-image__warn[hidden] { display: none; }

/* Review-step hero — same image, larger, sits above the snapshot.
   Kept as plain <figure> so the markup stays accessible. */
.review-cover {
  margin: 0 0 1rem;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: color-mix(in srgb, var(--c-azur-ink) 8%, #fff);
}
.review-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Wizard alert — inline structured message at the top of a step.
   --------------------------------------------------------------------------
   Used when a server-side validation rejects the submit (e.g. budget
   step with no line items). Tailwind-style alert chrome translated
   into the wizard palette: icon + title + message, coloured left
   bracket for the kind, dense Tufte-friendly density.
   ========================================================================== */

.wizard-alert {
  --alert-accent: #b3261e;
  --alert-tint:   #fdecea;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .85rem;
  align-items: start;
  padding: .75rem 1rem .8rem;
  margin: 0 0 1rem;
  background: var(--alert-tint);
  border: 1px solid color-mix(in srgb, var(--alert-accent) 28%, transparent);
  border-left: 4px solid var(--alert-accent);
  border-radius: var(--r-md);
  color: var(--c-ink);
  animation: wizard-alert-in .25s cubic-bezier(.2, .9, .18, 1);
}
.wizard-alert--warn { --alert-accent: #b07a08; --alert-tint: #fdf6e3; }
.wizard-alert--info { --alert-accent: var(--c-azur-ink); --alert-tint: #eaf4f9; }

.wizard-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--alert-accent);
  font-size: 1.15rem;
  line-height: 1;
}

.wizard-alert__body { min-width: 0; }

.wizard-alert__title {
  margin: 0 0 .15rem;
  color: var(--alert-accent);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .005em;
}

.wizard-alert__msg,
.wizard-alert__list {
  margin: 0;
  color: var(--c-ink);
  font-size: .92rem;
  line-height: 1.5;
}
.wizard-alert__list { padding-left: 1.1rem; }
.wizard-alert__list li + li { margin-top: .15rem; }
.wizard-alert__field-link {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}
.wizard-alert__field-link:hover,
.wizard-alert__field-link:focus { color: var(--c-azur-ink, #1f6e87); }

@keyframes wizard-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-alert { animation: none; }
}

/* ==========================================================================
   Story editor (wizard step 2 — Story)
   --------------------------------------------------------------------------
   Multi-section structured editor. Each section is a card with a
   numbered chip on the left, a title + hint up top, and a textarea
   below. Server concatenates sections into the description column
   using markdown `## <heading>` separators.
   ========================================================================== */

.story-editor { display: grid; gap: 1rem; }

.story-editor__lede {
  margin: 0 0 .25rem;
  color: var(--c-ink-muted);
  font-size: .92rem;
}

.story-editor__sections {
  display: grid;
  gap: .9rem;
}

.story-section {
  --accent: var(--c-azur);
  position: relative;
  background: color-mix(in srgb, var(--accent) 4%, #fff);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: .9rem 1rem 1rem;
}

.story-section__head {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-bottom: .55rem;
}
.story-section__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.story-section__heading {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.story-section__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}
.story-section__hint {
  margin: 0;
  font-size: .85rem;
  color: var(--c-ink-muted);
  line-height: 1.4;
}

.story-section__textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: .65rem .8rem;
  font: inherit;
  color: var(--c-ink);
  background: #fff;
  line-height: 1.55;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.story-section__textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.story-section__textarea::placeholder {
  color: color-mix(in srgb, var(--c-ink-muted) 80%, transparent);
}

/* Required section came back blank — bracket switches to the alert
   palette so the user's eye lands on the section that needs work. */
.story-section[data-error="true"] {
  --accent: #b3261e;
  background: #fdecea;
}
.story-section[data-error="true"] .story-section__textarea[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
.story-section__error {
  margin: .5rem 0 0;
  color: #b3261e;
  font-size: .85rem;
  font-weight: 500;
}

/* ==========================================================================
   Maturity curve (wizard step 4 — Maturity)
   --------------------------------------------------------------------------
   Horizontal J-curve charting cumulative cashflow across the project
   lifecycle. A range slider snaps the tracking dot to one of four stage
   markers; the matching detail card swaps in below.
   ========================================================================== */

.maturity-curve {
  display: grid;
  gap: .75rem;
}

/* Tufte-clean chart chrome — flat surface, thin rule borders, no
   tinted background washes that fight with the data. The only
   visual noise is the curve itself + the focal data point. */
.maturity-curve__chart {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem .25rem;
}
.maturity-curve__svg {
  display: block;
  width: 100%;
  /* Height follows the viewBox aspect ratio so text inside isn't
     anisotropically scaled. We also clamp a minimum / maximum so
     the chart never collapses on narrow viewports nor balloons on
     wide ones. */
  height: auto;
  max-height: 260px;
  overflow: visible;
}

/* Breakeven rule — round dots, slightly more present than the
   default `1 6` pattern so the rule reads at a glance without
   shouting. The caption is sized to match the axis labels. */
.maturity-curve__zero {
  stroke: rgba(11, 30, 45, .42);
  stroke-width: 1.25;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
.maturity-curve__zero-label {
  font: 700 8px var(--font-body);
  fill: var(--c-ink-muted);
  letter-spacing: .18em;
}

/* The data line — slightly thinner so the active dot reads as the
   focal element, with a softer drop-shadow for depth. */
.maturity-curve__line {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1.5px 4px rgba(11, 30, 45, .10));
}

/* Inactive markers are faint open circles — present but quiet,
   like residual data points. The active marker becomes the
   focal point via a coloured fill set on the parent .maturity-curve
   via --c-azur-ink (same brand colour as the active label). */
.maturity-curve__marker {
  fill: #fff;
  stroke: rgba(27, 122, 147, .55);
  stroke-width: 1.5;
  transition: r .2s ease, fill .2s ease, stroke-width .2s ease;
}
.maturity-curve__marker[data-active="true"] {
  fill: var(--c-azur-ink);
  stroke: var(--c-azur-ink);
  stroke-width: 2;
  r: 6;
}

/* Focal data point — three concentric circles. The outer halo is
   a translucent wash, the cushion is a white moat that separates
   the dot from the curve, and the core is a solid coloured disc
   that reads as the value the user has selected. */
.maturity-curve__dot {
  pointer-events: none;
  transition: transform .4s cubic-bezier(.2, .9, .18, 1);
}
.maturity-curve__dot-halo {
  fill: var(--c-azur-ink);
  fill-opacity: .14;
}
.maturity-curve__dot-cushion {
  fill: #fff;
}
.maturity-curve__dot-core {
  fill: var(--c-azur-ink);
}

.maturity-curve__axis text {
  font: 600 11px var(--font-body);
  fill: var(--c-ink-muted);
  letter-spacing: .04em;
  transition: fill .15s ease, font-weight .15s ease;
}
.maturity-curve[data-active="conceptual"]    .maturity-curve__axis text[data-axis-label="conceptual"],
.maturity-curve[data-active="developmental"] .maturity-curve__axis text[data-axis-label="developmental"],
.maturity-curve[data-active="operational"]   .maturity-curve__axis text[data-axis-label="operational"],
.maturity-curve[data-active="scaling"]       .maturity-curve__axis text[data-axis-label="scaling"] {
  fill: var(--c-azur-ink);
  font-weight: 700;
}

/* ---- slider ---------------------------------------------------------- */

.maturity-curve__control {
  padding: 0 .5rem;
}
.maturity-curve__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c-azur-ink) 35%, transparent),
    var(--c-azur-ink));
  outline: none;
  cursor: pointer;
}
.maturity-curve__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-azur-ink);
  box-shadow: 0 2px 6px rgba(11, 30, 45, 0.18);
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease;
}
.maturity-curve__slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.maturity-curve__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-azur-ink);
  box-shadow: 0 2px 6px rgba(11, 30, 45, 0.18);
  cursor: grab;
}
.maturity-curve__slider:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-azur-ink) 35%, transparent);
  outline-offset: 4px;
}
.maturity-curve--readonly .maturity-curve__marker {
  cursor: default;
}

/* ---- detail card ---------------------------------------------------- */

.maturity-curve__cards {
  display: grid;
}
.maturity-curve__cards .maturity-card { grid-area: 1 / 1 / 2 / 2; }

.maturity-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-azur-ink);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem 1rem;
}
.maturity-card[hidden] { display: none; }

.maturity-card__head {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.maturity-card__kicker {
  font-size: .98rem;
  font-weight: 700;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.maturity-card__tagline {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: .92rem;
}
.maturity-card__detail {
  margin: 0 0 .85rem;
  color: var(--c-ink);
  font-size: .95rem;
  line-height: 1.55;
}
.maturity-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
}
@media (max-width: 540px) {
  .maturity-card__stats { grid-template-columns: 1fr; }
}
.maturity-card__stat {
  background: color-mix(in srgb, var(--c-azur-ink) 4%, #fff);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: .5rem .65rem;
}
.maturity-card__stat dt {
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-muted);
}
.maturity-card__stat dd {
  margin: .15rem 0 0;
  font-size: .9rem;
  color: var(--c-ink);
}

/* ==========================================================================
   Project detail page (public, investor-facing)
   --------------------------------------------------------------------------
   Full-width hero with cover photo + glass card overlay, two-column body
   (story / impact / budget / milestones in the main column, creator + CTA
   in a sticky right rail).
   ========================================================================== */

.project-detail { display: block; }

/* ---- hero -------------------------------------------------------------- */

.project-hero {
  position: relative;
  min-height: clamp(360px, 48vw, 520px);
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.project-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.project-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11, 30, 45, 0.05) 0%,
      rgba(11, 30, 45, 0.45) 60%,
      rgba(11, 30, 45, 0.78) 100%);
}
.project-hero .container { position: relative; z-index: 1; padding-block: 2.5rem 2rem; }

.project-hero__content {
  max-width: 720px;
  background: rgba(8, 22, 36, 0.45);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 18px 60px -28px rgba(0, 0, 0, 0.55);
}

.project-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .85rem;
}
.project-hero__chip {
  display: inline-block;
  padding: .2rem .65rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
}
/* Warn-variant chip -- amber-tinted, used for "Pending measurement
   plan" on projects without an Impact Ledger commitment. Muted
   enough not to feel scolding, distinct enough to read as a real
   signal. */
.project-hero__chip--warn {
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(245, 158, 11, 0.55);
  cursor: help;
}

/* ---------------------------------------------------------------------------
   KPI editor (wizard Track step) — Tufte-inspired
   ---------------------------------------------------------------------------
   One row per catalog indicator. Visual language borrows from ER Tufte:
   - High data-ink ratio: chrome (borders, shadows) is minimal; the data
     itself carries the page.
   - Category coded by a thin colored edge band, not a saturated wash.
   - Numerics in tabular figures, right-aligned where comparison matters.
   - "Selected" state changes the data, not the noise: the band thickens
     and a quiet tint anchors the card.
   --------------------------------------------------------------------------- */

.kpi-editor {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  /* Category palette -- low-sat, edge-only. */
  --kpi-cat-climate-energy:   #d97a1a;   /* warm amber */
  --kpi-cat-marine:           #1f8aa3;   /* azure-teal */
  --kpi-cat-biodiversity:     #4a8a3f;   /* moss green */
  --kpi-cat-livelihoods:      #8d5a8a;   /* plum */
  --kpi-cat-gender-inclusion: #c25c7d;   /* rose */
  --kpi-cat-food-systems:     #b8862c;   /* ochre */
  --kpi-cat-water:            #3d8bbf;   /* sky */
  --kpi-cat-innovation:       #4b5fad;   /* indigo */
  --kpi-cat-governance:       #5a6c7a;   /* slate */
  --kpi-cat-default:          #6b7c8c;
}
.kpi-editor__head { margin: 0 0 .35rem; }
.kpi-editor__head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-editor__lede {
  margin: .25rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 64ch;
}
.kpi-editor__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}
.kpi-editor__empty {
  padding: 1rem 1.1rem;
  background: var(--c-surface-2, #f3f6fa);
  border-left: 3px solid var(--c-border, #d6e3ec);
  color: var(--c-ink-muted, #6b7c8c);
  font-size: .92rem;
}
.kpi-editor__empty p { margin: 0 0 .35rem; }
.kpi-editor__empty p:last-child { margin: 0; }

/* The card: a low-key plate with a colored left rail keyed to category.
   Selected state thickens the rail and adds a barely-there tint. The
   rail is the only color the card carries -- everything else is ink. */
.kpi-card {
  --kpi-cat-color: var(--kpi-cat-default);
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--kpi-cat-color);
  border-radius: 2px;
  padding: .85rem 1rem .85rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  transition: border-left-width .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.kpi-card[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.kpi-card[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.kpi-card[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.kpi-card[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.kpi-card[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.kpi-card[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.kpi-card[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.kpi-card[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.kpi-card[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }

.kpi-card[data-selected="true"] {
  border-left-width: 6px;
  padding-left: calc(1.1rem - 3px);
  background: color-mix(in srgb, var(--kpi-cat-color) 5%, #fff);
  box-shadow: 0 1px 6px rgba(11, 30, 45, .045);
}

.kpi-card__head { display: flex; flex-direction: column; gap: .15rem; }
.kpi-card__title-block { display: flex; flex-direction: column; gap: .15rem; }
.kpi-card__category {
  margin: 0;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kpi-cat-color);
}
.kpi-card__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--c-ink, #0b1e2d);
}
.kpi-card__description {
  margin: .25rem 0 .15rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 70ch;
}
/* Metadata cluster -- small caps, no rounded chrome; data, not decoration. */
.kpi-card__meta {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: .7rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.kpi-card__unit {
  color: var(--c-ink, #0b1e2d);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  font-size: .82rem;
}
.kpi-card__unit::before {
  content: "unit · ";
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  margin-right: .15rem;
}
.kpi-card__agg::before  { content: "agg · "; color: var(--c-ink-muted, #6b7c8c); }
.kpi-card__period::before { content: "every · "; color: var(--c-ink-muted, #6b7c8c); }
.kpi-card__agg,
.kpi-card__period {
  color: var(--c-ink-soft, #3a4f61);
}

/* Source pill: typographic tag, not a chip. */
.kpi-editor__source {
  display: inline-block;
  padding: .05rem .35rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--c-ink-muted, #6b7c8c);
  background: transparent;
  font-weight: 700;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: help;
  align-self: flex-start;
  white-space: nowrap;
}
.kpi-editor__source[data-source="iris-plus"]   { color:#1f6e4c; }
.kpi-editor__source[data-source="icma-gbp"],
.kpi-editor__source[data-source="icma-slb"]    { color:#1f4f95; }
.kpi-editor__source[data-source="un-tier1"]    { color:#1f3a73; }
.kpi-editor__source[data-source="azuros"]      { color: var(--c-ink, #0b1e2d); }

.kpi-card__head-row {
  /* The new title-row layout: title block left, source pill right. */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem;
  align-items: start;
}

.kpi-card__targets {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
/* Target pill -- matches the SDG step's visual vocabulary:
   pictogram tile keyed to the goal's official UN color on the left,
   target id + full text on the right. Wraps when the row is long. */
.kpi-editor__target-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--sdg-color, #d6e3ec) 30%, var(--c-border, #d6e3ec));
  background: #fff;
  color: var(--c-ink, #0b1e2d);
  border-radius: 2px;
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow: hidden;
  max-width: 28rem;
}
.kpi-editor__target-icon {
  flex: 0 0 auto;
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--sdg-color, #5b6a7d);
  padding: .1rem;
  object-fit: contain;
}
.kpi-editor__target-id {
  display: inline-block;
  padding: .12rem .42rem;
  background: color-mix(in srgb, var(--sdg-color, #5b6a7d) 10%, #fff);
  color: color-mix(in srgb, var(--sdg-color, #5b6a7d) 70%, #0b1e2d);
  font-weight: 800;
  letter-spacing: .02em;
  border-right: 1px solid color-mix(in srgb, var(--sdg-color, #5b6a7d) 18%, var(--c-border, #d6e3ec));
}
.kpi-editor__target-text {
  display: inline-block;
  padding: .12rem .5rem .12rem .42rem;
  color: var(--c-ink-soft, #3a4f61);
  font-weight: 500;
  letter-spacing: .005em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 22rem;
}
.kpi-card[data-selected="true"] .kpi-editor__target-pill {
  border-color: color-mix(in srgb, var(--sdg-color, var(--kpi-cat-color)) 50%, var(--c-border, #d6e3ec));
  background: color-mix(in srgb, var(--sdg-color, var(--kpi-cat-color)) 4%, #fff);
}

/* Controls: a slim toolbar -- include toggle at the left, numeric trio on
   the right, all baseline-aligned so the eye reads them as one row. */
.kpi-card__controls {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  gap: .9rem;
  align-items: end;
  padding-top: .55rem;
  border-top: 1px solid color-mix(in srgb, var(--c-border, #d6e3ec) 60%, transparent);
}
.kpi-card__include {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-ink-soft, #3a4f61);
  cursor: pointer;
  user-select: none;
  letter-spacing: .005em;
}
.kpi-card__include input[type="checkbox"] {
  width: 1rem; height: 1rem;
  accent-color: var(--kpi-cat-color);
  cursor: pointer;
}
.kpi-card[data-selected="true"] .kpi-card__include {
  color: var(--c-ink, #0b1e2d);
}

.kpi-card__values {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .55rem;
}
.kpi-card__value {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.kpi-card__value > span {
  font-size: .62rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kpi-card__value--wide { grid-column: 1 / -1; }
.kpi-card__value input,
.kpi-card__value select {
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-ink, #0b1e2d);
  padding: .32rem .55rem;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  background: #fff;
  text-transform: none;
  letter-spacing: normal;
}
.kpi-card__value input[type="number"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.kpi-card__value input:focus,
.kpi-card__value select:focus {
  outline: 2px solid color-mix(in srgb, var(--kpi-cat-color) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--kpi-cat-color);
}

/* Group header: a small caps category dispatcher dividing the suggestion
   list. Quiet, hairline rule. Will be enabled when the editor groups
   suggestions by category. */
.kpi-editor__group-head {
  margin: 1rem 0 .25rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--c-border, #d6e3ec);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kpi-cat-color, var(--c-ink-muted, #6b7c8c));
}
.kpi-editor__group:first-child .kpi-editor__group-head { margin-top: 0; }

/* Custom KPI panel: visually quieter than catalog rows -- this is the
   "doesn't fit" path. Dashed border, slight ink wash. */
.kpi-editor__custom {
  background: linear-gradient(180deg,
                              color-mix(in srgb, var(--c-surface-2, #f3f6fa) 80%, #fff) 0%,
                              var(--c-surface-2, #f3f6fa) 100%);
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--c-ink-muted, #6b7c8c);
  border-radius: 2px;
  padding: 1rem 1.1rem 1.1rem;
  margin-top: .8rem;
}
.kpi-editor__custom-head h4 {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4f61);
}
.kpi-editor__custom-lede {
  margin: .35rem 0 .85rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 64ch;
}
.kpi-editor__custom-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr .8fr 1fr;
  gap: .55rem;
}
.kpi-editor__custom-grid .kpi-card__value--wide {
  grid-column: 1 / -1;
}
.kpi-editor__custom .kpi-card__value > span {
  font-size: .62rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kpi-editor__custom .kpi-card__value input,
.kpi-editor__custom .kpi-card__value select {
  background: #fff;
  border-radius: 2px;
  border-color: var(--c-border, #d6e3ec);
}

@media (max-width: 720px) {
  .kpi-card__values,
  .kpi-editor__custom-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.project-hero__title {
  margin: 0 0 .55rem;
  font-size: clamp(1.7rem, 2.2vw + 1rem, 2.6rem);
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1.15;
}
.project-hero__summary {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 60ch;
}

.project-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.project-hero__metric {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.project-hero__metric dt {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.project-hero__metric dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* ---- body layout ------------------------------------------------------- */

.project-detail__layout {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.project-detail__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
@media (max-width: 960px) {
  .project-detail__intro { grid-template-columns: 1fr; }
}
.project-detail__main { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); min-width: 0; }
.project-detail__wide {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  min-width: 0;
}
.project-detail__aside {
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
  display: grid;
  gap: 1rem;
}
@media (max-width: 960px) {
  .project-detail__aside { position: static; }
}

/* ---- shared section chrome -------------------------------------------- */

.project-section {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow:
    0 1px 0 rgba(11, 30, 45, 0.04),
    0 14px 30px -22px rgba(11, 30, 45, 0.18);
}
.project-section__head {
  margin: 0 0 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--c-border);
}
.project-section__head h2 {
  margin: 0;
  font-size: clamp(1.25rem, .8vw + 1rem, 1.5rem);
  letter-spacing: -.01em;
}
.project-section__eyebrow {
  margin: 0 0 .25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-azur-ink);
}
.project-section__lede {
  margin: .35rem 0 0;
  color: var(--c-ink-muted);
  font-size: .95rem;
}
.project-section__pill {
  display: inline-block;
  padding: .15rem .55rem;
  margin: 0 .55rem .35rem 0;
  background: rgba(38, 189, 226, .14);
  color: #1b6f87;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---- story (multi-section) ------------------------------------------- */

.project-story__sections { display: grid; gap: 1rem; }
.project-story__block {
  --accent: var(--c-azur);
  border-left: 4px solid var(--accent);
  padding: .35rem 0 .35rem 1rem;
}
.project-story__block h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  color: var(--accent);
}
.project-story__block p {
  margin: 0 0 .55rem;
  color: var(--c-ink);
  line-height: 1.65;
}
.project-story__block p:last-child { margin: 0; }

/* ---- impact (wheel + ranked SDG list) ------------------------------- */

.project-impact__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .project-impact__layout { grid-template-columns: 1fr; }
}
.project-impact__wheel {
  display: grid;
  place-items: center;
}
.project-impact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.project-impact__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  background: color-mix(in srgb, var(--sdg-color, #5b6a7d) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--sdg-color, #5b6a7d) 18%, var(--c-border));
  border-radius: var(--r-sm);
  font-size: .9rem;
}
.project-impact__bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: var(--sdg-allocation-pct, 0%);
  background: var(--sdg-color, #5b6a7d);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.project-impact__num {
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.project-impact__name {
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-impact__pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sdg-color, var(--c-ink));
}
.project-impact__empty {
  color: var(--c-ink-muted);
  margin: 0;
}

/* ---- budget ---------------------------------------------------------- */

.project-budget__layout {
  display: grid;
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: start;
}
@media (max-width: 720px) {
  .project-budget__layout { grid-template-columns: 1fr; }
}
.project-budget__chart {
  display: grid;
  gap: .75rem;
  place-items: center;
}
/* Lift the wizard editor's 260px max-width cap on the project detail
   page; the detail chart uses a larger, more open donut so six-figure
   totals fit cleanly inside the ring. */
.project-budget__chart .budget-donut {
  max-width: 380px;
}
.project-budget .budget-donut__slice {
  cursor: pointer;
  transition: opacity .16s ease, filter .16s ease;
}
.project-budget[data-active-phase] .budget-donut__slice {
  opacity: .22;
}
.project-budget .budget-donut__slice[data-budget-active="true"] {
  opacity: 1;
  filter: drop-shadow(0 8px 10px rgba(6, 38, 58, .24));
}
.project-budget .budget-donut__slice:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 0.45rem var(--c-azur));
}
.project-budget__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  width: 100%;
}
.project-budget__legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: .55rem;
  padding: .25rem .35rem;
  border-radius: .6rem;
  font-size: .85rem;
  color: var(--c-ink);
  outline: none;
  transition: background-color .16s ease, box-shadow .16s ease,
              opacity .16s ease;
}
.project-budget[data-active-phase] .project-budget__legend-item:not([data-budget-active="true"]),
.project-budget[data-active-phase] .project-budget__row:not([data-budget-active="true"]) {
  opacity: .48;
}
.project-budget__legend-item[data-budget-active="true"] {
  background: color-mix(in srgb, var(--phase-color) 12%, transparent);
  box-shadow: inset 4px 0 0 var(--phase-color),
              0 12px 24px -22px rgba(6, 38, 58, .42);
}
.project-budget__legend-item:focus-visible {
  box-shadow: inset 4px 0 0 var(--phase-color),
              0 0 0 3px color-mix(in srgb, var(--phase-color) 28%, transparent);
}
.project-budget__legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.project-budget__legend-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.project-budget__legend-pct {
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
  text-align: right;
}

.project-budget__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.project-budget__table thead th {
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  padding: .45rem .55rem;
  border-bottom: 1px solid var(--c-border);
}
.project-budget__table tbody tr {
  border-bottom: 1px solid var(--c-border);
  outline: none;
  transition: opacity .16s ease;
}
.project-budget__table tbody tr:last-child { border-bottom: 0; }
.project-budget__table tbody td {
  padding: .5rem .55rem;
  vertical-align: top;
  color: var(--c-ink);
  transition: background-color .16s ease, box-shadow .16s ease;
}
.project-budget__row[data-budget-active="true"] td {
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
}
.project-budget__row[data-budget-active="true"] td:first-child,
.project-budget__row:focus-visible td:first-child {
  box-shadow: inset 4px 0 0 var(--phase-color);
}
.project-budget__row:focus-visible td {
  background: color-mix(in srgb, var(--phase-color) 8%, transparent);
}
.project-budget__amount-col { text-align: right; }
.project-budget__amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.project-budget__phase {
  display: flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.project-budget__phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.project-budget__empty { color: var(--c-ink-muted); margin: 0; }

.project-maturity .maturity-curve {
  gap: 1rem;
}
.project-maturity .maturity-curve__chart,
.project-maturity .maturity-card {
  box-shadow: 0 18px 45px -32px rgba(6, 38, 58, .32);
}

/* ---- milestones (phase-2 placeholder) ------------------------------- */

.project-milestones {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--c-azur-ink) 6%, #fff),
      color-mix(in srgb, var(--c-azur-ink) 1%, #fff));
  border-style: dashed;
}
.project-milestones__sample {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.project-milestones__step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.project-milestones__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--c-azur-ink);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.project-milestones__step-title {
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
}
.project-milestones__step-meta {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: .85rem;
}
.project-milestones__note {
  margin: 1rem 0 0;
  color: var(--c-ink-muted);
  font-size: .85rem;
  font-style: italic;
}

/* ---- right rail (creator + CTA) ------------------------------------- */

.project-side-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 1px 0 rgba(11, 30, 45, 0.04);
}
.project-side-card__eyebrow {
  margin: 0 0 .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.project-side-card__head {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.project-creator__avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--c-azur-ink) 12%, #fff);
  flex: 0 0 auto;
}
.project-creator__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-azur-ink);
}
.project-creator__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.2;
}
.project-creator__joined {
  margin: .15rem 0 0;
  font-size: .8rem;
  color: var(--c-ink-muted);
}
.project-creator__sectors {
  margin: .85rem 0 0;
  font-size: .85rem;
  color: var(--c-ink-muted);
  font-style: italic;
}
.project-creator__bio {
  margin: .75rem 0 0;
  font-size: .92rem;
  color: var(--c-ink);
  line-height: 1.5;
}

.project-cta__primary {
  width: 100%;
  margin: .6rem 0 .65rem;
}
.project-cta__primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.project-cta__hint {
  margin: 0 0 .85rem;
  font-size: .82rem;
  color: var(--c-ink-muted);
}
.project-cta__row {
  display: flex;
  gap: .5rem;
}
.project-cta__row > .btn { flex: 1; }
.project-cta__row > .project-save-form { flex: 1; }
.project-cta__inline-form { flex: 1; }
.project-cta__inline-form .btn { width: 100%; }


/* ==========================================================================
   Impact explorer (project detail page) — interactive overrides
   --------------------------------------------------------------------------
   Builds on .project-impact rules above. The list is now a tablist of
   buttons that swap which detail card is visible, and the wheel sectors
   for allocated goals double as a click target so the wheel and the rail
   stay in sync.
   ========================================================================== */

/* Full-width project sections give the impact explorer room for the
   intended wheel | chip rail | detail-card layout. Tablet widths keep
   the wheel anchored while the detail stacks under the rail. */
.project-impact__layout {
  grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  grid-template-areas:
    "wheel list"
    "wheel details";
  gap: clamp(.85rem, 1.5vw, 1.25rem);
  align-items: start;
}
.project-impact__wheel   { grid-area: wheel; }
.project-impact__list    { grid-area: list; }
.project-impact__details { grid-area: details; }
.project-impact__details,
.project-impact__detail {
  min-width: 0;
}

/* The wheel is generously sized on the impact section — let it run
   up to ~460px regardless of the parent's 500px default cap so the
   pictograms + alloc ring read clearly. */
.project-impact__wheel {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Frame matches the wheel SVG's max-width + aspect-ratio so the
   connector pill anchored to its right edge always lands flush
   against the wheel's outer rim, regardless of how much extra
   space the parent grid cell carved out. Mirrors the wizard's
   .sdg-editor__wheel-frame. */
.project-impact__wheel-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 460px);
  aspect-ratio: 1;
}
.project-impact__wheel .sdg-wheel { width: 100%; }

/* The wheel now spins (rotor rotates so the active sector lands at
   3 o'clock); the static-pointer arrow that the old design rotated
   around the rim is redundant and would visually fight the rotor.
   Suppress it on the impact-explorer surface only — the standalone
   /sdg-wheel page still uses the pointer. */
.project-impact__wheel .sdg-wheel__active-pointer { display: none; }

/* Dim sectors the project didn't allocate to. The colored ring is
   a single UN-issued PNG behind the sector overlays, so we can't
   just drop the overlay group's opacity — the ring would stay
   bright. Instead, paint a translucent white wash on each unfunded
   sector's aura path (which covers exactly that sector's slice
   of the ring) and ease the pictogram back. The funded set keeps
   full saturation; unfunded goals stay legible as a silhouette of
   "the rest of the SDGs" rather than disappearing entirely. */
.project-impact__wheel .sdg-wheel__sector[data-ineligible="true"]
  .sdg-wheel__sector-aura {
  fill: #fff;
  fill-opacity: .55;
  transition: fill-opacity .25s ease;
}
.project-impact__wheel .sdg-wheel__sector[data-ineligible="true"]
  .sdg-wheel__label {
  opacity: .38;
  transition: opacity .25s ease;
}

/* Active sector emphasis — sdg-wheel.css gates the active aura/glow
   on `.sdg-wheel--edit`, which we don't carry here (the wheel renders
   in `:view`-mode and impact-explorer.js layers click handling on
   top). Mirror those styles, scoped to the impact-explorer wheel,
   so the active sector pops as it lands at 3 o'clock. */
.project-impact__wheel .sdg-wheel__sector[data-active="true"]
  .sdg-wheel__sector-aura {
  fill-opacity: .26;
  stroke-opacity: .95;
  filter: url(#sdg-wheel-glow);
}
.project-impact__wheel .sdg-wheel__sector[data-active="true"]
  .sdg-wheel__alloc {
  filter: url(#sdg-wheel-glow);
}

/* Connector — SVG overlay spanning the layout grid, with a
   cubic-Bezier path drawn from the wheel's right rim to the active
   chip's left edge. impact-explorer.js sets the `d` attribute + the
   gradient's userSpaceOnUse endpoints on every selection so the line
   tracks whichever chip is active, not whichever chip happens to
   share the wheel's vertical centre.

   The SVG is on the layout itself (rather than inside the wheel
   cell) so the path can cross the grid-column gap and reach a chip
   in the next cell. pointer-events:none lets clicks pass through
   to the chip + sector hit targets underneath. */
.project-impact__layout { position: relative; }

.project-impact__connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  transition: opacity .25s ease;
  /* `currentColor` is what the gradient's second stop reads, so
     setting the colour on the SVG element drives the line's
     destination shade. */
  color: var(--active-sdg-color, #5b6a7d);
  z-index: 2;
}
.project-impact__layout[data-has-active="true"] .project-impact__connector {
  opacity: 1;
}
.project-impact__connector-path {
  transition: d .35s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 1px 2px rgba(10, 20, 40, .14));
}

/* Drop the connector on the narrow stack — wheel sits above the
   list there, the S-curve has nowhere meaningful to land. */
@media (max-width: 720px) {
  .project-impact__connector { display: none; }
}

/* Respect reduced-motion — kill the rotor transition entirely so
   keyboard nav between chips doesn't trigger long rotations. */
@media (prefers-reduced-motion: reduce) {
  .project-impact__wheel .sdg-wheel__rotor,
  .project-impact__wheel .sdg-wheel__label {
    transition: none;
  }
}

@media (min-width: 1400px) {
  .project-impact__layout {
    grid-template-columns: minmax(280px, 480px) minmax(220px, 280px) minmax(0, 1fr);
    grid-template-areas: "wheel list details";
  }
  .project-impact__wheel-frame { width: min(100%, 480px); }
}
@media (max-width: 720px) {
  .project-impact__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "wheel"
      "list"
      "details";
  }
}

/* ---- chip rail --------------------------------------------------- */

.project-impact__list {
  display: grid;
  gap: .55rem;
  align-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.project-impact__chip {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  /* `overflow: visible` so the active-chip ::after arrow can
     extend to the right toward the detail card. Icon tile gets
     its own matching border-radius on its left edges to follow
     the chip's rounded corners without clipping the arrow. */
  overflow: visible;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.project-impact__chip:hover {
  border-color: var(--sdg-color);
  box-shadow: 0 1px 6px rgba(11, 30, 45, 0.06);
}
/* Tufte bullet bar — proportional fill across the bottom edge,
   driven by --sdg-allocation-pct. Anchored AFTER the icon tile
   (2.6rem wide + .75rem grid gap) and scaled to the remaining
   text-area width, not the whole chip. Otherwise small allocations
   (≤15%) fall entirely inside the icon-tile area and disappear
   against the same-coloured backdrop. */
.project-impact__chip::before {
  content: "";
  position: absolute;
  left: calc(2.6rem + .75rem);
  bottom: 0;
  height: 3px;
  /* Width is pct% of the chip's text-area width (the chip's right
     padding is .85rem, so subtract icon + gap + right-padding to
     get the usable span). calc divides the percent by 100% to a
     unitless multiplier so we can multiply it against a length. */
  width: calc((100% - 2.6rem - .75rem - .85rem)
              * var(--sdg-allocation-pct, 0%) / 100%);
  background: var(--sdg-color);
  border-top-right-radius: 1.5px;
  transition: width .15s ease;
  pointer-events: none;
  z-index: 1;
}

.project-impact__chip-btn {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  /* Stretch cells to the row height so the icon tile fills the
     chip top-to-bottom. Vertical padding on the chip-btn would
     leave a strip of white above/below the icon, so it goes on
     the inner text/pct cells instead. */
  align-items: stretch;
  gap: .75rem;
  width: 100%;
  padding: 0 .85rem 0 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--c-ink);
}
.project-impact__chip-btn:focus-visible { outline: none; }
.project-impact__chip:has(.project-impact__chip-btn:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--sdg-color) 50%, transparent);
  outline-offset: 2px;
}

.project-impact__chip-icon {
  /* Stretches to the chip's full height via the parent grid's
     `align-items: stretch`. Width is fixed; height follows
     whatever the text column needs, so the tile reads as a
     coloured edge panel rather than a small inset square.
     Border-radius matches the chip on the left edges so the
     tile follows the rounded corner without needing
     `overflow: hidden` on the chip (which would clip the active
     chip's connector arrow). */
  width: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sdg-color);
  flex-shrink: 0;
  border-top-left-radius: calc(var(--r-sm) - 1px);
  border-bottom-left-radius: calc(var(--r-sm) - 1px);
}
.project-impact__chip-icon img {
  width: 64%;
  height: auto;
  max-height: 60%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.project-impact__chip-text {
  display: grid;
  gap: 0;
  min-width: 0;
  /* Vertical padding moved here from chip-btn so the icon panel
     can stretch edge-to-edge; the text rows keep their breathing
     room. */
  padding-block: .75rem;
  align-self: center;
}

.project-impact__chip-pct { align-self: center; }
.project-impact__chip-kicker {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .68rem;
  color: var(--sdg-color);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.project-impact__chip-name {
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.project-impact__chip-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-ink);
  background: color-mix(in srgb, var(--sdg-color) 10%, #fff);
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .82rem;
}

/* Active chip — coloured fill + ring offset like the wizard. The
   right-pointing arrow on the chip's edge connects visually to the
   detail card sitting in the next column. Hidden on stacked layouts
   where the connection is no longer side-by-side. */
.project-impact__chip[data-active="true"] {
  border-color: var(--sdg-color);
  background: color-mix(in srgb, var(--sdg-color) 10%, #fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--sdg-color) 35%, transparent),
    0 2px 10px color-mix(in srgb, var(--sdg-color) 18%, transparent);
}
.project-impact__chip[data-active="true"] .project-impact__chip-pct {
  background: var(--sdg-color);
  color: #fff;
}
/* Connector arrow on the active chip points at the detail card. The
   default full-width layout places details to the right; tablet stacks
   the detail below and flips the arrow downward. */
.project-impact__chip[data-active="true"]::after {
  content: "";
  position: absolute;
  right: -.65rem;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: .55rem solid transparent;
  border-bottom: .55rem solid transparent;
  border-right: 0;
  border-left: .65rem solid var(--sdg-color);
  filter: drop-shadow(1px 0 1px rgba(11, 30, 45, .12));
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 1080px) {
  .project-impact__chip[data-active="true"]::after {
    bottom: -.65rem;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    border-left:  .55rem solid transparent;
    border-right: .55rem solid transparent;
    border-top:   .65rem solid var(--sdg-color);
    border-bottom: 0;
    filter: drop-shadow(0 1px 1px rgba(11, 30, 45, .12));
  }
}
/* Suppress the arrow only on the down-to-the-detail variant when
   the rail is the active-only chip (i.e. just one allocated goal,
   no need to point anywhere). */
.project-impact__list:has(> :only-child) .project-impact__chip[data-active="true"]::after {
  /* one chip = no list ambiguity, but keep the arrow as a visual
     anchor pointing into the detail card below it. */
}

/* Non-allocated wheel sectors get a soft white wash + a dimmed
   pictogram so the eye lands on the goals the team committed to.
   Only applied inside the project page; the wizard preview keeps
   every sector at full saturation. */
.project-impact .sdg-wheel__sector[data-allocation="0"] .sdg-wheel__hit {
  fill: #fff;
  fill-opacity: .55;
}
.project-impact .sdg-wheel__sector[data-allocation="0"] .sdg-wheel__pictogram {
  opacity: .35;
}

/* ---- detail card --------------------------------------------------- */

.project-impact__detail {
  --sdg-color: var(--c-azur-ink);
  position: relative;
  background: color-mix(in srgb, var(--sdg-color) 4%, #fff);
  border: 1px solid color-mix(in srgb, var(--sdg-color) 22%, var(--c-border));
  border-left: 4px solid var(--sdg-color);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.1rem;
  animation: project-impact-detail-in .22s cubic-bezier(.2, .9, .18, 1);
}

.project-impact__detail-card {
  margin: 0 0 .85rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--sdg-color) 22%, var(--c-border));
  aspect-ratio: 1 / 1;
  max-width: 220px;
}
.project-impact__detail-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-impact__detail[hidden] { display: none; }
/* Tufte-friendly header: stacked label / title on the left and a
   focal percentage on the right. The percentage column is always
   auto-width so a wrapping goal name no longer pushes the number
   onto a new line — every row reserves its own space. */
.project-impact__detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .55rem 1rem;
  margin: 0 0 .65rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sdg-color) 20%, transparent);
}
.project-impact__detail-titlewrap {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.project-impact__detail-num {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sdg-color);
  line-height: 1;
}
.project-impact__detail-title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--c-ink);
  line-height: 1.2;
  /* Long names wrap inside their own column; the % column stays put. */
  word-break: normal;
  overflow-wrap: break-word;
}
.project-impact__detail-pct {
  margin: 0;
  align-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: .05rem;
  color: var(--sdg-color);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.project-impact__detail-pct-num {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.project-impact__detail-pct-unit {
  font-size: 1rem;
  font-weight: 600;
  opacity: .8;
}
.project-impact__detail-tagline {
  margin: 0 0 .55rem;
  color: var(--c-ink);
  font-size: .92rem;
  line-height: 1.45;
}

.project-impact__detail-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sdg-color) 14%, #fff);
  overflow: hidden;
  margin: 0 0 .85rem;
}
.project-impact__detail-bar > span {
  display: block;
  height: 100%;
  background: var(--sdg-color);
  border-radius: inherit;
  transition: width .25s cubic-bezier(.2, .9, .18, 1);
}

.project-impact__detail-eyebrow {
  margin: 0 0 .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.project-impact__detail-targets ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}
.project-impact__target {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: .5rem;
  align-items: baseline;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--c-ink);
}
.project-impact__target-id {
  color: var(--sdg-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.project-impact__target-text { color: var(--c-ink); }
.project-impact__target-pct {
  color: var(--sdg-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
}

@keyframes project-impact-detail-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .project-impact__detail { animation: none; }
  .project-impact__detail-bar > span { transition: none; }
}

/* Active wheel sector visual feedback for allocated goals only. */
.project-impact .sdg-wheel__sector[data-active="true"] .sdg-wheel__sector-aura {
  fill-opacity: .22;
}

/* Impersonation banner — visible whenever an admin is viewing the
   platform as another user. Sticky at the top, full width, orange so
   it can't be missed. Empty placeholder when not impersonating.

   The marketing layout uses `position: fixed` for `.site-header` and
   pins it to `top: 0`. The banner uses `position: sticky` at the
   same offset and sits in the document flow before the header, so
   without intervention the banner would overlap the nav. The
   sibling selector below pushes the fixed header down by the
   banner's height whenever the banner is active. */
/* Banner height kept in sync with the offset applied to fixed /
   sticky headers below. Defined on :root so the sibling selectors
   below can read it without depending on cascade-down behaviour.
   The marketing `.btn` defaults to ~0.9rem padding, which would
   bloat the Exit button and drag the banner taller than the
   header — we override the button padding inside the banner so
   the actual rendered height matches the variable. */
:root { --imp-banner-h: 36px; }

.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ea580c;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
}
.impersonation-banner--empty { display: none; }
.impersonation-banner:not(.impersonation-banner--empty) ~ .site-header {
  top: var(--imp-banner-h);
}

/* On the marketing layout, `body { padding-top: var(--nav-h) }` was
   pushing the sticky banner *below* the fixed nav at scroll=0 —
   sticky honours the body padding, but the fixed nav doesn't, so
   the two overlapped until the user scrolled enough for the
   banner to actually stick. Pin the banner with `position: fixed`
   instead and grow body's padding to accommodate both bars.
   Admin uses its own grid shell (no body padding) and keeps the
   sticky behaviour, so this override is scoped away from it. */
body:not([data-admin]):has(.impersonation-banner:not(.impersonation-banner--empty)) {
  padding-top: calc(var(--nav-h) + var(--imp-banner-h));
}
body:not([data-admin]) .impersonation-banner:not(.impersonation-banner--empty) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
/* Hero-first pages already drop body padding to 0 (see the
   `body:has(> main > .hero:first-child)` rule above) so the hero
   photo can extend behind the transparent nav. When the
   impersonation banner is on, the hero still wants to start at
   the *bottom* of the banner (not the bottom of nav+banner) —
   otherwise we get a white strip between the banner and the
   hero. Nav is already `top: var(--imp-banner-h)` from the
   sibling rule earlier, so pinning body padding to just the
   banner height puts the hero at the right Y. */
body:not([data-admin]):has(> main > .hero:first-child):has(.impersonation-banner:not(.impersonation-banner--empty)),
body:not([data-admin]):has(> main #hero):has(.impersonation-banner:not(.impersonation-banner--empty)) {
  padding-top: var(--imp-banner-h);
}
.impersonation-banner__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.25rem 1.25rem;
  min-height: var(--imp-banner-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.impersonation-banner__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  opacity: 0.85;
}
.impersonation-banner__name {
  font-family: ui-monospace, monospace;
  background: rgba(0, 0, 0, 0.18);
  padding: 0.05rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.78rem;
}
.impersonation-banner__sep { opacity: 0.6; }
.impersonation-banner__exit {
  margin-left: auto;
  margin-bottom: 0;
}
.impersonation-banner__exit .btn {
  /* Marketing's `.btn` defaults to 0.9rem 1.5rem padding which is
     way too tall for a banner — pin it down so the banner stays
     compact. */
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.1;
}
.impersonation-banner__exit .btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.impersonation-banner__exit .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ==========================================================================
   Match list — investor-facing /matches page
   Tufte: every visual element earns its pixels. Score is data, so it
   gets a sparkline-style data bar with a numeric percentage. Per-
   dimension breakdown is a single-line caption underneath each row
   so the operator can see *why* a project ranked where it did
   without an interaction.
   ========================================================================== */
.match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.match-row {
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.match-row:hover {
  border-color: color-mix(in srgb, var(--c-azur) 50%, var(--c-border));
  box-shadow: 0 1px 2px rgba(11,30,45,0.04),
              0 8px 24px -16px rgba(6,38,58,0.32);
}
.match-row__link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 200px;
  gap: 1.1rem;
  padding: 1rem 1.1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 720px) {
  .match-row__link {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}
.match-row__thumb {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface-2);
}
.match-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.match-row__copy { min-width: 0; }
.match-row__title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-ink);
}
.match-row__summary {
  margin: 0 0 0.45rem;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  /* Cap to two lines so very long summaries don't stretch the row */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.match-row__meta {
  margin: 0 0 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.82rem;
  color: var(--c-ink-muted);
}
.match-row__chip strong {
  color: var(--c-ink-soft);
  font-weight: 600;
}
.match-dims {
  margin: 0;
  display: flex;
  gap: 1rem;
  font-size: 0.74rem;
  color: var(--c-ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.match-dim__label { font-weight: 700; margin-right: 0.25rem; }
.match-dim__value { color: var(--c-ink-soft); }

.match-score {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
}
.match-score__track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--c-surface-2);
  overflow: hidden;
}
.match-score__fill {
  height: 100%;
  background: var(--c-ink-soft);
  transition: width .25s ease;
}
.match-score__fill[data-strong="true"] {
  background: var(--c-azur);
}
.match-score__num {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.match-empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
}
.match-empty h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.match-empty p {
  margin: 0;
  color: var(--c-ink-soft);
}

/* ==========================================================================
   Match-summary strip — sits between the page hero and the ranked
   list. Four numeric tiles (count / strong-fit / avg / top) plus a
   single-line caption naming the scoring dimensions. Keeps the
   page from feeling like "big photo, then wall of cards" and gives
   the operator a one-glance read of the matcher's behaviour
   before they scan rows.
   ========================================================================== */
.match-summary,
.interest-summary {
  margin: 0 0 1.5rem;
}
.match-summary__tiles,
.interest-summary__tiles {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Match the dashboard__stats clamp so tile gap reads identically
     across the two pages. */
  gap: clamp(1rem, 2vw, 1.4rem);
}
@media (max-width: 720px) {
  .match-summary__tiles,
  .interest-summary__tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
.match-summary__tile,
.interest-summary__tile {
  /* Visual parity with .dashboard__stat — same padding, border-radius,
     shadow, and surface so the matches strip reads as the same family
     of cards the operator already knows from the dashboard. */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.match-summary__value,
.interest-summary__value {
  /* Same 2rem big-number size as .dashboard__stat-value. */
  display: block;
  color: var(--c-ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0.35rem 0;
  font-variant-numeric: tabular-nums;
}
.match-summary__label,
.interest-summary__label {
  /* Same caption size + colour as .dashboard__stat-label. */
  display: block;
  color: var(--c-ink-muted);
  font-size: 0.86rem;
}
.match-summary__caption,
.interest-summary__caption {
  margin: 0;
  padding: .55rem .85rem;
  background: #fff;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  font-size: .85rem;
  color: var(--c-ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
}
.match-summary__caption-eyebrow,
.interest-summary__caption-eyebrow {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-azur);
  font-weight: 700;
}
.match-summary__caption-text strong,
.interest-summary__caption-text strong {
  color: var(--c-ink);
  font-weight: 600;
}

/* ==========================================================================
   Investor dashboard — top-3 matches preview
   Smaller-footprint version of the /matches row, sized for a sidebar
   teaser. Same data-bar pattern as the main matches list so the
   visual language is consistent.
   ========================================================================== */
.dashboard__matches {
  margin: 1.5rem 0;
}
.dashboard__matches-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.dashboard__matches-head .dashboard__list-heading {
  margin: 0;
}
.dashboard__matches-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-azur-ink);
  text-decoration: none;
  white-space: nowrap;
}
.dashboard__matches-more:hover { color: var(--c-azur); }

.dashboard-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dashboard-match {
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dashboard-match:hover {
  border-color: color-mix(in srgb, var(--c-azur) 50%, var(--c-border));
}
.dashboard-match__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 1rem;
  padding: 0.75rem 0.95rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 600px) {
  .dashboard-match__link { grid-template-columns: 1fr; gap: 0.5rem; }
}
.dashboard-match__copy { min-width: 0; }
.dashboard-match__title {
  margin: 0 0 0.15rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--c-ink);
}
.dashboard-match__summary {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dashboard-match__score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dashboard-match__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--c-surface-2);
  overflow: hidden;
}
.dashboard-match__fill {
  height: 100%;
  background: var(--c-ink-soft);
}
.dashboard-match__fill[data-strong="true"] {
  background: var(--c-azur);
}
.dashboard-match__num {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Investor preferences form (/onboarding/profile)
   Long-form sectioned page; each fieldset is its own card with a
   colored bracket. Same visual language as the project-creation
   wizard's per-fieldset chrome.
   ========================================================================== */
.prefs-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: none;
}
.prefs-form__section {
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-azur);
  border-radius: var(--r-md);
  background: #fff;
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0;
}
.prefs-form__section legend {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-azur-ink);
}
.prefs-form__lede {
  margin: 0.5rem 0 1rem;
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Cycle accent colours so each section has its own bracket. Keeps
   the page from reading as one monotone block. */
.prefs-form__section:nth-of-type(1) { border-left-color: #3bb4d1; }
.prefs-form__section:nth-of-type(2) { border-left-color: #3f7e44; }
.prefs-form__section:nth-of-type(3) { border-left-color: #bf8b2e; }
.prefs-form__section:nth-of-type(4) { border-left-color: #1b7a93; }
.prefs-form__section:nth-of-type(1) legend { color: #1b7a93; }
.prefs-form__section:nth-of-type(2) legend { color: #2a5a30; }
.prefs-form__section:nth-of-type(3) legend { color: #8a6a23; }
.prefs-form__section:nth-of-type(4) legend { color: #1b7a93; }
.prefs-form__sdg {
  margin: 0.5rem 0 1.25rem;
}

/* ==========================================================================
   Investor dashboard — Impact lens panel
   Read-only summary of the SDG allocation + sector preferences.
   Two columns: tiny wheel on the left, top-3 SDGs + sector chips
   on the right. Suppresses entirely when the profile is empty.
   ========================================================================== */
.dashboard__lens {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
}
.dashboard__lens-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.dashboard__lens-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.dashboard__lens-edit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-azur-ink);
  text-decoration: none;
}
.dashboard__lens-edit:hover { color: var(--c-azur); }
.dashboard__lens-body {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 600px) {
  .dashboard__lens-body { grid-template-columns: 1fr; }
}
.dashboard__lens-wheel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard__lens-wheel svg { max-width: 100%; height: auto; }
.dashboard__lens-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dashboard__lens-label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.dashboard__lens-sdgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dashboard__lens-sdgs li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 3rem;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.92rem;
}
.dashboard__lens-sdg-num {
  font-weight: 700;
  color: var(--c-azur-ink);
  font-variant-numeric: tabular-nums;
}
.dashboard__lens-sdg-name {
  color: var(--c-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard__lens-sdg-pct {
  color: var(--c-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dashboard__lens-sectors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dashboard__lens-sector {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-azur) 12%, #fff);
  color: var(--c-azur-ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* ==========================================================================
   Investor-interest spine
   ==========================================================================
   Express-interest card on the project page, the success banner, the
   list views (investor's expressions / innovator's inbox), and the
   thread view. Visual language: card-on-card stack on the right rail,
   pipeline state pills in semantic colours, bubble-chat for messages.
   ========================================================================== */

/* ---- state pill --------------------------------------------------------- */

.interest-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--c-azur) 14%, #fff);
  color: var(--c-azur-ink);
  border: 1px solid color-mix(in srgb, var(--c-azur) 30%, #fff);
}
.interest-pill[data-state="new"]        { background: color-mix(in srgb, var(--c-azur) 16%, #fff);    color: var(--c-azur-ink);                                  border-color: color-mix(in srgb, var(--c-azur) 35%, #fff); }
.interest-pill[data-state="replied"]    { background: color-mix(in srgb, var(--c-accent) 24%, #fff);  color: #8a4a0c;                                            border-color: color-mix(in srgb, var(--c-accent) 50%, #fff); }
.interest-pill[data-state="scheduled"]  { background: color-mix(in srgb, #6b8df0 22%, #fff);          color: #2c45a8;                                            border-color: color-mix(in srgb, #6b8df0 45%, #fff); }
.interest-pill[data-state="committed"]  { background: color-mix(in srgb, var(--c-ok) 22%, #fff);      color: #14653a;                                            border-color: color-mix(in srgb, var(--c-ok) 45%, #fff); }
.interest-pill[data-state="dropped"]    { background: color-mix(in srgb, var(--c-ink-muted) 18%, #fff);color: #4a5868;                                            border-color: var(--c-border); }

/* ---- express-interest CTA card ----------------------------------------- */

.project-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.interest-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.interest-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-ink);
}
.interest-card__lede {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.interest-card__amount {
  margin: 0;
  font-size: 0.92rem;
  color: var(--c-ink-soft);
}
.interest-card__small {
  margin: 0;
  font-size: 0.78rem;
  color: var(--c-ink-muted);
  line-height: 1.5;
}
.interest-card__form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.interest-card__form .form-field { margin: 0; }
.interest-card__form .form-actions { margin-top: 0.3rem; }
.interest-card__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}
.interest-card--existing {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-azur) 8%, #fff),
    var(--c-surface));
}
.interest-card--locked .interest-card__title {
  color: var(--c-ink-soft);
}
/* KYC-gated express-interest card. Same identity-verification visual
   vocabulary as .kyc-banner (accent left-strip + shield icon), shown
   when a signed-in investor is below the :identified KYC level. The
   form fields render disabled so the card previews what they'll fill
   in once verified. */
.interest-card--kyc-gated {
  border-left: 4px solid var(--c-accent);
  padding-left: 1rem;
  background: color-mix(in srgb, #f5a65b 8%, var(--c-surface));
}
.interest-card--kyc-gated[data-kyc-level="identified"] {
  border-left-color: var(--c-azur-ink);
  background: color-mix(in srgb, var(--c-azur) 8%, var(--c-surface));
}
.interest-card__kyc-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.interest-card__kyc-icon {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--c-accent);
  display: inline-flex;
}
.interest-card--kyc-gated[data-kyc-level="identified"]
  .interest-card__kyc-icon {
  color: var(--c-azur-ink);
}
.interest-card__form--locked {
  border: 0;
  margin: 0;
  padding: 0;
  opacity: 0.55;
}
.interest-card__form--locked .form-field { margin: 0; }
.interest-card__form--locked .form-actions { margin-top: 0.3rem; }
.project-cta-secondary {
  background: var(--c-surface-2);
}

/* ---- success banner ---------------------------------------------------- */

.interest-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-ok) 18%, #fff),
    color-mix(in srgb, var(--c-azur) 12%, #fff));
  padding: 1rem 0;
}
.interest-banner__card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(255,255,255,0.85);
  border: 1px solid color-mix(in srgb, var(--c-ok) 30%, #fff);
  border-radius: 0.75rem;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-1);
}
.interest-banner__icon {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--c-ok);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}
.interest-banner__title {
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
  font-size: 1rem;
}
.interest-banner__body {
  margin: 0.25rem 0 0;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.interest-banner__body a { color: var(--c-azur-ink); }

/* ---- list view (interests + inbox) ------------------------------------ */

.interest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.interest-row {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.interest-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.interest-row__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  color: inherit;
  text-decoration: none;
}
.interest-row__thumb {
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--c-surface-2);
}
.interest-row__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.interest-row__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.interest-row__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-ink);
}
.interest-row__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
}
.interest-row__chip strong { color: var(--c-ink-muted); font-weight: 500; }
.interest-row__excerpt {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.interest-row__excerpt strong { color: var(--c-ink); }
.interest-row__excerpt--muted {
  color: var(--c-ink-muted);
  font-style: italic;
}
.interest-row__chevron {
  font-size: 1.4rem;
  color: var(--c-ink-muted);
}
.interest-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: 1rem;
}
.interest-empty h3 {
  margin: 0 0 0.5rem;
  color: var(--c-ink);
}
.interest-empty p {
  margin: 0 auto 1.25rem;
  max-width: 38rem;
  color: var(--c-ink-soft);
}

/* ---- thread view ------------------------------------------------------- */

.thread-context {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.85rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.thread-context__thumb {
  display: block;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--c-surface-2);
}
.thread-context__thumb img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
}
.thread-context__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.thread-context__title {
  margin: 0.15rem 0 0.35rem;
  font-size: 1.25rem;
  color: var(--c-ink);
}
.thread-context__title a { color: inherit; }
.thread-context__meta {
  margin: 0 0 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
}
.thread-context__meta strong { color: var(--c-ink-muted); font-weight: 500; }

.thread-messages {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.thread-message {
  display: flex;
}
.thread-message[data-mine="true"] {
  justify-content: flex-end;
}
.thread-message__bubble {
  max-width: 70%;
  padding: 0.7rem 0.95rem;
  border-radius: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-1);
}
.thread-message[data-mine="true"] .thread-message__bubble {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-azur) 14%, #fff),
    var(--c-surface));
  border-color: color-mix(in srgb, var(--c-azur) 30%, #fff);
}
.thread-message__author {
  margin: 0 0 0.25rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-ink-muted);
}
.thread-message__time {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.thread-message__body {
  margin: 0 0 0.3rem;
  font-size: 0.94rem;
  color: var(--c-ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.thread-message__body:last-child { margin-bottom: 0; }

/* Retract action — a tiny ghost-button that lives inside the bubble
   and only shows up on hover/focus over the author's own active
   messages. Keeps the chat surface clean by default; reveals the
   affordance when the author is plausibly about to want it. */
.thread-message__retract {
  margin: .3rem 0 0;
  /* Right-align inside the bubble so the button sits below the
     timestamp on the author column. Mirrors how the row anchors. */
  display: flex;
  justify-content: flex-end;
}
.thread-message__retract-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-ink-muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease,
              color .15s ease,
              border-color .15s ease,
              background .15s ease;
}
.thread-message[data-mine="true"]:hover .thread-message__retract-btn,
.thread-message[data-mine="true"]:focus-within .thread-message__retract-btn {
  opacity: 1;
}
.thread-message__retract-btn:hover,
.thread-message__retract-btn:focus-visible {
  color: var(--c-danger, #b3322a);
  border-color: color-mix(in srgb, var(--c-danger, #b3322a) 40%, transparent);
  background: color-mix(in srgb, var(--c-danger, #b3322a) 6%, transparent);
  outline: none;
}

/* Retracted bubble — visually present (so the reader sees that a
   message WAS posted here) but muted and italicised so it reads as
   "withdrawn" at a glance. The original :body stays in Datomic
   history for audit; the live view shows only this placeholder. */
.thread-message[data-retracted="true"] .thread-message__bubble {
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
  border-style: dashed;
  box-shadow: none;
}
.thread-message__body--retracted {
  font-style: italic;
  color: var(--c-ink-muted);
}
.thread-message__retracted-tag {
  font-weight: 400;
  font-style: italic;
  color: var(--c-ink-muted);
}

.thread-reply {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.85rem;
  padding: 1rem;
}
.thread-reply__form .form-field { margin: 0; }
.thread-reply__form .form-actions { margin-top: 0.7rem; }

/* ==========================================================================
   Match-explanation panel on /matches
   ========================================================================== */

/* Stack the link row and the explanation panel vertically. Earlier
   this was a flex row with both as siblings -- which crushed the
   link's grid (96px / 1fr / 200px) because the explanation panel
   took its share of horizontal space, wrapping the title into a
   narrow vertical column. Block stacking puts the panel under the
   link at full width, which matches the design and lets the link
   keep its grid intact. */
.match-row__top { display: block; }

.match-explain {
  margin-top: 0.7rem;
  border: 1px solid var(--c-border);
  border-radius: 0.75rem;
  background: var(--c-surface);
  overflow: hidden;
}
.match-explain__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  background: color-mix(in srgb, var(--c-azur) 6%, #fff);
}
.match-explain__summary::-webkit-details-marker { display: none; }
.match-explain__summary::before {
  /* Bumped from the 0.88rem inherited size of the summary so the
     fold/unfold affordance reads from across the page; the rotate
     animation needs a transform-origin pin since the glyph is no
     longer the same size as its line-box. */
  content: "▸";
  color: var(--c-azur-ink);
  font-size: 1.25rem;
  line-height: 1;
  width: 1em;
  text-align: center;
  transition: transform 0.18s ease;
  display: inline-block;
  transform-origin: 50% 50%;
}
.match-explain[open] .match-explain__summary::before {
  transform: rotate(90deg);
}
.match-explain__summary-label {
  font-weight: 600;
  color: var(--c-ink);
}
.match-explain__summary-strong { color: var(--c-ok); }
.match-explain__summary-weak   { color: #8a4a0c; }
.match-explain__rows {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.match-explain__row {
  padding: 0.45rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 50%, transparent);
}
.match-explain__row:first-child { border-top: none; }
.match-explain__row-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--c-ink);
}
.match-explain__icon {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}
.match-explain__row[data-match="true"] .match-explain__icon {
  background: color-mix(in srgb, var(--c-ok) 22%, #fff);
  color: var(--c-ok);
}
.match-explain__row[data-match="false"] .match-explain__icon {
  background: color-mix(in srgb, var(--c-ink-muted) 14%, #fff);
  color: var(--c-ink-muted);
}
.match-explain__dim {
  font-weight: 600;
  color: var(--c-ink);
}
.match-explain__headline {
  color: var(--c-ink-soft);
}
.match-explain__pct {
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-muted);
  font-size: 0.82rem;
}
.match-explain__details {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0 0 0 2rem;
}
.match-explain__detail {
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  padding: 0.12rem 0;
}

/* ==========================================================================
   Project impact-progress section
   ========================================================================== */

.project-impact-progress {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-azur) 6%, #fff),
    var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--c-azur) 20%, #fff);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}
.project-impact-progress__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 0.5rem;
}
@media (max-width: 900px) {
  .project-impact-progress__grid { grid-template-columns: 1fr; }
}
.project-impact-progress__caption {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink);
}
.project-impact-progress__bar {
  width: 100%;
  height: 14px;
  background: var(--c-surface-2);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(11,30,45,0.06);
}
.project-impact-progress__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-azur), color-mix(in srgb, var(--c-azur) 70%, var(--c-ocean)));
  transition: width 1s ease;
}
.project-impact-progress__bar-fill[data-strong="true"] {
  background: linear-gradient(90deg, var(--c-ok), color-mix(in srgb, var(--c-ok) 70%, var(--c-azur)));
}
.project-impact-progress__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0.8rem 0 0;
}
.project-impact-progress__totals div {
  display: flex;
  flex-direction: column;
}
.project-impact-progress__totals dt {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-muted);
}
.project-impact-progress__totals dd {
  margin: 0.1rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.project-impact-progress__outcomes-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.project-impact-progress__stats {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}
.project-impact-stat {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.6rem;
}
.project-impact-stat__value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.project-impact-stat__label {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  margin-top: 0.2rem;
}
.project-impact-stat__unit {
  font-size: 0.72rem;
  color: var(--c-ink-muted);
}
.project-impact-progress__small {
  margin: 0;
  font-size: 0.76rem;
  color: var(--c-ink-muted);
  line-height: 1.5;
  font-style: italic;
}


/* ==========================================================================
   Dashboard AI chat strip
   --------------------------------------------------------------------------
   Glass-morphism card with teal accents, inspired by the why-datomic deck.
   The chat is the "this is the cool part" surface of the dashboard --
   it deserves visual weight against the otherwise-utilitarian count tiles.
   ========================================================================== */

.ai-chat {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%,
                    rgba(91, 224, 255, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 10% 95%,
                    rgba(59, 180, 209, 0.14) 0%, transparent 65%),
    linear-gradient(145deg, #1a3144 0%, #0f2434 100%);
  border: 1px solid rgba(91, 224, 255, 0.32);
  border-radius: 14px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 0 0 1.8rem;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px -16px rgba(11, 30, 45, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ai-chat::before {
  /* shimmer accent line along the top edge */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #5be0ff, transparent);
  opacity: 0.6;
}

.ai-chat__head {
  margin: 0 0 1rem;
}
.ai-chat__title-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.35rem;
  flex-wrap: wrap;
}
.ai-chat__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #5be0ff;
  background: rgba(91, 224, 255, 0.08);
  border: 1px solid rgba(91, 224, 255, 0.32);
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
}
.ai-chat__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #95b6c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.ai-chat__lede {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
  max-width: 70ch;
}

.ai-chat__error {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.9rem;
  background: rgba(248, 113, 113, 0.08);
  border-left: 3px solid rgba(248, 113, 113, 0.5);
  color: #fcaaaa;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* "Continue with:" pills shown below the transcript when the
   model proposes follow-ups. Same visual language as the starter
   suggestions but with a subtle accent to mark them as live
   follow-ups rather than fixed seed prompts. */
.ai-chat__followups {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: rgba(91, 224, 255, 0.04);
  border: 1px dashed rgba(91, 224, 255, 0.22);
  border-radius: 10px;
}
.ai-chat__followups-label {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(91, 224, 255, 0.85);
  font-weight: 600;
}

/* suggestion pills (the "Try a question" row) */
.ai-chat__suggestions {
  margin: 0 0 1.2rem;
}
.ai-chat__suggestions-label {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}
.ai-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ai-chat__suggestion {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(91, 224, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease,
              transform 0.15s ease;
}
.ai-chat__suggestion:hover {
  background: rgba(91, 224, 255, 0.10);
  border-color: rgba(91, 224, 255, 0.5);
  transform: translateY(-1px);
}
.ai-chat__suggestion:active { transform: translateY(0); }

/* transcript -- conversation history. Latest user msg + agent reply
   appear after a turn; we render newest-LAST so reading order is
   natural top-to-bottom. */
.ai-chat__transcript {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: 460px;
  overflow-y: auto;
}
.ai-chat__msg {
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 92%;
}
.ai-chat__msg-role {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.ai-chat__msg-body {
  margin: 0;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.85);
}
/* markdown-rendered assistant content: `**bold**`, lists, code,
   horizontal rules, etc. all get inline styling so the raw
   syntax characters never leak through to the operator. */
.ai-chat__msg-body--md {
  white-space: normal;
}
.ai-chat__msg-body--md p {
  margin: 0 0 0.55rem;
}
.ai-chat__msg-body--md p:last-child { margin-bottom: 0; }
.ai-chat__msg-body--md strong {
  color: #fff;
  font-weight: 600;
}
.ai-chat__msg-body--md em { color: rgba(255, 255, 255, 0.9); }
.ai-chat__msg-body--md ul,
.ai-chat__msg-body--md ol {
  margin: 0.35rem 0 0.6rem;
  padding-left: 1.4rem;
}
.ai-chat__msg-body--md li {
  margin: 0.15rem 0;
  line-height: 1.55;
}
.ai-chat__msg-body--md code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  background: rgba(91, 224, 255, 0.10);
  border: 1px solid rgba(91, 224, 255, 0.18);
  border-radius: 4px;
  color: #b9eeff;
}
.ai-chat__msg-body--md pre {
  margin: 0.55rem 0;
  padding: 0.7rem 0.9rem;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(91, 224, 255, 0.18);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.86rem;
}
.ai-chat__msg-body--md pre code {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
}
.ai-chat__msg-body--md hr {
  margin: 0.7rem 0;
  border: none;
  border-top: 1px solid rgba(91, 224, 255, 0.22);
}
.ai-chat__msg-body--md a {
  color: #5be0ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 224, 255, 0.35);
}
.ai-chat__msg-body--md a:hover { border-bottom-color: #5be0ff; }
.ai-chat__msg-body--md h1,
.ai-chat__msg-body--md h2,
.ai-chat__msg-body--md h3,
.ai-chat__msg-body--md h4 {
  margin: 0.7rem 0 0.35rem;
  font-weight: 600;
  color: #fff;
  font-size: 1rem;
}
.ai-chat__msg-body--md blockquote {
  margin: 0.55rem 0;
  padding: 0.3rem 0.9rem;
  border-left: 3px solid rgba(91, 224, 255, 0.4);
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
}
.ai-chat__msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg,
                rgba(27, 122, 147, 0.22) 0%,
                rgba(59, 180, 209, 0.12) 100%);
  border: 1px solid rgba(91, 224, 255, 0.25);
}
.ai-chat__msg--agent {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* composer */
.ai-chat__composer {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ai-chat__input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(91, 224, 255, 0.18);
  border-radius: 10px;
  color: white;
  resize: vertical;
  min-height: 2.6em;
  transition: border-color 0.15s ease, background 0.15s ease,
              box-shadow 0.15s ease;
}
.ai-chat__input:focus {
  outline: none;
  border-color: rgba(91, 224, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(91, 224, 255, 0.08);
}
.ai-chat__input::placeholder { color: rgba(255, 255, 255, 0.35); }

.ai-chat__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Override the default .btn styles for these specific buttons so they
   pick up the dark-theme palette of the chat card. */
.ai-chat__send.btn {
  background: linear-gradient(180deg, #5be0ff 0%, #3bb4d1 100%);
  border: none;
  color: #061018;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.ai-chat__send.btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ai-chat__send.btn:disabled,
.ai-chat__send.htmx-request {
  opacity: 0.5;
  cursor: wait;
  filter: none;
  transform: none;
}

.ai-chat__clear.btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ai-chat__clear.btn:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: white;
}

/* "Azuros is thinking" pulsing-dot indicator. HTMX adds .htmx-request
   to the trigger element while a request is in flight; we use that as
   the visibility toggle. */
.ai-chat__thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.18s ease;
  font-size: 0.85rem;
  color: rgba(91, 224, 255, 0.8);
}
.ai-chat__thinking.htmx-request,
form.htmx-request .ai-chat__thinking {
  opacity: 1;
}
.ai-chat__thinking-dot {
  width: 6px;
  height: 6px;
  background: #5be0ff;
  border-radius: 50%;
  animation: ai-chat-pulse 1.2s ease-in-out infinite;
}
.ai-chat__thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-chat__thinking-dot:nth-child(3) { animation-delay: 0.4s; }
.ai-chat__thinking-label {
  margin-left: 0.3rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

@keyframes ai-chat-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

/* Instant SDG tooltip following the cursor on hover. The element
   is created and positioned by sdg-tooltip.js; we just style. */
.sdg-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.7rem 0.4rem 0.45rem;
  background: rgba(15, 30, 45, 0.96);
  border: 1px solid rgba(91, 224, 255, 0.35);
  border-radius: 9px;
  color: white;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 80ms ease, transform 80ms ease;
}
.sdg-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sdg-tooltip__icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: block;
  flex: 0 0 auto;
}
.sdg-tooltip__text { line-height: 1.2; }

/* ---------------------------------------------------------------------------
   Impact Ledger (layer 3) -- Tufte-inspired
   ---------------------------------------------------------------------------
   The same KPI category palette as the wizard's Track step. Used on:
     * /projects/:slug Impact tab (read-only)
     * /projects/:slug/track/reports (innovator submit dashboard)
     * /portfolio/impact (investor aggregator)
   --------------------------------------------------------------------------- */

.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: .9rem;
  --kpi-cat-climate-energy:   #d97a1a;
  --kpi-cat-marine:           #1f8aa3;
  --kpi-cat-biodiversity:     #4a8a3f;
  --kpi-cat-livelihoods:      #8d5a8a;
  --kpi-cat-gender-inclusion: #c25c7d;
  --kpi-cat-food-systems:     #b8862c;
  --kpi-cat-water:            #3d8bbf;
  --kpi-cat-innovation:       #4b5fad;
  --kpi-cat-governance:       #5a6c7a;
  --kpi-cat-default:          #6b7c8c;
}
.impact-empty {
  padding: 1.25rem 1.5rem;
  background: var(--c-surface-2, #f3f6fa);
  border-left: 3px solid var(--c-border, #d6e3ec);
  color: var(--c-ink-soft, #3a4f61);
  font-size: .92rem;
  line-height: 1.55;
}
.impact-empty p { margin: 0 0 .5rem; }
.impact-empty p:last-child { margin: 0; }

.impact-card {
  --kpi-cat-color: var(--kpi-cat-default);
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--kpi-cat-color);
  border-radius: 2px;
  padding: .9rem 1.05rem .9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.impact-card[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.impact-card[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.impact-card[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.impact-card[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.impact-card[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.impact-card[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.impact-card[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.impact-card[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.impact-card[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }

.impact-card[data-overshoot="true"] {
  background: color-mix(in srgb, var(--kpi-cat-color) 6%, #fff);
}

.impact-card__head { display: flex; flex-direction: column; gap: .1rem; }
.impact-card__category {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kpi-cat-color);
}
.impact-card__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--c-ink, #0b1e2d);
}
.impact-card__description {
  margin: .15rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 60ch;
}

/* Number triple -- baseline, current, target -- in a single tight row.
   Tabular figures and right-aligned for visual comparison. */
.impact-card__numbers {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: .6rem;
  margin: 0;
  padding: .55rem 0 .15rem;
  border-top: 1px solid color-mix(in srgb, var(--c-border, #d6e3ec) 60%, transparent);
}
.impact-card__num { margin: 0; }
.impact-card__num dt {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  margin: 0;
}
.impact-card__num dd {
  margin: .05rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink, #0b1e2d);
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  gap: .25rem;
}
.impact-card__num--current dd {
  color: var(--kpi-cat-color);
  font-weight: 700;
  font-size: 1.18rem;
}
.impact-card__unit {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-ink-muted, #6b7c8c);
  text-transform: none;
}

/* Sparkline + progress -- the visual workhorse of the card. */
.impact-card__chart {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.impact-spark {
  width: 100%;
  height: 32px;
  display: block;
}
.impact-spark__bar {
  fill: var(--kpi-cat-color, #6b7c8c);
  opacity: .85;
  transition: opacity .12s ease;
}
.impact-spark__bar:hover { opacity: 1; }
.impact-spark__target {
  stroke: color-mix(in srgb, var(--kpi-cat-color, #6b7c8c) 35%, var(--c-border, #d6e3ec));
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.impact-spark__baseline {
  stroke: var(--c-border, #d6e3ec);
  stroke-width: 1;
}

.impact-card__progress-row {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.impact-card__progress {
  position: relative;
  flex: 1 1 auto;
  height: 10px;
  background: color-mix(in srgb, var(--kpi-cat-color) 10%, #fff);
  /* The visible outline is what anchors the percentage label on the
     right -- without it the label looked orphaned in the negative
     space between the bar's right edge and the section's edge. */
  border: 1px solid color-mix(in srgb, var(--kpi-cat-color) 35%, var(--c-border));
  border-radius: 999px;
  overflow: hidden;
}
.impact-card__progress-fill {
  height: 100%;
  width: var(--progress-pct, 0%);
  background: var(--kpi-cat-color);
  border-radius: inherit;
  transition: width .25s ease;
}
.impact-card__progress-fill[data-overshoot="true"] {
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--kpi-cat-color),
    var(--kpi-cat-color) 4px,
    color-mix(in srgb, var(--kpi-cat-color) 60%, #fff) 4px,
    color-mix(in srgb, var(--kpi-cat-color) 60%, #fff) 8px
  );
}
.impact-card__progress-pct {
  flex: 0 0 auto;
  min-width: 3.2rem;
  text-align: right;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--kpi-cat-color);
  line-height: 1;
}
.impact-card__progress-pct[data-overshoot="true"] {
  /* Overshoot reads as the same accent the striped fill carries --
     keeps the contrast obvious without introducing a new colour. */
  color: color-mix(in srgb, var(--kpi-cat-color) 80%, #000);
}

/* UN target pills -- continuity with the wizard's target-pill. */
.impact-card__targets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.impact-card__target {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--sdg-color, #d6e3ec) 30%, var(--c-border, #d6e3ec));
  background: #fff;
  border-radius: 2px;
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow: hidden;
  max-width: 26rem;
}
.impact-card__target-icon {
  flex: 0 0 auto;
  width: 1.3rem; height: 1.3rem;
  background: var(--sdg-color, #5b6a7d);
  padding: .1rem;
  object-fit: contain;
}
.impact-card__target-id {
  padding: .1rem .38rem;
  background: color-mix(in srgb, var(--sdg-color, #5b6a7d) 10%, #fff);
  color: color-mix(in srgb, var(--sdg-color, #5b6a7d) 70%, #0b1e2d);
  font-weight: 800;
  border-right: 1px solid color-mix(in srgb, var(--sdg-color, #5b6a7d) 18%, var(--c-border, #d6e3ec));
}
.impact-card__target-text {
  padding: .1rem .45rem;
  color: var(--c-ink-soft, #3a4f61);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 20rem;
}

/* History details disclosure */
.impact-card__history {
  border-top: 1px solid color-mix(in srgb, var(--c-border, #d6e3ec) 60%, transparent);
  padding-top: .5rem;
}
.impact-card__history summary {
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-ink-soft, #3a4f61);
  text-transform: uppercase;
  list-style: none;
}
.impact-card__history summary::-webkit-details-marker { display: none; }
.impact-card__history summary::before {
  content: "›";
  display: inline-block;
  margin-right: .4rem;
  transition: transform .15s ease;
}
.impact-card__history[open] summary::before {
  transform: rotate(90deg);
}
.impact-card__history-list {
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  font-size: .82rem;
}
.impact-card__history-list li {
  display: grid;
  grid-template-columns: 4rem 1fr auto auto;
  gap: .55rem;
  align-items: baseline;
  padding: .25rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border, #d6e3ec) 35%, transparent);
}
.impact-card__history-list li:last-child { border-bottom: none; }
.impact-card__history-period {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft, #3a4f61);
  letter-spacing: .02em;
}
.impact-card__history-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink, #0b1e2d);
  text-align: right;
}
.impact-card__history-evidence {
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--kpi-cat-color);
  text-decoration: underline;
}
.impact-card__history-note {
  grid-column: 1 / -1;
  margin: .1rem 0 .15rem;
  font-size: .78rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.45;
}
.impact-report__verification {
  display: inline-block;
  padding: .06rem .42rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 1px;
  border: 1px solid currentColor;
}
.impact-report__verification[data-tone="self"]     { color: var(--c-ink-muted, #6b7c8c); }
.impact-report__verification[data-tone="attested"] { color: #1f6e4c; }
.impact-report__verification[data-tone="audited"]  { color: #1f4f95; background: rgba(110,164,255,.08); }

/* ---- Phase D: SPT badge + theme chips ---------------------------------- */

.impact-card__head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .55rem;
}
/* SPT (Sustainability Performance Target) -- the contractually binding
   version of a project KPI on a sustainability-linked bond. Sits beside
   the category kicker in the card head; reads as "this metric has teeth". */
.impact-card__spt {
  position: relative;          /* popover anchor */
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .08rem .42rem;
  background: #0b1e2d;
  color: #fff;
  border-radius: 1px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: help;
  outline: none;
}
.impact-card__spt:focus-visible {
  /* Focus ring stays a hair off the chip so the popover can dock
     cleanly under it without the ring overlapping. */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-azur, #3bb4d1) 60%, transparent);
}
.impact-card__spt-bps {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  color: #fff;
  opacity: .85;
}

/* SPT popover -- same hover/focus pattern as `.source-info__popover`.
   Pure CSS, no JS. Opens on mouse hover, keyboard focus on the chip,
   or focus reaching anything inside (`:focus-within`). The chip is
   `role="button" tabindex="0"` so it's keyboard-reachable and announced
   to screen readers correctly. */
.impact-card__spt-popover {
  position: absolute;
  z-index: 1000;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 19rem;
  max-width: 23rem;
  padding: .85rem .95rem .8rem;
  background: #fff;
  color: var(--c-ink, #0b1e2d);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 3px;
  box-shadow: 0 12px 32px rgba(11, 30, 45, .25),
              0 1px 3px rgba(11, 30, 45, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
  pointer-events: none;
  text-align: left;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
.impact-card__spt:hover .impact-card__spt-popover,
.impact-card__spt:focus .impact-card__spt-popover,
.impact-card__spt:focus-within .impact-card__spt-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
  pointer-events: auto;
}
.impact-card__spt-popover-eyebrow {
  margin: 0 0 .3rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 700;
}
.impact-card__spt-popover-lede {
  margin: 0 0 .55rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--c-ink-soft, #3a4f61);
}
.impact-card__spt-popover-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem .8rem;
  font-size: .88rem;
}
.impact-card__spt-popover-grid > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem;
  padding: .25rem 0;
  border-top: 1px solid color-mix(in srgb, var(--c-border, #d6e3ec) 70%, transparent);
}
.impact-card__spt-popover-grid > div:first-child { border-top: 0; }
.impact-card__spt-popover-grid dt {
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 500;
}
.impact-card__spt-popover-grid dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink, #0b1e2d);
}
.impact-card__spt-popover-unit {
  font-weight: 500;
  color: var(--c-ink-muted, #6b7c8c);
}

/* If the SPT chip ends up inside a container that clips its overflow
   (the kpi-block has `overflow: hidden` on the outer card to keep
   the banner rounded), the popover can't render past the card edge.
   Lift the chip's parent containers to allow the popover to escape.
   Mirrors the existing `:has()` pattern used for source-info. */
.kpi-block__banner-badges:has(.impact-card__spt:hover),
.kpi-block__banner-badges:has(.impact-card__spt:focus-within) {
  z-index: 50;
}
.impact-card[data-spt="true"] {
  /* Subtle ink-rule on the top edge: signals "contractually binding". */
  box-shadow: inset 0 1px 0 0 #0b1e2d;
}

/* Theme chips: visually distinct from neutral region/country chips.
   Blue Bond + SLB get the navy "instrument-grade" treatment; community /
   gender-lens use ink-outlined plates. */
.project-hero__chip--theme {
  background: rgba(11, 30, 45, .85);
  color: #fff;
  border: 1px solid rgba(11, 30, 45, .85);
  font-weight: 700;
  letter-spacing: .015em;
}
.project-hero__chip--theme[data-theme="blue-bond"] {
  background: linear-gradient(135deg, #0a6c84 0%, #0b1e2d 100%);
  border-color: #0a6c84;
}
.project-hero__chip--theme[data-theme="sustainability-linked-bond"] {
  background: linear-gradient(135deg, #1f4f95 0%, #0b1e2d 100%);
  border-color: #1f4f95;
}
.project-hero__chip--theme[data-theme="gender-lens"] {
  background: #c25c7d;
  border-color: #c25c7d;
}
.project-hero__chip--theme[data-theme="community-led"] {
  background: #4a8a3f;
  border-color: #4a8a3f;
}
.project-hero__chip--theme[data-theme="concessional"] {
  background: #d97a1a;
  border-color: #d97a1a;
}

/* ---- Verifier directory (read-only Phase D) ---------------------------- */
.verifier-directory {
  max-width: 960px;
  margin: 1.2rem auto 3rem;
  padding: 0 1.25rem;
}
.verifier-directory__head h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.verifier-directory__lede {
  margin: .35rem 0 1rem;
  font-size: .95rem;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 64ch;
}
.verifier-directory__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}
.verifier-card {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid #1f4f95;
  border-radius: 2px;
  padding: .85rem 1.05rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem;
  align-items: baseline;
}
.verifier-card__head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.012em;
}
.verifier-card__note {
  margin: .25rem 0 0;
  font-size: .85rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.5;
}
.verifier-card__accreditations {
  list-style: none;
  padding: 0;
  margin: .35rem 0 0;
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.verifier-card__accreditation {
  padding: .08rem .42rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4f61);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 1px;
}
.verifier-card__url {
  font-size: .85rem;
  color: var(--c-azur-ink, #0a6c84);
  text-decoration: underline;
}

/* ---- Innovator track-and-submit page ----------------------------------- */
.impact-track {
  display: grid;
  gap: 1.1rem;
  max-width: 1100px;
  margin: 1rem auto 3rem;
  padding: 0 1.25rem;
}
.impact-track__head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--c-ink, #0b1e2d);
}
.impact-track__lede {
  margin: .35rem 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 64ch;
}
.impact-track__kpi {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}
.impact-track__submit {
  background: var(--c-surface-2, #f3f6fa);
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--c-ink-muted, #6b7c8c);
  border-radius: 2px;
  padding: .85rem 1rem 1rem;
}
.impact-track__submit h4 {
  margin: 0 0 .55rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4f61);
}
.impact-submit__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  align-items: end;
}
.impact-submit__field {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.impact-submit__field span {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.impact-submit__field--wide { grid-column: 1 / -1; }
.impact-submit__field input {
  font: inherit;
  font-size: .92rem;
  color: var(--c-ink, #0b1e2d);
  padding: .35rem .6rem;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  background: #fff;
}
.impact-submit__field input[type="number"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.impact-submit__actions {
  margin-top: .7rem;
  display: flex;
  justify-content: flex-end;
}

/* ---- Investor portfolio aggregator ------------------------------------- */
.portfolio-impact {
  max-width: 1100px;
  margin: 1.2rem auto 3rem;
  padding: 0 1.25rem;
}
.portfolio-impact__head h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.portfolio-impact__lede {
  margin: .25rem 0 0;
  font-size: .95rem;
  color: var(--c-ink-soft, #3a4f61);
  font-variant-numeric: tabular-nums;
}
.portfolio-impact__empty {
  margin: 1rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--c-surface-2, #f3f6fa);
  border-left: 3px solid var(--c-border, #d6e3ec);
  color: var(--c-ink-soft, #3a4f61);
  font-size: .92rem;
  line-height: 1.55;
}
.portfolio-impact__rollups {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  display: grid;
  gap: .7rem;
}
.portfolio-rollup {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--c-azur, #3bb4d1);
  border-radius: 2px;
  padding: .9rem 1.1rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.2rem;
}
.portfolio-rollup__head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--c-ink, #0b1e2d);
}
.portfolio-rollup__unit {
  margin: .1rem 0 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.portfolio-rollup__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
  align-self: start;
}
.portfolio-rollup__total-num {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-azur-ink, #0a6c84);
  letter-spacing: -.015em;
  line-height: 1;
}
.portfolio-rollup__total-unit {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.portfolio-rollup__agg {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  margin-top: .15rem;
}
.portfolio-rollup__projects {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .3rem;
  border-top: 1px dashed var(--c-border, #d6e3ec);
  padding-top: .55rem;
}
.portfolio-rollup__projects li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem;
  font-size: .85rem;
}
.portfolio-rollup__proj-name {
  color: var(--c-ink-soft, #3a4f61);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio-rollup__proj-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink, #0b1e2d);
}

/* Layer-3 section heading reuse */
.project-impact-ledger .project-section__head { margin-bottom: .8rem; }

@media (max-width: 720px) {
  .impact-card__numbers {
    grid-template-columns: 1fr 1fr;
  }
  .impact-card__num--current { grid-column: 1 / -1; }
  .impact-submit__fields {
    grid-template-columns: 1fr 1fr;
  }
  .portfolio-rollup {
    grid-template-columns: 1fr;
  }
  .portfolio-rollup__total {
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   Public indicator catalog (Phase A+) -- /indicators + /indicators/<id>
   ---------------------------------------------------------------------------
   Carries the same category palette as the wizard's Track step + the
   public Impact tab so the visual vocabulary continues. Card density is
   higher here (we want the whole catalog scannable in a few screens);
   typography wins over chrome. Search filter is JS-free, hide/show via
   the `[hidden]` attribute on cards whose `[data-needle]` doesn't match.
   --------------------------------------------------------------------------- */
.catalog {
  max-width: 1180px;
  margin: 1.4rem auto 3rem;
  padding: 0 1.4rem;
  --kpi-cat-climate-energy:   #d97a1a;
  --kpi-cat-marine:           #1f8aa3;
  --kpi-cat-biodiversity:     #4a8a3f;
  --kpi-cat-livelihoods:      #8d5a8a;
  --kpi-cat-gender-inclusion: #c25c7d;
  --kpi-cat-food-systems:     #b8862c;
  --kpi-cat-water:            #3d8bbf;
  --kpi-cat-innovation:       #4b5fad;
  --kpi-cat-governance:       #5a6c7a;
  --kpi-cat-default:          #6b7c8c;
}
.catalog__head h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.catalog__lede {
  margin: .45rem 0 0;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 72ch;
}
.catalog__filter {
  margin: 1.1rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.catalog__search {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1 1 320px;
}
.catalog__search span {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.catalog__search input {
  font: inherit;
  font-size: .92rem;
  color: var(--c-ink, #0b1e2d);
  padding: .45rem .7rem;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  background: #fff;
}
.catalog__search input:focus {
  outline: 2px solid color-mix(in srgb, var(--c-azur, #3bb4d1) 60%, transparent);
  outline-offset: 1px;
  border-color: var(--c-azur, #3bb4d1);
}
.catalog__filter-hint {
  margin: 0;
  font-size: .8rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-variant-numeric: tabular-nums;
}

.catalog__sections {
  margin-top: 1.4rem;
  display: grid;
  gap: 1.4rem;
}
.catalog-section[hidden] { display: none; }
.catalog-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .35rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--c-border, #d6e3ec);
}
.catalog-section__head h2 {
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4f61);
}
.catalog-section__count {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  font-variant-numeric: tabular-nums;
}
.catalog-section[data-category="climate-energy"]   .catalog-section__head h2 { color: var(--kpi-cat-climate-energy); }
.catalog-section[data-category="marine"]           .catalog-section__head h2 { color: var(--kpi-cat-marine); }
.catalog-section[data-category="biodiversity"]     .catalog-section__head h2 { color: var(--kpi-cat-biodiversity); }
.catalog-section[data-category="livelihoods"]      .catalog-section__head h2 { color: var(--kpi-cat-livelihoods); }
.catalog-section[data-category="gender-inclusion"] .catalog-section__head h2 { color: var(--kpi-cat-gender-inclusion); }
.catalog-section[data-category="food-systems"]     .catalog-section__head h2 { color: var(--kpi-cat-food-systems); }
.catalog-section[data-category="water"]            .catalog-section__head h2 { color: var(--kpi-cat-water); }
.catalog-section[data-category="innovation"]       .catalog-section__head h2 { color: var(--kpi-cat-innovation); }
.catalog-section[data-category="governance"]       .catalog-section__head h2 { color: var(--kpi-cat-governance); }

.catalog-section__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .55rem;
}
.catalog-card {
  --kpi-cat-color: var(--kpi-cat-default);
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--kpi-cat-color);
  border-radius: 2px;
  padding: 0;
  transition: border-left-width .12s ease, box-shadow .12s ease;
}
.catalog-card[hidden] { display: none; }
.catalog-card[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.catalog-card[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.catalog-card[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.catalog-card[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.catalog-card[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.catalog-card[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.catalog-card[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.catalog-card[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.catalog-card[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }
.catalog-card:hover {
  border-left-width: 6px;
  box-shadow: 0 1px 8px rgba(11,30,45,.07);
}
.catalog-card__link {
  display: block;
  padding: .85rem 1rem .85rem 1.05rem;
  color: inherit;
  text-decoration: none;
}
.catalog-card__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .55rem;
}
.catalog-card__category {
  margin: 0;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kpi-cat-color);
}
.catalog-card__source {
  padding: .05rem .38rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.catalog-card__source[data-source="iris-plus"]   { color:#1f6e4c; }
.catalog-card__source[data-source="icma-gbp"],
.catalog-card__source[data-source="icma-slb"]    { color:#1f4f95; }
.catalog-card__source[data-source="un-tier1"]    { color:#1f3a73; }
.catalog-card__source[data-source="azuros"]      { color: var(--c-ink, #0b1e2d); }
.catalog-card__name {
  margin: .25rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--c-ink, #0b1e2d);
}
.catalog-card__description {
  margin: .25rem 0 .35rem;
  font-size: .83rem;
  line-height: 1.5;
  color: var(--c-ink-soft, #3a4f61);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalog-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
  margin: .35rem 0;
  padding: .35rem 0;
  border-top: 1px solid color-mix(in srgb, var(--c-border, #d6e3ec) 60%, transparent);
}
.catalog-card__meta dt {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.catalog-card__meta dd {
  margin: .05rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-ink, #0b1e2d);
  font-variant-numeric: tabular-nums;
}
.catalog-card__targets {
  list-style: none;
  padding: 0;
  margin: .3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.catalog-target-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--sdg-color, #d6e3ec) 30%, var(--c-border, #d6e3ec));
  background: #fff;
  border-radius: 2px;
  font-size: .65rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  max-width: 22rem;
}
.catalog-target-pill__icon {
  flex: 0 0 auto;
  width: 1.2rem; height: 1.2rem;
  background: var(--sdg-color, #5b6a7d);
  padding: .08rem;
  object-fit: contain;
}
.catalog-target-pill__id {
  padding: .08rem .35rem;
  background: color-mix(in srgb, var(--sdg-color, #5b6a7d) 10%, #fff);
  color: color-mix(in srgb, var(--sdg-color, #5b6a7d) 70%, #0b1e2d);
  font-weight: 800;
  border-right: 1px solid color-mix(in srgb, var(--sdg-color, #5b6a7d) 18%, var(--c-border, #d6e3ec));
}
.catalog-target-pill__text {
  padding: .08rem .4rem;
  color: var(--c-ink-soft, #3a4f61);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 16rem;
}

/* ---- detail page ----- */
.catalog-detail {
  max-width: 880px;
  margin: 1.4rem auto 3rem;
  padding: 0 1.4rem;
  --kpi-cat-climate-energy:   #d97a1a;
  --kpi-cat-marine:           #1f8aa3;
  --kpi-cat-biodiversity:     #4a8a3f;
  --kpi-cat-livelihoods:      #8d5a8a;
  --kpi-cat-gender-inclusion: #c25c7d;
  --kpi-cat-food-systems:     #b8862c;
  --kpi-cat-water:            #3d8bbf;
  --kpi-cat-innovation:       #4b5fad;
  --kpi-cat-governance:       #5a6c7a;
  --kpi-cat-default:          #6b7c8c;
}
.catalog-detail__crumbs {
  font-size: .8rem;
  color: var(--c-ink-muted, #6b7c8c);
  margin-bottom: .65rem;
  letter-spacing: .02em;
}
.catalog-detail__crumbs a {
  color: var(--c-azur-ink, #0a6c84);
}
.catalog-detail__crumb-current { color: var(--c-ink, #0b1e2d); }
.catalog-detail__head { margin-bottom: 1.2rem; }
.catalog-detail__head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .55rem;
}
.catalog-detail__category {
  margin: 0;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4f61);
}
.catalog-detail__head h1 {
  margin: .35rem 0 0;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.catalog-detail__description {
  margin: .5rem 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 66ch;
}

.catalog-detail__definitions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .55rem 1.4rem;
  padding: .85rem 1.05rem;
  margin: 1.2rem 0;
  background: var(--c-surface-2, #f3f6fa);
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--c-ink-muted, #6b7c8c);
  border-radius: 2px;
}
.catalog-detail__def dt {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  margin: 0 0 .15rem;
}
.catalog-detail__def dd {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-ink, #0b1e2d);
  font-variant-numeric: tabular-nums;
}
.catalog-detail__def code {
  font-size: .82rem;
  background: rgba(11,30,45,.05);
  padding: .05rem .35rem;
  border-radius: 1px;
  font-weight: 500;
}

.catalog-detail__targets,
.catalog-detail__usage {
  margin-top: 1.6rem;
}
.catalog-detail__targets h2,
.catalog-detail__usage h2 {
  margin: 0 0 .55rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.catalog-detail__usage-count {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-muted, #6b7c8c);
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
}
.catalog-detail__targets-lede {
  margin: 0 0 .65rem;
  font-size: .92rem;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 64ch;
  line-height: 1.5;
}
.catalog-detail__targets-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.catalog-detail__targets-list .catalog-target-pill {
  font-size: .75rem;
}
.catalog-detail__targets-list .catalog-target-pill__icon {
  width: 1.4rem; height: 1.4rem;
}
.catalog-detail__targets-list .catalog-target-pill__text {
  max-width: 26rem;
}
.catalog-detail__usage-empty {
  padding: .85rem 1.05rem;
  background: var(--c-surface-2, #f3f6fa);
  border-left: 3px solid var(--c-border, #d6e3ec);
  color: var(--c-ink-soft, #3a4f61);
  font-size: .9rem;
  line-height: 1.55;
}
.catalog-detail__usage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}
.catalog-detail__usage-item {
  padding: 0;
}
.catalog-detail__usage-link {
  display: block;
  padding: .55rem .75rem;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  color: var(--c-ink, #0b1e2d);
  text-decoration: none;
  font-weight: 500;
  font-size: .92rem;
  transition: border-color .12s ease;
}
.catalog-detail__usage-link:hover {
  border-color: var(--c-azur, #3bb4d1);
  color: var(--c-azur-ink, #0a6c84);
}

@media (max-width: 720px) {
  .catalog-card__meta { grid-template-columns: 1fr 1fr; }
  .catalog-section__list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Source provenance -- the (i) popover next to every source pill, and the
   /sources directory + per-source detail pages
   ---------------------------------------------------------------------------
   The popover is CSS-only (no JS): :focus + :hover on a tabbable wrapper
   reveals the absolutely-positioned card. Keyboard-accessible.
   --------------------------------------------------------------------------- */
.source-info {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  cursor: help;
  outline: none;
  /* Stay below sibling content by default... */
  z-index: 1;
}
/* ...but when the popover is open, lift the whole wrapper above every
   other chip/card in the surrounding panel. Without this the popover
   gets visually clipped by neighbouring badges that have their own
   transform-induced stacking contexts. */
.source-info:hover,
.source-info:focus,
.source-info:focus-within {
  z-index: 1000;
}
.source-info__pill {
  display: inline-block;
  padding: .05rem .38rem;
  border: 1px solid currentColor;
  border-radius: 2px 0 0 2px;
  color: var(--c-ink-muted, #6b7c8c);
  background: transparent;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.source-info__pill[data-source="iris-plus"]   { color:#1f6e4c; }
.source-info__pill[data-source="icma-slbp"],
.source-info__pill[data-source="icma-gbp"]    { color:#1f4f95; }
.source-info__pill[data-source="un-tier1"]    { color:#1f3a73; }
.source-info__pill[data-source="azuros"]      { color: var(--c-ink, #0b1e2d); }
.source-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: auto;
  background: currentColor;
  color: #fff;
  font-style: italic;
  font-family: ui-serif, Georgia, Cambria, serif;
  font-weight: 700;
  font-size: .68rem;
  border: 1px solid currentColor;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  letter-spacing: 0;
  text-transform: none;
}
.source-info[data-source="iris-plus"]   .source-info__icon,
.source-info__icon                       { background: currentColor; }
.source-info__pill[data-source="iris-plus"] ~ .source-info__icon { background: #1f6e4c; color: #fff; border-color: #1f6e4c; }
.source-info__pill[data-source="icma-slbp"] ~ .source-info__icon,
.source-info__pill[data-source="icma-gbp"]  ~ .source-info__icon { background: #1f4f95; color: #fff; border-color: #1f4f95; }
.source-info__pill[data-source="un-tier1"]  ~ .source-info__icon { background: #1f3a73; color: #fff; border-color: #1f3a73; }
.source-info__pill[data-source="azuros"]    ~ .source-info__icon { background: var(--c-ink, #0b1e2d); color: #fff; border-color: var(--c-ink, #0b1e2d); }

.source-info__popover {
  position: absolute;
  isolation: isolate;
  z-index: 1000;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 18rem;
  max-width: 22rem;
  padding: .85rem .95rem .8rem;
  /* Solid opaque background -- the popover must visually clip whatever
     sits beneath it. We also explicitly set color so a dark parent
     (e.g. the AI helper's navy panel) doesn't bleed through. */
  background: #fff;
  color: var(--c-ink, #0b1e2d);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 3px;
  box-shadow: 0 12px 32px rgba(11, 30, 45, .25),
              0 1px 3px rgba(11, 30, 45, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
  pointer-events: none;
  text-align: left;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
.source-info:hover .source-info__popover,
.source-info:focus .source-info__popover,
.source-info:focus-within .source-info__popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

/* Lift the containing tile above its siblings when its source-info
   popover is open, so the popover can render over adjacent tiles
   instead of getting clipped by their stacking contexts. */
.kpi-plan__tiles .kpi-tray__row:has(.source-info:hover),
.kpi-plan__tiles .kpi-tray__row:has(.source-info:focus-within),
.kpi-plan__tiles .kpi-tray__row:has(.source-info[open]) {
  z-index: 50;
}
.kpi-intro__sources .kpi-intro__source-card:has(.source-info:hover),
.kpi-intro__sources .kpi-intro__source-card:has(.source-info:focus-within) {
  z-index: 50;
  position: relative;
}
.kpi-plan__detail-body .kpi-tray__row-body:has(.source-info:hover),
.kpi-plan__detail-body .kpi-tray__row-body:has(.source-info:focus-within) {
  z-index: 50;
  position: relative;
  pointer-events: auto;
}
.source-info__name {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--c-ink, #0b1e2d);
}
.source-info__custodian {
  margin: .15rem 0 .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.source-info__desc {
  margin: 0 0 .55rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
}
.source-info__ref {
  margin: 0 0 .55rem;
  padding: .25rem 0;
  border-top: 1px dashed var(--c-border, #d6e3ec);
  font-size: .78rem;
  color: var(--c-ink-soft, #3a4f61);
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.source-info__ref-label {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.source-info__ref code {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-ink, #0b1e2d);
  background: rgba(11, 30, 45, .05);
  padding: .05rem .35rem;
  border-radius: 1px;
}
.source-info__more {
  display: inline-block;
  margin-top: .25rem;
  font-size: .8rem;
  color: var(--c-azur-ink, #0a6c84);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .005em;
}
.source-info__more:hover { text-decoration: underline; }

/* ---- /sources directory page ----- */
.sources-directory {
  max-width: 1080px;
  margin: 1.4rem auto 3rem;
  padding: 0 1.4rem;
}
.sources-directory__crumbs {
  font-size: .8rem;
  color: var(--c-ink-muted, #6b7c8c);
  margin: 0 0 .65rem;
}
.sources-directory__crumbs a {
  color: var(--c-azur-ink, #0a6c84);
}
.sources-directory__head h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.sources-directory__lede {
  margin: .45rem 0 1.4rem;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 72ch;
}
.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .7rem;
}
.sources-list__row {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid currentColor;
  border-radius: 2px;
  color: var(--c-ink-muted, #6b7c8c);
}
.sources-list__row[data-source="iris-plus"]   { color: #1f6e4c; }
.sources-list__row[data-source="icma-slbp"],
.sources-list__row[data-source="icma-gbp"]    { color: #1f4f95; }
.sources-list__row[data-source="un-tier1"]    { color: #1f3a73; }
.sources-list__row[data-source="azuros"]      { color: var(--c-ink, #0b1e2d); }
.sources-list__link {
  display: block;
  padding: .95rem 1.1rem 1rem 1.15rem;
  color: var(--c-ink, #0b1e2d);
  text-decoration: none;
}
.sources-list__row-head {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin-bottom: .15rem;
  flex-wrap: wrap;
}
.sources-list__short {
  display: inline-block;
  padding: .05rem .42rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sources-list__short[data-source="iris-plus"]   { color: #1f6e4c; }
.sources-list__short[data-source="icma-slbp"],
.sources-list__short[data-source="icma-gbp"]    { color: #1f4f95; }
.sources-list__short[data-source="un-tier1"]    { color: #1f3a73; }
.sources-list__short[data-source="azuros"]      { color: var(--c-ink, #0b1e2d); }
.sources-list__long {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--c-ink, #0b1e2d);
}
.sources-list__custodian {
  margin: .15rem 0 .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.sources-list__description {
  margin: 0 0 .55rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 70ch;
}
.sources-list__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .35rem 1.2rem;
  padding: .35rem 0 0;
  border-top: 1px dashed var(--c-border, #d6e3ec);
}
.sources-list__facts dt {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.sources-list__facts dd {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-ink, #0b1e2d);
  font-variant-numeric: tabular-nums;
}

/* ---- /sources/<slug> detail ----- */
.source-detail {
  max-width: 840px;
  margin: 1.4rem auto 3rem;
  padding: 0 1.4rem;
}
.source-detail__crumbs {
  font-size: .8rem;
  color: var(--c-ink-muted, #6b7c8c);
  margin: 0 0 .65rem;
}
.source-detail__crumbs a {
  color: var(--c-azur-ink, #0a6c84);
}
.source-detail__head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.4rem;
}
.source-detail__short {
  display: inline-block;
  align-self: flex-start;
  padding: .1rem .55rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.source-detail[data-source="iris-plus"]   .source-detail__short { color: #1f6e4c; }
.source-detail[data-source="icma-slbp"]   .source-detail__short,
.source-detail[data-source="icma-gbp"]    .source-detail__short { color: #1f4f95; }
.source-detail[data-source="un-tier1"]    .source-detail__short { color: #1f3a73; }
.source-detail[data-source="azuros"]      .source-detail__short { color: var(--c-ink, #0b1e2d); }
.source-detail h1 {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.source-detail__custodian {
  margin: 0;
  font-size: .92rem;
  color: var(--c-ink-soft, #3a4f61);
}
.source-detail__body h2 {
  margin: 1.2rem 0 .35rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.source-detail__body p {
  margin: 0 0 .65rem;
  font-size: 1.0rem;
  line-height: 1.6;
  color: var(--c-ink, #0b1e2d);
  max-width: 70ch;
}
.source-detail__facts {
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem 1.4rem;
  padding: .85rem 1.05rem;
  background: var(--c-surface-2, #f3f6fa);
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid currentColor;
  border-radius: 2px;
}
.source-detail__fact dt {
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  margin: 0 0 .15rem;
}
.source-detail__fact dd {
  margin: 0;
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-ink, #0b1e2d);
  word-break: break-word;
}
.source-detail__fact code {
  font-size: .82rem;
  background: rgba(11, 30, 45, .05);
  padding: .05rem .35rem;
  border-radius: 1px;
}

/* ---------------------------------------------------------------------------
   Track-step four-surface UI -- Phase A++
   ---------------------------------------------------------------------------
   Documented in docs/CATALOG_SEARCH_UX.md. Each surface gets its own
   block but they share the category palette + the SDG target-pill
   vocabulary so the visual continues across the page.
   --------------------------------------------------------------------------- */

.kpi-editor-form {
  --kpi-cat-climate-energy:   #d97a1a;
  --kpi-cat-marine:           #1f8aa3;
  --kpi-cat-biodiversity:     #4a8a3f;
  --kpi-cat-livelihoods:      #8d5a8a;
  --kpi-cat-gender-inclusion: #c25c7d;
  --kpi-cat-food-systems:     #b8862c;
  --kpi-cat-water:            #3d8bbf;
  --kpi-cat-innovation:       #4b5fad;
  --kpi-cat-governance:       #5a6c7a;
  --kpi-cat-default:          #6b7c8c;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* ---- Top elevator pitch ------------------------------------------------- */
.kpi-editor__intro {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--c-azur, #3bb4d1);
  border-radius: 4px;
  padding: 1.1rem 1.25rem 1.2rem;
}
.kpi-editor__intro-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--c-ink, #0b1e2d);
}
.kpi-editor__intro-lede {
  margin: .35rem 0 .9rem;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 72ch;
}
.kpi-editor__sources-grid {
  list-style: none;
  margin: 0 0 .85rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .55rem;
}
.kpi-editor__source-card {
  background: var(--c-surface-2, #f3f6fa);
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid currentColor;
  border-radius: 2px;
  padding: .65rem .85rem .75rem;
  color: var(--c-ink-muted, #6b7c8c);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.kpi-editor__source-card[data-source="iris-plus"]   { color: #1f6e4c; }
.kpi-editor__source-card[data-source="icma-slbp"],
.kpi-editor__source-card[data-source="icma-gbp"]    { color: #1f4f95; }
.kpi-editor__source-card[data-source="un-tier1"]    { color: #1f3a73; }
.kpi-editor__source-card[data-source="azuros"]      { color: var(--c-ink, #0b1e2d); }
.kpi-editor__source-card-badge {
  align-self: flex-start;
  display: inline-block;
  padding: .05rem .42rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.kpi-editor__source-card-name {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--c-ink, #0b1e2d);
}
.kpi-editor__source-card-blurb {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--c-ink-soft, #3a4f61);
}

.kpi-editor__howto {
  margin-top: .55rem;
  background: var(--c-surface-2, #f3f6fa);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 3px;
  padding: 0;
}
.kpi-editor__howto-summary {
  cursor: pointer;
  list-style: none;
  padding: .55rem .85rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4f61);
}
.kpi-editor__howto-summary::-webkit-details-marker { display: none; }
.kpi-editor__howto-summary::before {
  content: "›";
  display: inline-block;
  margin-right: .55rem;
  transition: transform .15s ease;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-editor__howto[open] .kpi-editor__howto-summary::before {
  transform: rotate(90deg);
}
.kpi-editor__howto-body {
  padding: 0 .85rem .8rem;
}
.kpi-editor__howto-body dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem 1rem;
}
.kpi-editor__howto-body dt {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  align-self: baseline;
}
.kpi-editor__howto-body dd {
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 64ch;
}

/* ---- Surface 1 -- AI helper card (Azuros Assistant visual language) ----- */
.kpi-ai-helper {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%,
                    rgba(91, 224, 255, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 10% 95%,
                    rgba(59, 180, 209, 0.14) 0%, transparent 65%),
    linear-gradient(145deg, #1a3144 0%, #0f2434 100%);
  border: 1px solid rgba(91, 224, 255, 0.32);
  border-radius: 14px;
  padding: 1.5rem 1.7rem 1.3rem;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px -16px rgba(11, 30, 45, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.kpi-ai-helper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #5be0ff, transparent);
  opacity: 0.6;
}
.kpi-ai-helper__head { margin: 0 0 .9rem; }
.kpi-ai-helper__title-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .35rem;
  flex-wrap: wrap;
}
.kpi-ai-helper__eyebrow {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5be0ff;
  background: rgba(91, 224, 255, 0.08);
  border: 1px solid rgba(91, 224, 255, 0.32);
  padding: .2rem .6rem;
  border-radius: 999px;
}
.kpi-ai-helper__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #95b6c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.01em;
}
.kpi-ai-helper__lede {
  margin: 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  max-width: 72ch;
}
.kpi-ai-helper__composer {
  margin: .6rem 0 .25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.kpi-ai-helper__send {
  background: linear-gradient(180deg, #5be0ff, #3bb4d1);
  color: #062735;
  border: 1px solid #5be0ff;
  font-weight: 700;
  letter-spacing: .005em;
}
.kpi-ai-helper__send:hover { filter: brightness(1.05); }
.kpi-ai-helper__send:active { transform: translateY(1px); }

.kpi-ai-helper__thinking {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: .8rem;
}
.kpi-ai-helper__thinking-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5be0ff;
  opacity: .4;
  animation: aiDot 1.4s infinite ease-in-out;
}
.kpi-ai-helper__thinking-dot:nth-child(2) { animation-delay: .15s; }
.kpi-ai-helper__thinking-dot:nth-child(3) { animation-delay: .3s; }
.kpi-ai-helper__thinking-label {
  margin-left: .2rem;
  letter-spacing: .04em;
}
@keyframes aiDot {
  0%, 80%, 100% { opacity: .35; transform: scale(.9); }
  40%           { opacity: 1;   transform: scale(1.2); }
}
.htmx-indicator.kpi-ai-helper__thinking { opacity: 0; }
.htmx-request .kpi-ai-helper__thinking,
.kpi-ai-helper__thinking.htmx-request { opacity: 1; }

.kpi-ai-helper__response-wrap {
  margin-top: .9rem;
}
.kpi-ai-helper__panel {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.kpi-ai-helper__prose {
  background: rgba(11, 30, 45, .35);
  border-left: 2px solid #5be0ff;
  border-radius: 3px;
  padding: .65rem .85rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: .92rem;
  line-height: 1.55;
}
.kpi-ai-helper__speaker {
  display: inline-block;
  margin-bottom: .25rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5be0ff;
}
.kpi-ai-helper__prose-body { color: inherit; }
.kpi-ai-helper__prose-body > *:first-child { margin-top: 0; }
.kpi-ai-helper__prose-body > *:last-child  { margin-bottom: 0; }
.kpi-ai-helper__prose-body p {
  margin: 0 0 .55rem;
  color: inherit;
  line-height: 1.55;
}
.kpi-ai-helper__prose-body p:last-child { margin-bottom: 0; }
.kpi-ai-helper__prose-body strong {
  font-weight: 700;
  color: #ffffff;
}
.kpi-ai-helper__prose-body em { font-style: italic; }
.kpi-ai-helper__prose-body code {
  font-size: .85rem;
  background: rgba(91, 224, 255, 0.12);
  color: #c5e8f4;
  padding: .05rem .35rem;
  border-radius: 2px;
}
.kpi-ai-helper__prose-body ul,
.kpi-ai-helper__prose-body ol {
  margin: .35rem 0 .55rem 1.2rem;
  padding: 0;
}
.kpi-ai-helper__prose-body li { margin-bottom: .2rem; }
.kpi-ai-helper__prose-body h1,
.kpi-ai-helper__prose-body h2,
.kpi-ai-helper__prose-body h3,
.kpi-ai-helper__prose-body h4 {
  margin: .65rem 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.005em;
}
.kpi-ai-helper__prose-body a {
  color: #5be0ff;
  text-decoration: underline;
}

/* --- Per-chip description (Tufte muted body) ----------------------------- */
.kpi-ai-helper__chip-description {
  margin: .2rem 0 .1rem;
  font-size: .76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpi-ai-helper__error {
  margin: 0;
  padding: .6rem .85rem;
  background: rgba(248, 113, 113, 0.1);
  border-left: 3px solid rgba(248, 113, 113, 0.5);
  color: #fcaaaa;
  border-radius: 4px;
  font-size: .88rem;
}
.kpi-ai-helper__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: .85rem;
}

.kpi-ai-helper__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .55rem;
}
.kpi-ai-helper__chip {
  --kpi-cat-color: var(--kpi-cat-default);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(91, 224, 255, 0.25);
  border-left: 3px solid var(--kpi-cat-color);
  border-radius: 4px;
  padding: .65rem .8rem .65rem .8rem;
  color: rgba(255, 255, 255, 0.92);
  /* Match the browse result-card layout: body left, badge top-right,
     Add bottom-right. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: .9rem;
  row-gap: .25rem;
  transition: border-color .12s ease, transform .12s ease;
}
.kpi-ai-helper__chip > .source-info {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
}
.kpi-ai-helper__chip-body {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.kpi-ai-helper__chip[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.kpi-ai-helper__chip[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.kpi-ai-helper__chip[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.kpi-ai-helper__chip[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.kpi-ai-helper__chip[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.kpi-ai-helper__chip[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.kpi-ai-helper__chip[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.kpi-ai-helper__chip[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.kpi-ai-helper__chip[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }
.kpi-ai-helper__chip:hover {
  border-color: rgba(91, 224, 255, 0.5);
  transform: translateY(-1px);
}
.kpi-ai-helper__chip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .55rem;
}
.kpi-ai-helper__chip-category {
  margin: 0;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kpi-cat-color) 70%, #fff);
}
.kpi-ai-helper__chip-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #fff;
}
.kpi-ai-helper__chip-why {
  margin: 0;
  font-size: .83rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  font-style: italic;
}
.kpi-ai-helper__chip-targets {
  list-style: none;
  padding: 0;
  margin: .25rem 0 0;
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
}
.kpi-ai-helper__chip-targets .kpi-editor__target-pill {
  font-size: .62rem;
}
.kpi-ai-helper__chip-add {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  background: rgba(91, 224, 255, 0.1);
  color: #5be0ff;
  border: 1px solid rgba(91, 224, 255, 0.45);
  border-radius: 2px;
  padding: .35rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
}
.kpi-ai-helper__chip-add:hover {
  background: rgba(91, 224, 255, 0.2);
}

/* Source-info popover inside the dark AI helper -- lift contrast */
.kpi-ai-helper__chip .source-info__pill {
  color: color-mix(in srgb, var(--kpi-cat-color) 70%, #5be0ff);
  border-color: currentColor;
}
.kpi-ai-helper__chip .source-info__icon {
  background: currentColor;
  color: #0f2434;
}

/* ---- Surface 2 -- Typeahead --------------------------------------------- */
.kpi-typeahead {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
}
.kpi-typeahead__head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-typeahead__lede {
  margin: .25rem 0 .7rem;
  font-size: .9rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.5;
  max-width: 64ch;
}
.kpi-typeahead__input {
  width: 100%;
  font: inherit;
  font-size: .92rem;
  padding: .45rem .65rem;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 3px;
  background: #fff;
  color: var(--c-ink, #0b1e2d);
}
.kpi-workshop[data-active-tool="search"] .kpi-browse__group-pills > .kpi-typeahead__input {
  max-width: 38rem;
}

/* Search-tab eyebrow strip mirrors the browse "Active filters" wrap. */
.kpi-typeahead__hint-wrap {
  margin: .3rem 0 .35rem;
  padding: .35rem .7rem .4rem;
  border: 1px dashed var(--c-border, #d6e3ec);
  border-radius: 4px;
  background: color-mix(in srgb, var(--c-azur-wash, #e6f5fa) 30%, #fff);
}
.kpi-typeahead__hint-eyebrow {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
}
.kpi-typeahead__hint-eyebrow-label {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tool-color-search, #b8740a);
}
.kpi-typeahead__hint-rule {
  font-size: .72rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-style: italic;
}
.kpi-typeahead__input:focus {
  outline: 2px solid color-mix(in srgb, var(--c-azur, #3bb4d1) 60%, transparent);
  outline-offset: 1px;
  border-color: var(--c-azur, #3bb4d1);
}
/* Search-in-flight spinner. Sits at the right edge of the input,
   fades in only while the HTMX search POST is running (.htmx-request
   toggled by hx-indicator). Mirrors the AI-helper "scouting" dot. */
.kpi-typeahead__field { position: relative; }
.kpi-typeahead__field .kpi-typeahead__input { padding-right: 6.5rem; }
.kpi-typeahead__spinner {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  color: var(--c-ink-muted, #6b7c8c);
  pointer-events: none;
}
.kpi-typeahead__spinner-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--c-azur, #3bb4d1);
  animation: aiDot 1s ease-in-out infinite;
}
.htmx-indicator.kpi-typeahead__spinner { opacity: 0; }
.htmx-request .kpi-typeahead__spinner,
.kpi-typeahead__spinner.htmx-request { opacity: 1; }
/* Empty-search fallback to the Custom tab. */
.kpi-typeahead__empty-custom {
  margin: .3rem 0 0;
  font-size: .82rem;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-typeahead__empty-custom-link {
  font: inherit;
  color: var(--c-azur-ink, #1f6e87);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.kpi-typeahead__empty-custom-link:hover { color: var(--c-azur, #3bb4d1); }
.kpi-typeahead__results { margin-top: .55rem; min-height: 1.5rem; }
.kpi-typeahead__hint {
  margin: 0;
  padding: .55rem 0;
  font-size: .85rem;
  color: var(--c-ink-muted, #6b7c8c);
  line-height: 1.5;
}
.kpi-typeahead__hint code {
  font-size: .82rem;
  background: rgba(11, 30, 45, .05);
  padding: .05rem .35rem;
  border-radius: 1px;
}
.kpi-typeahead__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}
.kpi-typeahead__result {
  --kpi-cat-color: var(--kpi-cat-default);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: .9rem;
  row-gap: .15rem;
  padding: .55rem .7rem .55rem .75rem;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--kpi-cat-color);
  border-radius: 2px;
}
.kpi-typeahead__result > .source-info {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
}
.kpi-typeahead__result-body {
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0;
}
.kpi-typeahead__add {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
}
.kpi-typeahead__result[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.kpi-typeahead__result[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.kpi-typeahead__result[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.kpi-typeahead__result[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.kpi-typeahead__result[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.kpi-typeahead__result[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.kpi-typeahead__result[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.kpi-typeahead__result[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.kpi-typeahead__result[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }
.kpi-typeahead__result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.kpi-typeahead__head-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
}
.kpi-typeahead__category {
  margin: 0;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kpi-cat-color);
}
.kpi-typeahead__name {
  margin: .05rem 0;
  font-size: .96rem;
  font-weight: 600;
  color: var(--c-ink, #0b1e2d);
  letter-spacing: -.005em;
}
.kpi-typeahead__description {
  margin: 0 0 .15rem;
  font-size: .82rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpi-typeahead__targets {
  list-style: none;
  padding: 0;
  margin: .1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.kpi-typeahead__targets .kpi-editor__target-pill { font-size: .65rem; }
.kpi-typeahead__add {
  white-space: nowrap;
  background: var(--c-azur-wash, #e6f5fa);
  color: var(--c-azur-ink, #0a6c84);
  border: 1px solid color-mix(in srgb, var(--c-azur, #3bb4d1) 50%, transparent);
  border-radius: 2px;
  padding: .35rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
.kpi-typeahead__add:hover {
  background: color-mix(in srgb, var(--c-azur, #3bb4d1) 20%, var(--c-azur-wash, #e6f5fa));
}

/* ---- Surface 3 -- Selected tray ---------------------------------------- */
.kpi-tray {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  position: relative;
}
.kpi-tray__head-section h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--c-ink, #0b1e2d);
}
.kpi-tray__count {
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-muted, #6b7c8c);
  letter-spacing: .02em;
}
.kpi-tray__lede {
  margin: .25rem 0 .9rem;
  font-size: .88rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.5;
  max-width: 70ch;
}
.kpi-tray__empty {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--c-surface-2, #f3f6fa);
  border-left: 3px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  color: var(--c-ink-soft, #3a4f61);
  font-size: .9rem;
  line-height: 1.55;
}
.kpi-tray__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}
.kpi-tray__row {
  --kpi-cat-color: var(--kpi-cat-default);
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--kpi-cat-color);
  border-radius: 2px;
  padding: .8rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 1.2rem;
  align-items: start;
  /* Belt-and-suspenders: defend against descendant intrinsic widths
     (number inputs especially) pushing the grid past the row's right
     edge. */
  overflow: hidden;
  transition: border-color .12s ease, background-color .12s ease;
}
.kpi-tray__row--flash {
  animation: kpiTrayFlash .9s ease;
}
@keyframes kpiTrayFlash {
  0%   { background: color-mix(in srgb, var(--kpi-cat-color) 18%, #fff); }
  100% { background: #fff; }
}
.kpi-tray__row[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.kpi-tray__row[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.kpi-tray__row[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.kpi-tray__row[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.kpi-tray__row[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.kpi-tray__row[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.kpi-tray__row[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.kpi-tray__row[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.kpi-tray__row[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }

.kpi-tray__head {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.kpi-tray__head-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  justify-content: space-between;
}
.kpi-tray__category {
  margin: 0;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kpi-cat-color);
}
.kpi-tray__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--c-ink, #0b1e2d);
}
/* Indicator description: clamp to 4 lines by default; hover reveals
   the full text via title= and a "Show more" toggle expands it
   inline (set via JS by adding data-expanded). */
.kpi-tray__description {
  margin: .15rem 0 .25rem;
  font-size: .82rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpi-tray__description[data-expanded="true"] {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.kpi-tray__description-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--c-azur-ink, #0a6c84);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  padding: 0;
  margin: -.1rem 0 .25rem;
}
.kpi-tray__description-toggle[data-show="true"] {
  display: inline-block;
}
.kpi-tray__description-toggle:hover { text-decoration: underline; }
.kpi-tray__targets {
  list-style: none;
  padding: 0;
  margin: .1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.kpi-tray__targets .kpi-editor__target-pill { font-size: .65rem; }
.kpi-tray__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: .5rem;
  align-items: end;
  position: relative;
  min-width: 0;
}
.kpi-tray__value input,
.kpi-tray__value select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.kpi-tray__value {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.kpi-tray__value > span,
.kpi-tray__value-label {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* ---- info tooltip (label-side / generic) ------------------------------- */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .9rem;
  height: .9rem;
  background: var(--c-ink-muted, #6b7c8c);
  color: #fff;
  font-family: ui-serif, Georgia, Cambria, serif;
  font-style: italic;
  font-weight: 700;
  font-size: .58rem;
  line-height: 1;
  border-radius: 50%;
  cursor: help;
  outline: none;
  letter-spacing: 0;
  text-transform: none;
  z-index: 1;
}
.info-tip:hover,
.info-tip:focus,
.info-tip:focus-within {
  background: var(--c-ink, #0b1e2d);
  z-index: 1000;
}
.info-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.info-tip__popover {
  position: absolute;
  isolation: isolate;
  z-index: 1000;
  top: calc(100% + .35rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 18rem;
  max-width: 22rem;
  padding: .65rem .8rem .7rem;
  background: #fff;
  color: var(--c-ink, #0b1e2d);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(11, 30, 45, .22),
              0 1px 3px rgba(11, 30, 45, .1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
  pointer-events: none;
  text-align: left;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.info-tip:hover .info-tip__popover,
.info-tip:focus .info-tip__popover,
.info-tip:focus-within .info-tip__popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
  pointer-events: auto;
}
.info-tip__title {
  margin: 0 0 .25rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-ink, #0b1e2d);
  letter-spacing: -.005em;
}
.info-tip__body {
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
}
.kpi-tray__value input,
.kpi-tray__value select {
  font: inherit;
  font-size: .88rem;
  padding: .28rem .5rem;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  background: #fff;
  color: var(--c-ink, #0b1e2d);
}
.kpi-tray__value input[type="number"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.kpi-tray__value input:focus,
.kpi-tray__value select:focus {
  outline: 2px solid color-mix(in srgb, var(--kpi-cat-color) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--kpi-cat-color);
}
.kpi-tray__remove {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: end;
  background: transparent;
  color: var(--c-ink-muted, #6b7c8c);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  padding: .2rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: .25rem;
}
.kpi-tray__remove:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* ---- Surface 4 -- Browse disclosure ------------------------------------- */
.kpi-browse {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 4px;
  padding: 0;
}
.kpi-browse__summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  border-radius: 4px 4px 0 0;
}
.kpi-browse__summary::-webkit-details-marker { display: none; }
.kpi-browse__summary::before {
  content: "›";
  display: inline-block;
  margin-right: .55rem;
  font-size: 1.1rem;
  color: var(--c-ink-muted, #6b7c8c);
  transition: transform .15s ease;
}
.kpi-browse[open] .kpi-browse__summary::before { transform: rotate(90deg); }
.kpi-browse__summary-label {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  flex: 1;
}
.kpi-browse__summary-hint {
  font-size: .8rem;
  color: var(--c-ink-soft, #3a4f61);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.kpi-browse__body {
  padding: 0 1.2rem 1.2rem;
  border-top: 1px solid var(--c-border, #d6e3ec);
}

/* ===========================================================================
   v5 faceted browse -- colored pills + active filter strip
   ========================================================================= */

.kpi-browse__active-wrap {
  margin: .3rem 0 .35rem;
  padding: .35rem .65rem .4rem;
  border: 1px dashed var(--c-border, #d6e3ec);
  border-radius: 4px;
  background: color-mix(in srgb, var(--c-azur-wash, #e6f5fa) 30%, #fff);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.kpi-browse__active-label {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
}
.kpi-browse__active-label-eyebrow {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-azur-ink, #0a6c84);
}
.kpi-browse__active-rule {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-ink-muted, #6b7c8c);
  font-style: italic;
}
.kpi-browse__active {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  min-height: 1.6rem;
  align-items: center;
}
.kpi-browse__active[data-empty="true"] .kpi-browse__active-empty { display: inline; }
.kpi-browse__active:not([data-empty="true"]) .kpi-browse__active-empty { display: none; }
.kpi-browse__active-empty {
  font-size: .72rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-style: italic;
  line-height: 1.3;
}

/* Active-filter chip in the strip up top */
.kpi-browse__active-chip {
  --chip-color: var(--c-ink, #0b1e2d);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .45rem .2rem .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--chip-color);
  border-radius: 999px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--chip-color) 30%, transparent);
  animation: kpiChipIn .22s cubic-bezier(.2,.6,.2,1) both;
}
.kpi-browse__active-chip[data-type-tag]::before {
  content: attr(data-type-tag);
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(255,255,255,.22);
  padding: .15rem .35rem;
  border-radius: 999px;
  margin-right: .15rem;
}
.kpi-browse__active-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 0;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.kpi-browse__active-chip-x:hover { background: rgba(255,255,255,.4); }
@keyframes kpiChipIn {
  from { transform: scale(.6) translateY(-6px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Pill groups -- v5f: cockpit layout. Three sub-panels stacked
   vertically with a label rail on the left and pills/icons filling
   the right. Tight padding and a unified card so the three controls
   read as one filter cockpit. */
.kpi-browse__pills {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0 0 .55rem;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.kpi-browse__group {
  padding: .3rem .65rem .35rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--c-border, #d6e3ec);
}
.kpi-browse__group:last-child { border-bottom: 0; }
.kpi-browse__group--wide { /* same shape as the others now */ }
.kpi-browse__group legend {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.kpi-browse__group-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .22rem .25rem;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
.kpi-browse__group-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--c-ink-muted, #6b7c8c);
}
.kpi-browse__group-dot[data-group="source"]    { background: var(--tool-color-browse); }
.kpi-browse__group-dot[data-group="category"]  { background: var(--c-azur-ink, #0a6c84); }
.kpi-browse__group-dot[data-group="un-target"] { background: #3f7e44; }
.kpi-browse__group-dot[data-group="search"]    { background: var(--tool-color-search); }

/* Toggleable colored pill: a small bordered chip in each item's
   native family/category palette. Hover deepens the wash; checked
   fills the chip with its colour and flips ink to white. */
.kpi-browse__pill {
  --pill-color: var(--c-ink, #0b1e2d);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem .18rem .45rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--c-ink-soft, #3a4f61);
  background: color-mix(in srgb, var(--pill-color) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--pill-color) 32%, var(--c-border, #d6e3ec));
  cursor: pointer;
  margin: 0;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
  white-space: nowrap;
}
.kpi-browse__pill:hover {
  background: color-mix(in srgb, var(--pill-color) 14%, #fff);
  border-color: color-mix(in srgb, var(--pill-color) 50%, var(--c-border, #d6e3ec));
  color: var(--pill-color);
  transform: translateY(-1px);
}
.kpi-browse__pill-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0; margin: 0;
}
.kpi-browse__pill-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--pill-color);
  flex-shrink: 0;
}
.kpi-browse__pill-label { white-space: nowrap; }
.kpi-browse__pill:has(input:checked) {
  background: var(--pill-color);
  border-color: var(--pill-color);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pill-color) 28%, transparent);
}
.kpi-browse__pill:has(input:checked) .kpi-browse__pill-dot {
  background: #fff;
}
.kpi-browse__pill:focus-within {
  outline: 0;
}

/* SDG goal row gets a full-width treatment: the eyebrow rides as a
   small overlay on the left, and the 17 icons span the full
   container width (not just the label-rail column). */
.kpi-browse__group--wide .kpi-browse__sdg-targets {
  margin-top: .15rem;
}
.kpi-browse__group--wide > script { display: none; }
.kpi-browse__sdg-goals {
  display: grid;
  grid-template-columns: repeat(17, minmax(0, 1fr));
  gap: .3rem;
  padding: 0;
  margin: 0;
}
.kpi-browse__sdg-goal {
  --pill-color: #444;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 4px;
  border: 0;
  background: var(--pill-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, outline-offset .14s ease;
  outline: 2px solid transparent;
  outline-offset: 0;
}
.kpi-browse__sdg-goal-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kpi-browse__sdg-goal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pill-color) 40%, transparent);
}
.kpi-browse__sdg-goal[data-open="true"] {
  outline: 2px solid var(--pill-color);
  outline-offset: 2px;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pill-color) 40%, transparent);
}

/* Targets revealed under the goal row when a goal is opened.
   v5k: uniform-size cells via auto-fill grid -- every card is the
   same width and height regardless of text length. */
.kpi-browse__sdg-targets[hidden] { display: none !important; }
.kpi-browse__sdg-targets {
  margin-top: .25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .3rem;
  animation: kpiTargetsIn .2s ease both;
}
@keyframes kpiTargetsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* Canonical SDG target card: full-height icon on the left edge,
   moderate target id, two-line headline. All cards are uniform
   width + height (the parent grid sizes them). */
.kpi-browse__sdg-target {
  --pill-color: var(--sdg-open-color, #444);
  display: grid;
  grid-template-columns: 2.3rem minmax(1.8rem, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: .35rem;
  padding: 0 .55rem 0 0;
  height: 2.3rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--c-ink, #0b1e2d);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--pill-color) 32%, var(--c-border, #d6e3ec));
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
  text-align: left;
  overflow: hidden;
  min-width: 0;
}
.kpi-browse__sdg-target-icon {
  grid-column: 1;
  width: 2.3rem;
  height: 2.3rem;
  object-fit: cover;
  display: block;
}
.kpi-browse__sdg-target-id {
  grid-column: 2;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--pill-color);
  text-align: left;
}
.kpi-browse__sdg-target-text {
  grid-column: 3;
  color: var(--c-ink-soft, #3a4f61);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  font-size: .68rem;
}
.kpi-browse__sdg-target:hover {
  background: color-mix(in srgb, var(--pill-color) 8%, #fff);
  border-color: var(--pill-color);
  transform: translateY(-1px);
}
.kpi-browse__sdg-target[data-active="true"] {
  background: color-mix(in srgb, var(--pill-color) 12%, #fff);
  border-color: var(--pill-color);
}
.kpi-browse__sdg-target[data-active="true"] .kpi-browse__sdg-target-text {
  color: var(--c-ink, #0b1e2d);
  font-weight: 700;
}
.kpi-browse__facets {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem 0 .85rem;
}
.kpi-browse__facet {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.kpi-browse__facet legend {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  padding: 0;
  margin-bottom: .25rem;
}
.kpi-browse__facet--wide {
  grid-column: 1 / -1;
}
.kpi-browse__chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .78rem;
  color: var(--c-ink-soft, #3a4f61);
  cursor: pointer;
  margin-right: .35rem;
}
.kpi-browse__chip input { accent-color: var(--c-azur, #3bb4d1); }
.kpi-browse__chip:has(input:checked) span {
  font-weight: 700;
  color: var(--c-ink, #0b1e2d);
}
.kpi-browse__un-input {
  font: inherit;
  font-size: .88rem;
  padding: .35rem .6rem;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  max-width: 200px;
  font-variant-numeric: tabular-nums;
}
.kpi-browse__hint-line {
  margin: .25rem 0 0;
  font-size: .72rem;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-browse__count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .25rem 0 .55rem;
}
.kpi-browse__count {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft, #3a4f61);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Pretty pagination control. Two chevron buttons flanking a tight
   "X / Y" indicator. Background tinted with the azur wash, with
   a soft drop shadow on hover. */
.kpi-browse__pager {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .15rem .2rem;
  border: 1px solid color-mix(in srgb, var(--c-azur-ink, #0a6c84) 30%, var(--c-border, #d6e3ec));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-azur-wash, #e6f5fa) 50%, #fff);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.kpi-browse__pager-btn {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--c-azur-ink, #0a6c84);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
  border: 1px solid color-mix(in srgb, var(--c-azur-ink, #0a6c84) 25%, var(--c-border, #d6e3ec));
}
.kpi-browse__pager-btn:hover:not([disabled]) {
  background: var(--c-azur-ink, #0a6c84);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c-azur-ink, #0a6c84) 30%, transparent);
}
.kpi-browse__pager-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}
.kpi-browse__pager-glyph {
  display: inline-block;
  margin-top: -2px;
}
.kpi-browse__pager-indicator {
  display: inline-flex;
  align-items: baseline;
  gap: .15rem;
  padding: 0 .55rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-ink, #0b1e2d);
  letter-spacing: -.005em;
}
.kpi-browse__pager-current {
  color: var(--c-azur-ink, #0a6c84);
  font-size: 1.05rem;
}
.kpi-browse__pager-sep {
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 500;
  padding: 0 .1rem;
}
.kpi-browse__pager-total {
  color: var(--c-ink-soft, #3a4f61);
}
.kpi-browse__hint {
  margin: 0;
  padding: .55rem 0;
  font-size: .85rem;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-browse__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
  /* reuse the typeahead result card styling */
}
.kpi-browse__list .kpi-typeahead__result { /* unchanged */ }

@media (max-width: 820px) {
  .kpi-tray__row { grid-template-columns: 1fr; }
  .kpi-browse__facets { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Track step v2 -- Workshop + Deck layout
   ===========================================================================
   Documented in docs/CATALOG_SEARCH_UX_V2.md. Two-column shell beneath a
   compact intro band:
     .kpi-intro     full-width top band
     .kpi-shell     two-column grid
       .kpi-workshop  left -- tabbed input area
       .kpi-deck      right -- sticky output / measurement plan
   ========================================================================== */

.kpi-editor-form--v2 {
  gap: .85rem;
  padding-bottom: 4rem; /* room for sticky action bar */
}

/* ---- Custom KPI SDG picker ------------------------------------------- */
.kpi-custom__un-picker {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  width: 100%;
}
.kpi-custom__un-label {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-custom__active-targets {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  min-height: 1.6rem;
  padding: .35rem .55rem;
  border: 1px dashed var(--c-border, #d6e3ec);
  border-radius: 4px;
  background: color-mix(in srgb, var(--c-azur-wash, #e6f5fa) 25%, #fff);
}
.kpi-custom__active-targets[data-empty="true"] .kpi-browse__active-empty { display: inline; }
.kpi-custom__active-targets:not([data-empty="true"]) .kpi-browse__active-empty { display: none; }

/* ---- Source-family modal overlay ------------------------------------- */
.kpi-source-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}
.kpi-source-modal[hidden] { display: none; }
.kpi-source-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 30, 45, .55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.kpi-source-modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(11, 30, 45, .35);
  width: min(840px, 100%);
  max-height: calc(100vh - 5rem);
  display: flex;
  flex-direction: column;
  animation: kpiSourceModalIn .18s ease both;
}
@keyframes kpiSourceModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.kpi-source-modal__x {
  position: absolute;
  top: .55rem;
  right: .65rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--c-border, #d6e3ec);
  background: #fff;
  color: var(--c-ink-soft, #3a4f61);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kpi-source-modal__x:hover {
  background: color-mix(in srgb, var(--c-azur-wash, #e6f5fa) 80%, #fff);
  border-color: var(--c-ink-muted, #6b7c8c);
  color: var(--c-ink, #0b1e2d);
}
.kpi-source-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2.4rem 1.4rem;
}
.kpi-source-modal__body:empty::after {
  content: "Loading…";
  display: block;
  text-align: center;
  color: var(--c-ink-muted, #6b7c8c);
  padding: 2rem 0;
}
.kpi-source-modal__foot {
  display: flex;
  justify-content: flex-end;
  padding: .75rem 1rem 1rem;
  border-top: 1px solid var(--c-border, #d6e3ec);
  background: color-mix(in srgb, var(--c-azur-wash, #e6f5fa) 25%, #fff);
}
/* Inside the modal, the source-detail article should breathe but not
   carry the global heading sizes (no nav crumbs, no global h1 layout
   from /sources/<slug>). */
.kpi-source-modal__body .source-detail__head h1 { margin-top: 0; }

/* ---- Intro band: headline + 5 source-family cards --------------------- */
.kpi-intro {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 4px;
  padding: .85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.kpi-intro__head { margin: 0; }
.kpi-intro__title-row {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  flex-wrap: wrap;
}
.kpi-intro__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--c-ink, #0b1e2d);
}
.kpi-intro__lede {
  margin: 0;
  font-size: .88rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.45;
  max-width: 64ch;
  flex: 1;
}
.kpi-intro__title-row > .info-tip { margin-left: auto; }

/* Source-family card strip: 5 small horizontal cards. Boasts about
   the catalogue's coverage without dominating. */
.kpi-intro__sources {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.kpi-intro__source-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .7rem .65rem;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid currentColor;
  border-radius: 2px;
  color: var(--c-ink-muted, #6b7c8c);
  text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
  min-height: 0;
}
.kpi-intro__source-card:hover {
  background: color-mix(in srgb, currentColor 4%, #fff);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(11, 30, 45, .14);
}
.kpi-intro__source-card[data-source="iris-plus"]   { color: #1f6e4c; }
.kpi-intro__source-card[data-source="icma-slbp"],
.kpi-intro__source-card[data-source="icma-gbp"]    { color: #1f4f95; }
.kpi-intro__source-card[data-source="un-tier1"]    { color: #1f3a73; }
.kpi-intro__source-card[data-source="azuros"]      { color: var(--c-ink, #0b1e2d); }
.kpi-intro__source-card-badge {
  align-self: flex-start;
  display: inline-block;
  padding: .04rem .4rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kpi-intro__source-card-title {
  margin: .15rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-ink, #0b1e2d);
  letter-spacing: -.005em;
  line-height: 1.25;
  /* Reserve room for exactly two lines so the "N metrics" row and
     blurb below align horizontally across all five cards. */
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpi-intro__source-card-count {
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: currentColor;
  letter-spacing: -.005em;
}
.kpi-intro__source-card-count-unit {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-intro__source-card-blurb {
  font-size: .72rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .kpi-intro__sources { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---- Workshop (full width, below plan strip) --------------------------- */
.kpi-workshop {
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(11, 30, 45, .05);
  padding: .65rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.kpi-workshop__head {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  flex-wrap: wrap;
  padding: .25rem 0 .35rem;
  border-bottom: 1px solid var(--c-border, #d6e3ec);
}
.kpi-workshop__head .kpi-plan__section-eyebrow { flex-shrink: 0; }
.kpi-workshop__head .kpi-workshop__hint { margin: 0; flex: 1; min-width: 0; }
.kpi-workshop__hint {
  margin: 0;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--c-ink-muted, #6b7c8c);
  padding: 0;
}
.kpi-workshop__hint-strong {
  --tool-color: var(--c-ink-soft, #3a4f61);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
  color: var(--tool-color);
  white-space: nowrap;
}
.kpi-workshop__hint-strong[data-tool="ask"]    { --tool-color: var(--tool-color-ask); }
.kpi-workshop__hint-strong[data-tool="search"] { --tool-color: var(--tool-color-search); }
.kpi-workshop__hint-strong[data-tool="browse"] { --tool-color: var(--tool-color-browse); }
.kpi-workshop__hint-strong[data-tool="custom"] { --tool-color: var(--tool-color-custom); }
.kpi-workshop__hint-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--tool-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tool-color) 18%, transparent);
}

/* Tabs (game-UI style: bold per-tab accent on the active tab, quiet
   hover, muted inactive). The active tab is impossible to mistake. */
.kpi-tabs {
  --tab-rest:   #6b7c8c;
  display: flex;
  gap: .3rem;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
.kpi-tab {
  --tab-accent: var(--tab-rest);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.1rem .85rem;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .005em;
  /* Inactive tabs wear their tool color at a muted blend so the
     four tabs share an obvious correspondence with the dots in
     the 03 head ("AI suggestions · Search by name · ..."). */
  color: color-mix(in srgb, var(--tab-accent) 65%, var(--c-ink-muted, #6b7c8c));
  cursor: pointer;
  transition: color .12s ease, border-bottom-color .12s ease, background-color .12s ease;
}
.kpi-tab:hover {
  color: var(--tab-accent);
  border-bottom-color: color-mix(in srgb, var(--tab-accent) 30%, transparent);
  background: color-mix(in srgb, var(--tab-accent) 4%, transparent);
}
.kpi-tab[aria-selected="true"] {
  color: var(--tab-accent);
  background: color-mix(in srgb, var(--tab-accent) 10%, #fff);
  border-bottom: 3px solid var(--tab-accent);
}
/* Per-tool token colors. Used on the tab AND on the matching
   hint-strong phrase in the workshop head, so the eye links
   "AI when you're not sure" -> Ask tab without effort. */
:root {
  --tool-color-ask:    #0a6c84; /* azur-ink cyan -- assistant */
  --tool-color-search: #b8740a; /* amber/ochre  -- scope/focus */
  --tool-color-browse: #1f6e4c; /* forest green -- marketplace */
  --tool-color-custom: #5a3c8a; /* deep violet  -- the fallback you wrote */
}
.kpi-tab[data-tool="ask"]    { --tab-accent: var(--tool-color-ask); }
.kpi-tab[data-tool="search"] { --tab-accent: var(--tool-color-search); }
.kpi-tab[data-tool="browse"] { --tab-accent: var(--tool-color-browse); }
.kpi-tab[data-tool="custom"] { --tab-accent: var(--tool-color-custom); }

/* Active-tab "you are here" marker: a small caret beneath the tab,
   pointing down into the panel below. Game-UI cue -- unmistakable. */
.kpi-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--tab-accent);
}

/* Quiet hairline below the tablist so the tab strip reads as
   separated from the workshop panel. The active tab's 3px border
   bottom overlaps this so the active tab visually "owns" the line. */
.kpi-tabs {
  border-bottom: 1px solid var(--c-border, #d6e3ec);
}
.kpi-tab { margin-bottom: -1px; }

.kpi-tab .info-tip {
  width: .85rem; height: .85rem;
  background: currentColor;
  opacity: .45;
}
.kpi-tab:hover .info-tip,
.kpi-tab[aria-selected="true"] .info-tip { opacity: 1; }

/* Active-tab panel: show the matching workshop__panel, hide others. */
.kpi-workshop__panel { display: none; }
.kpi-workshop[data-active-tool="ask"]    > .kpi-workshop__panel[data-tool="ask"],
.kpi-workshop[data-active-tool="search"] > .kpi-workshop__panel[data-tool="search"],
.kpi-workshop[data-active-tool="browse"] > .kpi-workshop__panel[data-tool="browse"],
.kpi-workshop[data-active-tool="custom"] > .kpi-workshop__panel[data-tool="custom"] {
  display: block;
  animation: kpiPanelIn .18s ease both;
}
@keyframes kpiPanelIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* When the browse panel is the active tab, expand the disclosure by
   default -- otherwise the operator opened it and sees a collapsed
   chrome below the tabs which is confusing. */
.kpi-workshop[data-active-tool="browse"] .kpi-browse {
  border: none;
  padding: 0;
}
.kpi-workshop[data-active-tool="browse"] .kpi-browse > summary {
  display: none;
}
.kpi-workshop[data-active-tool="browse"] .kpi-browse > .kpi-browse__body {
  border-top: none;
  padding: 0;
}

/* Inside the workshop, the typeahead loses its own outer chrome (the
   surrounding card) -- it lives inside the workshop tab pane already. */
.kpi-workshop .kpi-typeahead {
  border: none;
  padding: 0;
}
.kpi-workshop .kpi-typeahead__head { margin-bottom: .35rem; }
.kpi-workshop .kpi-typeahead__input {
  /* Search input now full-width within the workshop panel. */
  width: 100%;
}
.kpi-workshop .kpi-typeahead__list {
  /* Search results: 2-column grid when there's width for it.
     Each result is a denser horizontal card. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .4rem;
}

/* AI helper inside the workshop: stretches to full workshop width
   (was max-content-ish in v2, leaving white space). */
.kpi-workshop .kpi-ai-helper {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.kpi-workshop .kpi-ai-helper__chips {
  /* AI suggestion chip grid: 2 cols within the dark panel. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Browse facets: horizontal strip across the top of the tab pane
   (was a stacked fieldset grid in v2). */
.kpi-workshop[data-active-tool="browse"] .kpi-browse__facets {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.1rem;
  padding: .6rem 0 .75rem;
  border-bottom: 1px solid var(--c-border, #d6e3ec);
  margin-bottom: .55rem;
}
.kpi-workshop[data-active-tool="browse"] .kpi-browse__facet legend {
  margin-bottom: .35rem;
}
.kpi-workshop[data-active-tool="browse"] .kpi-browse__facet {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .25rem;
}
.kpi-workshop[data-active-tool="browse"] .kpi-browse__facet legend {
  flex-basis: 100%;
}
.kpi-workshop[data-active-tool="browse"] .kpi-browse__facet--wide {
  grid-column: auto;
}
.kpi-workshop[data-active-tool="browse"] .kpi-browse__list {
  /* Browse results: 2-col grid like the typeahead. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .4rem;
}

/* Compact result card inside the workshop -- horizontal layout with
   inline +Add, denser type, no nested chrome. */
.kpi-workshop .kpi-typeahead__result {
  --kpi-cat-color: var(--kpi-cat-default);
  padding: .55rem .65rem .6rem .75rem;
  gap: .55rem;
}
.kpi-workshop .kpi-typeahead__name {
  font-size: .92rem;
  margin: .02rem 0 .1rem;
}
.kpi-workshop .kpi-typeahead__description {
  font-size: .76rem;
  -webkit-line-clamp: 2;
}
.kpi-workshop .kpi-typeahead__targets .kpi-editor__target-pill {
  /* Drop the long text in result cards -- only id + colour rail. */
  max-width: none;
}
.kpi-workshop .kpi-typeahead__targets .kpi-editor__target-text {
  display: none;
}

/* ---- Plan strip (top of page, sticky under stepper) -------------------- */
/* Replaces the v2 side-rail .kpi-deck with a horizontal tile-strip
   layout. The plan sits ABOVE the workshop, full-width, and stays
   visible as the operator scrolls the workshop below. */
.kpi-plan {
  --kpi-cat-climate-energy:   #d97a1a;
  --kpi-cat-marine:           #1f8aa3;
  --kpi-cat-biodiversity:     #4a8a3f;
  --kpi-cat-livelihoods:      #8d5a8a;
  --kpi-cat-gender-inclusion: #c25c7d;
  --kpi-cat-food-systems:     #b8862c;
  --kpi-cat-water:            #3d8bbf;
  --kpi-cat-innovation:       #4b5fad;
  --kpi-cat-governance:       #5a6c7a;
  --kpi-cat-default:          #6b7c8c;

  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--c-azur-wash, #e6f5fa) 25%, #fff) 100%);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(11, 30, 45, .07);
  padding: .55rem 1rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.kpi-plan__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--c-border, #d6e3ec);
}
.kpi-plan__head .kpi-plan__section-eyebrow {
  margin-right: auto;
}
.kpi-plan__head .kpi-plan__custom-disclosure {
  margin-left: auto;
}
.kpi-plan__counter-block {
  display: inline-flex;
  align-items: baseline;
}
.kpi-plan__eyebrow {
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-azur-ink, #0a6c84);
}
.kpi-plan__counter {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--c-ink, #0b1e2d);
  line-height: 1.1;
}
.kpi-deck__counter-num {
  color: var(--c-azur-ink, #0a6c84);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.kpi-deck__counter-of {
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.kpi-deck__counter-target {
  color: var(--c-ink, #0b1e2d);
  font-size: 1.05rem;
  font-weight: 700;
}
.kpi-deck__counter-unit {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
  margin-left: .15rem;
}

/* "Aim for ..." label cluster -- communicates the chips are completion
   goals, not random metadata. The chips themselves follow inline. */
.kpi-plan__aim {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.kpi-plan__aim-label {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}

/* Inline custom-KPI accordion lives in the plan head -- small "+ Custom"
   chip that expands a panel BELOW the strip. */
.kpi-plan__custom-disclosure {
  display: inline-block;
}
.kpi-plan__custom-summary {
  list-style: none;
  cursor: pointer;
  padding: .25rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px dashed var(--c-border, #d6e3ec);
  border-radius: 2px;
  color: var(--c-ink-soft, #3a4f61);
  background: rgba(11, 30, 45, .02);
}
.kpi-plan__custom-summary::-webkit-details-marker { display: none; }
.kpi-plan__custom-summary:hover {
  border-color: var(--c-ink-muted, #6b7c8c);
  color: var(--c-ink, #0b1e2d);
}
.kpi-plan__custom-body {
  position: relative;
  margin-top: .55rem;
  background: var(--c-surface-2, #f3f6fa);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 2px;
  padding: .55rem .75rem .65rem;
  flex-basis: 100%;
}

/* Body -- the tile strip itself. v5: single-line horizontal scroller
   so adding a 7th+ tile scrolls instead of wrapping to a new row.
   Tile width is sized so exactly 6 tiles fit across without scroll;
   beyond that, the left/right chevron buttons drive `scrollBy`. */
.kpi-plan__body {
  position: relative;
  margin: 0;
}
.kpi-plan__tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Hide the scrollbar -- paging is driven by the gradient arrows. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kpi-plan__tiles::-webkit-scrollbar { display: none; }
.kpi-plan__tiles > .kpi-tray__row,
.kpi-plan__tiles > .kpi-plan__slot {
  flex: 0 0 calc((100% - 5 * .4rem) / 6);
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 1080px) {
  .kpi-plan__tiles > .kpi-tray__row,
  .kpi-plan__tiles > .kpi-plan__slot { flex-basis: 180px; }
}

/* Full-height paging arrows. Visible only when the strip overflows;
   the inner glyph and a gradient fade hint "more content this way". */
.kpi-plan__scroll-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.8rem;
  padding: 0;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  color: var(--c-azur-ink, #0a6c84);
  transition: color .12s ease, transform .12s ease, opacity .14s ease;
}
.kpi-plan__scroll-btn-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  box-shadow: 0 2px 10px rgba(11, 30, 45, .14);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  color: inherit;
}
.kpi-plan__scroll-btn[data-dir="left"] {
  left: 0;
  background: linear-gradient(to right,
              color-mix(in srgb, #fff 96%, transparent) 0%,
              color-mix(in srgb, #fff 80%, transparent) 55%,
              transparent 100%);
}
.kpi-plan__scroll-btn[data-dir="right"] {
  right: 0;
  background: linear-gradient(to left,
              color-mix(in srgb, #fff 96%, transparent) 0%,
              color-mix(in srgb, #fff 80%, transparent) 55%,
              transparent 100%);
}
.kpi-plan__scroll-btn:hover { color: var(--c-ink, #0b1e2d); }
.kpi-plan__scroll-btn:hover .kpi-plan__scroll-btn-glyph {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(11, 30, 45, .22);
}
.kpi-plan__body[data-overflow="true"] .kpi-plan__scroll-btn { display: inline-flex; }
.kpi-plan__body[data-overflow="true"][data-at-start="true"] .kpi-plan__scroll-btn[data-dir="left"]  { opacity: 0; pointer-events: none; }
.kpi-plan__body[data-overflow="true"][data-at-end="true"]   .kpi-plan__scroll-btn[data-dir="right"] { opacity: 0; pointer-events: none; }

/* Empty slot placeholder */
.kpi-plan__slot {
  border: 1px dashed var(--c-border, #d6e3ec);
  border-radius: 2px;
  padding: .55rem .65rem;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-size: .68rem;
  letter-spacing: .04em;
  background: rgba(11, 30, 45, .015);
  list-style: none;
}
.kpi-plan__slot-marker {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  opacity: .35;
}
.kpi-plan__slot-label {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

/* Scoreboard: 3 completion pills as a horizontal strip beside the
   counter. */
.kpi-deck__completion {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
}
.kpi-deck__check {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .42rem .15rem .3rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-ink-muted, #6b7c8c);
  background: rgba(11, 30, 45, .04);
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: 999px;
  cursor: help;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.kpi-deck__check-glyph {
  width: .85rem;
  height: .85rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  font-weight: 800;
  flex-shrink: 0;
}
.kpi-deck__check[data-met="true"] {
  background: rgba(31, 110, 76, .12);
  color: #1f6e4c;
  border-color: rgba(31, 110, 76, .35);
}
.kpi-deck__check[data-met="true"] .kpi-deck__check-glyph {
  background: #1f6e4c;
  border-color: #1f6e4c;
  color: #fff;
}
.kpi-deck__check[data-met="true"] .kpi-deck__check-glyph::after {
  content: "✓";
  font-size: .58rem;
  line-height: 1;
}

/* Body -- the scrolling row list. Constrains the deck to viewport. */
.kpi-deck__body {
  flex: 1;
  overflow-y: auto;
  padding: .7rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.kpi-deck__body .kpi-tray__list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Plan tile (v4: stays in place, body relocates to detail panel) --- */
.kpi-plan__tiles .kpi-tray__row {
  --kpi-cat-color: var(--kpi-cat-default);
  display: block;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-left: 3px solid var(--kpi-cat-color);
  border-radius: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease, box-shadow .12s ease;
  min-height: 90px;
  outline: none;
}
.kpi-plan__tiles .kpi-tray__row[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.kpi-plan__tiles .kpi-tray__row[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.kpi-plan__tiles .kpi-tray__row[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.kpi-plan__tiles .kpi-tray__row[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.kpi-plan__tiles .kpi-tray__row[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.kpi-plan__tiles .kpi-tray__row[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.kpi-plan__tiles .kpi-tray__row[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.kpi-plan__tiles .kpi-tray__row[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.kpi-plan__tiles .kpi-tray__row[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }
.kpi-plan__tiles .kpi-tray__row:hover {
  border-color: var(--kpi-cat-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 30, 45, .08);
}
.kpi-plan__tiles .kpi-tray__row:focus-visible {
  outline: 2px solid var(--kpi-cat-color);
  outline-offset: 1px;
}

/* The "selected" tile: dark accent ring + downward connector that
   plugs visually into the detail panel below. The tile's bottom
   edge is squared off and meets a flat colored "shelf"; a chunky
   wedge then bridges the small gap into the panel, making the
   parent/child relationship obvious. */
.kpi-plan__tiles .kpi-tray__row[data-selected="true"] {
  border: 1px solid var(--kpi-cat-color);
  border-left: 3px solid var(--kpi-cat-color);
  background: color-mix(in srgb, var(--kpi-cat-color) 8%, #fff);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--kpi-cat-color) 22%, transparent);
  transform: translateY(0);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 2;
}
/* Thin vertical "spine" drops from the bottom of the selected tile
   down to the panel's tab eyebrow, in the indicator's category color.
   Animates in on selection so the relationship reads as deliberate. */
.kpi-plan__tiles .kpi-tray__row[data-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: calc(50% - 2px);
  width: 4px;
  height: 14px;
  background: var(--kpi-cat-color);
  border-radius: 0 0 2px 2px;
  z-index: 3;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--kpi-cat-color) 35%, transparent);
  transform-origin: top center;
  animation: kpiConnectorDraw .22s ease both;
}
@keyframes kpiConnectorDraw {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Summary -- collapsed tile face. Vertical layout: head row +
   name + value snapshot. */
.kpi-plan__tiles .kpi-tray__row-summary {
  list-style: none;
  padding: .55rem .65rem .6rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .15rem;
  min-height: 88px;
}
.kpi-plan__tiles .kpi-tray__row-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem;
}
.kpi-plan__tiles .kpi-tray__row-category {
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kpi-cat-color);
}
.kpi-plan__tiles .kpi-tray__row-name {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-ink, #0b1e2d);
  letter-spacing: -.005em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpi-plan__tiles .kpi-tray__row-summary-vals {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  font-variant-numeric: tabular-nums;
  margin-top: .15rem;
  padding-top: .25rem;
  border-top: 1px dashed color-mix(in srgb, var(--kpi-cat-color) 22%, var(--c-border, #d6e3ec));
}
.kpi-plan__tiles .kpi-tray__row-snap {
  display: inline-flex;
  flex-direction: column;
}
.kpi-plan__tiles .kpi-tray__row-snap-label {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-plan__tiles .kpi-tray__row-snap-num {
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-ink, #0b1e2d);
  line-height: 1;
}
.kpi-plan__tiles .kpi-tray__row-snap-unit {
  font-size: .6rem;
  font-weight: 600;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-plan__tiles .kpi-tray__row-arrow { display: none; }

/* When the body lives in the tile (default), keep it hidden -- it
   only shows when JS has moved it into the detail panel. */
.kpi-plan__tiles .kpi-tray__row > .kpi-tray__row-body {
  display: none;
}

/* ---- Shared detail panel ---------------------------------------------- */
.kpi-plan__detail {
  --kpi-cat-color: var(--kpi-cat-default);
  /* Hugs the tile row -- the connector spine + tab eyebrow make the
     parent/child relationship visually unmistakable. */
  margin-top: .25rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--kpi-cat-color) 28%, var(--c-border, #d6e3ec));
  border-top: 0;
  border-radius: 4px;
  padding: 0;
  position: relative;
  animation: kpiDetailIn .22s ease both;
}
@keyframes kpiDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.kpi-plan__detail[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.kpi-plan__detail[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.kpi-plan__detail[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.kpi-plan__detail[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.kpi-plan__detail[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.kpi-plan__detail[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.kpi-plan__detail[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.kpi-plan__detail[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.kpi-plan__detail[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }

/* Tab eyebrow: a solid coloured bar sitting on the top edge of the
   panel. Reads like a folder tab pointing back at the selected card. */
.kpi-plan__detail-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .9rem;
  background: var(--kpi-cat-color);
  color: #fff;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--kpi-cat-color) 28%, transparent);
}
.kpi-plan__detail-eyebrow-label {
  display: inline-flex;
  align-items: center;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.kpi-plan__detail-eyebrow-name {
  flex: 1;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-plan__detail-close {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  padding: .2rem .65rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
.kpi-plan__detail-close:hover {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

.kpi-plan__detail-body {
  padding: .85rem 1rem 1rem;
}
.kpi-plan__detail-body .kpi-tray__row-body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.kpi-plan__detail-body .kpi-tray__description {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3a4f61);
  max-width: 80ch;
}

/* Section: UN targets advanced -- 2-column grid of target-pills */
.kpi-tray__section {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.kpi-tray__section-eyebrow {
  margin: 0;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kpi-cat-color, var(--c-azur-ink, #0a6c84));
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.kpi-tray__section-eyebrow::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--kpi-cat-color, var(--c-azur-ink, #0a6c84));
}
.kpi-plan__detail-body .kpi-tray__targets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem .55rem;
}
.kpi-plan__detail-body .kpi-tray__targets .kpi-editor__target-pill {
  font-size: .72rem;
  max-width: none;
}

/* Section: Your measurement plan -- bottom row of inputs */
.kpi-plan__detail-body .kpi-tray__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: .5rem 1rem;
  align-items: end;
  padding: .6rem .75rem;
  background: color-mix(in srgb, var(--kpi-cat-color, var(--c-azur-ink, #0a6c84)) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--kpi-cat-color, var(--c-azur-ink, #0a6c84)) 22%, var(--c-border, #d6e3ec));
  border-radius: 4px;
}
.kpi-plan__detail-body .kpi-tray__remove-hidden { display: none; }

/* Detail eyebrow actions cluster (right side: Remove + Close) */
.kpi-plan__detail-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.kpi-plan__detail-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .2rem .65rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  color: #fff;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
  min-width: 5.5rem;
}
.kpi-plan__detail-remove:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .55);
}
.kpi-plan__detail-remove-confirm { display: none; }
.kpi-plan__detail-remove[data-armed="true"] {
  background: #c0392b;
  border-color: #c0392b;
  animation: kpiRemoveArmed 1.4s ease-in-out infinite alternate;
}
.kpi-plan__detail-remove[data-armed="true"] .kpi-plan__detail-remove-idle    { display: none; }
.kpi-plan__detail-remove[data-armed="true"] .kpi-plan__detail-remove-confirm { display: inline; }
@keyframes kpiRemoveArmed {
  from { box-shadow: 0 0 0 0 rgba(192, 57, 43, .35); }
  to   { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

/* ---- Section eyebrows (numbered, distinct identity) ------------------- */
.kpi-plan__section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4f61);
}
.kpi-plan__section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--c-azur-ink, #0a6c84);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.kpi-plan__section-label {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--c-ink, #0b1e2d);
}
.kpi-deck__empty {
  margin: auto 0;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--c-border, #d6e3ec);
  border-radius: 4px;
  background: linear-gradient(180deg, transparent, rgba(91, 224, 255, .04));
}
.kpi-deck__empty-headline {
  margin: 0 0 .35rem;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--c-ink-soft, #3a4f61);
}
.kpi-deck__empty-body {
  margin: 0 0 .9rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--c-ink-muted, #6b7c8c);
}
.kpi-deck__empty-arrow {
  color: var(--c-azur-ink, #0a6c84);
  font-weight: 700;
  letter-spacing: -.02em;
}
.kpi-deck__empty-sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem;
}
.kpi-deck__empty-sources li {
  display: inline-block;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .05rem .42rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .55;
}
.kpi-deck__empty-sources li[data-source="iris-plus"]  { color: #1f6e4c; }
.kpi-deck__empty-sources li[data-source="icma-slbp"]  { color: #1f4f95; }
.kpi-deck__empty-sources li[data-source="un-tier1"]   { color: #1f3a73; }
.kpi-deck__empty-sources li[data-source="azuros"]     { color: var(--c-ink, #0b1e2d); }

/* Custom-KPI accordion inside the deck */
.kpi-deck__custom-disclosure {
  border-top: 1px solid var(--c-border, #d6e3ec);
  background: var(--c-surface-2, #f3f6fa);
}
.kpi-deck__custom-summary {
  list-style: none;
  cursor: pointer;
  padding: .55rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--c-ink-soft, #3a4f61);
  text-align: center;
}
.kpi-deck__custom-summary::-webkit-details-marker { display: none; }
.kpi-deck__custom-disclosure[open] .kpi-deck__custom-summary {
  border-bottom: 1px solid var(--c-border, #d6e3ec);
}
.kpi-deck__custom-body { padding: .65rem .75rem .85rem; }
.kpi-deck__custom-body .kpi-editor__custom {
  /* Strip the v1 outer card chrome since the disclosure is the
     container now. */
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-left: none;
}
.kpi-deck__custom-body .kpi-editor__custom-head { display: none; }
.kpi-deck__custom-body .kpi-editor__custom-grid {
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}

/* Studio-style sticky action bar at the bottom of the viewport. Full
   width, lives OUTSIDE the deck so the primary Save action is
   anchored regardless of deck scroll. */
.kpi-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--c-border, #d6e3ec);
  box-shadow: 0 -4px 16px rgba(11, 30, 45, .07);
  padding: .65rem 1.25rem .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.kpi-action-bar__back {
  font-size: .85rem;
  text-decoration: none;
}
.kpi-action-bar__right {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.kpi-action-bar__skip {
  font-size: .85rem;
}
.kpi-action-bar__save {
  padding: .55rem 1.3rem;
  font-size: .92rem;
  font-weight: 700;
}

/* Card-fly animation -- a CSS-only clone class. The JS shim
   instantiates a fixed-position clone with this class on +Add. */
.kpi-card-fly {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 4px;
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1),
              opacity   .42s ease;
  will-change: transform, opacity;
}
.kpi-card-fly[data-flown="true"] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .kpi-card-fly { transition: none; opacity: 0; }
  .kpi-workshop__panel { animation: none; }
}

/* Mobile fallback: stack vertically. */
@media (max-width: 1080px) {
  .kpi-shell { grid-template-columns: 1fr; }
  .kpi-deck {
    position: relative;
    top: 0;
    max-height: none;
  }
  .kpi-deck__body { max-height: 60vh; }
}

/* ============================================================
   Impact Accountability Loop
   Account hub + proofs + milestones + global button variants.
   Tokens reused: --c-ink / --c-ink-soft / --c-ink-muted /
                  --c-surface / --c-border / --c-azur / --r-tear.
   ============================================================ */

/* Global button variants (admin.css scopes them to body[data-admin]; we
   add the same shapes for the public side so f/actions + .btn-link
   render consistently outside admin chrome). */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-ink-soft);
}
.btn-ghost:hover {
  border-color: var(--c-azur-ink);
  color: var(--c-azur-ink);
  background: var(--c-azur-wash);
}
.btn-link {
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-azur-ink);
  padding: 0.35rem 0.6rem;
}
.btn-link:hover { color: var(--c-azur); text-decoration: underline; }
.btn-small { padding: 0.35rem 0.75rem; font-size: 0.86rem; }

/* Wizard-step crumb row (Back · Review on the timeline step etc.) */
.wizard-step__crumbs {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 1.4rem;
  color: var(--c-ink-muted); font-size: 0.92rem;
}

/* ---------- Account hub ----------------------------------------- */

.account__intro { margin-bottom: 1.4rem; }
.account__intro h2 {
  margin: 0 0 0.35rem;
  font-size: 1.5rem; color: var(--c-ink);
}
.account__intro-sub { margin: 0; color: var(--c-ink-muted); font-size: 0.95rem; }

.account__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: 1.6rem;
}
@media (max-width: 760px) {
  .account__cards { grid-template-columns: 1fr; }
}
.account__card { padding: 1.3rem 1.4rem; }
.account__card-eyebrow {
  margin: 0; color: var(--c-ink-muted);
  font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account__card-title { margin: 0.2rem 0 0.9rem; font-size: 1.1rem; color: var(--c-ink); }

.account__prefs-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.account__prefs-list li {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0; color: var(--c-ink-soft);
}
.account__prefs-list li::before {
  content: ""; width: 0.7rem; height: 0.7rem; border-radius: 999px;
  background: var(--c-border); display: inline-block;
}
.account__prefs-list li[data-on="true"]::before { background: var(--c-azur); }

.account__recent { list-style: none; margin: 0 0 1rem; padding: 0; }
.account__recent-item {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--c-border);
}
.account__recent-item:last-child { border-bottom: 0; }
.account__recent-when { color: var(--c-ink-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.account__recent-what { color: var(--c-ink); }

.account__empty {
  color: var(--c-ink-muted);
  padding: 1rem 1.2rem;
  background: var(--c-surface-2);
  border-radius: var(--r-tear-sm);
}

.account__notif-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  align-items: start;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-border);
}
.account__notif-row:last-child { border-bottom: 0; }
.account__notif-row input[type="checkbox"] { margin-top: 0.25rem; }
.account__notif-row-body { display: grid; gap: 0.2rem; }
.account__notif-row-label { color: var(--c-ink); font-weight: 600; }
.account__notif-row-hint  { color: var(--c-ink-muted); font-size: 0.88rem; }

.account__activity { overflow-x: auto; }
.account__activity-table {
  width: 100%; border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear-sm);
}
.account__activity-table th,
.account__activity-table td {
  padding: 0.7rem 0.9rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}
.account__activity-table tr:last-child td { border-bottom: 0; }
.account__activity-table th {
  color: var(--c-ink-muted); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--c-surface-2);
}
.account__activity-when { color: var(--c-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.account__activity-note { color: var(--c-ink-muted); }

/* ---------- Status chips (proofs + milestones) ----------------- */

.proof-status,
.milestone-status {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--c-surface-2);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-border);
}
.proof-status[data-status="pending"],
.milestone-status[data-status="planned"]      { background: #fff7e6; color: #8a5a00; border-color: #f0d68a; }
.proof-status[data-status="more-info-requested"],
.milestone-status[data-status="in-progress"]  { background: #e7f5fa; color: var(--c-azur-ink); border-color: #bfe4ee; }
.proof-status[data-status="approved"],
.milestone-status[data-status="hit"]          { background: #e5f7ec; color: #18743a; border-color: #b6e2c3; }
.proof-status[data-status="rejected"],
.milestone-status[data-status="missed"]       { background: #fde7e9; color: #8a1f2b; border-color: #f1b7bf; }
.proof-status[data-status="superseded"],
.milestone-status[data-status="superseded"]   { background: var(--c-surface-2); color: var(--c-ink-muted); text-decoration: line-through; }

/* ---------- Proof cards (innovator list) ----------------------- */

.proof-list { display: grid; gap: 1rem; margin: 1.6rem 0; }
.proof-list__meta { color: var(--c-ink-muted); margin: 0 0 0.8rem; }

.proof-card { padding: 1.2rem 1.3rem; }
.proof-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-bottom: 0.4rem;
}
.proof-card__kind {
  margin: 0; color: var(--c-ink-muted);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.proof-card__title { margin: 0.2rem 0 0.4rem; font-size: 1.1rem; color: var(--c-ink); }
.proof-card__note  { color: var(--c-ink-soft); margin: 0 0 0.6rem; }
.proof-card__decision-note {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-azur);
  padding: 0.55rem 0.8rem; border-radius: var(--r-tear-sm);
  color: var(--c-ink); margin: 0.4rem 0;
}
.proof-card__meta { color: var(--c-ink-muted); font-size: 0.85rem; margin: 0.5rem 0 0; }
.proof-card__resubmit { margin-top: 0.8rem; }

.proof-files { list-style: none; margin: 0.4rem 0; padding: 0; }

/* Inline preview (video / image / audio) on the innovator-side
   proof card. Wraps the player in a soft frame so the row looks
   considered rather than like a raw <video> embed. Capped width
   so a 4K vertical phone video doesn't blow out the column. */
.proof-files__row[data-kind="video"],
.proof-files__row[data-kind="audio"],
.proof-files__row[data-kind="image"] {
  display: grid;
  gap: 0.55rem;
}
.proof-files__preview {
  display: block;
  width: 100%;
  max-width: 480px;
  max-height: 320px;
  border-radius: 4px;
  background: #0b1e2d;
  object-fit: contain;
}
.proof-files__preview-link {
  display: inline-block;
  line-height: 0;          /* kill the inline-baseline gap under the img */
}
.proof-files__line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.proof-files__row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--c-border);
}
.proof-files__row:last-child { border-bottom: 0; }
.proof-files__name { color: var(--c-azur-ink); }
.proof-files__meta { color: var(--c-ink-muted); font-size: 0.82rem; }

.proof-submit { margin-top: 1.6rem; }

/* Stepwise structure for the submit form. Three numbered sections
   (Describe / Attach / Confirm) so the form reads as a deliberate
   pipeline rather than a flat stack of fields. */
.proof-submit__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.proof-submit__step {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear-sm, 8px);
  padding: 1.1rem 1.25rem 1.25rem;
  position: relative;
}
.proof-submit__step-head {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent);
}
.proof-submit__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-azur);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof-submit__step-headings { min-width: 0; }
.proof-submit__step-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-azur-ink);
  line-height: 1.3;
}
.proof-submit__step-sub {
  margin: 0.2rem 0 0;
  color: var(--c-ink-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.proof-submit__step-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.proof-submit__step-body > .form-field { margin: 0; }

/* Step 3's attestation card already had a tinted background; inside
   a step container we want it to read as the step's primary input,
   so drop the redundant chrome. */
.proof-submit__step .proof-submit__attest {
  margin: 0;
  background: color-mix(in srgb, var(--c-azur) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-azur) 20%, transparent);
}

.proof-submit__attest {
  display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 0.7rem; background: var(--c-surface-2);
  border-radius: var(--r-tear-sm);
  color: var(--c-ink-soft); margin: 0.6rem 0 0;
}
.proof-submit__attest input { margin-top: 0.25rem; }

/* "Files OR URLs" pair: the two evidence inputs sit in a single
   bracketed panel with a soft divider so they read as the two halves
   of the same choice rather than two unrelated form fields. */
.proof-submit__evidence {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-tear-sm);
  background: color-mix(in srgb, var(--c-azur) 3%, #fff);
  margin: 0;
}
.proof-submit__or {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: 600;
}
.proof-submit__files input[type="file"],
.proof-submit__urls textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}
.proof-submit__urls textarea {
  resize: vertical;
  min-height: 4.2rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md, 8px);
  background: #fff;
}
.proof-upload-progress {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.proof-upload-progress[hidden] { display: none; }
.proof-upload-progress__track {
  width: 100%;
  height: 8px;
  background: var(--c-bg-muted, #eef1f5);
  border-radius: 999px;
  overflow: hidden;
}
.proof-upload-progress__bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--c-accent-teal, #1f9ea4) 0%,
    var(--c-accent-green, #5fb87a) 100%);
  transition: width 0.15s ease-out;
}
.proof-upload-progress__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
}
.proof-upload-progress__pct {
  font-weight: 600;
  color: var(--c-ink, #18242c);
  min-width: 3.5ch;
}
.proof-upload__error {
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--c-danger, #c0392b);
  border-radius: var(--r-md, 8px);
  background: #fdecea;
  color: var(--c-danger, #c0392b);
  font-size: 0.85rem;
}
.form-field__hint {
  color: var(--c-ink-muted);
  font-weight: 400;
  font-size: 0.82rem;
}

/* Snapshot provenance shown on each rendered file row: short sha,
   `from source` link when the file was fetched from a URL rather
   than direct-uploaded. Kept low-contrast so the row's primary
   payload (filename + size) stays the headline. */
.proof-files__hash,
.proof-files__source {
  color: var(--c-ink-muted);
  font-size: 0.78rem;
}
.proof-files__source a {
  color: var(--c-azur-ink);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* ---------- Proof list page (innovator-facing) ----------------- */
/* Mirrors the kpi-block vocabulary on the track page: one bounded
   outer card with a category-coloured banner at the top, two
   coloured inner sections underneath (green = existing proofs /
   history, teal = the new-submission form). Same visual grammar
   means the user reads the two surfaces as siblings. */

.proof-page {
  position: relative;
  background: var(--c-surface);
  border: 2px solid color-mix(in srgb, #0b1e2d 18%, var(--c-border));
  border-radius: var(--r-tear);
  box-shadow:
    0 1px 2px rgba(11,30,45,0.05),
    0 22px 44px -22px rgba(11,30,45,0.32);
  margin: 1.6rem 0 3rem;
}
.proof-page__crumbs {
  padding: 0.8rem 1.25rem 0;
  font-size: 0.9rem;
}
.proof-page__crumbs a {
  color: var(--c-azur-ink, #1d6a82);
  text-decoration: none;
}
.proof-page__crumbs a:hover { text-decoration: underline; }

/* --- Banner -- report context (the report we're attaching to) --- */
.proof-page__banner {
  margin: 0.7rem 1.1rem 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg,
                              color-mix(in srgb, #0b1e2d 6%, #fff) 0%,
                              color-mix(in srgb, #0b1e2d 2%, #fff) 100%);
  border: 1px solid color-mix(in srgb, #0b1e2d 14%, var(--c-border));
  border-left: 4px solid #0b1e2d;
  border-radius: var(--r-md, 10px);
}
.proof-page__banner-eyebrow {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}
.proof-page__banner-title {
  margin: 0.15rem 0 0.9rem;
  font-size: 1.18rem;
  color: var(--c-ink);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.proof-page__banner-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.4rem 1.6rem;
}
.proof-page__banner-meta > div { margin: 0; }
.proof-page__banner-meta dt {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.proof-page__banner-meta dd {
  margin: 0.1rem 0 0;
  color: var(--c-ink);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.proof-page__banner-meta dd [data-tone="approved"] { color: #3f7e44; }
.proof-page__banner-meta dd [data-tone="pending"]  { color: #bf8b2e; }
.proof-page__banner-meta dd [data-tone="muted"]    { color: var(--c-ink-muted); font-weight: 500; }

/* --- Inner sections (history + submit), same wash-and-rail
       pattern as the kpi-block. --- */
.proof-page__section {
  --section-accent: var(--c-azur);
  position: relative;
  margin: 0.9rem 1.1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--section-accent);
  border-radius: var(--r-md, 10px);
  background: color-mix(in srgb, var(--section-accent) 4%, #fff);
}
.proof-page__section--history { --section-accent: #3f7e44; }   /* green */
.proof-page__section--submit  { --section-accent: #3bb4d1; }   /* teal */

.proof-page__section-head { margin-bottom: 0.9rem; }
.proof-page__section-eyebrow {
  margin: 0;
  color: var(--section-accent);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.proof-page__section-sub {
  margin: 0.15rem 0 0;
  color: var(--c-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 70ch;
}

/* The proof list now sits as a `<ul>` for screen-reader semantics. */
.proof-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.proof-list__item { margin: 0; }

/* Within the green history section, each proof card gets a status-
   tinted accent rail on the left so the eye sorts approved /
   pending / rejected at a glance. */
.proof-card {
  --proof-accent: var(--c-ink-muted);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--proof-accent);
  background: #fff;
  border-radius: var(--r-md, 10px);
}
.proof-card[data-status="approved"]            { --proof-accent: #3f7e44; }
.proof-card[data-status="pending"]             { --proof-accent: #bf8b2e; }
.proof-card[data-status="more-info-requested"] { --proof-accent: #c25c7d; }
.proof-card[data-status="rejected"]            { --proof-accent: #b03a3a; }
.proof-card[data-status="superseded"]          { --proof-accent: var(--c-ink-muted); }

/* ---------- Admin proof detail --------------------------------- */

.admin-proofs__note { color: var(--c-ink-muted); font-size: 0.85rem; margin: 0.3rem 0 0; }
body[data-admin] .admin-proof-detail__section { margin-top: 1.2rem; padding: 1.1rem 1.2rem; }

.admin-proof-detail__file-grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.admin-proof-detail__file {
  margin: 0; padding: 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear-sm);
  background: var(--c-surface);
}
.admin-proof-detail__file img,
.admin-proof-detail__file video {
  display: block; width: 100%; height: auto; border-radius: 6px;
}
.admin-proof-detail__file-stub {
  padding: 0.8rem; background: var(--c-surface-2);
  border-radius: var(--r-tear-sm);
}
.admin-proof-detail__file-name { margin: 0; color: var(--c-ink); font-weight: 600; }
.admin-proof-detail__file-meta { margin: 0.2rem 0 0.6rem; color: var(--c-ink-muted); font-size: 0.82rem; }
.admin-proof-detail__file figcaption {
  color: var(--c-ink-muted); font-size: 0.82rem; margin-top: 0.4rem;
}
.admin-proof-detail__decision-actions {
  display: flex; gap: 0.7rem; flex-wrap: wrap;
}

/* ---------- Public project timeline ---------------------------- */

.project-timeline {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: grid; gap: 0.6rem;
}
.project-timeline__empty {
  color: var(--c-ink-muted);
  background: var(--c-surface-2);
  padding: 1rem; border-radius: var(--r-tear-sm);
}
.project-timeline__item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear-sm);
}
.project-timeline__when time {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: var(--c-azur-ink); font-weight: 600;
}
.project-timeline__body { display: grid; gap: 0.25rem; }
.project-timeline__title { margin: 0; font-weight: 600; color: var(--c-ink); }
.project-timeline__desc  { margin: 0; color: var(--c-ink-soft); }
.project-timeline__targets {
  list-style: none; margin: 0.3rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem;
  color: var(--c-ink-muted); font-size: 0.85rem;
}
.project-timeline__targets code {
  background: var(--c-surface-2); padding: 0.05rem 0.4rem; border-radius: 4px;
}

/* ---------- Milestone editor (wizard step) --------------------- */

.milestone-editor__list { display: grid; gap: 1rem; margin: 1rem 0; }
.milestone-editor__empty {
  color: var(--c-ink-muted);
  background: var(--c-surface-2);
  padding: 1rem; border-radius: var(--r-tear-sm);
}
.milestone-editor__row {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tear-sm);
  padding: 1rem 1.1rem;
}
.milestone-editor__row legend {
  padding: 0 0.4rem;
  color: var(--c-ink); font-weight: 600;
}
.milestone-editor__kpi-ref {
  background: var(--c-surface-2);
  border-radius: var(--r-tear-sm);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}
.milestone-editor__kpi-ref summary {
  cursor: pointer; color: var(--c-ink-soft);
}
.milestone-editor__kpi-ref ul {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: grid; gap: 0.3rem;
  color: var(--c-ink-muted); font-size: 0.88rem;
}
.milestone-editor__kpi-ref code {
  background: var(--c-surface); padding: 0.05rem 0.4rem; border-radius: 4px;
}

/* Milestone editor head + per-row controls -------------------------- */
.milestone-editor__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.9rem; margin: 1rem 0 0.6rem;
}
.milestone-editor__count {
  margin: 0; color: var(--c-ink-muted);
}
.milestone-editor__row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.5rem;
}
.milestone-editor__row-head legend {
  margin: 0; padding: 0;
  color: var(--c-ink); font-weight: 600;
}
.milestone-editor__remove {
  color: var(--c-ink-muted);
  padding: 0.2rem 0.5rem; font-size: 0.85rem;
}
.milestone-editor__remove:hover { color: #8a1f2b; }

/* ============================================================
   Track-progress page -- one bounded card per KPI with three
   inner sections (indicator / history / submit). Builds on the
   existing .impact-card category-colour token system but lays
   the three sections out flat so the user sees that they all
   belong to the same KPI without needing to scroll/scan.
   ============================================================ */

.kpi-block-list {
  display: grid;
  gap: 2.4rem;             /* generous gap so each card reads as its own block */
  margin: 1.4rem 0 3rem;
}

.kpi-block {
  /* Category palette redeclared locally. `.impact-card` and the
     wizard editor both inline the same set; the tokens live under
     `.kpi-editor` originally and don't cascade out into the track
     page's `.kpi-block-list`, so an unscoped `.kpi-block` would see
     `var(--kpi-cat-climate-energy)` resolve to nothing and the
     banner would render transparent on transparent. */
  --kpi-cat-climate-energy:   #d97a1a;
  --kpi-cat-marine:           #1f8aa3;
  --kpi-cat-biodiversity:     #4a8a3f;
  --kpi-cat-livelihoods:      #8d5a8a;
  --kpi-cat-gender-inclusion: #c25c7d;
  --kpi-cat-food-systems:     #b8862c;
  --kpi-cat-water:            #3d8bbf;
  --kpi-cat-innovation:       #4b5fad;
  --kpi-cat-governance:       #5a6c7a;
  --kpi-cat-default:          #6b7c8c;

  /* Default rail until `data-category` picks one of the tokens above. */
  --kpi-cat-color: var(--kpi-cat-default);

  position: relative;
  background: var(--c-surface);
  /* The outer frame has to read as the *parent* of the three inner
     sub-sections, which each carry their own coloured border. To
     win that contrast war the outer border is a stronger weight in
     the KPI's category accent (40% mix) rather than a faint
     hairline. */
  border: 2px solid color-mix(in srgb, var(--kpi-cat-color) 45%, var(--c-border));
  border-radius: var(--r-tear);
  /* Heavier shadow than a generic card so the outer frame visually
     parents the three smaller wash-and-rail sub-sections inside. */
  box-shadow:
    0 1px 2px rgba(11,30,45,0.05),
    0 22px 44px -22px rgba(11,30,45,0.32);
  /* No `overflow: hidden` here -- popovers inside (e.g. SPT chip,
     source-info) need to escape the card. The banner rounds its own
     top corners (see `.kpi-block__banner` below) so the solid colour
     still hugs the card's border-radius. */
}

/* --- Banner (KPI identity, sits above the three sub-sections) --- */

.kpi-block__banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  /* Solid band in the category accent. The text contrast switches
     to white so the banner reads unambiguously as the parent
     header for everything below. */
  background: var(--kpi-cat-color);
  color: #fff;
  border-bottom: 3px solid color-mix(in srgb, var(--kpi-cat-color) 70%, #000);
  /* Hugs the outer card's rounded top corners. The card itself no
     longer clips via `overflow: hidden` (so popovers can escape),
     which means the banner has to round its own corners to keep
     the solid colour from spilling past the card edge. The card's
     `border` is 2px so we shave that off here. */
  border-top-left-radius:  calc(var(--r-tear) - 2px);
  border-top-right-radius: calc(var(--r-tear) - 2px);
}
.kpi-block__banner-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.kpi-block__banner-eyebrow {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.7rem; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 700;
}
.kpi-block__banner-name {
  margin: 0;
  color: #fff;
  font-size: 1.18rem; font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.kpi-block__banner-badges {
  display: flex; align-items: center; gap: 0.5rem;
}
/* The SPT chip (rendered as .impact-card__spt) ships with a dark
   default background; against the coloured banner we want it to
   read with a light border + transparent fill so the colour stays
   coherent. */
.kpi-block__banner-badges .impact-card__spt {
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.18);
  color: #fff;
}
.kpi-block[data-category="climate-energy"]   { --kpi-cat-color: var(--kpi-cat-climate-energy); }
.kpi-block[data-category="marine"]           { --kpi-cat-color: var(--kpi-cat-marine); }
.kpi-block[data-category="biodiversity"]     { --kpi-cat-color: var(--kpi-cat-biodiversity); }
.kpi-block[data-category="livelihoods"]      { --kpi-cat-color: var(--kpi-cat-livelihoods); }
.kpi-block[data-category="gender-inclusion"] { --kpi-cat-color: var(--kpi-cat-gender-inclusion); }
.kpi-block[data-category="food-systems"]     { --kpi-cat-color: var(--kpi-cat-food-systems); }
.kpi-block[data-category="water"]            { --kpi-cat-color: var(--kpi-cat-water); }
.kpi-block[data-category="innovation"]       { --kpi-cat-color: var(--kpi-cat-innovation); }
.kpi-block[data-category="governance"]       { --kpi-cat-color: var(--kpi-cat-governance); }

/* Inner sections each get a wash + left rail + coloured eyebrow,
   mirroring the wizard step's coloured-bracket pattern (see
   `.wizard__step form.azuros-form fieldset`). Three accents are
   assigned by role (NOT by sibling order) so the page reads
   consistently across KPIs regardless of which sections are
   present:

     indicator -> amber  (the headline / what this metric is)
     history   -> green  (what has happened)
     submit    -> teal   (what's next -- new reading)

   The outer .kpi-block category rail still carries the KPI's
   identity colour; these inner rails distinguish the three roles
   within each card. */

.kpi-block__indicator,
.kpi-block__section {
  --section-accent: var(--c-azur);
  position: relative;
  margin: 0.9rem 1.1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--section-accent);
  border-radius: var(--r-md, 10px);
  background: color-mix(in srgb, var(--section-accent) 4%, #fff);
}
.kpi-block__indicator { --section-accent: #bf8b2e; }   /* amber */
.kpi-block__section.kpi-block__history-section { --section-accent: #3f7e44; } /* green */
.kpi-block__submit { --section-accent: #3bb4d1; }      /* teal */

/* ---- Section A: indicator header ---------------------------- */

.kpi-block__indicator-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem;
}
.kpi-block__category {
  margin: 0;
  color: var(--section-accent);
  font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
}
.kpi-block__name {
  margin: 0.3rem 0 0.2rem;
  color: var(--c-ink);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.kpi-block__desc {
  margin: 0 0 1rem;
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  max-width: 64ch;
}
.kpi-block__numbers {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0;
  border-top: 1px solid color-mix(in srgb, var(--section-accent) 24%, var(--c-border));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 1.4rem;
}
.kpi-block__num { margin: 0; }
.kpi-block__num dt {
  color: var(--c-ink-muted);
  font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
  margin-bottom: 0.2rem;
}
.kpi-block__num dd {
  margin: 0;
  font-size: 1.55rem; font-weight: 700;
  color: var(--c-ink);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi-block__num--current dd {
  /* "Current" is the headline. Use the KPI's category accent so
     the colour ties the row back to the outer category rail,
     instead of bleeding into the section's amber wash. */
  color: var(--kpi-cat-color);
}
.kpi-block__unit {
  font-size: 0.85rem; font-weight: 500;
  color: var(--c-ink-muted);
  margin-left: 0.35rem;
  letter-spacing: 0;
}
.kpi-block__chart { margin: 0.6rem 0 0.8rem; }

/* ---- Inner-section eyebrows (history + submit) -------------- */

.kpi-block__section-head {
  margin-bottom: 0.7rem;
}
.kpi-block__section-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
}
.kpi-block__section-eyebrow {
  margin: 0;
  color: var(--section-accent);
  font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
}
.kpi-block__section-sub {
  margin: 0.15rem 0 0;
  color: var(--c-ink-muted);
  font-size: 0.88rem;
}

/* ---- History sub-block -------------------------------------- */

.kpi-block__history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.kpi-block__history-table th,
.kpi-block__history-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.kpi-block__history-table th {
  color: var(--c-ink-muted);
  font-size: 0.74rem; letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 600;
}
.kpi-block__history-table tr:last-child td { border-bottom: 0; }
.kpi-block__history-table td.kpi-block__history-value,
.kpi-block__history-table th.kpi-block__history-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kpi-block__history-period {
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.kpi-block__history-link {
  font-size: 0.85rem;
  color: var(--c-azur-ink);
  text-decoration: none;
  white-space: nowrap;
}
.kpi-block__history-link:hover { text-decoration: underline; }

/* Proof-state chip in the History table's Proofs column. The
   tone-coloured variant lets the innovator's eye land on rows that
   still owe the reviewer something (pending / more-info-requested)
   without scanning every row. Same palette as the proof-card rails
   on the proofs page. */
.kpi-block__history-proof-empty { color: var(--c-ink-muted); }
.kpi-block__history-proof {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-ink);
}
.kpi-block__history-proof[data-tone="approved"]  { color: #3f7e44; }
.kpi-block__history-proof[data-tone="pending"]   { color: #bf8b2e; }
.kpi-block__history-proof[data-tone="more-info"] { color: #c25c7d; }
.kpi-block__evidence {
  display: flex; align-items: center; gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0;
}
.kpi-block__evidence-hint {
  color: var(--c-ink-muted);
  font-size: 0.86rem;
}

/* ---- Submit sub-block --------------------------------------- */

.kpi-block__submit {
  background: var(--c-surface-2);
}
.kpi-block__submit .impact-submit {
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
}

/* ---- Empty state -------------------------------------------- */

.kpi-block__empty {
  padding: 2rem 1.5rem;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-tear);
  text-align: center;
}
.kpi-block__empty h2 { margin: 0 0 0.4rem; }
.kpi-block__empty p { color: var(--c-ink-soft); max-width: 56ch; margin: 0.4rem auto; }

/* ============================================================
 * Pivot 1 — institutional voice
 *
 * Activated by the PRESENCE of institutional content in the
 * page -- `body:has(.section--inst)` triggers when the page
 * contains the institutional section element. No class flag,
 * no JS, no server / client synchronization layer. The
 * institutional CSS variant simply responds to what's in the
 * page; HTMX's standard `<main>` swap carries that content in
 * and out, and the variant engages/disengages in the same
 * paint frame.
 *
 * History: this used to key on `body.inst` and required a
 * sync layer (JS listener + server-emitted class) to keep the
 * body class in step with the URL across HTMX swaps. That
 * synchronization was a bug source -- CSP blocked the inline
 * sync script silently, stale body classes bled marketing
 * chrome with institutional CSS, etc. Moving to a content-
 * driven trigger eliminates the entire class of bug.
 *
 * See docs/compliance/institutional-gap-analysis.md (G-19).
 * ============================================================ */

body:has(.section--inst) {
  --inst-ink:        #0e1820;
  --inst-ink-soft:   #475360;
  --inst-ink-muted:  #76828f;
  --inst-bg:         #fafbfc;
  --inst-surface:    #ffffff;
  --inst-border:     #d8dee5;
  --inst-border-soft:#edf0f3;
  --inst-accent:     #1a3e6f;   /* navy   -- institutional anchor */
  --inst-accent-2:   #1f6fab;   /* link / cool blue */
  --inst-teal:       #047876;   /* seagrass blue-green -- "blue economy" */
  --inst-positive:   #1b6a48;   /* kelp green -- live / accepted */
  --inst-warning:    #a35e00;   /* amber -- pending / in-process */
  --inst-danger:     #a02929;   /* coral -- defaulted */
  --inst-sand:       #92580e;   /* warm earth -- coastal */

  background: var(--inst-bg);
  color: var(--inst-ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  font-size: 15px;
  line-height: 1.45;
}

body:has(.section--inst) .hero,
body:has(.section--inst) .hero--sub { display: none; }

body:has(.section--inst) .section--inst { padding: 2.5rem 0 4rem; }

body:has(.section--inst) .container { max-width: 1180px; }

body:has(.section--inst) .inst-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inst-accent);
  font-weight: 600;
  margin: 0 0 0.4rem;
}

body:has(.section--inst) .inst-page__head {
  border-bottom: 1px solid var(--inst-border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
body:has(.section--inst) .inst-page__title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--inst-ink);
}
body:has(.section--inst) .inst-page__lede,
body:has(.section--inst) .inst-page__sub {
  color: var(--inst-ink-soft);
  font-size: 0.95rem;
  max-width: 72ch;
  margin: 0;
}

/* (The .inst-page__head--detail base rule originally lived here
 * with a single-column grid. It's been superseded by the Pivot
 * 1.1 version further down that adds the brand stripe + two-
 * column shell + key-facts sidecar. Kept the comment as a
 * breadcrumb for the next reader.) */
body:has(.section--inst) .inst-page__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0 1.5rem;
  margin: 1rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--inst-border-soft);
}
body:has(.section--inst) .inst-page__metrics > div { display: flex; flex-direction: column; gap: 0.1rem; }
body:has(.section--inst) .inst-page__metrics dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inst-ink-muted);
  font-weight: 500;
}
body:has(.section--inst) .inst-page__metrics dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--inst-ink);
}

body:has(.section--inst) .inst-crumbs { font-size: 0.85rem; margin-bottom: 1rem; }
body:has(.section--inst) .inst-crumbs a { color: var(--inst-accent-2); text-decoration: none; }
body:has(.section--inst) .inst-crumbs a:hover { text-decoration: underline; }

body:has(.section--inst) .inst-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--inst-border);
  border-radius: 6px;
  background: var(--inst-surface);
}
body:has(.section--inst) .inst-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
body:has(.section--inst) .inst-table th {
  /* Bloomberg-leaning: dense header strip with visible fill +
   * crisp rule underneath. Reads as a clear structural band that
   * anchors the column. Light-mode equivalent of the navy
   * terminal header. */
  background: color-mix(in srgb, var(--inst-accent) 6%, #fff);
  color: var(--inst-ink);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 2px solid var(--inst-accent);
  white-space: nowrap;
  vertical-align: bottom;
}
body:has(.section--inst) .inst-table td {
  padding: 0.55rem 0.85rem;
  /* Bloomberg: keep a clear row rule -- not subtle. The rule
   * delineates rows as discrete records (terminal idiom). */
  border-bottom: 1px solid var(--inst-border-soft);
  vertical-align: middle;
  line-height: 1.4;
}
body:has(.section--inst) .inst-table tr:last-child td { border-bottom: 0; }
body:has(.section--inst) .inst-table--compact td { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
/* `.inst-num` on a th or td. Specificity beats `body:has(.section--inst) .inst-table th`
 * + `body:has(.section--inst) .inst-table td` so numeric columns get the right-align
 * + tabular numerals treatment all the way to the header. Was a quiet
 * Tufte violation before: PRINCIPAL / COUPON labels left-aligned in
 * their cell while the values under them were flushed right -- header
 * and value didn't share a baseline column. */
body:has(.section--inst) .inst-table th.inst-num,
body:has(.section--inst) .inst-table td.inst-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body:has(.section--inst) .inst-row__title { font-weight: 500; color: var(--inst-ink); }
body:has(.section--inst) .inst-row__title a { color: var(--inst-accent); text-decoration: none; }
body:has(.section--inst) .inst-row__title a:hover { text-decoration: underline; }
body:has(.section--inst) .inst-row__sub {
  margin: 0.1rem 0 0;
  color: var(--inst-ink-muted);
  font-size: 0.78rem;
}
body:has(.section--inst) .inst-row__note {
  color: var(--inst-ink-soft);
  font-size: 0.82rem;
  max-width: 28ch;
}

body:has(.section--inst) .inst-chip {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--inst-border);
  background: #f6f7f9;
  color: var(--inst-ink-soft);
}
body:has(.section--inst) .inst-chip[data-status="live"],
body:has(.section--inst) .inst-chip[data-status="issued"],
body:has(.section--inst) .inst-chip[data-status="priced"] {
  background: #e8f1ea;
  border-color: #b8d6c1;
  color: var(--inst-positive);
}
body:has(.section--inst) .inst-chip[data-status="consultation"],
body:has(.section--inst) .inst-chip[data-status="ready-for-issuance"],
body:has(.section--inst) .inst-chip[data-status="roadshow"],
body:has(.section--inst) .inst-chip[data-status="marketing"] {
  background: #fcf3e0;
  border-color: #e7d4a4;
  color: var(--inst-warning);
}
body:has(.section--inst) .inst-chip[data-status="defaulted"] {
  background: #f7e3e3;
  border-color: #d7a8a8;
  color: var(--inst-danger);
}

body:has(.section--inst) .inst-card {
  background: var(--inst-surface);
  border: 1px solid var(--inst-border);
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}
body:has(.section--inst) .inst-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--inst-border-soft);
  margin-bottom: 1rem;
}
@media (min-width: 720px) {
  body:has(.section--inst) .inst-card__head {
    grid-template-columns: minmax(0, 1fr) auto;
    /* Vertically centre the left (title + sub) against the right
     * (metric grid). With `align-items: end` the title sat at
     * the top of the metric stack which left the metric labels
     * floating above and the issue/maturity row floating below
     * the title -- no visual anchor between left and right.
     * Centering aligns the title's vertical midpoint with the
     * metric block's midpoint so the two columns read as paired. */
    align-items: center;
  }
}
body:has(.section--inst) .inst-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body:has(.section--inst) .inst-card__series {
  font-weight: 400;
  color: var(--inst-ink-muted);
  font-size: 0.95rem;
}
body:has(.section--inst) .inst-card__sub {
  margin: 0.25rem 0 0;
  color: var(--inst-ink-muted);
  font-size: 0.82rem;
}
body:has(.section--inst) .inst-card__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(5.5rem, auto));
  gap: 0.2rem 1rem;
  margin: 0;
}
body:has(.section--inst) .inst-card__metrics > div { display: flex; flex-direction: column; }
body:has(.section--inst) .inst-card__metrics dt {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inst-ink-muted);
  font-weight: 500;
}
body:has(.section--inst) .inst-card__metrics dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body:has(.section--inst) .inst-card__body { margin: 0 0 1rem; color: var(--inst-ink-soft); }
body:has(.section--inst) .inst-card__section { margin-top: 1.25rem; }
body:has(.section--inst) .inst-card__section-title {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inst-ink-muted);
  font-weight: 600;
}
body:has(.section--inst) .inst-card__footnote {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--inst-ink-muted);
}
body:has(.section--inst) .inst-card__footnote code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f4f6f9;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
}

body:has(.section--inst) .inst-section { margin-top: 2rem; }
body:has(.section--inst) .inst-section__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
  color: var(--inst-ink);
}
body:has(.section--inst) .inst-section__body { color: var(--inst-ink-soft); max-width: 76ch; }

body:has(.section--inst) .inst-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--inst-ink-soft);
  font-variant-numeric: tabular-nums;
}
body:has(.section--inst) .inst-link-list li { margin: 0.15rem 0; }
body:has(.section--inst) .inst-link-list a { color: var(--inst-accent); text-decoration: none; }
body:has(.section--inst) .inst-link-list a:hover { text-decoration: underline; }

body:has(.section--inst) .inst-empty {
  background: var(--inst-surface);
  border: 1px dashed var(--inst-border);
  border-radius: 6px;
  padding: 1.6rem;
  color: var(--inst-ink-soft);
}
body:has(.section--inst) .inst-empty p { margin: 0.3rem 0; }

body:has(.section--inst) .inst-muted { color: var(--inst-ink-muted); font-size: 0.85rem; }
body:has(.section--inst) .inst-link { color: var(--inst-accent-2); font-size: 0.88rem; }
body:has(.section--inst) .inst-card-list { margin-top: 0.5rem; }

/* ============================================================
 * Pivot 1.1 — institutional surface, chromatic + structural pass
 *
 * Restrained colour applied where it earns its keep:
 *  - Programme detail head: blue-economy gradient bar above the
 *    title; metrics strip floats on a tinted surface with per-
 *    metric top-accent.
 *  - Section titles get a 3px navy underline rule (FT/Bloomberg
 *    "section-divider" idiom).
 *  - Issuance card: left accent stripe coloured by coupon
 *    mechanism (fixed vs impact-linked).
 *  - Chips: instrument-class, token-standard, chain, seniority,
 *    bucket-category all get semantic palettes so the page
 *    scans by colour without losing the institutional weight.
 *  - Tranche rows: thin left accent per seniority class.
 *  - Programme banner-strip: thin navy/teal gradient at the
 *    very top of the page so the brand colour reads above the
 *    fold without taking real estate.
 * ============================================================ */

/* (Top brand stripe is composited into the head card's stacked
 * background below; see .inst-page__head--detail.) */

/* ---- Section titles --------------------------------------- */
body:has(.section--inst) .inst-section { margin-top: 2.4rem; }
body:has(.section--inst) .inst-section__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
  color: var(--inst-ink);
  padding-bottom: 0.5rem;
  position: relative;
  display: inline-block;
}
body:has(.section--inst) .inst-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
              var(--inst-accent) 0%,
              var(--inst-teal) 100%);
  border-radius: 2px;
}

/* ---- Programme detail head — metrics strip ---------------- */
body:has(.section--inst) .inst-page__head--detail {
  background:
    linear-gradient(90deg,
      var(--inst-accent)   0%,
      var(--inst-accent-2) 38%,
      var(--inst-teal)     100%) top left / 100% 8px no-repeat,
    linear-gradient(180deg,
      color-mix(in srgb, var(--inst-accent) 5%, #fff) 0%,
      #fff 100%);
  border: 1px solid var(--inst-border-soft);
  border-radius: 8px;
  /* Right padding deliberately zero -- the keyfacts sidecar
   * sits flush against the card's right edge (matches the
   * gradient stripe's right edge above). The negative-margin
   * trick was Chromium-only; removing the padding here is the
   * robust cross-browser fix. */
  padding: 1.8rem 0 1.2rem 1.8rem;
  box-shadow: 0 2px 6px rgba(14, 24, 32, 0.04),
              0 1px 2px rgba(14, 24, 32, 0.03);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
  /* No column gap -- the sidecar has its own internal padding
   * which provides visual breathing room from the left-column
   * content. */
  gap: 1.5rem 0;
  align-items: start;
}
body:has(.section--inst) .inst-page__head__main {
  /* Wrapper around the left-column content (eyebrow + title +
   * sub + metrics) so they pack tightly from the top instead
   * of being distributed across the height of the taller
   * sidecar column. */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  /* The head card's outer right padding is zero (so the sidecar
   * reaches the right edge); restore inner breathing room for
   * the left-column content here. */
  padding-right: 2rem;
}
body:has(.section--inst) .inst-page__head__main .inst-page__metrics {
  margin-top: 1.2rem;
}
@media (max-width: 820px) {
  body:has(.section--inst) .inst-page__head--detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Key-facts sidecar (right column of head card) --------- */
body:has(.section--inst) .inst-keyfacts {
  grid-column: 2;
  align-self: start;
  background: #fff;
  border: 1px solid var(--inst-border-soft);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  /* Right padding deliberately zero -- the value text inside is
   * right-aligned (see .inst-keyfacts__list dd below), so the
   * visible text edge sits at the sidecar's right edge, which
   * sits at the head card's right edge, which is where the top
   * brand-stripe gradient ends. That's the actual "flush" the
   * brief asks for: the data text aligns with the gradient,
   * not just an invisible container. */
  padding: 0.9rem 0 0.9rem 1rem;
  font-size: 0.85rem;
  box-shadow: inset 3px 0 0 var(--inst-accent);
  justify-self: stretch;
}
body:has(.section--inst) .inst-keyfacts__title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inst-ink-muted);
  font-weight: 600;
}
body:has(.section--inst) .inst-keyfacts__list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.8rem;
  /* Align dt and dd to a shared baseline so the label and value
   * sit on the same horizontal line. Without this, rows where
   * the value contains a chip / icon / wrapped text drift up or
   * down relative to the label. */
  align-items: baseline;
}
body:has(.section--inst) .inst-keyfacts__list dt {
  color: var(--inst-ink-muted);
  font-size: 0.78rem;
  font-weight: 500;
}
body:has(.section--inst) .inst-keyfacts__list dd {
  margin: 0;
  color: var(--inst-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  /* Right-align values so their visible right edge sits at the
   * sidecar's right (= head card's right = gradient stripe's
   * right). The dt labels stay left-aligned in the max-content
   * column; the dd values stretch into the 1fr column and
   * flush right. */
  text-align: right;
}
body:has(.section--inst) .inst-keyfacts__list dd a {
  color: var(--inst-accent-2);
  text-decoration: none;
}
body:has(.section--inst) .inst-keyfacts__list dd a:hover { text-decoration: underline; }
body:has(.section--inst) .inst-keyfacts__check {
  /* Flat check: a green ✓ glyph + no chrome around it. The
   * previous filled-circle treatment read SaaS-startup rather
   * than institutional; the bare green tick keeps the
   * affirmative cue without the chrome. */
  color: var(--inst-positive);
  font-weight: 700;
  margin-right: 0.2rem;
}

/* ---- Document-weight shadow on issuance cards --------------- */
body:has(.section--inst) .inst-card {
  box-shadow: 0 2px 6px rgba(14, 24, 32, 0.04),
              0 1px 2px rgba(14, 24, 32, 0.03);
}

/* ---- Table row banding + hover (Bloomberg-style) ----------- *
 * Zebra striping is THE terminal-table idiom. Keep it visible
 * enough to scan a wide cap-table without losing the row, but
 * subtle enough that the data is still the primary signal. */
body:has(.section--inst) .inst-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--inst-accent) 3%, #fff);
}
body:has(.section--inst) .inst-table tbody tr:hover td {
  background: color-mix(in srgb, var(--inst-accent-2) 8%, #fff);
}

/* ---- Sticky breadcrumb on scroll --------------------------- */
body:has(.section--inst) .inst-crumbs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--inst-bg) 92%, #fff);
  backdrop-filter: saturate(160%) blur(6px);
  padding: 0.6rem 0;
  margin: 0 -0.5rem 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
body:has(.section--inst) .inst-crumbs:where(.is-stuck, [data-stuck="true"]) {
  border-bottom-color: var(--inst-border-soft);
}

/* ---- Section title with icon affordance -------------------- */
body:has(.section--inst) .inst-section__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body:has(.section--inst) .inst-section__title .bi {
  color: var(--inst-accent);
  font-size: 0.92em;
}

/* ---- Documents footer section ------------------------------ */
body:has(.section--inst) .inst-documents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 0.8rem;
  margin-top: 0.5rem;
}
body:has(.section--inst) .inst-document {
  background: #fff;
  border: 1px solid var(--inst-border-soft);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.5rem;
  align-items: start;
  box-shadow: 0 1px 2px rgba(14, 24, 32, 0.03);
}
body:has(.section--inst) .inst-document__icon {
  color: var(--inst-accent);
  font-size: 1.1rem;
  line-height: 1.3;
}
body:has(.section--inst) .inst-document__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--inst-ink);
}
body:has(.section--inst) .inst-document__title a {
  color: var(--inst-accent-2);
  text-decoration: none;
}
body:has(.section--inst) .inst-document__title a:hover { text-decoration: underline; }
body:has(.section--inst) .inst-document__meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--inst-ink-muted);
}
body:has(.section--inst) .inst-document[data-state="pending"] .inst-document__icon {
  color: var(--inst-ink-muted);
}
body:has(.section--inst) .inst-page__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 1.1rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--inst-border-soft);
}
body:has(.section--inst) .inst-page__metrics > div {
  position: relative;
  padding-top: 0.4rem;
}
body:has(.section--inst) .inst-page__metrics > div::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1.8rem;
  height: 2px;
  background: var(--inst-accent);
  border-radius: 2px;
}
body:has(.section--inst) .inst-page__metrics > div:nth-child(1)::before { background: var(--inst-accent); }
body:has(.section--inst) .inst-page__metrics > div:nth-child(2)::before { background: var(--inst-warning); }
body:has(.section--inst) .inst-page__metrics > div:nth-child(3)::before { background: var(--inst-teal); }
body:has(.section--inst) .inst-page__metrics > div:nth-child(4)::before { background: var(--inst-positive); }
body:has(.section--inst) .inst-page__metrics > div:nth-child(5)::before { background: var(--inst-accent-2); }

/* ---- Chips: token/chain/instrument-class -------------------- */
body:has(.section--inst) .inst-tag {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--inst-border);
  background: #fff;
  color: var(--inst-ink-soft);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  white-space: nowrap;
}
body:has(.section--inst) .inst-tag--instrument {
  background: color-mix(in srgb, var(--inst-teal) 10%, #fff);
  border-color: color-mix(in srgb, var(--inst-teal) 35%, #fff);
  color: var(--inst-teal);
}
body:has(.section--inst) .inst-tag--token {
  background: color-mix(in srgb, var(--inst-accent) 8%, #fff);
  border-color: color-mix(in srgb, var(--inst-accent) 30%, #fff);
  color: var(--inst-accent);
}
body:has(.section--inst) .inst-tag--chain {
  background: color-mix(in srgb, var(--inst-accent-2) 10%, #fff);
  border-color: color-mix(in srgb, var(--inst-accent-2) 30%, #fff);
  color: var(--inst-accent-2);
}

/* ---- Issuance card: left accent stripe by mechanism --------- */
body:has(.section--inst) .inst-card {
  position: relative;
  overflow: hidden;
}
body:has(.section--inst) .inst-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--inst-accent);
}
body:has(.section--inst) .inst-card[data-mechanism="impact-linked"]::before { background: var(--inst-teal); }
body:has(.section--inst) .inst-card[data-mechanism="floating"]::before      { background: var(--inst-warning); }
body:has(.section--inst) .inst-card[data-mechanism="step-up"]::before       { background: var(--inst-warning); }

/* ---- Tranche rows: seniority left-stripe ------------------- */
body:has(.section--inst) .inst-tranche-row td:first-child {
  position: relative;
  padding-left: 1rem;
}
body:has(.section--inst) .inst-tranche-row td:first-child::before {
  content: "";
  position: absolute;
  top: 0.6rem; bottom: 0.6rem; left: 0;
  width: 3px;
  background: var(--inst-ink-muted);
  border-radius: 2px;
}
body:has(.section--inst) .inst-tranche-row[data-seniority="senior"]      td:first-child::before { background: var(--inst-accent); }
body:has(.section--inst) .inst-tranche-row[data-seniority="mezzanine"]   td:first-child::before { background: var(--inst-warning); }
body:has(.section--inst) .inst-tranche-row[data-seniority="subordinate"] td:first-child::before { background: var(--inst-teal); }
body:has(.section--inst) .inst-tranche-row[data-seniority="equity"]      td:first-child::before { background: var(--inst-positive); }

/* ---- Use-of-proceeds bucket: category chip ----------------- */
body:has(.section--inst) .inst-bucket-tag {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  border: 1px solid transparent;
  text-transform: capitalize;
  white-space: nowrap;
}
body:has(.section--inst) .inst-bucket-tag[data-category="marine-protection"] {
  background: color-mix(in srgb, var(--inst-teal) 12%, #fff);
  border-color: color-mix(in srgb, var(--inst-teal) 35%, #fff);
  color: var(--inst-teal);
}
body:has(.section--inst) .inst-bucket-tag[data-category="renewable-energy"] {
  background: color-mix(in srgb, var(--inst-warning) 12%, #fff);
  border-color: color-mix(in srgb, var(--inst-warning) 35%, #fff);
  color: var(--inst-warning);
}
body:has(.section--inst) .inst-bucket-tag[data-category="coastal-resilience"] {
  background: color-mix(in srgb, var(--inst-sand) 12%, #fff);
  border-color: color-mix(in srgb, var(--inst-sand) 35%, #fff);
  color: var(--inst-sand);
}
body:has(.section--inst) .inst-bucket-tag[data-category="blue-economy"] {
  background: color-mix(in srgb, var(--inst-accent) 10%, #fff);
  border-color: color-mix(in srgb, var(--inst-accent) 35%, #fff);
  color: var(--inst-accent);
}
body:has(.section--inst) .inst-bucket-tag[data-category="other"] {
  background: #f6f7f9;
  border-color: var(--inst-border);
  color: var(--inst-ink-soft);
}

/* ---- Card head bg + mechanism note -------------------------- */
body:has(.section--inst) .inst-card__head {
  padding-top: 0.2rem;
}
body:has(.section--inst) .inst-card__metrics dd { color: var(--inst-ink); }
body:has(.section--inst) .inst-card__metrics .inst-tag { font-size: 0.68rem; }

/* ---- Section eyebrow on detail head ------------------------- */
body:has(.section--inst) .inst-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body:has(.section--inst) .inst-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--inst-accent);
  border-radius: 2px;
}

/* ---- Admin KYC queue chrome (G-04) --------------------------- */
.kyc-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid #d8dee5;
  background: #f4f6f9;
  color: #475360;
  white-space: nowrap;
}
.kyc-pill[data-kyc-level="identified"] { background: #e7f0f7; color: #1f4d7a; border-color: #b6cce0; }
.kyc-pill[data-kyc-level="verified"]   { background: #e8f1ea; color: #1b6a48; border-color: #b8d6c1; }
.kyc-pill[data-kyc-level="accredited"] { background: #f3eaf6; color: #5b2a78; border-color: #cbb5db; }

.kyc-row-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.kyc-row-form__fields {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(7rem, auto) 1fr;
  gap: 0.4rem;
  width: 100%;
}
.kyc-row-form .form-actions { margin: 0.2rem 0 0; }

/* ---- Institutional CTA section (G-03 discoverability) ------- */
/* Lives on the marketing pages (/, /investors). Uses the
   institutional voice -- tabular numerals, navy palette, dense
   typography -- to telegraph the surface it links into without
   forcing the visitor to click through. */
.section--institutional {
  padding: 3rem 0;
  background: linear-gradient(180deg, #f4f6f9 0%, #ffffff 100%);
}
.institutional-card {
  background: #ffffff;
  border: 1px solid #d8dee5;
  border-radius: 10px;
  padding: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
@media (max-width: 820px) {
  .institutional-card { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
}
.institutional-card__eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a3e6f;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.institutional-card__title {
  margin: 0 0 0.65rem;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0e1820;
  line-height: 1.2;
  font-family: "Inter", system-ui, sans-serif;
}
.institutional-card__lede {
  margin: 0 0 1rem;
  color: #475360;
  font-size: 0.98rem;
  max-width: 60ch;
}
.institutional-card__points {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.institutional-card__points li {
  font-size: 0.92rem;
  color: #475360;
  padding-left: 1.25rem;
  position: relative;
}
.institutional-card__points li::before {
  content: "▸";
  color: #1a3e6f;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.85rem;
}
.institutional-card__points strong { color: #0e1820; }
.institutional-card__cta {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.institutional-card__link {
  color: #1a3e6f;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px dotted #b6cce0;
}
.institutional-card__link:hover { border-bottom-style: solid; }
.institutional-card__sidecar {
  background: #fafbfc;
  border-left: 3px solid #1a3e6f;
  padding: 1.1rem 1.25rem;
  border-radius: 0 6px 6px 0;
  align-self: start;
}
.institutional-card__sidecar-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #76828f;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.institutional-card__list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.institutional-card__list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.institutional-card__list a {
  color: #1a3e6f;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.93rem;
}
.institutional-card__list a:hover { text-decoration: underline; }
.institutional-card__list-meta {
  color: #76828f;
  font-size: 0.78rem;
}
.institutional-card__sidecar-foot {
  margin: 0;
  font-size: 0.85rem;
}
.institutional-card__sidecar-foot a {
  color: #1f6fab;
  text-decoration: none;
}
.institutional-card__sidecar-foot a:hover { text-decoration: underline; }

/* ---- Public attestor directory (institutional voice) ------- */
body:has(.section--inst) .attestor-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
body:has(.section--inst) .attestor-card {
  background: #fff;
  border: 1px solid var(--inst-border-soft);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 2px 6px rgba(14, 24, 32, 0.04),
              0 1px 2px rgba(14, 24, 32, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
body:has(.section--inst) .attestor-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--inst-border-soft);
}
body:has(.section--inst) .attestor-card__name {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--inst-ink);
}
body:has(.section--inst) .attestor-card__meta {
  margin: 0;
  color: var(--inst-ink-muted);
  font-size: 0.85rem;
  text-transform: capitalize;
}
body:has(.section--inst) .attestor-card__scope-title,
body:has(.section--inst) .attestor-card__coi-title {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inst-ink-muted);
  font-weight: 600;
}
body:has(.section--inst) .attestor-card__scope-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
body:has(.section--inst) .attestor-card__scope-tags li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--inst-accent) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--inst-accent) 25%, #fff);
  color: var(--inst-accent);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
}
body:has(.section--inst) .attestor-card__coi {
  background: color-mix(in srgb, var(--inst-warning) 6%, #fff);
  border-left: 3px solid var(--inst-warning);
  padding: 0.6rem 0.8rem;
  border-radius: 0 4px 4px 0;
}
body:has(.section--inst) .attestor-card__coi-body {
  margin: 0;
  color: var(--inst-ink-soft);
  font-size: 0.88rem;
}
body:has(.section--inst) .attestor-card__insurance {
  margin: 0;
  color: var(--inst-ink-muted);
  font-size: 0.82rem;
}

/* =============================================================
 * Phase 5 — Sumsub KYC onboarding page (/onboarding/kyc).
 * Two states: enabled (server has Sumsub creds; widget mounts)
 * and disabled (no creds; explainer block instead).
 * ============================================================= */

.kyc-onboarding {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.4rem 4rem;
}
.kyc-onboarding__copy { margin-bottom: 1.6rem; }
.kyc-onboarding__copy h1 {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  margin: 0 0 0.6rem;
}
.kyc-onboarding__lede {
  color: var(--c-ink-muted);
  max-width: 60ch;
  margin: 0 0 1rem;
  line-height: 1.55;
}
.kyc-onboarding__status-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1.2rem;
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--c-surface-2, #f7f6f1);
  border: 1px solid var(--c-border, #e4e0d6);
  border-radius: 8px;
  font-size: 0.9rem;
}
.kyc-onboarding__status-row dt { color: var(--c-ink-muted); font-weight: 500; }
.kyc-onboarding__status-row dd { margin: 0; color: var(--c-ink); font-weight: 600; }
.kyc-onboarding__note {
  font-size: 0.85rem;
  color: var(--c-ink-muted);
  max-width: 70ch;
  margin: 0.5rem 0 0;
}

.kyc-onboarding__mount {
  border: 1px solid var(--c-border, #e4e0d6);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.kyc-onboarding__status {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--c-border-soft, #ece8dd);
  background: var(--c-surface-2, #f7f6f1);
  font-size: 0.88rem;
}
.kyc-onboarding__status[data-kyc-status="idle"]     { border-left: 3px solid #6d7891; }
.kyc-onboarding__status[data-kyc-status="progress"] { border-left: 3px solid #1f6fab; background: rgba(74,168,255,.08); }
.kyc-onboarding__status[data-kyc-status="ready"]    { border-left: 3px solid #1b6a48; background: rgba(43,189,126,.08); }
.kyc-onboarding__status[data-kyc-status="error"]    { border-left: 3px solid #a02929; background: rgba(196,60,60,.08); }
.kyc-onboarding__status-text { margin: 0; font-weight: 500; color: var(--c-ink); }
.kyc-onboarding__status-detail {
  margin: 0.3rem 0 0;
  color: var(--c-ink-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.kyc-onboarding__widget { min-height: 520px; }

.kyc-onboarding__disabled {
  border: 1px dashed var(--c-border, #e4e0d6);
  border-radius: 10px;
  padding: 1.6rem 1.8rem;
  background: var(--c-surface-2, #f7f6f1);
}
.kyc-onboarding__disabled h2 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  color: var(--c-ink);
}
.kyc-onboarding__disabled p {
  margin: 0.5rem 0;
  color: var(--c-ink-muted);
  font-size: 0.92rem;
  max-width: 70ch;
}
.kyc-onboarding__disabled code {
  background: rgba(0,0,0,.05);
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.85em;
}

.kyc-onboarding--complete .kyc-onboarding__complete-card {
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-radius: 10px;
  background: #fff;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15,28,40,.04), 0 4px 18px -8px rgba(15,28,40,.06);
}
.kyc-onboarding--complete .kyc-onboarding__complete-card h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
.kyc-onboarding--complete .kyc-onboarding__complete-card .kyc-onboarding__status-row {
  max-width: 320px;
  margin: 1.2rem auto;
}

/* ---------------------------------------------------------------------------
 * Owner-facing organization pages (/organizations/:slug + /edit).
 * Distinct from .admin-org-* (which lives under the platform-admin chrome).
 * --------------------------------------------------------------------------- */
.org-page {
  max-width: 880px;
  margin: 2rem auto 4rem;
  padding: 0 1.25rem;
}
.org-page__breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.org-page__breadcrumb a {
  color: var(--c-ink-muted);
  text-decoration: none;
}
.org-page__breadcrumb a:hover { color: var(--c-ink); }
.org-page__hero {
  margin-bottom: 2rem;
}
.org-page__hero .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: 0.4rem;
}
.org-page__hero h1 {
  font-size: 1.7rem;
  margin: 0 0 0.4rem;
}
.org-page__hero .lede {
  color: var(--c-ink-muted);
  max-width: 65ch;
  margin: 0;
}

/* ---- profile card ------------------------------------------------------- */
.org-profile-card {
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-radius: 10px;
  background: #fff;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 2px rgba(15,28,40,.04);
}
.org-profile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.org-profile-card__header h2 {
  font-size: 1.2rem;
  margin: 0;
}
.org-profile-card__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.45rem;
  margin: 0;
}
.org-profile-card__facts dt {
  color: var(--c-ink-muted);
  font-size: 0.85rem;
}
.org-profile-card__facts dd {
  margin: 0;
  font-size: 0.95rem;
}

/* ---- status pills ------------------------------------------------------- */
.org-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(0,0,0,0.06);
  color: var(--c-ink-muted);
}
.org-pill--status-verified,
.org-pill--kyb-passed       { background: #e2f4e8; color: #126a2f; }
.org-pill--status-pending-review,
.org-pill--kyb-submitted    { background: #fff3cd; color: #856404; }
.org-pill--kyb-failed,
.org-pill--status-suspended { background: #fde2e1; color: #8a1f1c; }
.org-pill--status-archived  { background: #ece8dd; color: #555; }

/* ---- readiness panel ---------------------------------------------------- */
.org-readiness {
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-radius: 10px;
  background: #fff;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 1px 2px rgba(15,28,40,.04);
}
.org-readiness h2 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}
.org-readiness__lede {
  color: var(--c-ink-muted);
  margin: 0 0 1.2rem;
  max-width: 65ch;
}
.org-readiness__rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.org-readiness__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-left-width: 4px;
  border-radius: 6px;
  background: #fafaf8;
}
.org-readiness__row--done    { border-left-color: #2e7d4f; background: #f3faf5; }
.org-readiness__row--todo    { border-left-color: #b88a00; }
.org-readiness__row--pending { border-left-color: #5a72c2; background: #f5f7fd; }
.org-readiness__row--blocked { border-left-color: #b13c39; background: #fdf4f4; }
.org-readiness__row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.org-readiness__label  { font-weight: 600; }
.org-readiness__detail { color: var(--c-ink-muted); font-size: 0.9rem; }
.org-readiness__state {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--c-ink-muted);
}
.org-readiness__state--done    { background: #d8efdf; color: #185f33; }
.org-readiness__state--pending { background: #dde4f7; color: #2a3d83; }
.org-readiness__state--blocked { background: #fadbd9; color: #7d1d1a; }
.btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---- edit form ---------------------------------------------------------- */
.org-edit-form {
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-radius: 10px;
  background: #fff;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 1px 2px rgba(15,28,40,.04);
  display: grid;
  gap: 1rem;
}

/* ---- dashboard "Your organizations" strip ----------------------------- */
.dashboard__orgs { margin: 1.4rem 0 0.6rem; }
.dashboard-org-rows {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.45rem;
}
.dashboard-org-row a {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.dashboard-org-row a:hover { background: #fafaf8; }
.dashboard-org-row__name { font-weight: 600; }
.dashboard-org-row__role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-ink-muted);
}

/* ---- coupon simulator (gap G-09) ---------------------------------- */
.coupon-sim {
  max-width: 980px;
  margin: 2rem auto 4rem;
  padding: 0 1.25rem;
}
.coupon-sim__hero { margin-bottom: 2rem; }
.coupon-sim__hero .eyebrow {
  display: inline-block; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-ink-muted); margin-bottom: 0.4rem;
}
.coupon-sim__hero h1 { font-size: 1.7rem; margin: 0 0 0.4rem; }
.coupon-sim__hero .lede { color: var(--c-ink-muted); max-width: 70ch; }
.coupon-sim__form {
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-radius: 10px;
  background: #fff;
  padding: 1.4rem 1.6rem;
  display: grid; gap: 1rem;
  margin-bottom: 1.5rem;
}
.coupon-sim__base { display: grid; gap: 0.3rem; }
.coupon-sim__base input { max-width: 200px; padding: 0.4rem 0.6rem; }
.coupon-sim__sub {
  color: var(--c-ink-muted); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.coupon-sim__hint { color: var(--c-ink-muted); font-size: 0.85rem; }
.coupon-sim__rows { display: grid; gap: 0.6rem; }
.coupon-sim__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 0.8rem;
  align-items: end;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-left-width: 4px;
  border-radius: 6px;
  background: #fafaf8;
}
.coupon-sim__row[data-missed="true"]  { border-left-color: #b13c39; background: #fdf4f4; }
.coupon-sim__row[data-missed="false"] { border-left-color: #2e7d4f; background: #f3faf5; }
.coupon-sim__row input {
  width: 100%; padding: 0.4rem 0.6rem;
  border: 1px solid var(--c-border-soft, #ece8dd); border-radius: 4px;
}
.coupon-sim__row-label, .coupon-sim__row-num { display: grid; gap: 0.2rem; }
.coupon-sim__row-status { align-self: end; }
.coupon-sim__status {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 500;
}
.coupon-sim__status--missed { background: #fadbd9; color: #7d1d1a; }
.coupon-sim__status--met    { background: #d8efdf; color: #185f33; }
.coupon-sim__actions { display: flex; gap: 0.6rem; }

.coupon-sim__result {
  border: 1px solid var(--c-border-soft, #ece8dd);
  border-radius: 10px;
  background: #fff;
  padding: 1.4rem 1.6rem;
}
.coupon-sim__result-title { font-size: 1.2rem; margin: 0 0 1rem; }
.coupon-sim__result-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-bottom: 1rem;
}
.coupon-sim__result-cell {
  display: grid; gap: 0.2rem;
  padding: 0.8rem 1rem;
  background: #f7f5ef; border-radius: 6px;
}
.coupon-sim__result-cell--total {
  background: #e8f4ec; border: 1px solid #b8d6c1;
}
.coupon-sim__big { font-size: 1.6rem; font-weight: 600; }
.coupon-sim__driver { margin-top: 0.5rem; }
.coupon-sim__driver h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.coupon-sim__driver ul { margin: 0; padding-left: 1.2rem; }
.coupon-sim__driver li { color: var(--c-ink-muted); font-size: 0.92rem; }
.coupon-sim__driver-empty { color: var(--c-ink-muted); font-style: italic; }

/* ==========================================================================
   KYC nudge -- dashboard banner, account card, nav status dot
   ==========================================================================
   Three coordinated surfaces (azuros.views.kyc-nudge). Same color ramp as
   the AA-darkened brand tokens elsewhere -- amber for the in-flight state,
   ocean/ok for verified. */

/* ---- A. Dashboard banner --------------------------------------------- */
.kyc-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, #f5a65b 12%, #fff);
  border-left: 4px solid var(--c-accent);
  box-shadow: var(--shadow-1);
}
.kyc-banner[data-kyc-level="identified"] {
  /* Halfway-through state -- switch to brand cyan so the user sees
     "you've started" not "you haven't started". */
  background: color-mix(in srgb, var(--c-azur) 10%, #fff);
  border-left-color: var(--c-azur-ink);
}
.kyc-banner__icon {
  flex: 0 0 auto;
  font-size: 1.6rem;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
}
.kyc-banner[data-kyc-level="identified"] .kyc-banner__icon {
  color: var(--c-azur-ink);
}
.kyc-banner__body { flex: 1 1 auto; min-width: 0; }
.kyc-banner__lede {
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
}
.kyc-banner__sub {
  margin: 0.15rem 0 0;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
}
.kyc-banner__cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- Investor preferences first-run banner --------------------------- *
   Same family as .kyc-banner (left-accent strip + icon + lede/sub +
   CTA) but in brand cyan since this is informational guidance, not a
   warning. Carries a small dismiss button on the right. */
.prefs-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-azur) 10%, #fff);
  border-left: 4px solid var(--c-azur-ink);
  box-shadow: var(--shadow-1);
}
.prefs-banner__icon {
  flex: 0 0 auto;
  font-size: 1.6rem;
  color: var(--c-azur-ink);
  display: inline-flex;
  align-items: center;
}
.prefs-banner__body { flex: 1 1 auto; min-width: 0; }
.prefs-banner__lede {
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
}
.prefs-banner__sub {
  margin: 0.15rem 0 0;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
}
.prefs-banner__cta {
  flex: 0 0 auto;
  white-space: nowrap;
}
.prefs-banner__dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink-soft);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.prefs-banner__dismiss:hover {
  background: color-mix(in srgb, var(--c-ink) 8%, transparent);
  color: var(--c-ink);
}

/* ---- B. Account-page card -------------------------------------------- */
.kyc-card[data-kyc-tone="green"] {
  border-color: color-mix(in srgb, var(--c-ok) 30%, var(--c-border));
}
.kyc-card[data-kyc-tone="amber"] {
  border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-border));
}
.kyc-card__check {
  color: var(--c-ok);
  font-weight: 700;
}
.kyc-card__status {
  color: var(--c-ink-soft);
  margin: 0 0 0.6rem;
}
.kyc-card__detail {
  color: var(--c-ink-muted);
  font-size: 0.92rem;
  margin: 0 0 1rem;
}

/* ---- C. Nav status dot ----------------------------------------------- */
.nav__account-dot { position: relative; }
.nav__account-kyc-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;            /* lift the dot off the avatar */
  background: var(--c-ink-muted);    /* default = gray = none */
  box-shadow: 0 0 0 1px rgba(11,30,45,0.08);
}
.nav__account-kyc-dot[data-tone="amber"] { background: var(--c-accent); }
.nav__account-kyc-dot[data-tone="green"] { background: var(--c-ok); }

/* ---- F. Wizard verify step ------------------------------------------ */
.wizard-verify { display: flex; flex-direction: column; gap: 1.25rem; }
.wizard-verify__pitch { padding-top: 0.5rem; }
.wizard-verify__points {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--c-ink-soft);
}
.wizard-verify__points li { margin: 0.25rem 0; }
.wizard-verify__how {
  color: var(--c-ink-muted);
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}
.wizard-verify__done {
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--c-ok) 8%, #fff);
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-ok);
}
/* Dual-CTA layout used by /welcome/verify (Skip + Verify) */
.wizard__actions--split { justify-content: space-between; }
.wizard-verify__cta-pair { display: inline-flex; gap: 0.75rem; align-items: center; }