/* ==========================================================================
   Risk portfolio framework (tools/exhibit_portfolio.py): a complex portfolio,
   simplified into one framework. Builds on the shared slide classes in
   house.css (ex-sl-*); the switch between the slide and its stacked version is
   in matrix.css. Teal marks the framework (the after panel, its tiles, the
   connector); the ochre is kept for the path's end and the roadmap's end cap.
   The ochre and the teal are the site's (--gold-line, --graphic); the other
   colours are the design's own, for the dark ground of the locked Noir direction.
   ========================================================================== */

.ex-pf {
  --pf-tile: #183543;
  --pf-tile-line: #46646f;
  --pf-rule: #27454f;
  --pf-dash: #7f97a0;
}

/* --- Panels ---------------------------------------------------------------- */
.ex-pf-panel {
  fill: var(--sl-panel);
  stroke-width: 1;
}

.ex-pf-panel--before { stroke: var(--sl-line); }

.ex-pf-panel--after {
  stroke: var(--graphic);
  stroke-opacity: 0.5;
}

.ex-pf-head--muted { fill: var(--sl-muted); }
.ex-pf-head--teal { fill: var(--sl-teal-soft); }

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

/* --- Tiles: the same products, loose before and aligned after --------------- */
.ex-pf-tile {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;   /* the stacked version scales the tiles, not their hairlines */
}

/* Opaque, so a tile dropped over another hides what it covers. */
.ex-pf-tile--loose {
  fill: var(--pf-tile);
  stroke: var(--pf-tile-line);
}

.ex-pf-tile--set {
  fill: var(--graphic);
  fill-opacity: 0.16;
  stroke: var(--graphic);
  stroke-opacity: 0.7;
}

/* --- Connector and the questions' dashes ----------------------------------- */
.ex-pf-link {
  fill: none;
  stroke: var(--graphic);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* --- The tokenisation track ------------------------------------------------- */
.ex-pf-step-box {
  fill: var(--sl-panel);
  stroke: var(--sl-line);
  stroke-width: 1;
  stroke-linejoin: round;
}

.ex-pf-cap-box {
  fill: var(--gold-line);
}

/* --- Type ------------------------------------------------------------------ */
.ex-pf-group,
.ex-pf-q,
.ex-pf-link-text,
.ex-pf-aud,
.ex-pf-aud-sub,
.ex-pf-step,
.ex-pf-cap {
  font-family: var(--font-body);
}

.ex-pf-group {
  font-size: 12px;
  font-weight: 500;
  fill: var(--sl-muted);
}

.ex-pf-q {
  font-size: 13px;
  font-weight: 400;
  fill: var(--sl-steel);
}

.ex-pf-link-text {
  font-size: 12px;
  font-weight: 600;
  fill: var(--sl-steel);
}

.ex-pf-aud {
  font-size: 14px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-pf-aud-sub {
  font-size: 12px;
  font-weight: 400;
  fill: var(--sl-muted);
}

.ex-pf-step {
  font-size: 13px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-pf-cap {
  font-size: 13px;
  font-weight: 700;
  fill: var(--sl-ink);
}

/* Stacked version: the sizes in PF_TALL_SCALE (exhibit_portfolio.py); a test keeps them in step. */
.exhibit__svg--tall .ex-pf-q { font-size: 14px; }
.exhibit__svg--tall .ex-pf-group { font-size: 13px; }
.exhibit__svg--tall .ex-pf-link-text { font-size: 13px; }
.exhibit__svg--tall .ex-pf-aud-sub { font-size: 13px; }