/* Hero mode buttons as lighthouse gels, and the Data Reef country breakdown. */

/* Each button carries its gel colour, the same in both themes because the
   buttons sit over the night scene. [data-action] outranks the theme rules. */
.mode-switcher button[data-mode="missions"][data-action] { --mode-accent:#ffb0a4; --mode-wash:rgba(255,176,164,.15); }
.mode-switcher button[data-mode="peace"][data-action] { --mode-accent:#2e9fd6; --mode-wash:rgba(46,159,214,.16); }
.mode-switcher button[data-mode="learning"][data-action] { --mode-accent:#e8364a; --mode-wash:rgba(232,54,74,.16); }
.mode-switcher button[data-mode="sports"][data-action] { --mode-accent:#fd9d24; --mode-wash:rgba(253,157,36,.15); }
.mode-switcher button[data-mode="partners"][data-action] { --mode-accent:#5d8fc4; --mode-wash:rgba(93,143,196,.16); }
.mode-switcher button[data-mode="impact"][data-action] { --mode-accent:#5fb843; --mode-wash:rgba(95,184,67,.15); }
.mode-switcher button.active,.mode-switcher button:hover,.mode-switcher button:focus-visible { color:#061b23; }

.hero > .mode-switcher button,
.hero-explorer .mode-switcher button {
  min-height:52px;
  padding:10px 8px;
  font-size:clamp(14px,1.25vw,16px);
  letter-spacing:0;
  white-space:normal;
  text-wrap:balance;
}
.mode-switcher button { transition:color .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .18s ease; }
@media (max-width:560px) {
  .hero > .mode-switcher button { min-height:46px; font-size:14px; }
}

/* The breakdown replaces the mode's generic heading once data arrives. */
.simulation-copy.has-gaps > .eyebrow,
.simulation-copy.has-gaps > h2 { display:none; }
.hero-explorer,.country-gaps { --gel:#ffb0a4; }
.hero-explorer .country-gaps { --gel:inherit; }
.country-gaps.has-gaps { display:grid; gap:10px; max-width:520px; font-size:14px; line-height:1.5; }
.gaps-eyebrow { font-size:11px; font-weight:800; letter-spacing:.12em; opacity:.72; }
.gaps-headline { margin:0; font:600 clamp(20px,2vw,28px)/1.15 var(--font-display); letter-spacing:-.01em; }
.gaps-headline strong { color:var(--gel); font-weight:800; transition:color .35s ease; }

.gaps-bar { display:flex; height:10px; border-radius:999px; overflow:hidden; gap:2px; background:rgba(255,255,255,.06); }
.gaps-bar i { min-width:3px; }
.gaps-bar .is-measurable,.gaps-legend .is-measurable i { background:var(--gel); transition:background .35s ease; }
.gaps-bar .is-modelled,.gaps-legend .is-modelled i { background:color-mix(in srgb,var(--gel) 55%,#6d7d84); }
.gaps-bar .is-single,.gaps-legend .is-single i { background:color-mix(in srgb,var(--gel) 25%,#8b979c); }
.gaps-bar .is-stale,.gaps-legend .is-stale i { background:repeating-linear-gradient(135deg,#8b979c 0 3px,transparent 3px 6px); box-shadow:inset 0 0 0 1px #8b979c; }
.gaps-bar .is-none,.gaps-legend .is-none i { background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.gaps-legend { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; opacity:.85; }
.gaps-legend span { display:inline-flex; align-items:center; gap:6px; }
.gaps-legend i { width:10px; height:10px; border-radius:3px; }

.gaps-goals { list-style:none; margin:2px 0 0; padding:0; display:grid; gap:8px; }
.gaps-goal { display:grid; grid-template-columns:28px 1fr; gap:3px 10px; align-items:center; }
.gaps-goal b { grid-row:span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:var(--sdg); color:#fff; font-size:13px; }
.gaps-goal span { font-weight:700; }
.gaps-goal .gaps-bar { grid-column:2; height:7px; }
.gaps-goal small { grid-column:2; font-size:12px; opacity:.8; }
.gaps-goals:has(> :only-child) .gaps-goal .gaps-bar { display:none; }

.gaps-grid { list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:repeat(17,minmax(0,1fr)); gap:3px; }
.gaps-grid li { position:relative; display:grid; place-items:center; height:34px; border-radius:5px; overflow:hidden; background:color-mix(in srgb,var(--sdg) 22%,transparent); }
.gaps-grid i { position:absolute; inset:auto 0 0; height:calc(var(--measured) * 100%); background:var(--sdg); }
.gaps-grid b { position:relative; z-index:1; font-size:11px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }
@media (max-width:560px) { .gaps-grid { grid-template-columns:repeat(9,minmax(0,1fr)); } }

.gaps-trends { margin:0; padding:0 0 0 1em; display:grid; gap:4px; font-size:13px; }
.gaps-trends b { color:var(--gel); }
.country-gaps.has-gaps p { margin:0; max-width:none; font-size:13px; color:inherit; opacity:.9; }
.gaps-biggest span { font-weight:800; }
.gaps-biggest em { font-style:normal; opacity:.7; }
.gaps-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:2px; }
.gaps-actions a { font-size:12px; color:inherit; opacity:.7; }
.gaps-actions a:hover { opacity:1; }
.gaps-actions .btn.primary { background:var(--gel); border-color:var(--gel); color:#061b23; transition:background .35s ease,border-color .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .mode-switcher button,.gaps-headline strong,.gaps-bar i,.gaps-actions .btn.primary { transition:none; }
}