/* ==========================================================================
   Article figures — charts inside a long-form .lf article
   --------------------------------------------------------------------------
   Loads after article.css. The figure element itself is .lf-fig, which
   article.css already breaks out to 56rem above 1140 and keeps the head and
   caption on the 44rem prose measure; everything here is the furniture inside
   it, namespaced af- so nothing collides with a page-level class elsewhere.

   The drawing parts come from live stylesheets wherever one already exists:
   .bar-row, .cols and .col-labels from metrics.css, .metrics/.metric and .tbl
   from vc.css, .grid-3.ruled from vc.css. Only what has no home is declared
   here.

   Colour. One colour, and series separate by lightness, not hue:
     First Light #FFF695  the series the figure is about
     --to-grey-300        second series
     --to-grey-500        third
     --to-grey-900        the bulk / background series
     --surface            the empty part of a track
   No second highlight anywhere, and nothing means good or bad by colour alone.
   ========================================================================== */

/* ---------- figures on/off ----------
   A reading control, not a per-figure one: the article carries eight figures and
   some readers want the argument without them. It writes data-figures="off" on
   the root and every figure on the page goes, the interactive one included.

   It lives on the sticky contents rail, under the contents disclosure and
   outside it — see the note in the page markup — so it takes the rail's own
   voice: mono, uppercase, the same size and colour as the rail's other
   furniture, above a hairline that separates it from the contents list. The
   switch is square, like everything else here; the knob slides, it does not
   travel around a pill. Hidden without JS. */
.fig-toggle{display:none}
.js .fig-toggle{display:flex;align-items:center;gap:10px;width:100%;
  margin-top:20px;padding:18px 0 0;border:0;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);
  background:none;cursor:pointer;text-align:left}
.fig-toggle:hover{color:var(--text)}
.fig-toggle .cnt{font-variant-numeric:tabular-nums}
.fig-toggle .fig-sw{position:relative;width:26px;height:14px;flex:none;
  border:1px solid var(--border-2);background:var(--chip)}
.fig-toggle .fig-sw::after{content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;
  background:var(--muted-2);transition:transform .16s,background .16s}
.fig-toggle[aria-pressed="true"]{color:var(--text)}
.fig-toggle[aria-pressed="true"] .fig-sw::after{transform:translateX(12px);background:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .fig-toggle .fig-sw::after{transition:none}
}
/* The rail now carries the toggle under the contents list, so the list has to
   give up the height. post.css budgets .toc-nav at 100vh - 260px, which was set
   before this existed; the toggle is 35px plus its 20px margin and hairline, so
   the budget owes it 60 more. Without this the toggle is the thing that falls off
   the bottom of a short viewport — the one element on the rail that must not,
   since it is the only way back to the figures. */
.post-aside .toc-nav{max-height:calc(100vh - 320px)}

/* Off. display:none rather than visibility, so the figures give up their space
   and the prose closes over them instead of leaving eight gaps. */
[data-figures="off"] .lf-fig{display:none}

/* ---------- head ----------
   article.css already restyles .jc-head h3 inside .lf-body to body face at 20px
   — an h3 mid-article is body copy whichever component it arrived in — so this
   only owes it the spacing and the kicker above it. */
.af-fig .af-head{margin-bottom:22px}
.af-fig .af-kicker{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.af-fig .af-head h3{font-family:var(--font-body);font-weight:600;text-transform:none;
  font-size:20px;line-height:26px;letter-spacing:-.01em;margin:0}
.af-fig .af-head p{font-size:15px;line-height:22px;color:var(--muted-2);margin:8px 0 0;max-width:60ch}

/* ---------- plot ----------
   Named af-plot rather than jc-plot: the jc- set belongs to k-jcurve and a
   class must not mean two things on one page. article.css hangs the figure's
   closing hairline off .jc-plot, so that one rule is restated for this class
   instead of borrowing the name. */
.af-fig .af-plot{padding-bottom:18px;border-bottom:1px solid var(--hairline)}
/* article.css caps every child of .lf-fig that is not .jc-plot at the prose
   measure, so the plot has to be let back out by name — otherwise the figure
   breaks out to 56rem and the drawing inside it stays at 44. */
.lf-fig.af-fig > .af-plot{max-width:none}
.af-fig figcaption{font-size:13px;line-height:20px;color:var(--muted-2);margin-top:14px}
.af-fig figcaption b{color:var(--muted);font-weight:600}

/* Two of the six cannot reflow — the five-row stack table and the line chart,
   whose 720-unit viewBox squashes its own labels to nothing below about 520px.
   Those two carry .af-scroll and scroll inside the figure. The bar rows, the
   state cells and the metric tiles all restack instead, so they do not, and a
   figure that could have fitted never asks the reader to scroll it. */
.af-fig .af-plot{overflow-x:auto}
.af-fig .af-scroll{min-width:520px}

/* ---------- horizontal bars ----------
   metrics.css owns .bar-row. Inside an article the label column is narrower
   than it is on a dashboard, because the figure is 56rem and not the full
   frame. */
.af-fig .bar-row{grid-template-columns:250px minmax(0,1fr) 152px}
.af-fig .bar-row .bl{font-size:15px;line-height:21px}
.af-fig .bar-row .bar{height:26px}
.af-fig .bar-row .bv{font-size:13px}
/* A second pair of bars under the first is a new question, not a new row. */
.af-fig .af-pair + .af-pair{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline)}
@media (max-width:700px){
  .af-fig .bar-row{grid-template-columns:minmax(0,1fr) 118px;gap:12px}
  .af-fig .bar-row .bar{grid-column:1 / -1;grid-row:2}
}

