/* Scene 18, Organisational Value Dashboard. Keep the story compact and easy to scan. */
.value-dashboard {
  --value-ink: #07194d;
  --value-muted: #536184;
  --value-border: #dde4f0;
  --value-purple: #7650f3;
  --value-blue: #1769e8;
  --value-green: #159a68;
  --value-orange: #ed8211;
  width: 100%;
  color: var(--value-ink);
}

.value-dashboard h1,
.value-dashboard h2,
.value-dashboard h3,
.value-dashboard p {
  margin-top: 0;
}

.value-dashboard h1,
.value-dashboard h2,
.value-dashboard h3,
.value-dashboard strong {
  color: var(--value-ink);
}

.value-dashboard p,
.value-dashboard small,
.value-dashboard .muted {
  color: var(--value-muted);
}

.value-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 10px;
}

.value-heading-title h1 {
  margin-bottom: 5px;
  font-size: 27px;
  letter-spacing: -.8px;
}

.value-heading-title + p {
  margin-bottom: 0;
  font-size: 13px;
}

.value-heading-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.value-date-range {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  padding: 0 12px;
  border: 1px solid var(--value-border);
  border-radius: 9px;
  background: #fff;
  color: var(--value-muted);
  font-size: 12px;
  white-space: nowrap;
}

.value-heading-controls .btn {
  min-height: 37px;
  border-radius: 9px;
  border-color: var(--value-border);
  font-size: 12px;
  box-shadow: none;
}

.value-provenance {
  margin: 0 0 14px;
  color: #7885a1;
  font-size: 11px;
}

.value-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.value-kpi,
.value-journey-card,
.value-evidence-card {
  border: 1px solid var(--value-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(19, 39, 78, .045);
}

.value-kpi {
  min-width: 0;
  min-height: 108px;
  padding: 14px 15px;
}

.value-kpi-top h2 {
  margin: 0;
  color: var(--value-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.value-kpi-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}

.value-kpi-number strong {
  font-size: 26px;
  letter-spacing: -1px;
}

.value-trend {
  color: var(--value-green);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.value-kpi-purple { border-top: 3px solid var(--value-purple); }
.value-kpi-green { border-top: 3px solid var(--value-green); }
.value-kpi-blue { border-top: 3px solid var(--value-blue); }

.value-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .85fr);
  align-items: start;
  gap: 14px;
}

.value-journey-card,
.value-evidence-card {
  min-width: 0;
  padding: 16px;
}

.value-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.value-section-kicker {
  margin-bottom: 4px;
  color: var(--value-purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.value-card-heading h2 {
  margin-bottom: 0;
  font-size: 16px;
  letter-spacing: -.2px;
}

.value-card-heading > .btn {
  flex: 0 0 auto;
  font-size: 11px;
}

.value-journey {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  align-items: start;
  gap: 3px;
}

.value-stage {
  display: flex;
  min-width: 0;
  grid-column: span 2;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 3px 8px;
  background: transparent;
  color: var(--value-ink);
  text-align: center;
  transition: border-color .15s, background .15s, transform .15s;
}

.value-stage:hover,
.value-stage:focus-visible {
  border-color: #d9e1f4;
  background: #f8faff;
  transform: translateY(-2px);
}

.value-stage-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-bottom: 7px;
  border-radius: 50%;
  background: var(--value-purple);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.value-stage:nth-of-type(4n + 2) .value-stage-index { background: var(--value-orange); }
.value-stage:nth-of-type(4n + 3) .value-stage-index { background: var(--value-green); }
.value-stage:nth-of-type(4n + 4) .value-stage-index { background: var(--value-blue); }

.value-stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border: 1px solid #d9d5ff;
  border-radius: 50%;
  background: #f7f4ff;
  color: var(--value-purple);
}

.value-stage:nth-of-type(4n + 2) .value-stage-icon { border-color: #f6dfbd; background: #fff8ef; color: var(--value-orange); }
.value-stage:nth-of-type(4n + 3) .value-stage-icon { border-color: #cce9d9; background: #eefaf3; color: var(--value-green); }
.value-stage:nth-of-type(4n + 4) .value-stage-icon { border-color: #d1e0ff; background: #f0f5ff; color: var(--value-blue); }

.value-stage .value-icon {
  width: 19px;
  height: 19px;
}

.value-stage strong {
  min-height: 30px;
  font-size: 10px;
  line-height: 1.35;
}

.value-journey-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: #9aa8c1;
  font-size: 16px;
  font-weight: 700;
  padding-top: 42px;
}

.value-loop-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid #cfe9d9;
  border-radius: 8px;
  background: #f0faf4;
}

.value-loop-status.pending {
  border-color: #f7dfbf;
  background: #fff9f0;
}

.value-status-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--value-green);
}

.value-loop-status.pending .value-status-icon { color: var(--value-orange); }

.value-loop-status strong,
.value-loop-status p {
  font-size: 10px;
}

.value-loop-status p {
  display: inline;
  margin: 0 0 0 3px;
}

.value-journey-actions {
  display: flex;
  gap: 8px;
  margin-top: 11px;
}

.value-journey-actions .btn { font-size: 11px; }

.value-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.value-evidence-metric {
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid var(--value-border);
  border-radius: 9px;
  background: #fbfcff;
}

.value-evidence-metric > span {
  display: block;
  min-height: 28px;
  color: var(--value-muted);
  font-size: 10px;
  line-height: 1.35;
}

.value-evidence-metric > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 9px;
}

.value-evidence-metric strong {
  font-size: 22px;
  letter-spacing: -.7px;
}

.value-evidence-metric em {
  color: var(--value-green);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.value-evidence-metric em.down { color: var(--value-green); }
.value-evidence-note { margin: 13px 0 0; font-size: 11px; }

.value-modal-stage {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.value-stage-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--value-purple);
  color: #fff;
  font-weight: 800;
}

.value-modal-stage strong { display: block; margin-bottom: 4px; }
.value-modal-stage p { margin-bottom: 0; }

.value-filter-modal-select { width: 100%; }

@media (max-width: 1100px) {
  .value-dashboard-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .value-heading-controls { justify-content: flex-start; }
  .value-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .value-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .value-kpi { min-height: 96px; padding: 12px; }
  .value-kpi-number strong { font-size: 23px; }
  .value-journey {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .value-stage {
    width: 100%;
    min-height: 54px;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    text-align: left;
  }
  .value-stage-index { margin: 0; }
  .value-stage-icon { width: 30px; height: 30px; margin: 0; }
  .value-stage .value-icon { width: 16px; height: 16px; }
  .value-stage strong { min-height: 0; }
  .value-journey-arrow {
    height: 18px;
    padding: 0;
    transform: rotate(90deg);
  }
  .value-loop-status { align-items: flex-start; }
  .value-loop-status p { display: block; margin: 3px 0 0; }
}

@media (max-width: 420px) {
  .value-heading-controls { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .value-date-range { grid-column: 1 / -1; justify-content: center; }
  .value-heading-controls .btn { width: 100%; }
  .value-evidence-grid { grid-template-columns: 1fr; }
  .value-evidence-metric > span { min-height: 0; }
  .value-journey-actions { flex-wrap: wrap; }
  .value-journey-actions .btn { flex: 1 1 100%; }
}