/* =========================================================================
   VFIntel Exhibit System  ·  data exhibits in the McKinsey / MGI grammar
   -------------------------------------------------------------------------
   The companion to diagram-system.css. Where the diagram system renders
   PROCESS and STRUCTURE (flows, architecture, trees, ecosystems), the
   exhibit system renders DATA: the chart that compresses an argument into
   one frame. Built to the McKinsey Global Institute exhibit grammar,
   translated into the VFIntel palette.

     <link rel="stylesheet" href="colors_and_type.css">   tokens + fonts
     <link rel="stylesheet" href="exhibit-system.css">    this sheet

   Every chart is monochrome (navy + grays) with ONE emerald series that
   carries the takeaway. Inter Tight only. No Georgia, no gradients, no
   shadows, no pie charts, no 3D. See exhibit-guide.md for the full method.
   ========================================================================= */

/* ── The exhibit frame ───────────────────────────────────────────────────
   Header order, top to bottom:
     1 · "Exhibit N" (top-left)  ·  wordmark (top-right)
     2 · subject + units line   (regular weight)
     3 · takeaway sentence      (bold headline)
     4 · the chart
     5 · footnotes (superscript-keyed)
     6 · Source line
   ------------------------------------------------------------------------- */
.vfx-exhibit {
  --vfx-navy:     var(--navy);
  --vfx-emerald:  var(--emerald);
  --vfx-emerald2: var(--emerald-2);
  --vfx-gray:     #9CA3AF;          /* primary neutral series                */
  --vfx-gray-2:   #C9CED6;          /* secondary neutral series              */
  --vfx-pale:     #E9ECF0;          /* track / remainder / grid fill         */
  --vfx-red:      var(--deep-red);  /* negative / decline series             */
  --vfx-grid:     #E5E7EB;          /* axis + gridline hairlines             */

  font-family: var(--font-body);
  color: var(--navy);
  background: #FFFFFF;
  padding: var(--space-6) var(--space-7) var(--space-5);
  border: var(--rule-thin) solid var(--light-gray);
  border-radius: var(--radius-2);
  max-width: 920px;
}

.vfx-exhibit__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.vfx-exhibit__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--warm-gray);
}
.vfx-exhibit__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy);
  white-space: nowrap;
}
.vfx-exhibit__brand .vfx-f { color: var(--emerald); }   /* emerald F + i, per logo */

.vfx-exhibit__subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 var(--space-1);
  text-wrap: pretty;
}
.vfx-exhibit__title {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  max-width: 40ch;
  text-wrap: balance;
}
.vfx-exhibit__title::after {       /* the 2px emerald accent rule, VFIntel signature */
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--emerald);
  margin-top: var(--space-3);
}

.vfx-exhibit__body { margin: var(--space-4) 0 var(--space-5); }

.vfx-exhibit__foot {
  border-top: var(--rule-thin) solid var(--light-gray);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vfx-note, .vfx-source {
  font-size: 10px;
  line-height: 1.4;
  color: var(--warm-gray);
  margin: 0;
}
.vfx-source { font-style: normal; }
.vfx-note sup { font-size: 8px; }

/* ── Legend ──────────────────────────────────────────────────────────────*/
.vfx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.vfx-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--charcoal);
}
.vfx-legend__swatch {
  width: 11px; height: 11px;
  flex: none;
  border-radius: 1px;
}
.vfx-legend__swatch--line { height: 3px; width: 16px; border-radius: 0; }

/* ── Horizontal bar chart (CSS, no SVG needed) ───────────────────────────
   Markup:
     <div class="vfx-bars">
       <div class="vfx-bar-row">
         <div class="vfx-bar-row__label">Electronics</div>
         <div class="vfx-bar-row__track">
           <div class="vfx-bar" style="width:100%"></div>
         </div>
         <div class="vfx-bar-row__value">900</div>
       </div>
     </div>
   Add .is-highlight to the row whose bar should carry the emerald accent.
   ------------------------------------------------------------------------- */
.vfx-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.vfx-bar-row {
  display: grid;
  grid-template-columns: 150px 1fr 56px;
  align-items: center;
  gap: var(--space-3);
}
.vfx-bar-row__label {
  font-size: 12px;
  color: var(--charcoal);
  text-align: right;
  line-height: 1.2;
}
.vfx-bar-row__track {
  background: transparent;
  height: 18px;
  display: flex;
}
.vfx-bar {
  height: 100%;
  background: var(--vfx-navy);
  border-radius: 0 1px 1px 0;
  min-width: 1px;
}
.vfx-bar-row.is-highlight .vfx-bar { background: var(--vfx-emerald); }
.vfx-bar-row.is-muted .vfx-bar { background: var(--vfx-gray); }
.vfx-bar-row__value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 100% stacked bar (composition) ──────────────────────────────────────
   Markup:
     <div class="vfx-stack">
       <span class="vfx-seg" style="width:65%;background:var(--vfx-navy)">65</span>
       <span class="vfx-seg" style="width:24%;background:var(--vfx-gray)">24</span>
       <span class="vfx-seg vfx-seg--accent" style="width:11%">11</span>
     </div>
   ------------------------------------------------------------------------- */