/* ---------- metric tiles ----------
   vc.css sets .metrics to four columns. Three tiles in a four-column grid
   leaves a hole at the end. */
.af-fig .metrics{grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px}
.af-fig .metrics .metric{padding:20px 24px;border-left:1px solid var(--border)}
.af-fig .metrics .metric:first-child{padding-left:0;border-left:none}
@media (max-width:700px){
  .af-fig .metrics{grid-template-columns:1fr}
  .af-fig .metrics .metric{padding:18px 0;border-left:none;border-top:1px solid var(--hairline)}
  .af-fig .metrics .metric:first-child{border-top:none;padding-top:0}
}

/* ---------- state cells ----------
   Three cells, two of them describing a barrier that has come down and one a
   barrier still standing. The state is carried by shape and by a word, never by
   colour alone.

   The barrier is drawn as a boom gate, because that is what the words already
   say: a bar on a pivot, lying across the way when the barrier stands and swung
   up out of it when the barrier is lifted. Before this it was a rule across the
   top of each cell — dashed for lifted, solid for standing — which asked the
   reader to learn a dash convention to see something a rotation shows on sight.

   Geometry: the pivot post sits at the cell's left edge, the bar is 56px on a
   3px stroke, and the slot is 56px tall so a bar swung to -45° (rising
   56 × sin45 ≈ 40px above the pivot) stays inside it. Change the bar length and
   the slot height has to follow, or the lifted bar crops. */
.af-fig .af-states{border-top:0}
.af-fig .af-states > *{padding:0 26px 4px;border-bottom:none}
.af-fig .af-states > *:first-child{padding-left:0}
.af-fig .af-states > *:last-child{padding-right:0}
.af-fig .af-state .af-rule{display:block;position:relative;height:56px;margin-bottom:14px;background:none}
/* the post it pivots on */
.af-fig .af-state .af-rule::before{content:"";position:absolute;left:0;bottom:0;
  width:3px;height:15px;background:var(--to-grey-900)}
/* the bar */
.af-fig .af-state .af-rule::after{content:"";position:absolute;left:0;bottom:12px;
  width:56px;height:3px;transform-origin:left center;
  background:repeating-linear-gradient(90deg,var(--to-grey-900) 0 7px,transparent 7px 14px)}
/* lifted: swung up off the pivot, and out of the way */
.af-fig .af-state.lifted .af-rule::after{transform:rotate(-45deg)}
/* standing: lying across the way, solid, in the one colour */
.af-fig .af-state.standing .af-rule::before,
.af-fig .af-state.standing .af-rule::after{background:var(--accent)}
.af-fig .af-state .af-tag{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:10px}
.af-fig .af-state.standing .af-tag{color:var(--accent)}
.af-fig .af-state h4{font-size:17px;line-height:24px;font-weight:600;color:var(--text);margin:0 0 8px}
.af-fig .af-state p{font-size:14px!important;line-height:21px!important;color:var(--muted);margin:0!important}
.af-fig .af-state.lifted h4{color:var(--muted)}
@media (max-width:700px){
  .af-fig .af-states > *{padding:0 0 4px}
  .af-fig .af-states > * + *{margin-top:24px}
}

/* ---------- stack table ----------
   The AI stack is five layers, so the layer number is the row's index and
   belongs in a column of its own rather than inside the name. */
.af-fig .af-stack .lyr{font-family:var(--font-mono);font-size:11px;color:var(--faint);
  letter-spacing:.06em;white-space:nowrap;width:52px}
.af-fig .af-stack .nm{color:var(--text);font-weight:600;white-space:nowrap}
.af-fig .af-stack .co{color:var(--muted-2);font-size:13px}
.af-fig .af-stack tbody tr:last-child td{border-bottom:none}

