/* ==========================================================================
   Annotated operating-model matrix (tools/exhibits.py: matrix)
   Laid out like a full-width slide, from the Option B design. On the case page
   the slide fills the width above "At a glance" from 64em up; below that the
   stacked version replaces it, so nothing has to scroll sideways. Colours are
   the design's own, for the dark ground every exhibit sits on.
   ========================================================================== */

.ex-mx {
  --mx-steel: #b7c6cb;
  --mx-path: #9db1b8;
  --mx-band: rgba(255, 255, 255, 0.035);
  --mx-band-line: #2a4a56;
  --mx-col: rgba(230, 174, 35, 0.1);
  --mx-col-line: rgba(230, 174, 35, 0.55);
  --mx-coe: #15464e;
  --mx-teal-soft: #5cc3c0;
  --mx-leader: #4f6e79;
}

/* --- Shapes ---------------------------------------------------------------- */
.ex-mx-rowband {
  fill: var(--mx-band);
  stroke: var(--mx-band-line);
  stroke-width: 1;
}

.ex-mx-col {
  fill: var(--mx-col);
  stroke: var(--mx-col-line);
  stroke-width: 1;
}

.ex-mx-chipbox {
  fill: var(--gold-line);
}

.ex-mx-coe {
  fill: var(--mx-coe);
  stroke: var(--graphic);
  stroke-width: 1;
}

.ex-mx-dash {
  fill: none;
  stroke: var(--graphic);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

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

/* --- Type (slide sizes; the stacked version overrides below) ---------------- */
.ex-mx-path,
.ex-mx-chip,
.ex-mx-chip-sub,
.ex-mx-row,
.ex-mx-band-text,
.ex-mx-head,
.ex-mx-body {
  font-family: var(--font-body);
}

.ex-mx-path {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--mx-path);
}

.ex-mx-path__end {
  fill: var(--gold-line);
}

.ex-mx-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  fill: var(--fg);
}

.ex-mx-chip {
  font-size: 15px;
  font-weight: 700;
  fill: var(--yr-ink-deep);
}

.ex-mx-chip-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: var(--yr-ink-deep);
}

.ex-mx-row {
  font-size: 13px;
  font-weight: 600;
  fill: var(--mx-steel);
}

.ex-mx-band-text {
  font-size: 15px;
  font-weight: 600;
  fill: var(--fg);
}

.ex-mx-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ex-mx-head--gold { fill: var(--gold-line); }
.ex-mx-head--steel { fill: var(--mx-steel); }
.ex-mx-head--teal { fill: var(--mx-teal-soft); }

.ex-mx-body {
  font-size: 16px;
  font-weight: 400;
  fill: var(--fg);
}

/* Stacked version: the sizes in MX_TALL_SCALE (exhibits.py). */
.exhibit__svg--tall .ex-mx-path { font-size: 11px; }
.exhibit__svg--tall .ex-mx-title { font-size: 26px; }
.exhibit__svg--tall .ex-mx-row { font-size: 12px; }
.exhibit__svg--tall .ex-mx-band-text { font-size: 14px; }
.exhibit__svg--tall .ex-mx-body { font-size: 14px; }

/* --- One version per screen size -------------------------------------------- */
.exhibit__svg--tall {
  display: none;
}

@media (max-width: 63.99em) {
  .exhibit__svg--wide {
    display: none;
  }

  .exhibit__frame .exhibit__svg--tall {
    display: block;
    min-width: 0;
    max-width: 32rem;
    margin-inline: auto;
  }

  .exhibit--wide .exhibit__hint {
    display: none;
  }
}

/* Case page: the slide takes the full width, "At a glance" runs beneath it in a row. */
@media (min-width: 64em) {
  .case-visual__grid > .exhibit--wide,
  .case-visual__grid > .exhibit--wide + .glance {
    grid-column: 1 / -1;
  }

  .exhibit--wide + .glance dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    column-gap: var(--col-gap);
  }
}