/* =========================================================================
   SDG allocation wheel - interactive component
   ========================================================================= */

.sdg-editor {
  --sdg-bg: #071224;
  --sdg-fg: #eef5ff;
  --sdg-muted: #718096;
  --sdg-panel-bg: #ffffff;
  --sdg-panel-fg: #172033;
  --sdg-shadow: 0 24px 70px rgba(10, 20, 40, .16);
  --active-sdg-color: #0a97d9;

  display: grid;
  gap: clamp(.65rem, 1.4vw, 1rem);
  margin: 0 auto;
  max-width: 920px;
}

/* ---- wheel layout ----------------------------------------------------- */

.sdg-editor__wheel-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .35rem;
}

.sdg-editor__wheel-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
}

.sdg-editor__wheel-stage::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  box-shadow: 0 18px 44px rgba(10, 20, 40, .13);
  pointer-events: none;
}

.sdg-wheel {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 500px);
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 10px 22px rgba(10, 20, 40, .14));
  /* The active-pointer arrow renders just outside the wheel's
     outer ring; without this it gets clipped by the SVG viewBox. */
  overflow: visible;
}

.sdg-wheel__rotor {
  transition: transform .72s cubic-bezier(.2, .9, .18, 1);
  /* transform-origin is set inline; Safari has spec drift on SVG <g> %. */
}

.sdg-wheel__official-face,
.sdg-wheel__center,
.sdg-wheel__sector-aura,
.sdg-wheel__label,
.sdg-wheel__alloc {
  pointer-events: none;
}

/* ---- sectors ---------------------------------------------------------- */

.sdg-wheel__sector {
  cursor: default;
  outline: none;
}

.sdg-wheel--edit .sdg-wheel__sector {
  cursor: pointer;
}

.sdg-wheel__sector-aura {
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-opacity: 0;
  transition: fill-opacity .2s ease, stroke-opacity .2s ease, filter .2s ease;
}

.sdg-wheel__hit {
  fill-opacity: 0;
  pointer-events: all;
}

.sdg-wheel__alloc {
  fill-opacity: .95;
  filter: drop-shadow(0 3px 7px rgba(10, 20, 40, .18));
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 1.25;
  transition: d .35s cubic-bezier(.22, 1, .36, 1), fill-opacity .2s ease;
}

.sdg-wheel__label {
  transition: transform .72s cubic-bezier(.2, .9, .18, 1);
}

.sdg-wheel__pictogram {
  filter: brightness(0) invert(1) drop-shadow(0 1.5px 2px rgba(4, 12, 26, .18));
  opacity: .96;
}

.sdg-wheel--edit .sdg-wheel__sector:hover .sdg-wheel__sector-aura,
.sdg-wheel--edit .sdg-wheel__sector:focus-visible .sdg-wheel__sector-aura {
  fill-opacity: .18;
  stroke-opacity: .72;
}

