/* Projections: users and money against months, driven by one budget slider.
   Scoped per CLAUDE.md. Square corners, per --radius: 0.

   Deliberately close to the acquisition curve's panel styling, since the two
   sit one after the other and a reader crossing between them should not have to
   relearn what a panel looks like. */

[data-slide="projections"] .pr-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  align-items: stretch;
}
[data-slide="projections"] .pr-panel {
  background: var(--surface); padding: 1rem 1.2rem 0.9rem;
  border-radius: var(--radius); border-top: 3px solid var(--accent);
  min-width: 0;
}

[data-slide="projections"] .pr-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem; margin-bottom: 0.6rem;
}
[data-slide="projections"] .pr-title { font-size: 0.82rem; color: var(--fg-muted); }
[data-slide="projections"] .pr-delta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 500; color: var(--accent);
  white-space: nowrap; text-align: right;
}
[data-slide="projections"] .pr-delta i {
  display: block; font-style: normal; font-weight: 400;
  font-size: 0.62rem; color: var(--fg-muted);
}

/* Height in viewport units, not pixels: this slide carries two panels, a
   control and a footnote, and a fixed plot height is what pushes the footnote
   under the navigation strip on a laptop. */
/* Left gutter for the y labels. They are positioned against the plot's left
   edge, so without it they hang outside the panel entirely: "80,000" and "€3.0M"
   were rendering in the slide background. Same reservation the acquisition curve
   makes, and the x-axis takes it too so its ticks stay under the plot rather
   than under the labels. */
[data-slide="projections"] .pr-body { display: flex; padding-left: 3.4rem; }
[data-slide="projections"] .pr-plot {
  position: relative; flex: 1; min-width: 0;
  height: clamp(98px, 15.5vh, 190px);
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
[data-slide="projections"] .pr-plot svg { width: 100%; height: 100%; display: block; }

/* Axis furniture. Recessive on purpose: it exists so the curve can be read off,
   not to be read itself. */
[data-slide="projections"] .pr-tick-y {
  position: absolute; right: calc(100% + 0.35rem); transform: translateY(50%);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.58rem; color: var(--fg-muted); white-space: nowrap;
}
[data-slide="projections"] .pr-grid-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--border); opacity: 0.45;
}
[data-slide="projections"] .pr-xaxis { position: relative; height: 1.1rem; margin-top: 0.15rem; margin-left: 3.4rem; }
[data-slide="projections"] .pr-tick-x {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.58rem; color: var(--fg-muted); white-space: nowrap;
}
[data-slide="projections"] .pr-tick-x.at-start { transform: none; }
[data-slide="projections"] .pr-tick-x.at-end { transform: translateX(-100%); }
[data-slide="projections"] .pr-axis-title {
  text-align: center; font-size: 0.6rem; color: var(--fg-muted); opacity: 0.8;
  margin-left: 3.4rem;
}

/* Free above, Pro below, so the total is still the top edge and the paying band
   is read as the share of it that it is. */
[data-slide="projections"] .pr-area.free { fill: var(--accent); opacity: 0.16; }
[data-slide="projections"] .pr-area.pro { fill: var(--accent); opacity: 0.55; }
[data-slide="projections"] .pr-stack-gap {
  fill: none; stroke: var(--surface); stroke-width: 2;
}
/* Spend, from the baseline up to the cost curve. --flag is the brand's warm red,
   already used for caveats, so this stays on-palette rather than importing a
   fresh alarm colour. */
[data-slide="projections"] .pr-area-cost { fill: var(--flag); opacity: 0.22; }
/* What is left over, from the cost curve up to revenue. Orange, and the only
   orange on the chart, so the eye goes to the thing the slide is about. */
[data-slide="projections"] .pr-area-profit { fill: var(--accent); opacity: 0.28; }
[data-slide="projections"] .pr-line { fill: none; stroke-width: 2; }
[data-slide="projections"] .pr-line.users { stroke: var(--accent); }
[data-slide="projections"] .pr-line.rev { stroke: var(--accent); }
[data-slide="projections"] .pr-line.cost { stroke: var(--flag); }

/* The crossing, marked where it happens. It moves with the slider, which is
   most of the reason the slider is worth having. */
[data-slide="projections"] .pr-cross {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--accent); opacity: 0.55;
}
[data-slide="projections"] .pr-cross i {
  position: absolute; top: 0.1rem; left: 0.3rem;
  font-style: normal; font-size: 0.58rem; line-height: 1.25;
  color: var(--accent); white-space: nowrap;
}

[data-slide="projections"] .pr-legend {
  display: flex; gap: 1rem; margin-top: 0.4rem;
  font-size: 0.62rem; color: var(--fg-muted);
}
[data-slide="projections"] .pr-legend .sw {
  display: inline-block; width: 0.7rem; height: 2px;
  margin-right: 0.3rem; vertical-align: middle;
}
[data-slide="projections"] .pr-legend .sw.rev { background: var(--accent); }
[data-slide="projections"] .pr-legend .sw.pro { background: var(--accent); }
[data-slide="projections"] .pr-legend .sw.free { background: var(--accent); opacity: 0.35; }
[data-slide="projections"] .pr-legend .sw.cost { background: var(--flag); }

/* One control, centred. It drives both panels above it, so sitting hard left it
   read as belonging to the left one. */
[data-slide="projections"] .controls { margin-top: 0.7rem; justify-items: center; }
[data-slide="projections"] .controls label {
  width: 100%; max-width: 34rem; text-align: center;
}

@media (max-width: 1000px) {
  [data-slide="projections"] .pr-grid { grid-template-columns: 1fr; }
}