/* ==========================================================================
   Route to market (tools/exhibit_route.py): one route line, in a sober
   transit-map grammar. Builds on the shared slide classes in house.css
   (ex-sl-*); the switch between the slide and its stacked version is in
   matrix.css. The line is the site's teal (--graphic), the destination its
   ochre (--gold-line); the other colours are the design's own, for the dark
   ground of the locked Noir direction.
   ========================================================================== */

.ex-rt {
  --rt-band: rgba(255, 255, 255, 0.03);
  --rt-band-line: #22404b;
  --rt-sep: #2f4d58;
}

/* --- What the business needed: a thin strip of equal cells ----------------- */
.ex-rt-strip {
  fill: var(--rt-band);
  stroke: var(--rt-band-line);
  stroke-width: 1;
}

.ex-rt-sep {
  fill: none;
  stroke: var(--rt-sep);
  stroke-width: 1;
}

/* --- The route line -------------------------------------------------------- */
.ex-rt-line {
  fill: none;
  stroke: var(--graphic);
  stroke-width: 6;
  stroke-linecap: round;
}

/* The pipeline is still developing: the line runs on dashed into the destination. */
.ex-rt-line--dashed {
  stroke-width: 4;
  stroke-dasharray: 9 7;
  stroke-linecap: butt;
}

.ex-rt-origin {
  fill: var(--graphic);
}

/* A station: a ring on the line, hollow on the frame's ground. */
.ex-rt-station {
  fill: var(--plate);
  stroke: var(--graphic);
  stroke-width: 3;
}

.ex-rt-dest {
  fill: var(--plate);
  stroke: var(--gold-line);
  stroke-width: 3;
}

.ex-rt-dest-core {
  fill: var(--gold-line);
}

/* --- The foundation the route runs on ------------------------------------- */
.ex-rt-base {
  fill: var(--graphic);
  fill-opacity: 0.08;
  stroke: var(--graphic);
  stroke-opacity: 0.5;
  stroke-width: 1;
}

/* --- Type ------------------------------------------------------------------ */
.ex-rt-need,
.ex-rt-verb,
.ex-rt-name,
.ex-rt-base-sub {
  font-family: var(--font-body);
}

.ex-rt-need {
  font-size: 14px;
  font-weight: 400;
  fill: var(--sl-steel);
}

.ex-rt-terminus {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-rt-terminus--gold {
  fill: var(--gold-line);
}

.ex-rt-verb {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--sl-teal-soft);
}

.ex-rt-name {
  font-size: 15px;
  font-weight: 600;
  fill: var(--sl-fg);
}

/* Cormorant's own italic (the site loads no Inter italic, which would be slanted by the browser). */
.ex-rt-pipeline {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  fill: var(--sl-steel);
}

.ex-rt-base-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-rt-base-sub {
  font-size: 13px;
  font-weight: 400;
  fill: var(--sl-muted);
}

/* Stacked version: the sizes in RT_TALL_SCALE (exhibit_route.py); a test keeps them in step. */
.exhibit__svg--tall .ex-rt-terminus { font-size: 20px; }
.exhibit__svg--tall .ex-rt-base-name { font-size: 20px; }