.sdg-wheel--edit .sdg-wheel__sector:focus-visible .sdg-wheel__sector-aura {
  filter: url(#sdg-wheel-glow);
}

.sdg-wheel--edit .sdg-wheel__sector[data-active="true"] .sdg-wheel__sector-aura {
  fill-opacity: .28;
  stroke-opacity: .95;
  filter: url(#sdg-wheel-glow);
}

.sdg-wheel--edit .sdg-wheel__sector[data-active="true"] .sdg-wheel__alloc {
  filter: url(#sdg-wheel-glow);
}

/* ---- active-sector pointer (project detail page) ---------------------
   A coloured bezel-style arrow that rotates around the wheel's centre
   to point at the currently-selected sector. Default opacity is 0;
   the impact-explorer sets data-active="true" on the pointer once a
   goal is picked. The transition on the transform attribute gives the
   "spinning the bezel of a watch" feel the design briefs for. */

.sdg-wheel__active-pointer {
  --sdg-color: var(--c-azur-ink, #0b1e2d);
  opacity: 0;
  transition: opacity .25s ease,
              transform .55s cubic-bezier(.2, .9, .18, 1);
  pointer-events: none;
}
.sdg-wheel__active-pointer[data-active="true"] { opacity: 1; }
.sdg-wheel__active-pointer path {
  fill: var(--sdg-color);
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(11, 30, 45, .25));
}
@media (prefers-reduced-motion: reduce) {
  .sdg-wheel__active-pointer { transition: opacity .25s ease; }
}

/* ---- centre hub ------------------------------------------------------- */

.sdg-wheel__hub-bg {
  fill: rgba(10, 20, 40, .08);
}

.sdg-wheel__hub {
  fill: #fff;
  stroke: rgba(10, 20, 40, .10);
  stroke-width: 2;
}

.sdg-wheel__hub-un,
.sdg-wheel__hub-title,
.sdg-wheel__hub-goals {
  font-family: 'Comfortaa', -apple-system, system-ui, sans-serif;
  pointer-events: none;
  text-transform: uppercase;
}

.sdg-wheel__hub-title {
  fill: #00adef;
  font-weight: 800;
  letter-spacing: -.5px;
}

.sdg-wheel__hub-goals {
  fill: #334155;
  font-weight: 800;
  letter-spacing: -1px;
}

/* ---- connected HUD ---------------------------------------------------- */

.sdg-editor__hud {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(230px, .9fr);
  gap: .55rem;
  align-items: stretch;
  width: min(100%, 720px);
  margin-top: clamp(-2rem, -4vw, -1.1rem);
}

.sdg-editor__hud::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.72rem;
  width: 2px;
  height: .72rem;
  background: linear-gradient(var(--active-sdg-color), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---- bottom focus pin ------------------------------------------------- */

.sdg-editor__focus-pin {
  display: grid;
  align-content: center;
  gap: .08rem;
  min-width: 0;
  min-height: 3.65rem;
  padding: .65rem .95rem;
  color: var(--sdg-fg);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(7, 18, 36, .94), rgba(16, 35, 63, .88)),
    linear-gradient(90deg, var(--sdg-color, var(--active-sdg-color)), transparent);
  border: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 3px solid var(--sdg-color, var(--active-sdg-color));
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(10, 20, 40, .20);
  pointer-events: none;
}

.sdg-editor__focus-pin::before {
  content: none;
}

.sdg-editor__focus-kicker {
  color: rgba(255, 255, 255, .68);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1;
  text-transform: uppercase;
}

.sdg-editor__focus-label {
  color: #fff;
  font-family: 'Comfortaa', -apple-system, system-ui, sans-serif;
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 700;
  line-height: 1.15;
}

.sdg-editor__focus-points {
  color: color-mix(in srgb, var(--sdg-color, var(--active-sdg-color)) 28%, white);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .9px;
  line-height: 1;
  text-transform: uppercase;
}

/* ---- point bank ------------------------------------------------------- */

.sdg-editor__point-bank {
  display: grid;
  grid-template-columns: 1fr;
  gap: .42rem;
  min-height: 3.65rem;
  padding: .58rem .72rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(248, 251, 255, .92));
  border: 1px solid rgba(120, 130, 150, .18);
  border-bottom: 3px solid #bf8b2e;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(10, 20, 40, .12);
}

.sdg-editor__point-bank[data-status="ok"] {
  border-bottom-color: #3f7e44;
}

.sdg-editor__point-bank[data-status="over"] {
  border-bottom-color: #e5243b;
}

.sdg-editor__bank-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}

.sdg-editor__bank-stat {
  display: grid;
  gap: .08rem;
  min-width: 0;
}

.sdg-editor__bank-label {
  color: #64748b;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sdg-editor__bank-allocated,
.sdg-editor__bank-remaining {
  font-family: 'Comfortaa', -apple-system, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.7vw, 1.65rem);
  font-weight: 800;
  line-height: 1;
}

.sdg-editor__bank-allocated {
  color: var(--active-sdg-color);
}

.sdg-editor__bank-remaining {
  color: #bf8b2e;
}

.sdg-editor__point-bank[data-status="ok"] .sdg-editor__bank-remaining {
  color: #3f7e44;
}

.sdg-editor__point-bank[data-status="over"] .sdg-editor__bank-remaining {
  color: #e5243b;
}

.sdg-editor__bank-meter {
  height: 11px;
  overflow: hidden;
  background: rgba(120, 130, 150, .16);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(120, 130, 150, .10);
}

.sdg-editor__bank-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #26bde2, var(--active-sdg-color));
  border-radius: inherit;
  transition: width .28s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}

.sdg-editor__point-bank[data-status="ok"] .sdg-editor__bank-fill {
  background: linear-gradient(90deg, #56c02b, #3f7e44);
}

.sdg-editor__point-bank[data-status="over"] .sdg-editor__bank-fill {
  background: linear-gradient(90deg, #ff3a21, #e5243b);
}

/* ---- detail panels ---------------------------------------------------- */

.sdg-editor__panels {
  position: relative;
  margin-top: -.3rem;
  justify-self: center;
  width: min(100%, 900px);
}

.sdg-editor__panels::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.7rem;
  width: 2px;
  height: .7rem;
  background: linear-gradient(transparent, var(--active-sdg-color));
  transform: translateX(-50%);
  pointer-events: none;
}

.sdg-panel[hidden] {
  display: none;
}

.sdg-panel {
  --sdg-color: #5b6a7d;
  --sdg-allocation-pct: 0%;

  position: relative;
  display: grid;
  gap: clamp(.85rem, 2vw, 1.15rem);
  overflow: hidden;
  padding: clamp(.9rem, 2.4vw, 1.35rem);
  color: var(--sdg-panel-fg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .96)),
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--sdg-color) 14%, transparent), transparent 36%);
  border: 1px solid rgba(120, 130, 150, .20);
  border-top: 5px solid var(--sdg-color);
  border-radius: 24px;
  box-shadow: var(--sdg-shadow);
  animation: sdg-panel-in .38s cubic-bezier(.22, 1, .36, 1);
}