/* ---------- line chart ---------- */
.af-fig .af-line{display:block;width:100%;height:auto}
.af-fig .af-line .ax{fill:none;stroke:var(--border);stroke-width:1}
.af-fig .af-line .gl{fill:none;stroke:var(--border-2);stroke-width:1;stroke-dasharray:5 6}
.af-fig .af-line .tick{font-family:var(--font-mono);font-size:11px;fill:var(--faint)}
.af-fig .af-line .axl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;fill:var(--faint)}
.af-fig .af-line .s1{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.af-fig .af-line .s2{fill:none;stroke:var(--to-grey-300);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.af-fig .af-line .s3{fill:none;stroke:var(--to-grey-500);stroke-width:2;stroke-dasharray:3 5;stroke-linecap:round}
.af-fig .af-line .d1{fill:var(--accent)}
.af-fig .af-line .d2{fill:var(--to-grey-300)}
.af-fig .af-line .d3{fill:var(--to-grey-500)}
.af-fig .af-line .l1{font-size:13px;font-weight:600;fill:var(--text)}
.af-fig .af-line .l2{font-size:13px;font-weight:600;fill:var(--to-grey-300)}
.af-fig .af-line .l3{font-size:13px;fill:var(--to-grey-500)}
.af-fig .af-line .note{font-family:var(--font-mono);font-size:11px;fill:var(--muted-2)}

/* ---------- a figure that points somewhere ----------
   A caption line that is a link out, not prose. Sits under the caption text on
   its own line so it does not read as a citation. */
.af-fig figcaption .af-more{display:block;margin-top:10px;color:var(--text);font-weight:500;
  text-decoration:none;transition:opacity .18s}
.af-fig figcaption .af-more:hover{opacity:.72}

/* ---------- nested-area diagram ----------
   Two rectangles, the small one inside the large one, because the point is
   that the software line is a slice of a budget the industry already spends
   rather than a separate market. Areas are about 1:7, which the drawing says
   on its face — a proportion drawn to scale still has to admit it is drawn to
   scale. */
.af-fig .af-box{display:block;width:100%;height:auto}
.af-fig .af-box .outer{fill:rgba(250,250,249,.035);stroke:var(--to-grey-900);stroke-width:1}
.af-fig .af-box .inner{fill:var(--accent);stroke:none}
.af-fig .af-box .olab{font-size:17px;font-weight:600;fill:var(--text)}
.af-fig .af-box .osub{font-size:13.5px;fill:var(--muted)}
/* First Light is light: text on it takes --accent-on, never white. */
.af-fig .af-box .ilab{font-size:15px;font-weight:600;fill:var(--accent-on)}
.af-fig .af-box .isub{font-size:12.5px;fill:rgba(26,22,19,.78)}
.af-fig .af-box .tie{fill:none;stroke:var(--to-grey-900);stroke-width:1;stroke-dasharray:4 5}
.af-fig .af-box .tlab{font-size:13.5px;fill:var(--muted)}
.af-fig .af-box .note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;fill:var(--faint)}

/* ---------- entry-price calculator ----------
   Condensed: one control and four rows. kit.css owns .k-range; everything below
   is the answer side.

   .af-calc is the interactive variant, and it is the one kind of figure that
   gets a box. A static figure can sit open in the column because it only asks to
   be read, like the paragraphs around it. This one asks to be used, and a
   control with no edge around it reads as part of the running text until you
   happen to drag it. The border is the same hairline as a card, on the same
   surface, and it stops at the caption: the sources line belongs to the article,
   not to the widget. */
.af-calc .af-head,
.af-calc .af-plot{
  border:1px solid var(--border);
  background:var(--card);
  padding:0 26px;
}
/* One box, drawn as two halves so the head and the controls keep their own
   spacing: the head owns the top and side edges, the plot the bottom and sides,
   and neither draws the line between them. The plot's own closing hairline
   (.af-fig .af-plot, above) is what the box's bottom edge replaces — kept as
   --border rather than --hairline, because it is now the edge of a container and
   not a rule under a drawing. */
.af-calc .af-head{border-bottom:0;margin-bottom:0;padding-top:24px;padding-bottom:20px}
.af-calc .af-plot{border-top:0;padding-top:4px;padding-bottom:26px}
.af-calc figcaption{margin-top:16px}

@media (max-width:620px){
  .af-calc .af-head,.af-calc .af-plot{padding-left:18px;padding-right:18px}
}

.af-calc .k-range{max-width:520px;margin-bottom:26px}
.af-calc .k-range .rw span:first-child{font-size:14px;color:var(--muted)}
.af-rets{display:grid;gap:0;max-width:520px}
.af-rets .r{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--hairline)}
.af-rets .r:last-child{border-bottom:none}
.af-rets .s{font-size:15px;line-height:21px;color:var(--text)}
.af-rets .s small{display:block;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2)}
.af-rets .m{font-family:var(--font-mono);font-size:22px;line-height:28px;color:var(--to-grey-300);
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* The first-cheque row is the one the figure is about, so it takes the one
   colour. That is pre-seed now; it was seed before the pre-seed row went in. */
.af-rets .r.on .m{color:var(--accent)}

/* ---------- column chart ----------
   metrics.css owns .cols. The quartile chart is three columns of a dashboard
   component, so it takes the figure's own width and a wider gap.

   The 560px cap that used to be here was doing a job that no longer exists: it
   held the chart in from a 56rem breakout figure. The figures sit at the article
   measure now, so the cap only left a third of the row empty and the three
   quartiles reading as a huddle in the corner. */
.af-fig .cols{min-height:230px;gap:28px}
.af-fig .col-labels{gap:28px}
.af-fig .col .cv{font-size:15px}