/* "Data-driven decisions, real results." (Figma: home / Section, 1100 x 570).
   Column of three rows 24px apart: heading, 4 metric cards, 2 chart cards.
   Motion: value counters, line draw, bar fill + synced percentage counters. */

.fl-results {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 40px;
  font-family: var(--fl-font-sans);
}

.fl-results__title {
  margin: 0;
  color: var(--fl-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 61.2px;
  text-align: center;
}

.fl-results__script {
  color: var(--fl-green);
  font-family: var(--fl-font-script);
  font-weight: 700;
}

/* ---------- metric cards ---------- */

.fl-results__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.fl-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  box-sizing: border-box;
  padding: 20px;
  border: 2px solid var(--fl-ink);
  border-radius: 16px;
  background: var(--fl-white);
  box-shadow: var(--fl-shadow-md);
}

.fl-metric__label {
  align-self: stretch;
  margin: 0;
  color: var(--fl-text-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.fl-metric__value {
  align-self: stretch;
  margin: 0;
  color: var(--fl-ink);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 40px;
  font-variant-numeric: tabular-nums;
}

.fl-metric__delta {
  align-self: stretch;
  margin: 0;
  color: var(--fl-green);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.fl-metric__delta--down {
  color: #d40c1a;
}

/* ---------- chart cards ---------- */

.fl-results__charts {
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 450fr);
  gap: 20px;
}

.fl-chart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  border: 2px solid var(--fl-ink);
  border-radius: 16px;
  background: var(--fl-white);
  box-shadow: var(--fl-shadow-md);
}

.fl-chart--line {
  gap: 0;
  padding: 24px;
}

.fl-chart--bars {
  gap: 16px;
  padding: 24px 24px 64px;
}

.fl-chart__title {
  margin: 0;
  color: var(--fl-ink);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.fl-chart__sub {
  margin: 0;
  color: var(--fl-text-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.fl-chart__head {
  align-self: stretch;
}

/* ---------- line chart ---------- */

.fl-chart__plot {
  align-self: stretch;
}

.fl-line {
  display: block;
  width: 100%;
  height: 160px;
  overflow: visible;
}

.fl-line__area {
  fill: rgba(38, 123, 76, 0.14);
}

.fl-line__stroke {
  fill: none;
  stroke: var(--fl-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fl-line__dot {
  stroke: var(--fl-green);
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.22s ease-out;
}

.fl-line__dot.is-on,
.fl-line.is-drawn .fl-line__dot {
  opacity: 1;
}

.fl-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--fl-text-muted);
  font-size: 12px;
  font-style: italic;
  line-height: 16px;
}

/* ---------- bar chart ---------- */

.fl-bars {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 12px;
}

.fl-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fl-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.fl-bar__label {
  color: var(--fl-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.fl-bar__pct {
  color: var(--fl-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.fl-bar__track {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 8px;
  border: 1px solid var(--fl-ink);
  border-radius: 999px;
  background: var(--fl-surface);
}

.fl-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--fl-green);
}

/* ---------- entrance ---------- */

/* The heading and then the metric cards rise in one after another, and the two
   chart cards slide in from opposite sides. Each block's own motion — the
   value counters, the line draw, the bar fills — is started from results.js
   once that block has finished arriving, so none of it runs mid-flight.

   The durations below are mirrored by ENTER_MS and CHART_ENTER_MS in
   results.js; each block's delay arrives as --fl-enter-delay. */
.fl-results--armed .fl-results__title,
.fl-results--armed .fl-metric,
.fl-results--armed .fl-chart {
  opacity: 0;
}

.fl-results--play .fl-results__title,
.fl-results--play .fl-metric {
  animation: fl-results-rise 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--fl-enter-delay, 0ms);
}

.fl-results--play .fl-chart {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  animation-delay: var(--fl-enter-delay, 0ms);
}

.fl-results--play .fl-chart--line {
  animation-name: fl-results-from-left;
}

.fl-results--play .fl-chart--bars {
  animation-name: fl-results-from-right;
}

@keyframes fl-results-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fl-results-from-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fl-results-from-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-line__dot {
    transition: none;
  }

  .fl-results--armed .fl-results__title,
  .fl-results--armed .fl-metric,
  .fl-results--armed .fl-chart,
  .fl-results--play .fl-results__title,
  .fl-results--play .fl-metric,
  .fl-results--play .fl-chart {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 1023px) {
  .fl-results__title {
    font-size: 44px;
    line-height: 48px;
  }

  .fl-results__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fl-results__charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .fl-results {
    padding: 0;
  }
}