/* BidVariance blog figures: inline SVG drawn from the numbers in the article.

   Mobile-first: every figure is a 360-unit-wide viewBox, so it scales down as a
   whole and stays legible; on wide screens it sits beside its caption instead of
   stretching. Colour carries one meaning per hue, taken from the site tokens:
     blue   = the model / the baseline        teal  = within the promise
     rust   = downside, late, over            gold  = a price or commitment
     vermilion = the decision line (used once per figure, at most)
   Every figure also has its numbers in a table or caption, so nothing lives
   only in the picture.

   Motion is progressive enhancement. /js/figures.js adds .fx-ready (which hides
   the animated parts) only when motion is allowed and the figure is below the
   fold, then .fx-play when it scrolls into view. Without the script, with
   reduced motion, or in print, the figure is simply the finished chart. */

/* ---- layout ------------------------------------------------------------ */
.post-fig.fig {
  display: grid;
  gap: 0.9rem 1.8rem;
  padding: 1.1rem 1.1rem 1rem;
}
.post-fig.fig > svg {
  width: 100%;
  max-width: 27.5rem;
  height: auto;
  justify-self: center;
  overflow: visible;
}
.post-fig.fig figcaption {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.post-fig.fig figcaption strong {
  color: var(--ink);
}
.post-fig.fig figcaption p {
  margin: 0 0 0.55rem;
  max-width: 44ch;
}
.post-fig.fig figcaption p:last-child {
  margin-bottom: 0;
}
@media (min-width: 54rem) {
  .post-fig.fig {
    grid-template-columns: minmax(0, 27.5rem) minmax(0, 1fr);
    align-items: center;
    padding: 1.3rem 1.5rem;
  }
  .post-fig.fig > svg {
    justify-self: start;
  }
}

/* ---- svg type and colour ------------------------------------------------ */
.fig svg text {
  font-family: var(--font);
  font-size: 13px;
  fill: var(--ink);
}
.fig svg .t-s {
  font-size: 12px;
  fill: var(--muted);
}
.fig svg .t-b {
  font-weight: 600;
}
.fig svg .t-m {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.fig svg .t-mu {
  fill: var(--muted);
}
.fig svg .t-e {
  text-anchor: end;
}
.fig svg .t-c {
  text-anchor: middle;
}
.fig svg .t-w {
  fill: #ffffff;
}
.fig svg .t-blue {
  fill: var(--accent);
}
.fig svg .t-teal {
  fill: var(--signal);
}
.fig svg .t-rust {
  fill: var(--coral);
}
.fig svg .t-gold {
  fill: var(--gold);
}
.fig svg .t-red {
  fill: var(--bid);
}

.fig svg .f-blue { fill: var(--accent); }
.fig svg .f-teal { fill: var(--signal); }
.fig svg .f-rust { fill: var(--coral); }
.fig svg .f-gold { fill: var(--gold); }
.fig svg .f-red { fill: var(--bid); }
.fig svg .f-ink { fill: var(--ink); }
.fig svg .f-grey { fill: var(--gray-data); }
.fig svg .f-paper { fill: var(--bg); }
.fig svg .f-panel { fill: var(--panel); }
.fig svg .soft { fill-opacity: 0.2; }
.fig svg .mid { fill-opacity: 0.55; }

.fig svg .s-blue { stroke: var(--accent); }
.fig svg .s-teal { stroke: var(--signal); }
.fig svg .s-rust { stroke: var(--coral); }
.fig svg .s-gold { stroke: var(--gold); }
.fig svg .s-red { stroke: var(--bid); }
.fig svg .s-ink { stroke: var(--ink); }
.fig svg .s-grey { stroke: var(--gray-data); }
.fig svg .s-line { stroke: var(--line-strong); }
.fig svg .s-hair { stroke: var(--line); }

.fig svg .ln { fill: none; stroke-width: 1.5; }
.fig svg .ln2 { fill: none; stroke-width: 2.25; stroke-linejoin: round; }
.fig svg .hair { fill: none; stroke-width: 1; }
.fig svg .dash { stroke-dasharray: 4 3; }
.fig svg .dot { stroke-dasharray: 1.5 3; }
.fig svg .nofill { fill: none; }
.fig svg .bx { stroke-width: 1.5; }
.fig svg .bx1 { stroke-width: 1; }
/* a label that has to cross a line keeps its own clear background */
.fig svg .halo { paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }

/* ---- entrance animation (one-time, on first view) ----------------------- */
@keyframes fx-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes fx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.fx-ready .fx-fade,
.fx-ready .fx-rise {
  opacity: 0;
}
.fx-ready .fx-gx {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.fx-ready .fx-gc {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scaleX(0);
}
.fx-ready .fx-gy {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.fx-ready .fx-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: butt;
}

.fx-play .fx-fade { animation: fx-fade 0.55s ease-out both; }
.fx-play .fx-rise { animation: fx-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fx-play .fx-gx { animation: fx-grow-x 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fx-play .fx-gc { animation: fx-grow-x 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fx-play .fx-gy { animation: fx-grow-y 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fx-play .fx-draw { animation: fx-draw 1.1s ease-in-out both; }
.fx-play .fx-fade,
.fx-play .fx-rise,
.fx-play .fx-gx,
.fx-play .fx-gc,
.fx-play .fx-gy,
.fx-play .fx-draw {
  /* --i staggers siblings, --d offsets a whole group (set inline in the figure) */
  animation-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}

@media (prefers-reduced-motion: reduce) {
  .fx-ready .fx-fade, .fx-ready .fx-rise { opacity: 1; }
  .fx-ready .fx-gx, .fx-ready .fx-gc, .fx-ready .fx-gy { transform: none; }
  .fx-ready .fx-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media print {
  .fx-ready .fx-fade, .fx-ready .fx-rise { opacity: 1 !important; }
  .fx-ready .fx-gx, .fx-ready .fx-gc, .fx-ready .fx-gy { transform: none !important; }
  .fx-ready .fx-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .post-fig.fig { break-inside: avoid; display: block; }
}

/* ---- article furniture used by the field notes -------------------------- */
/* the one-paragraph answer under the headline: what a reader, or an agent, takes away */
.prose .short-answer {
  max-width: 66ch;
  margin: 0 0 1.4rem;
  padding: 0.85rem 0 0.9rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
}
.prose .short-answer strong:first-child {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.prose .ledger-strip {
  margin: 1.2rem 0 1.6rem;
}
.prose .ledger-strip dd {
  font-size: 1.05rem;
}
.prose .ledger-strip dd small {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.prose .sources {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.prose .sources h2 {
  font-size: 1.05rem;
}
.prose .sources li {
  margin: 0.3rem 0;
}
.prose .assumption {
  max-width: 66ch;
  margin: 1.2rem 0;
  padding: 0.7rem 0 0.75rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
  color: var(--muted);
}
.prose .assumption strong:first-child {
  color: var(--ink);
}
.prose h3 {
  text-wrap: balance;
}

/* article tables: a quiet left-aligned caption and readable row headers */
.prose .tbl caption {
  caption-side: top;
  padding: 0 0.75rem 0.55rem 0;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
.prose .tbl tbody th {
  font-weight: 500;
  color: var(--ink);
}
.prose .tbl tfoot th,
.prose .tbl tfoot td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--line-strong);
  font-weight: 600;
  text-align: left;
}
.prose .tbl tfoot td.num {
  text-align: right;
}
.prose .tbl .highlight-row th,
.prose .tbl .highlight-row td {
  background: var(--accent-wash);
}