.sdg-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(var(--sdg-color), transparent 76%);
  opacity: .55;
}

@keyframes sdg-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.sdg-panel--empty {
  padding: clamp(1rem, 3vw, 1.35rem);
  color: #67758a;
  border-top-color: rgba(120, 130, 150, .3);
}

.sdg-panel--empty p { margin: 0; }
.sdg-panel--empty p + p { margin-top: .5rem; }

.sdg-panel__spotlight {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: center;
}

.sdg-panel__official-card {
  position: relative;
  margin: 0;
}

.sdg-panel__official-card::after {
  content: "";
  position: absolute;
  inset: auto 10% -10px;
  height: 18px;
  background: radial-gradient(ellipse, rgba(10, 20, 40, .22), transparent 68%);
  filter: blur(2px);
  z-index: 0;
}

.sdg-panel__official-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 210px);
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 18px 32px color-mix(in srgb, var(--sdg-color) 22%, rgba(10, 20, 40, .18)),
    0 0 0 1px rgba(255, 255, 255, .82);
}

.sdg-panel__copy {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.sdg-panel__head {
  display: grid;
  gap: .35rem;
}

.sdg-panel__code {
  display: inline-flex;
  width: fit-content;
  padding: .28rem .55rem;
  color: var(--sdg-color);
  background: color-mix(in srgb, var(--sdg-color) 10%, white);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.sdg-panel__name {
  margin: 0;
  color: #111827;
  font-family: 'Comfortaa', -apple-system, system-ui, sans-serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.sdg-panel__official-desc {
  max-width: 52rem;
  margin: .15rem 0 0;
  color: #46546a;
  font-size: clamp(.94rem, 2vw, 1.03rem);
  line-height: 1.58;
}

.sdg-panel__official-desc span {
  display: block;
  margin-bottom: .2rem;
  color: var(--sdg-color);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---- allocation row --------------------------------------------------- */

.sdg-panel__alloc {
  display: grid;
  gap: .65rem;
  padding: .85rem;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(120, 130, 150, .18);
  border-radius: 18px;
}

.sdg-panel__alloc-label {
  color: #64748b;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.sdg-panel__alloc-row {
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr) auto;
  gap: .6rem;
  align-items: center;
}

.sdg-panel__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--sdg-color);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--sdg-color) 24%, rgba(120, 130, 150, .25));
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(10, 20, 40, .06);
  cursor: pointer;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.sdg-panel__step:hover {
  background: color-mix(in srgb, var(--sdg-color) 9%, white);
  box-shadow: 0 10px 24px rgba(10, 20, 40, .10);
}

.sdg-panel__step:active { transform: scale(.95); }

.sdg-panel__num {
  min-width: 0;
  padding: .45rem .5rem;
  color: var(--sdg-color);
  background: #fff;
  border: 1px solid rgba(120, 130, 150, .24);
  border-radius: 14px;
  font-family: 'Comfortaa', -apple-system, system-ui, sans-serif;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}

.sdg-panel__num::-webkit-outer-spin-button,
.sdg-panel__num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sdg-panel__num:focus,
.sdg-panel__range:focus-visible,
.sdg-panel__step:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sdg-color) 42%, white);
  outline-offset: 2px;
}

.sdg-panel__range {
  width: 100%;
  height: 12px;
  margin: .15rem 0 0;
  appearance: none;
  background: linear-gradient(90deg,
    var(--sdg-color) 0 var(--sdg-allocation-pct, 0%),
    rgba(120, 130, 150, .18) var(--sdg-allocation-pct, 0%) 100%);
  border-radius: 999px;
  cursor: pointer;
}

.sdg-panel__range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  appearance: none;
  background: #fff;
  border: 6px solid var(--sdg-color);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(10, 20, 40, .22);
}

.sdg-panel__range::-moz-range-track {
  height: 12px;
  background: rgba(120, 130, 150, .18);
  border-radius: 999px;
}

.sdg-panel__range::-moz-range-progress {
  height: 12px;
  background: var(--sdg-color);
  border-radius: 999px;
}

.sdg-panel__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #fff;
  border: 6px solid var(--sdg-color);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(10, 20, 40, .22);
}

.sdg-panel__remaining {
  margin: -.15rem 0 0;
  color: #64748b;
  font-size: .85rem;
  text-align: center;
}

.sdg-panel__remaining-num {
  color: var(--sdg-panel-fg);
  font-family: 'Comfortaa', -apple-system, system-ui, sans-serif;
  font-weight: 800;
}

