/* The Growth screen's charts 2 and 3: cumulative installs against other apps, and installs
   per period by source. Every rule is under .sim so nothing leaks into the console; colours
   come from sim.css's custom properties. Linked with the rest of the :app stylesheets. */

.sim [hidden] { display: none; }

/* Other apps: the three competitor colours in turn, by app (paid marketing keeps --sim-paid
   to itself). A dot is filled; a hollow one is an approximate date. A dashed line is a figure
   with no date. */
.sim .sim-chart__ref-line { fill: none; stroke-width: 2px; stroke-linejoin: round; }
.sim .sim-chart__ref-line--tone0 { stroke: var(--sim-competitor); }
.sim .sim-chart__ref-line--tone1 { stroke: var(--sim-competitor-2); }
.sim .sim-chart__ref-line--tone2 { stroke: var(--sim-competitor-3); }
.sim .sim-chart__ref-line--dashed { stroke-width: 1.5px; stroke-dasharray: 5 5; }

.sim .sim-chart__dot { stroke: var(--sim-card); stroke-width: 2px; }
.sim .sim-chart__dot--tone0 { fill: var(--sim-competitor); }
.sim .sim-chart__dot--tone1 { fill: var(--sim-competitor-2); }
.sim .sim-chart__dot--tone2 { fill: var(--sim-competitor-3); }
.sim .sim-chart__dot--hollow { fill: var(--sim-card); stroke-width: 2px; }
.sim .sim-chart__dot--hollow.sim-chart__dot--tone0 { stroke: var(--sim-competitor); }
.sim .sim-chart__dot--hollow.sim-chart__dot--tone1 { stroke: var(--sim-competitor-2); }
.sim .sim-chart__dot--hollow.sim-chart__dot--tone2 { stroke: var(--sim-competitor-3); }

/* A label wears its app's colour. */
.sim .sim-chart__ref-labels text { font-size: 12px; fill: var(--sim-text-label); }
.sim .sim-chart__ref-labels .sim-chart__ref-label--tone0 { fill: var(--sim-competitor); }
.sim .sim-chart__ref-labels .sim-chart__ref-label--tone1 { fill: var(--sim-competitor-2); }
.sim .sim-chart__ref-labels .sim-chart__ref-label--tone2 { fill: var(--sim-competitor-3); }

.sim .sim-swatch--tone0 { background: var(--sim-competitor); }
.sim .sim-swatch--tone1 { background: var(--sim-competitor-2); }
.sim .sim-swatch--tone2 { background: var(--sim-competitor-3); }

.sim .sim-chart__beyond { margin-top: 4px; }
.sim .sim-chart > .sim-note { margin-top: 6px; }

/* Chart 3: stacked bars, bottom to top organic, word of mouth, paid. */
.sim .sim-chart__bar { stroke: none; }
.sim .sim-chart__bar--organic { fill: var(--sim-organic); }
.sim .sim-chart__bar--wom { fill: var(--sim-wom); }
.sim .sim-chart__bar--paid { fill: var(--sim-paid); }

.sim .sim-swatch--box { width: 12px; height: 12px; border-radius: 3px; }
.sim .sim-swatch--organic { background: var(--sim-organic); }
.sim .sim-swatch--wom { background: var(--sim-wom); }
.sim .sim-swatch--paid { background: var(--sim-paid); }

/* A bar chart has less to say vertically than a line chart. */
.sim .sim-svg--short { height: 240px; }
@container (max-width: 520px) {
  .sim .sim-svg--short { height: 180px; }
}

/* With two columns on a screen tall enough to hold the whole rail, the rail stays in view
   while the charts below redraw as a slider moves. On a shorter screen it scrolls with the
   page, so its lower sliders and the save form are never out of reach. */
@media (min-height: 960px) {
  @container (min-width: 940px) {
    .sim .sim-rail { position: sticky; top: 16px; align-self: flex-start; }
  }
}