/*  ══════════════════════════════════════════════════════════════════════
 *  PowerSCOAR Roadmap Renderer — Sprint 2 CSS
 *  Cibona palette:
 *    --ink #0D3D2D, --gold #EB7033, --coral #006F8A, --cream #F7F5F0
 *  ══════════════════════════════════════════════════════════════════════ */

.rr-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(235, 112, 51, 0.25);
}

.rr-section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #953B0F;
  margin-bottom: 8px;
}

.rr-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink, #0D3D2D);
  margin-bottom: 8px;
}

.rr-section-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink, #0D3D2D);
  opacity: 0.82;
  max-width: 700px;
  margin-bottom: 24px;
}

/* Archetype filter (Leagues only) */
.rr-archetype {
  background: var(--cream, #F2EFE8);
  border: 1px solid rgba(235, 112, 51, 0.35);
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.rr-archetype-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #953B0F;
  margin-bottom: 10px;
}

.rr-archetype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.rr-chip {
  padding: 6px 14px;
  border-radius: 2px;
  border: 1px solid rgba(13, 61, 45, 0.25);
  background: #F7F5F0;
  color: var(--ink, #0D3D2D);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rr-chip:hover { border-color: var(--gold, #EB7033); }
.rr-chip.active {
  background: var(--ink, #0D3D2D);
  color: var(--cream, #F2EFE8);
  border-color: var(--ink, #0D3D2D);
}

.rr-archetype-hint {
  font-size: 12.5px;
  color: var(--ink, #0D3D2D);
  opacity: 0.7;
}

/* Top-5 grid */
.rr-top5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

/* Card */
.rr-card {
  background: #F7F5F0;
  border: 1px solid rgba(13, 61, 45, 0.14);
  border-radius: 3px;
  padding: 16px 18px;
  transition: border-color 0.15s ease;
}
.rr-card:hover { border-color: rgba(235, 112, 51, 0.55); }

.rr-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.rr-rank {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #953B0F;
  min-width: 32px;
  line-height: 1;
  padding-top: 3px;
}

.rr-card-title { flex: 1; }

.rr-card-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink, #0D3D2D);
  line-height: 1.35;
  margin-bottom: 6px;
}

.rr-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rr-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.rr-band     { color: #F7F5F0; }
/* Etappe vier · Die vier Bandfarben lagen als Inline-Stil im JavaScript, und
   CONSIDER und PARK trugen dieselbe. Jetzt als Klasse, mit den vier
   unterscheidbaren Farben aus der Clubs Edition. */
.rr-band-go       { background: #15661D; }
.rr-band-fast     { background: #953B0F; }
.rr-band-consider { background: var(--coral-dark, #B4551D); }
.rr-band-park     { background: var(--muted, #4A4A48); }
.rr-effort   { background: rgba(13, 61, 45, 0.07); color: var(--ink, #0D3D2D); }
.rr-horizon  { background: rgba(0, 111, 138, 0.18); color: #690808; }

/* C4 (2026-08-18) · Value at Stake chip. Colour comes inline from value_bands.json. */
.rr-value-chip {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rr-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink, #0D3D2D);
  opacity: 0.85;
  margin: 8px 0 10px;
}

/* Cap anchor chips */
.rr-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(13, 61, 45, 0.14);
}

.rr-cap {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(235, 112, 51, 0.10);
  color: var(--ink, #0D3D2D);
  border-radius: 2px;
  cursor: help;
}

/* Roadmap lanes */
.rr-roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 960px) { .rr-roadmap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rr-roadmap { grid-template-columns: 1fr; } }

.rr-lane {
  background: var(--cream, #F2EFE8);
  border: 1px solid rgba(235, 112, 51, 0.25);
  border-radius: 3px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.rr-lane-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(235, 112, 51, 0.25);
}

.rr-lane-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  color: var(--ink, #0D3D2D);
  line-height: 1;
  margin-bottom: 4px;
}

.rr-lane-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #953B0F;
}

.rr-lane-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rr-lane .rr-card {
  padding: 12px 14px;
  background: #F7F5F0;
}
.rr-lane .rr-card-name { font-size: 13.5px; }
.rr-lane .rr-card-desc {
  font-size: 12px;
  margin-bottom: 8px;
}
.rr-lane .rr-badge { font-size: 10px; padding: 1px 7px; }

.rr-empty {
  padding: 20px;
  text-align: center;
  color: var(--ink, #0D3D2D);
  opacity: 0.6;
  font-size: 13px;
  font-style: italic;
}
.rr-empty-slim {
  padding: 10px 6px;
  font-size: 12px;
}

/* ── B2 · Ceiling case ───────────────────────────────────────────────
   Sits above the Top-5 section whenever the profile is at or within
   reach of its tier ceiling. Cream card with a gold rule so it reads as
   a statement about the result, not as another initiative card. */
#rr-ceiling-mount:empty { display: none; }
.rr-ceiling {
  border: 1px solid var(--gold, #EB7033);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--cream, #F2EFE8);
  padding: 24px 26px;
  margin: 0 0 28px;
}
.rr-ceiling-eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #953B0F;
  margin-bottom: 8px;
}
.rr-ceiling-title {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--ink, #0D3D2D);
}
.rr-ceiling-p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink, #0D3D2D);
  margin: 0 0 10px;
  max-width: 74ch;
}
.rr-ceiling-p-last { margin-bottom: 0; }
@media (max-width: 860px) {
  .rr-ceiling { padding: 18px 18px; margin-bottom: 22px; }
  .rr-ceiling-title { font-size: 20px; }
  .rr-ceiling-p { font-size: 14px; }
}

/* ── Implementation guide on the initiative card ──────────────────────
 *  Added 2026-08-03. Before this, Leagues and Events rendered name and
 *  description only; all eleven implementation fields plus the evidence
 *  links sat unused in initiatives_full.json.
 *
 *  Palette discipline: surfaces #F2EFE8 / #ECE8DF / #FFFDF9, line #DEDACF,
 *  radii 2–3px, no shadows, no plinth (initiative cards stay flat).
 * ─────────────────────────────────────────────────────────────────── */

/* Depth strip — always visible, so the depth is legible before opening */
.rrig-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid #DEDACF;
  font-size: 11.5px;
  line-height: 1.7;
  color: #6E6B63;
}
.rrig-stat { white-space: nowrap; }
.rrig-stat b {
  font-weight: 600;
  color: var(--ink, #0D3D2D);
  font-variant-numeric: tabular-nums lining-nums;
}
.rrig-dot { color: #A8A59C; }

/* First action */
.rrig-first {
  margin-top: 10px;
  padding: 9px 11px;
  background: #ECE8DF;
  border-left: 2px solid #B4551D;
  border-radius: 0 2px 2px 0;
  font-size: 12.5px;
  line-height: 1.55;
}
.rrig-first-k {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #953B0F;
  margin-bottom: 3px;
}
.rrig-first-v { color: var(--ink, #0D3D2D); }

/* Toggles */
.rrig-wrap {
  margin-top: 8px;
  border: 1px solid #DEDACF;
  border-radius: 2px;
  background: #FFFDF9;
}
.rrig-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: #6E6B63;
  user-select: none;
}
.rrig-summary::-webkit-details-marker { display: none; }
.rrig-summary:hover { color: var(--ink, #0D3D2D); }
.rrig-summary:focus-visible { outline: 2px solid #006F8A; outline-offset: 1px; }
.rrig-caret {
  display: inline-block;
  font-size: 11px;
  color: #8C8A83;
  transition: transform 0.15s ease;
}
.rrig-wrap[open] > .rrig-summary > .rrig-caret { transform: rotate(90deg); }
.rrig-wrap[open] > .rrig-summary { color: var(--ink, #0D3D2D); }
.rrig-label { flex: 0 1 auto; }
.rrig-hero {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 2px 6px;
  border-radius: 2px;
  background: #15661D;
  color: #F7F5F0;
}

.rrig-body {
  padding: 2px 13px 13px;
  border-top: 1px solid #DEDACF;
}
.rrig-prov {
  margin: 11px 0 13px;
  font-size: 11px;
  line-height: 1.55;
  color: #6E6B63;
}
.rrig-section { margin-bottom: 13px; }
.rrig-section:last-child { margin-bottom: 0; }
.rrig-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1E4C39;
  margin-bottom: 5px;
}
.rrig-paras { margin: 0; }
.rrig-p {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink, #0D3D2D);
}
.rrig-p:last-child { margin-bottom: 0; }
.rrig-empty { font-size: 12.5px; color: #A8A59C; }

/* Budget band — monochrome commercial ramp, light to dark. The step is
   carried by the word as well as the tone, never by colour alone. */
.rrig-budget {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.rrig-budget-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.rrig-band-light       { background: rgba(240, 146, 94, 0.18); color: #953B0F; }
.rrig-band-moderate    { background: rgba(235, 112, 51, 0.28); color: #953B0F; }
.rrig-band-substantial { background: #EB7033; color: #1A1A1A; }
.rrig-band-major       { background: #B4551D; color: #F7F5F0; }
.rrig-band-strategic   { background: #953B0F; color: #F7F5F0; }
.rrig-budget-blurb {
  flex: 1 1 220px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink, #0D3D2D);
}
.rrig-budget-caveat {
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8C8A83;
}
/* C6 (2026-08-18) · drivers line under the band chip. */
.rrig-budget-drivers {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft, #4A5A50);
}

/* Evidence */
.rrig-src-wrap .rrig-label { color: inherit; }
.rrig-srcs {
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
}
.rrig-src {
  padding: 5px 0;
  border-bottom: 1px solid #ECE8DF;
  font-size: 12.5px;
  line-height: 1.5;
}
.rrig-src:last-child { border-bottom: none; }
.rrig-src-a {
  color: #006F8A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rrig-src-a:hover { color: #00505F; }
.rrig-src-host {
  display: block;
  font-size: 10.5px;
  color: #8C8A83;
  margin-top: 1px;
}
.rrig-expert {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.55;
  color: #6E6B63;
}

/* A4/C2 (2026-08-18) · Other reference leagues, reference peer promotion,
   filter footnote. Same visual language as the parent evidence panel. */
.rrig-src-more {
  margin-top: 12px;
  border-top: 1px solid #ECE8DF;
  padding-top: 10px;
}
.rrig-src-more[open] { }
.rrig-src-more-summary {
  cursor: pointer;
  font-size: 12px;
  color: #6E6B63;
  list-style: none;
  padding: 2px 0;
}
.rrig-src-more-summary::-webkit-details-marker { display: none; }
.rrig-src-more-summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  color: #8C8A83;
  transition: transform 120ms ease;
}
.rrig-src-more[open] > .rrig-src-more-summary::before { transform: rotate(90deg); }
.rrig-src-more .rrig-srcs { margin-top: 6px; }
.rrig-src-note {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.4;
  color: #6E6B63;
  background: #F3EEE2;
  border-radius: 3px;
  vertical-align: 2px;
}
.rrig-src-footnote {
  margin-top: 10px;
  font-size: 10.5px;
  line-height: 1.55;
  color: #8C8A83;
}

/* Roadmap lanes stay compact: strip only, tighter */
.rr-lane .rrig-strip {
  margin-top: 8px;
  padding-top: 7px;
  font-size: 10.5px;
}

@media (max-width: 640px) {
  .rrig-strip { font-size: 11px; }
  .rrig-body { padding: 2px 11px 11px; }
  .rrig-budget-blurb { flex-basis: 100%; }
}

/* ── Demo gating (2026-08-03) ─────────────────────────────────────────
   Free run: initiative one stays open as a worked example, everything
   below it shows the locked card. Flat like the rest of the initiative
   surface — no shadow, no plinth. */

.rrig-lock {
  margin-top: 10px;
  border: 1px solid #DEDACF;
  border-left: 3px solid #B4551D;
  border-radius: 3px;
  background: #F2EFE8;
  padding: 12px 14px 13px;
}

.rrig-lock-h {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #953B0F;
}

.rrig-lock-mark { font-size: 11px; line-height: 1; color: #B4551D; }

.rrig-lock-tag {
  border: 1px solid #B4551D;
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #953B0F;
  background: #FFFDF9;
}

.rrig-lock-p {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: #4A4A48;
}

.rrig-sample {
  border: 1px solid #15661D;
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #0D3D14;
  background: #FFFDF9;
}

.rrig-sample-wrap { border-color: #D3CEC2; }

@media (max-width: 560px) {
  .rrig-lock { padding: 11px 12px 12px; }
  .rrig-lock-p { font-size: 13px; }
}

/* p61 · Tiefenblock der Top-5-Karten startet zugeklappt, und die Bahnen der
   Roadmap zeigen zwei Initiativen je Fenster. Alles Weitere steht hinter dem
   Full Diagnostic. */
.rrig-fold { margin-top: 12px; border-top: 1px solid var(--line, #E1DFDB); }
.rrig-fold-s {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 10px 0 2px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--coral-dark, #B4551D);
}
.rrig-fold-s::-webkit-details-marker { display: none; }
.rrig-fold-c::before { content: '+'; font-size: 15px; line-height: 1; }
.rrig-fold[open] > .rrig-fold-s > .rrig-fold-c::before { content: '\2212'; }
.rrig-fold-b { padding-top: 4px; }
.rr-lane-lock {
  display: block;
  padding: 12px 14px; border: 1px dashed var(--line, #E1DFDB);
  border-radius: 4px; background: var(--paper, #F7F5F0);
  font-size: 12.5px; color: var(--muted, #4A4A48);
}
.rr-lane-lock-mark { color: var(--coral-dark, #B4551D); font-size: 11px; margin-right: 6px; }
.rr-lane-lock-t { display: inline; }
.rr-lane-lock-tag {
  display: inline-block; margin-top: 8px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--coral-dark, #B4551D);
  border: 1px solid var(--coral-dark, #B4551D); border-radius: 3px; padding: 2px 6px;
}