/* ---- targets list ----------------------------------------------------- */

.sdg-panel__targets {
  padding-top: .2rem;
}

.sdg-panel__targets h4 {
  margin: 0 0 .65rem;
  color: #64748b;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.sdg-panel__targets ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sdg-panel__targets li {
  position: relative;
  min-height: 2.35rem;
  padding: .55rem .65rem .55rem 1.8rem;
  color: #263348;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(120, 130, 150, .13);
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.35;
}

.sdg-panel__targets li::before {
  content: "";
  position: absolute;
  left: .72rem;
  top: .95rem;
  width: 8px;
  height: 8px;
  background: var(--sdg-color);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sdg-color) 18%, transparent);
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 720px) {
  .sdg-editor {
    max-width: 100%;
  }

  .sdg-editor__hud {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
    margin-top: -.85rem;
  }

  .sdg-editor__focus-pin {
    padding-inline: .8rem;
  }

  .sdg-editor__bank-stats {
    text-align: center;
  }

  .sdg-panel__spotlight {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .sdg-panel__copy,
  .sdg-panel__head {
    justify-items: center;
  }

  .sdg-panel__official-card img {
    width: min(58vw, 190px);
  }

  .sdg-panel__targets ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .sdg-editor__focus-pin {
    border-radius: 18px;
  }

  .sdg-editor__focus-label {
    font-size: .82rem;
  }

  .sdg-panel__alloc-row {
    grid-template-columns: 40px minmax(4.5rem, 1fr) 40px;
  }

  .sdg-panel__step {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Compact editor (wizard-step variant)
   --------------------------------------------------------------------------
   Side-by-side layout: wheel left, chip rail + active-goal editor right.
   Reuses every existing class name on the wheel and panels, so the same
   JS wires both. ~640px tall total target.
   ========================================================================== */

.sdg-editor--compact {
  --active-w: 280px;
  --rail-w:   290px;
}

/* Caption sitting just above the wheel inside its own stage cell —
   replaces a separate intro band so we don't repeat the "Total must
   be exactly 100" hint that already lives in the right rail. */
.sdg-editor__wheel-hint {
  margin: 0 0 .5rem;
  text-align: center;
  font-size: .85rem;
  color: var(--c-ink-muted, #6b7c8c);
}
.sdg-editor__wheel-hint strong {
  color: var(--c-ink, #0b1e2d);
  font-weight: 600;
}

.sdg-editor__compact-grid {
  display: grid;
  grid-template-columns: var(--active-w) minmax(420px, 1fr) var(--rail-w);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.sdg-editor--compact .sdg-editor__wheel-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
}
/* The ::before shadow ring on the non-compact wheel-stage assumes the
   stage is sized like the wheel; in compact we host a hint above the
   wheel, so suppress that outer ring and re-cast the shadow on the
   inner frame which IS sized to the wheel. */
.sdg-editor--compact .sdg-editor__wheel-stage::before { content: none; }
.sdg-editor__wheel-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.sdg-editor__wheel-frame::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  box-shadow: 0 18px 44px rgba(10, 20, 40, .13);
  pointer-events: none;
}

/* Connector — pill-shaped bridge between the active card on the
   left and the wheel's left rim. Echoes the point-bank meter on
   the right rail (pill-shaped track + coloured fill) so the same
   visual language carries across both ends of the editor. The
   active sector rotates to 9 o'clock (handled by JS) so this
   static element always "lands" on the right sector. */
.sdg-editor__connector {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(2rem, 4vw, 3rem);
  height: 9px;
  transform: translate(calc(-100% + .15rem), -50%);
  border-radius: 999px;
  background: rgba(120, 130, 150, .16);
  box-shadow: inset 0 0 0 1px rgba(120, 130, 150, .12);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.sdg-editor--compact[data-has-active="true"] .sdg-editor__connector {
  opacity: 1;
}
/* Coloured fill matching the active SDG, with the same horizontal
   gradient direction as the point-bank meter (cyan → SDG colour). */
.sdg-editor__connector::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--active-sdg-color, #5b6a7d) 35%, #26bde2),
    var(--active-sdg-color, #5b6a7d));
}

/* ---- left active-goal card ------------------------------------------- */
/*
 * Container is intentionally invisible when no goal is active —
 * the column then takes no visual weight, and the wheel's left rim
 * has nothing to "talk to" (the connector is also hidden in that
 * state). When a panel becomes visible, :has reveals the chrome.
 */
.sdg-editor__active-card {
  background: transparent;
  /* Use box-shadow instead of border for the card outline so the
     content area starts at exactly column-top (no 1px border offset),
     keeping the h3 aligned with the rail's "Allocated Goals" heading.
     Top padding gives the header breathing room above "Goal N" --
     stakeholder ask: more margin above the goal kicker / icon. */
  border: none;
  border-radius: var(--r-md, 12px);
  padding: 1.25rem 1.1rem 1.25rem;
  position: relative;
}
.sdg-editor__active-card:has(.sdg-panel:not([hidden])) {
  background: #fff;
  box-shadow:
    0 0 0 1px var(--c-border, #d6e3ec),
    var(--shadow-1, 0 1px 2px rgba(11, 30, 45, 0.06));
}

/* Right-edge indicator bar -- deliberately disabled. Previously
   a full-height SDG-colored rule sat between the card and the
   wheel as a visual "axis" linking active sector + active card.
   But the horizontal connector pill already does that job, and
   the bar + pill together rendered as a broken vertical line
   with a horizontal stub (the connector pill perpendicular to
   the bar, making it look fractured around the active sector).
   Dropping the bar; the pill alone reads cleaner.

   Kept as `display: none` rather than removed so the rule
   history is visible to a future reader who wants to revive it. */
.sdg-editor__active-card:has(.sdg-panel:not([hidden]))::after {
  display: none;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--active-sdg-color, var(--c-border, #d6e3ec));
  border-radius: 0;
  pointer-events: none;
}

/* Reset every base .sdg-panel decoration that was making the compact
   variant look like the full /sdg-wheel panel. The compact card has
   its own chrome (white background + box-shadow on the wrapping
   `.sdg-editor__active-card`) and its own SDG-coloured indicator bar
   (on the right edge of the card, see below). */
.sdg-panel--compact {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-top: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  overflow: visible;
  display: grid;
  gap: .85rem;
}
.sdg-panel--compact::before { content: none; }

/* Two-tone heading at the top of the active card.
   Always renders as two stacked rows ("Goal NN" on top, name
   below) regardless of name length — flex-wrap was making the
   layout shift between one and two lines depending on the
   particular goal, which read as a stylistic inconsistency. */
.sdg-panel__title-compact {
  margin: 0;
  font-weight: 600;
  display: grid;
  gap: .1rem;
}
.sdg-panel__title-kicker {
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sdg-color);
  line-height: 1.1;
}
.sdg-panel__title-name {
  color: var(--c-ink, #0b1e2d);
  font-size: 1.05rem;
  line-height: 1.2;
}

/* Goal card image sits below the heading. ~160px square so the
   pictogram + label inside the official UN goal card stay legible. */
.sdg-panel__official-card--compact {
  margin: 0;
  width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(11, 30, 45, 0.06));
}
.sdg-panel__official-card--compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sdg-panel--compact .sdg-panel__head {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
}

.sdg-panel--compact .sdg-panel__code {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .72rem;
  color: var(--sdg-color);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sdg-panel--compact .sdg-panel__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}

.sdg-panel--compact .sdg-panel__official-desc {
  margin: 0;
  font-size: .88rem;
  color: var(--c-ink-soft, #3a4f61);
  line-height: 1.4;
}

.sdg-panel--compact .sdg-panel__alloc {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Sub-goal ("target") list — dense Tufte-style row per target.
   Each target reads `<id>  <short text>`: the id is small, bold,
   tabular-nums in a softened SDG colour; the text is regular ink
   at .82rem. A 2px tinted left rule binds the rows visually as a
   single group without spending extra vertical space. */
.sdg-panel__targets-compact {
  display: grid;
  gap: .25rem;
}
.sdg-panel__targets-kicker {
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.sdg-panel__targets-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 .65rem;
  border-left: 2px solid color-mix(in srgb, var(--sdg-color) 35%, transparent);
  display: grid;
  gap: .12rem;
}
.sdg-panel__target {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: baseline;
  gap: .45rem;
  font-size: .82rem;
  line-height: 1.35;
}
.sdg-panel__target-id {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .76rem;
  color: color-mix(in srgb, var(--sdg-color) 78%, var(--c-ink, #0b1e2d));
  letter-spacing: .02em;
}
.sdg-panel__target-text {
  color: var(--c-ink-soft, #3a4f61);
}

/* ---- target-level allocation rows (wizard SDG step) -----------------
 *
 * Game-UI compact: one tight horizontal line per UN target, with a
 * subtle horizontal fill-bar behind the row carrying the
 * allocation proportion (driven off `--target-pct`). The +/-
 * stepper on the right is the only interaction -- the free-drag
 * slider was deliberately dropped after stakeholder feedback that
 * (a) it was too loose and (b) it ate vertical real-estate.
 *
 * The 100-point cap is enforced GLOBALLY across all targets across
 * all goals -- there is no per-goal sub-cap, so an innovator can
 * dedicate all 100 points to a single target if that's the truth
 * of the project.
 */
.sdg-panel--compact[data-granularity="target"] .sdg-panel__targets-compact {
  /* Drop the kicker label margin -- with the rows being so
     compact the section already reads as "targets" without a
     separate heading row. */
  margin-top: .15rem;
}
.sdg-panel__target--alloc {
  position: relative;
  /* Stacked layout: label on top (full width, no truncation),
     stepper on the bottom right-aligned. The previous design
     painted a low-opacity goal-color wash across the row that
     filled L->R with the allocation -- it read as muddy.
     Replaced with a single 3px Tufte data-rule under each row
     that fills proportionally; cleaner data ink, the row content
     stays uncluttered. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: .2rem;
  padding: .45rem .65rem .55rem;
  border-radius: .35rem;
  border-bottom: 1px solid transparent;   /* hairline divider on hover */
  transition: border-color .12s ease, background .12s ease;
}
.sdg-panel__target--alloc .sdg-panel__target-label {
  grid-row: 1;
  grid-column: 1;
}
.sdg-panel__target--alloc .sdg-panel__target-stepper {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
}
/* Tufte data underscore at the bottom of each row. The track
   (light, full-width) doubles as a row divider so we don't need
   a separate border between rows; the filled portion (solid SDG
   color, left-to-right) shows the allocation %. Drops cleanly
   to zero when un-allocated -- the track remains as a hairline
   separator.

   Height matches the chip-rail's bottom fill bar on the right
   side (3px) so the two surfaces read as one design language. */
.sdg-panel__target--alloc::before,
.sdg-panel__target--alloc::after {
  content: "";
  position: absolute;
  left: .65rem;
  right: .65rem;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
}
.sdg-panel__target--alloc::before {
  background: color-mix(in srgb, var(--sdg-color) 14%, #e6ecf3);
}
.sdg-panel__target--alloc::after {
  background: var(--sdg-color);
  right: auto;
  width: calc((100% - 1.3rem) * var(--target-pct, 0%) / 100%);
  transition: width .18s cubic-bezier(.22, 1, .36, 1);
}
.sdg-panel__target--alloc:hover {
  background: color-mix(in srgb, var(--sdg-color) 5%, #f8fafc);
}
/* Allocated row emphasis -- the target ID + step buttons + number
   input pick up the SDG color so the row reads as "in play"
   without needing a background tint. Combined with the data
   underscore, this is enough at-a-glance to tell allocated from
   un-allocated rows. */
.sdg-panel__target--alloc[data-allocated="true"] .sdg-panel__target-id {
  color: var(--sdg-color);
  font-weight: 800;
}
.sdg-panel__target--alloc[data-allocated="true"] .sdg-panel__target-num {
  color: var(--sdg-color);
  font-weight: 800;
}
.sdg-panel__target--alloc[data-allocated="true"] .sdg-panel__target-stepper {
  border-color: color-mix(in srgb, var(--sdg-color) 45%, #c8d1dc);
}
.sdg-panel__target--alloc .sdg-panel__target-label {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  line-height: 1.25;
  min-width: 0;
}
.sdg-panel__target--alloc .sdg-panel__target-id {
  font-size: .72rem;
  flex-shrink: 0;
  width: 2.4em;
}
.sdg-panel__target--alloc .sdg-panel__target-text {
  font-size: .82rem;
  /* No truncation -- full target headline wraps to a 2nd line if it
     has to. The stepper sits underneath, so we don't fight for
     horizontal space anymore. */
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
}
.sdg-panel__target-stepper {
  /* Right-align the stepper under its row's label. */
  justify-self: end;
  margin-top: .1rem;
}

/* Stepper: ─ <num> ＋ in a single tight cluster. */
.sdg-panel__target-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--sdg-color) 25%, #c8d1dc);
  border-radius: .35rem;
  background: #fff;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.sdg-panel__target-step {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .55rem;
  color: var(--c-ink-muted, #6b7c8c);
  cursor: pointer;
  font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.sdg-panel__target-step:hover,
.sdg-panel__target-step:focus-visible {
  background: color-mix(in srgb, var(--sdg-color) 16%, #fff);
  color: var(--sdg-color);
  outline: none;
}
.sdg-panel__target-num {
  width: 2.6em;
  padding: .18rem .15rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--sdg-color) 18%, #e3e9f0);
  border-right: 1px solid color-mix(in srgb, var(--sdg-color) 18%, #e3e9f0);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  text-align: center;
  background: transparent;
  color: var(--c-ink, #0b1e2d);
}
.sdg-panel__target-num:focus {
  outline: 2px solid color-mix(in srgb, var(--sdg-color) 60%, transparent);
  outline-offset: 1px;
}
.sdg-panel__target-num::-webkit-inner-spin-button,
.sdg-panel__target-num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sdg-panel__target-num[type=number] {
  -moz-appearance: textfield;
}

/* Compact panel header -- pictogram chip + goal label on one line.
   Replaces the standalone large UN goal card + tagline paragraph
   the goal-mode editor uses, recovering ~120-150px of vertical
   space in the wizard. */
.sdg-panel__header-compact {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 .85rem;
}
.sdg-panel__pictogram-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bigger tile so the icon has presence next to the goal name.
     Matches the visual weight of the chip-rail icon panels on
     the right (those are full-card height -- ~3.4rem feels
     comparable here without overpowering the header). */
  width: 3.4rem;
  height: 3.4rem;
  border-radius: .7rem;
  background: var(--sdg-color);
  box-shadow: 0 2px 5px rgba(10, 20, 40, .14);
  flex-shrink: 0;
}
.sdg-panel__pictogram-chip img {
  width: 64%;
  height: 64%;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 1.5px 2px rgba(4, 12, 26, .22));
}
.sdg-panel__header-compact .sdg-panel__title-compact {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.15;
}
.sdg-panel__header-compact .sdg-panel__title-kicker {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sdg-color) 70%, var(--c-ink-muted, #6b7c8c));
}
.sdg-panel__header-compact .sdg-panel__title-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-ink, #0b1e2d);
}

/* Goal-level subtotal display at the bottom of the active card --
   replaces the goal allocator block in target mode. Reads as a
   running tally so the operator sees how a goal's targets are
   summing up. */
.sdg-panel__subtotal {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: .55rem 0 0;
  padding: .45rem .65rem;
  border-radius: .35rem;
  background: color-mix(in srgb, var(--sdg-color) 8%, #f3f6fa);
  border-left: 3px solid var(--sdg-color);
  font-size: .8rem;
}
.sdg-panel__subtotal-label {
  color: var(--c-ink-muted, #6b7c8c);
  font-weight: 600;
  letter-spacing: .01em;
}
.sdg-panel__subtotal-num {
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--sdg-color) 70%, var(--c-ink, #0b1e2d));
  margin-left: auto;
}
.sdg-panel__subtotal-cap {
  color: var(--c-ink-muted, #6b7c8c);
  font-variant-numeric: tabular-nums;
}

/* Compact target list when granularity is :target -- no left
   border rule (the rows now have visible affordances of their own),
   tighter row gap. */
.sdg-panel__targets-compact[data-granularity="target"] .sdg-panel__targets-list {
  border-left: none;
  padding-left: 0;
  gap: .1rem;
}
/* "Targets" kicker visible in both modes -- the UN nomenclature
   label sits above the list so the operator (and any reviewer)
   knows the rows are official UN targets, not loose buckets. */
.sdg-panel__targets-compact[data-granularity="target"] .sdg-panel__targets-kicker {
  display: block;
  margin: .35rem 0 .1rem;
}

/* Chip target-id breakdown -- monospace-feel comma-less list under
   the goal name, e.g. "7.1  7.2" in target mode. CSS hides it on
   empty so the chip layout is identical between goal and target
   modes. */
.sdg-chip__targets {
  display: block;
  font-size: .7rem;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--sdg-color) 75%, var(--c-ink-muted, #6b7c8c));
  font-variant-numeric: tabular-nums;
  margin-top: .12rem;
}
.sdg-chip__targets:empty {
  display: none;
}

.sdg-panel--empty.sdg-panel--compact {
  display: grid;
  gap: 0;
}
.sdg-panel--empty__placeholder {
  margin: 0;
  padding: .35rem .15rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-size: .9rem;
  font-style: italic;
}

/* ---- right rail ------------------------------------------------------ */

.sdg-editor__rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sdg-editor__rail-head h3 {
  font-size: 1.05rem;
  margin: 0 0 .25rem;
}
.sdg-editor__rail-hint {
  margin: 0;
  color: var(--c-ink-muted, #6b7c8c);
  font-size: .9rem;
}

/* ---- chip list ------------------------------------------------------- */

.sdg-chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.sdg-chip-list__empty {
  margin: 0;
  padding: .85rem 1rem;
  color: var(--c-ink-muted, #6b7c8c);
  font-size: .9rem;
  background: var(--c-surface-2, #eef5f9);
  border: 1px dashed var(--c-border, #d6e3ec);
  border-radius: var(--r-sm, 6px);
  text-align: center;
}

.sdg-chip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--c-border, #d6e3ec);
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sdg-chip:hover {
  border-color: var(--sdg-color);
  box-shadow: 0 1px 6px rgba(11, 30, 45, 0.06);
}

/* Tufte-style bullet bar — a 3px stripe across the bottom of the chip
   showing allocation as a proportional fill. The numeric badge to the
   right gives the precise value; the bar carries the at-a-glance read.
   Driven by the --sdg-allocation-pct custom property on the chip
   element (set by the JS via syncChip). */
.sdg-chip::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--sdg-allocation-pct, 0%);
  background: var(--sdg-color);
  transition: width .15s ease;
  pointer-events: none;
}
.sdg-chip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--c-border, #d6e3ec) 70%, transparent);
  z-index: -1;
  pointer-events: none;
}

.sdg-chip__activate {
  display: grid;
  /* Two columns -- full-height icon tile, flexible body. The pct
     lives INSIDE the body now (as a baseline-aligned trailing
     number against the target text) rather than as a third grid
     column eating horizontal space. `align-items: stretch` on
     the icon column is what makes the colored panel fill the
     card's full height. */
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: stretch;
  gap: .7rem;
  padding: .55rem .75rem .55rem 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--c-ink, #0b1e2d);
}

/* Icon stack -- a vertical column containing the goal pictogram
   panel on top and the allocation percentage badge on the bottom.
   The pct badge is laid out as a chunky tabular-num readout at
   the foot of the colored panel, like a status indicator on a
   game UI tile. This frees up the entire body column for the
   goal name + target text. */
.sdg-chip__icon-stack {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  background: var(--sdg-color);
  width: 100%;
  margin: -.55rem 0;       /* extend through chip padding */
  color: #fff;
}
.sdg-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;  /* parent stack owns the color */
  flex: 1 1 auto;
  min-height: 2.6rem;
}
.sdg-chip__icon img {
  width: 60%;
  height: auto;
  max-height: 72%;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 1px 1.5px rgba(4, 12, 26, .25));
}

.sdg-chip__body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  align-self: center;
}

/* Goal name as a subtitle. Mixed case (not small caps) so longer
   goal names like "Responsible Consumption and Production" fit
   without ellipsis. Subdued weight + sdg color tint distinguishes
   it from the target headline below. Sits above the target line
   so a glance picks up "what goal" before "what target". */
.sdg-chip__goal-name {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.22;
  color: color-mix(in srgb, var(--sdg-color) 65%, var(--c-ink-muted, #6b7c8c));
  /* No clamp -- let the goal name wrap to 2 lines if needed.
     Goal names cap around ~5 words; the chip absorbs the extra
     row cleanly. */
  word-break: normal;
  overflow-wrap: break-word;
}

.sdg-chip__target-line {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  line-height: 1.3;
}
.sdg-chip__target-id {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: .92rem;
  color: var(--sdg-color);
  flex-shrink: 0;
}
.sdg-chip__target-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--c-ink, #0b1e2d);
  line-height: 1.32;
  /* Wrap on word boundaries; break a long word only as the last
     resort. Hyphens are off because the browser's auto-hyphenator
     was breaking proper nouns / domain terms in awkward places
     (e.g. "ma- rine pollution"); plain word-wrap reads cleaner. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Pct badge sits at the foot of the icon-stack -- white text on
   the SDG color, tabular nums, bold. Reads as a game-UI status
   indicator riding on the icon tile. */
.sdg-chip__pct {
  display: block;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: .8rem;
  color: #fff;
  padding: .15rem .2rem .25rem;
  letter-spacing: .01em;
  background: color-mix(in srgb, #000 10%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
}

.sdg-chip__remove {
  border: none;
  background: transparent;
  color: var(--c-ink-muted, #6b7c8c);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 .85rem;
  cursor: pointer;
  border-left: 1px solid var(--c-border, #d6e3ec);
  transition: color .15s ease, background-color .15s ease;
}
.sdg-chip__remove:hover {
  color: var(--c-err, #c04848);
  background: rgba(192, 72, 72, 0.06);
}

/* Active chip mirrors the wheel selection. Same visual whether the
   user clicked the sector on the wheel or the chip itself —
   activate() sets data-active="true" on the matching chip from
   either entry point. Beefed up so the highlight reads clearly:
   coloured border + translucent fill + a ring offset for emphasis. */
.sdg-chip[data-active="true"] {
  border-color: var(--sdg-color);
  background: color-mix(in srgb, var(--sdg-color) 8%, #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);
}
/* On the active chip the icon-stack already pops against the
   tinted card background -- the pct badge just keeps its
   white-on-color treatment with a slight brightness boost so it
   reads as part of the "this one is selected" emphasis. */
.sdg-chip[data-active="true"] .sdg-chip__pct {
  background: color-mix(in srgb, #000 16%, transparent);
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 1180px) {
  .sdg-editor__compact-grid {
    grid-template-columns: 1fr;
  }
  .sdg-editor--compact {
    --active-w: auto;
    --rail-w:   auto;
  }
  .sdg-editor__connector { display: none; }
  .sdg-panel--empty.sdg-panel--compact { min-height: auto; }
  .sdg-editor__active-card { min-height: auto; }
}

/* ---- reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sdg-wheel__rotor,
  .sdg-wheel__label,
  .sdg-wheel__sector-aura,
  .sdg-wheel__alloc,
  .sdg-editor__bank-fill,
  .sdg-panel,
  .sdg-panel__official-card img,
  .sdg-panel__step,
  .sdg-chip,
  .sdg-editor__connector {
    animation: none;
    transition: none;
  }
}