.vfx-stack {
  display: flex;
  width: 100%;
  height: 30px;
  overflow: hidden;
  border-radius: 1px;
}
.vfx-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.vfx-seg--accent { background: var(--vfx-emerald); }
.vfx-seg--pale   { background: var(--vfx-pale); color: var(--charcoal); }
.vfx-stack-label {
  font-size: 11px;
  color: var(--warm-gray);
  width: 92px;
  flex: none;
  text-align: right;
  padding-right: var(--space-3);
  line-height: 1.15;
}
.vfx-stack-row { display: flex; align-items: center; margin-bottom: var(--space-3); }
.vfx-stack-row .vfx-stack { flex: 1; }

/* ── Heatmap / coverage matrix ───────────────────────────────────────────
   Shade cells with the .vfx-cell--N scale (4 = full, 1 = faint, 0 = empty).
   ------------------------------------------------------------------------- */
.vfx-matrix { border-collapse: collapse; font-size: 11px; }
.vfx-matrix th {
  font-weight: 600;
  color: var(--charcoal);
  text-align: center;
  padding: var(--space-2) var(--space-2) var(--space-3);
  vertical-align: bottom;
  font-size: 10.5px;
  line-height: 1.15;
}
.vfx-matrix th.vfx-matrix__rowhead,
.vfx-matrix td.vfx-matrix__rowhead {
  text-align: right;
  padding-right: var(--space-3);
  color: var(--charcoal);
  white-space: nowrap;
  font-weight: 500;
}
.vfx-matrix td {
  width: 46px; height: 30px;
  border: 2px solid #FFFFFF;
  text-align: center;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.vfx-cell--4 { background: var(--vfx-emerald); }
.vfx-cell--3 { background: var(--vfx-emerald2); }
.vfx-cell--2 { background: #6FB99A; }
.vfx-cell--1 { background: #BFE0D0; color: var(--charcoal); }
.vfx-cell--0 { background: var(--vfx-pale); color: var(--warm-gray); }

/* ── Floating annotation callout (pale-green plate + leader) ─────────────
   The insight label. Pairs with a dashed emerald leader drawn in SVG, or
   sits free beside a CSS chart.
   ------------------------------------------------------------------------- */
.vfx-callout {
  background: var(--accent-bg);
  border-left: 2px solid var(--emerald);
  padding: var(--space-2) var(--space-3);
  max-width: 30ch;
}
.vfx-callout__head {
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald);
  line-height: 1.25;
  margin: 0;
}
.vfx-callout__body {
  font-size: 10.5px;
  color: var(--charcoal);
  line-height: 1.3;
  margin: 2px 0 0;
}

/* ── SVG chart primitives (shared classes for inline-SVG charts) ──────────
   Use these inside <svg> for line, dot, and bubble exhibits so every chart
   speaks one visual language. Color tokens resolve against .vfx-exhibit.
   ------------------------------------------------------------------------- */
.vfx-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.vfx-axis        { stroke: var(--vfx-grid); stroke-width: 1; }
.vfx-gridline    { stroke: var(--vfx-grid); stroke-width: 1; }
.vfx-tick        { font-size: 10px; fill: var(--warm-gray); }
.vfx-axis-title  { font-size: 10px; fill: var(--warm-gray); }
.vfx-series      { fill: none; stroke: var(--vfx-gray); stroke-width: 1.75; }
.vfx-series--hi  { fill: none; stroke: var(--vfx-emerald); stroke-width: 2.5; }
.vfx-series--navy{ fill: none; stroke: var(--vfx-navy); stroke-width: 1.75; }
.vfx-series--red { fill: none; stroke: var(--vfx-red); stroke-width: 1.75; }
.vfx-dot         { fill: var(--vfx-gray); }
.vfx-dot--hi     { fill: var(--vfx-emerald); }
.vfx-dot--navy   { fill: var(--vfx-navy); }
.vfx-bubble      { fill: var(--vfx-navy); fill-opacity: 0.14; stroke: var(--vfx-navy); stroke-width: 1; }
.vfx-bubble--hi  { fill: var(--vfx-emerald); fill-opacity: 0.18; stroke: var(--vfx-emerald); stroke-width: 1.25; }
.vfx-label       { font-size: 10.5px; fill: var(--charcoal); }
.vfx-label--hi   { font-size: 10.5px; fill: var(--emerald); font-weight: 700; }
.vfx-value       { font-size: 11px; fill: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.vfx-leader      { stroke: var(--emerald); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }