/* ==========================================================================
   Framework cascade (tools/exhibit_cascade.py): one framework, then its
   adoption. 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
   ochre and the teal are the site's (--gold-line, --graphic): ochre only for
   the path's end and the gold part of the bar. The other colours are the
   slides' own, for the dark ground of the locked Noir direction.
   ========================================================================== */

.ex-cc {
  --cc-rule: #2a4652;
  --cc-arrow: #6f8b95;
  --cc-bar: #3f6874;
}

/* --- Structure: hairlines, the framework's card, the arrow ------------------ */
.ex-cc-rule {
  fill: var(--cc-rule);
}

.ex-cc-frame {
  fill: var(--sl-panel);
  stroke: var(--graphic);
  stroke-opacity: 0.55;
  stroke-width: 1;
}

.ex-cc-divider {
  fill: none;
  stroke: var(--cc-rule);
  stroke-width: 1;
}

.ex-cc-arrow {
  fill: none;
  stroke: var(--cc-arrow);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ex-cc-arrowhead {
  fill: var(--cc-arrow);
}

/* --- The data mark: the whole to scale, its gold part, the bracket ---------- */
.ex-cc-bar {
  fill: var(--cc-bar);
}

.ex-cc-bar-part {
  fill: var(--gold-line);
}

.ex-cc-bracket {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1;
}

/* --- The closing band ------------------------------------------------------- */
.ex-cc-band {
  fill: var(--graphic);
  fill-opacity: 0.1;
  stroke: var(--graphic);
  stroke-opacity: 0.6;
  stroke-width: 1;
}

/* --- Type ------------------------------------------------------------------ */
.ex-cc-part,
.ex-cc-channel,
.ex-cc-label,
.ex-cc-band-text {
  font-family: var(--font-body);
}

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

.ex-cc-part,
.ex-cc-channel {
  font-size: 14px;
  font-weight: 500;
  fill: var(--sl-fg);
}

/* Figures: lining numerals, as every figure on the site (Cormorant's default
   old-style digits read "150" as "I5O"). */
.ex-cc-figure,
.ex-cc-seg-figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

.ex-cc-figure {
  font-size: 36px;
  fill: var(--sl-fg);
}

.ex-cc-seg-figure {
  font-size: 24px;
  fill: var(--gold-line);
}

.ex-cc-label {
  font-size: 13px;
  font-weight: 400;
  fill: var(--sl-muted);
}

.ex-cc-band-text {
  font-size: 13px;
  font-weight: 400;
  fill: var(--sl-steel);
}

.ex-cc-band-text__b {
  font-weight: 600;
  fill: var(--sl-fg);
}

/* Stacked version: the sizes in CC_TALL_SCALE (exhibit_cascade.py). */
.exhibit__svg--tall .ex-cc-name { font-size: 20px; }