/* Interactive figures for the SAGE note with figures
   (src/content/research-notes/sage-refusal-direction-api.md).

   Loaded by that note alone, through a <link> in its Markdown, next to
   figures.js. Everything here is scoped under .rn-ifig and reads the notes'
   tokens (.rn-page in src/styles/research-notes.css).

   Colour follows the AE brand guidelines (ae-brand-2026, guidelines/03-color):
   AE Orange is the only non-neutral colour, so it is the one data accent and
   it always means the same thing, the refusal side of the story: the
   refusal-indicative tail, the arms that lower the loss, the SAGE result.
   The other side is the notes' ink greys. Type follows guidelines/04-
   typography: Host Grotesk in Regular and Bold only, all-caps labels bold and
   tracked. Monospace appears only on vocabulary tokens, which are code. */

/* Figures sit in the prose column like the notes' image figures do, ruled
   above and below. Their internals stack for that width. */
.rn-ifig {
  /* Literal hex: figures.js mixes these for the heatmap ramp. */
  --if-pos: #ff3c00;      /* AE Orange, --ae-orange-500 */
  --if-neg: #243042;      /* the notes' ink-700 */
  --if-mid: #eceae5;      /* the notes' muted paper */
  --if-base: #5a687c;     /* the notes' ink-500 */
  --if-attack: #ff3c00;   /* AE Orange */
  --if-card: #ffffff;
  --if-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem 0;
  border-top: 1px solid var(--rn-line);
  border-bottom: 1px solid var(--rn-line);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rn-ink-700);
}
.rn-ifig p { margin: 0; }
/* Values and settings stay in Host Grotesk with lining, tabular figures. */
.rn-ifig .if-mono { font-variant-numeric: tabular-nums; }
.rn-ifig svg text { font-family: var(--font-body); }
/* Charts scale with the column. The aspect ratios repeat each viewBox so the
   box is sized before the script draws and grid rows never undersize it. */
.rn-ifig svg { display: block; width: 100%; height: auto; }
#sage-f1-pool { aspect-ratio: 300 / 62; }
#sage-f2-grid { aspect-ratio: 470 / 302; }
/* #sage-f2-line is sized by figures.js from its rendered width. */
.rn-ifig [hidden] { display: none !important; }

/* ---- head ---- */
.if-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
/* H6: 12px Bold, uppercase, tracked. The brand's label style. */
.if-num {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rn-ink-500);
}
/* The chips: an AE Orange badge for a figure on placeholder data (brand
   tints --ae-orange-50 / -200 / -700 from ae-brand-2026), the notes' grey
   topic pill for a measured one. */
.if-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border: 1px solid #ffb199;
  border-radius: 9999px;
  background: #ffebe5;
  background-clip: padding-box;
  color: #992400;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.if-chip.measured {
  border-color: var(--rn-line);
  background: var(--rn-bg-muted);
  color: var(--rn-ink-700);
  font-weight: 400;
  letter-spacing: 0;
}
/* H4: 20px Bold, tight tracking. */
.rn-ifig .if-title {
  margin: 0 0 0.625rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--rn-ink-900);
  text-wrap: balance;
}
.rn-ifig .if-lede { margin: 0 0 1.5rem; max-width: var(--rn-prose); color: var(--rn-ink-700); }

/* ---- controls ---- */
/* Controls sit on a ruled line, the way the list page's toolbar does: a
   hairline above and below, nothing on the sides, text aligned to the column. */
.if-ctrls {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--rn-line);
  border-bottom: 1px solid var(--rn-line);
}
.if-ctrl { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--rn-ink-700); }
.if-ctrl label { white-space: nowrap; }
/* Range inputs: a 2px hairline track with a small accent dot, styled the same
   in WebKit and Gecko. The input keeps a 14px tall box so the hit area stays
   comfortable while the drawn track is thin. */
.if-ctrl input[type="range"] {
  width: 140px;
  height: 14px;
  margin: 0;
  background: transparent;
  accent-color: var(--rn-accent);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.if-ctrl input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: var(--if-base); }
.if-ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--rn-accent);
}
.if-ctrl input[type="range"]::-moz-range-track { height: 2px; border: 0; border-radius: 1px; background: var(--if-base); }
.if-ctrl input[type="range"]::-moz-range-progress { height: 2px; border-radius: 1px; background: var(--rn-accent); }
.if-ctrl input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--rn-accent); }
.if-ctrl input[type="checkbox"] { accent-color: var(--rn-ink-900); width: 14px; height: 14px; margin: 0; }
.if-ctrl input[type="search"] {
  font: inherit;
  font-size: 0.875rem;
  width: 128px;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--rn-ink-500);
  border-radius: 0;
  background: transparent;
  color: var(--rn-ink-900);
  -webkit-appearance: none;
  appearance: none;
}
.if-ctrl input[type="search"]::placeholder { color: var(--rn-ink-500); }
.if-ctrl input[type="search"]:focus { border-bottom-color: var(--rn-ink-900); outline: none; }
/* Small controls follow the site's button label (uppercase, tracked, bold)
   at the notes' hairline weight: a square 1px box that fills with ink on
   hover, the way the pagination steps do. */
.if-btn {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rn-ink-900);
  background: transparent;
  border: 1px solid var(--rn-ink-900);
  border-radius: 2px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.if-btn:hover { color: var(--rn-bg); background: var(--rn-ink-900); }
/* Icon-only control: a square the height of the text buttons. */
.if-btn--icon { width: 2.125rem; height: 2.125rem; padding: 0; display: inline-grid; place-items: center; font-size: 0.75rem; letter-spacing: 0; }
/* The general .rn-ifig svg rule stretches charts to the column; button
   glyphs keep their own size. */
.rn-ifig .if-btn--icon svg { display: block; width: 10px; height: 10px; }
/* Reset is a hairline glyph in the notes' arrow style (ArrowIcon: hairline stroke,
   round caps), with no box, grey at rest and ink on hover. */
.rn-ifig .if-btn--bare { border-color: transparent; color: var(--rn-ink-500); }
.rn-ifig .if-btn--bare:hover { background: transparent; color: var(--rn-ink-900); }
.rn-ifig .if-btn--bare svg.if-glyph-line { width: 18px; height: 18px; }
/* The transport control is the figure's primary action: full ink, no box, a glyph sized to sit beside the reset arrow. */
.rn-ifig #sage-f2-play.if-btn--bare { color: var(--rn-ink-900); }
.rn-ifig #sage-f2-play.if-btn--bare:hover { color: var(--rn-ink-500); }
.rn-ifig #sage-f2-play svg { width: 12px; height: 12px; }
/* A bare glyph needs less room than a boxed button, so the play control is narrower and the iteration slider sits closer to it. */
.rn-ifig #sage-f2-play { width: 1.5rem; }
.rn-ifig #sage-f2-play + .if-ctrl { margin-left: -0.375rem; }
.if-btn--icon [hidden] { display: none; }
.if-btn[aria-pressed="true"] { color: var(--rn-bg); background: var(--rn-ink-900); }
.if-btn:focus-visible, .if-ctrl input:focus-visible, .if-row:focus-visible, .if-focus:focus-visible {
  outline: 2px solid var(--rn-ink-900);
  outline-offset: 2px;
}
.if-readout { font-size: 0.8125rem; color: var(--rn-ink-500); font-variant-numeric: tabular-nums; }
.if-readout b { color: var(--rn-ink-900); font-weight: 700; }
.rn-ifig .if-panel {
  margin: 0 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rn-ink-500);
}
.if-legend { display: flex; gap: 1.125rem; flex-wrap: wrap; margin: 1rem 0 0; font-size: 0.875rem; color: var(--rn-ink-700); }
.if-legend .if-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.if-legend .if-sw { width: 12px; height: 12px; flex: none; }
.if-legend .if-sw.dot { border-radius: 50%; }

/* ---- figure 1: the lexicon ---- */
.if-f1 > * + * { margin-top: 2rem; }
.if-f1-side { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 600px) { .if-f1-side { grid-template-columns: 1fr; } }
/* One ranked list with tight rows. Bars diverge from a zero line in the
   middle of the bar column. */
.if-lex-col { min-width: 0; }
.if-lex-col .if-row + .if-sep { margin-top: 0.625rem; }
.if-sep {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rn-ink-500);
  padding: 0 0 0.25rem;
  border-bottom: 1px solid var(--rn-line);
  margin-bottom: 2px;
}
.if-row {
  display: grid;
  grid-template-columns: 26px 150px minmax(0, 1fr) 48px;
  gap: 0 0.5rem;
  align-items: center;
  padding: 0 4px;
  line-height: 1.2;
  cursor: default;
}
.if-row:hover, .if-row.on { background: var(--rn-bg-muted); }
.if-row.pinned { box-shadow: inset 0 0 0 1px var(--rn-accent); }
.if-rank { font-size: 0.6875rem; color: var(--rn-ink-500); text-align: right; font-variant-numeric: tabular-nums; }
.if-tok {
  font-family: var(--if-mono);
  font-size: 0.8125rem;
  color: var(--rn-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.if-row.fill .if-tok { color: var(--rn-ink-500); }
.if-barw { position: relative; height: 14px; }
.if-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rn-line); }
.if-bar { position: absolute; top: 4px; height: 6px; }
.if-bar.pos { background: var(--if-pos); }
.if-bar.neg { background: var(--if-neg); }
.if-bar.fill { background: var(--rn-ink-500); opacity: 0.4; }
.if-val { font-size: 0.75rem; color: var(--rn-ink-700); text-align: right; font-variant-numeric: tabular-nums; }
.if-pool { margin-top: 0.75rem; font-size: 0.875rem; }
.if-pn { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--rn-line); color: var(--rn-ink-700); }
.if-pn .if-pv { font-variant-numeric: tabular-nums; color: var(--rn-ink-900); }
.if-pn.tot { border-bottom: none; font-weight: 700; }
.if-pn.tot .if-pk { color: var(--rn-ink-900); }
.if-collapse { padding: 1rem 1.125rem; background: var(--rn-bg-muted); }
.if-clbl { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rn-ink-500); }
.if-crow { display: flex; align-items: baseline; gap: 0.6875rem; margin: 0.375rem 0 3px; }
.if-cfrom { font-size: 1.25rem; color: var(--rn-ink-500); line-height: 1; }
.if-carrow { color: var(--rn-ink-500); }
.if-cto { font-size: 1.75rem; font-weight: 400; color: var(--rn-accent); letter-spacing: -0.02em; line-height: 1; }
.if-csub { font-size: 0.8125rem; color: var(--rn-ink-700); line-height: 1.5; }
.rn-ifig .if-xlink { margin-top: 1rem; font-size: 0.875rem; color: var(--rn-ink-700); }

/* ---- figure 2: the search ---- */
/* The heatmap on the left, the three small panels stacked beside it, so the
   whole figure sits in one laptop viewport. */
.if-f2-main { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.5rem 2rem; align-items: start; }
.if-f2-left, .if-f2-right { min-width: 0; }
.if-f2-right > * + * { margin-top: 1.25rem; }
@media (max-width: 640px) { .if-f2-main { grid-template-columns: 1fr; } }
.if-ctrls--tight { gap: 0.75rem 1rem; }
/* Configuration closes the figure as one ruled row: static settings, kept
   apart from the interactive readouts in the toolbar above. */
.if-f2 .if-reply--foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-top: 1.5rem; padding: 0.625rem 0 0; border-top: 1px solid var(--rn-line); }
.if-f2 .if-reply--foot .if-k { margin: 0; white-space: nowrap; }
.if-f2 .if-reply--foot .if-v { flex: 1 1 20rem; }
.if-ctrls--tight input[type="range"] { width: 110px; }
/* The target's completion is the toolbar's second row: the one readout that
   flips when the search succeeds, kept next to the controls that drive it. */
.if-ctrls .if-reply--row {
  flex: 1 0 100%;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.125rem 0 0;
  padding: 0.625rem 0 0;
  border-top: 1px solid var(--rn-line);
  background: transparent;
}
.if-ctrls .if-reply--row .if-k { margin: 0; white-space: nowrap; }
.if-ctrls .if-reply--row .if-v { font-size: 0.9375rem; }
/* Third row: the label line, then the suffix as a full-width 10 by 2 grid,
   so each slot has room for a whole token. */
.if-ctrls .if-reply--suffix { display: block; }
.if-ctrls .if-reply--suffix .if-k { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.if-ctrls .if-reply--suffix .if-k .if-readout { text-transform: none; letter-spacing: 0; font-weight: 400; }
.if-ctrls .if-reply--suffix .if-suffix { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 0; }
.if-ctrls .if-reply--suffix .if-slot { width: auto; font-size: 0.6875rem; padding: 3px 4px; }
@media (max-width: 640px) {
  .if-ctrls .if-reply--suffix .if-suffix { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.if-suffix { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.5rem; }
.if-slot {
  font-family: var(--if-mono);
  font-size: 0.625rem;
  color: var(--rn-ink-500);
  background: var(--if-card);
  border: 1px solid var(--rn-line);
  padding: 2px 4px;
  width: 42px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.if-slot.set { color: var(--rn-ink-900); border-color: var(--rn-ink-500); }
.if-slot.flash { border-color: var(--rn-accent); color: var(--rn-accent); }
.if-reply { padding: 0.875rem 1rem; background: var(--rn-bg-muted); }
.if-reply.plain { background: transparent; padding: 0.75rem 0 0; margin-top: 1.25rem; border-top: 1px solid var(--rn-line); }
.if-reply .if-k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rn-ink-500); margin-bottom: 0.5rem; }
.if-reply .if-v { font-size: 0.875rem; line-height: 1.5; color: var(--rn-ink-900); }
.if-reply .if-v.if-mono { font-size: 0.75rem; line-height: 1.5; color: var(--rn-ink-700); }
.if-ramp { display: flex; align-items: center; gap: 0.625rem; font-size: 0.78125rem; color: var(--rn-ink-500); margin-top: 0.75rem; }
.if-ramp .if-strip { height: 8px; width: 120px; }

/* ---- figure 3: the dumbbells ---- */
.if-scroll { overflow-x: auto; }
.if-scroll svg { min-width: 560px; }

/* ---- values tables (the notes' table styles apply; these add alignment) ---- */
.if-table { margin-top: 1.375rem; overflow-x: auto; }
.rn-prose .if-table table { font-size: 0.875rem; margin: 0; width: auto; max-width: 100%; }
.rn-prose .if-table th, .rn-prose .if-table td { white-space: nowrap; padding: 0.5rem 1rem 0.5rem 0; }
.rn-prose .if-table th { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rn-ink-500); }
.rn-prose .if-table td.n, .rn-prose .if-table th.n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 1.375rem; }
.rn-prose .if-table td.n { color: var(--rn-ink-900); }
.rn-prose .if-table caption { text-align: left; font-size: 0.8125rem; color: var(--rn-ink-500); padding-bottom: 0.625rem; max-width: var(--rn-prose); }

/* ---- values disclosure ----
   A ruled row at the foot of the figure. Opening it draws the table below. */
.rn-ifig .if-values { margin-top: 1rem; border-top: 1px solid var(--rn-line); }
.rn-ifig .if-values + .if-values { margin-top: 0; }
/* The last row's hairline is the figure's closing rule, so the stack reads
   as one ruled block, every line the same distance apart. */
.rn-ifig .if-values:last-child { border-bottom: 1px solid var(--rn-line); }
.rn-ifig:has(> .if-values:last-child) { padding-bottom: 0; border-bottom: 0; }
.rn-ifig .if-values summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.625rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--rn-ink-500);
}
.rn-ifig .if-values summary::-webkit-details-marker { display: none; }
.rn-ifig .if-values summary .if-k {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rn-ink-500);
  white-space: nowrap;
}
.rn-ifig .if-values summary .if-k { flex: 1 1 auto; }
.rn-ifig .if-values-chevron { width: 16px; height: 16px; flex: none; align-self: center; transition: transform 0.15s ease; }
.rn-ifig .if-values[open] .if-values-chevron { transform: rotate(180deg); }
.rn-ifig .if-values summary:hover, .rn-ifig .if-values summary:hover .if-k { color: var(--rn-ink-900); }
.rn-ifig .if-values summary:focus-visible { outline: 2px solid var(--rn-ink-900); outline-offset: 2px; }
.rn-ifig .if-values .if-table { margin: 0.25rem 0 1rem; }
/* Notes share the values row's chrome and open into short caption-sized
   paragraphs. */
.rn-ifig .if-notes-body { padding: 0.25rem 0 0.75rem; max-width: var(--rn-prose); font-size: 0.875rem; line-height: 1.6; color: var(--rn-ink-700); }
.rn-ifig .if-notes-body p { margin: 0 0 0.75rem; }
.rn-ifig .if-notes-body b { color: var(--rn-ink-900); font-weight: 700; }

/* ---- caption ---- */
.rn-ifig figcaption {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rn-ink-500);
  max-width: var(--rn-prose);
}
.rn-ifig figcaption b { color: var(--rn-ink-900); font-weight: 700; }
.rn-ifig .if-cap-src { display: block; margin-top: 0.625rem; }

/* ---- tooltip (one element, appended to body by figures.js) ---- */
.if-tip {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.09s ease;
  background: #ffffff;
  border: 1px solid rgba(14, 14, 16, 0.12);
  padding: 0.625rem 0.75rem;
  box-shadow: 0 8px 26px hsl(210 45% 7% / 0.14);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: hsl(215 20% 20%);
  max-width: 290px;
}
.if-tip.on { opacity: 1; }
.if-tip .if-tt { font-weight: 700; color: hsl(210 45% 7%); margin-bottom: 0.3125rem; }
.if-tip .if-ts { font-size: 0.71875rem; color: hsl(215 16% 42%); margin: -3px 0 0.4375rem; }
.if-tip .if-r { display: flex; align-items: baseline; gap: 0.625rem; margin-top: 4px; }
.if-tip .if-r .if-key { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.78125rem; flex: 1; white-space: nowrap; }
.if-tip .if-r .if-ln { width: 14px; height: 2px; flex: none; }
.if-tip .if-r .if-val { font-weight: 700; color: hsl(210 45% 7%); font-variant-numeric: tabular-nums; }

/* ---- svg chrome ---- */
.rn-ifig .gridline, .rn-ifig .axisline { stroke: var(--rn-line); stroke-width: 1; }
.rn-ifig .tick { fill: var(--rn-ink-500); font-size: 11px; }
.rn-ifig .rowlbl { fill: var(--rn-ink-900); font-size: 13px; }
.rn-ifig .rowsub { fill: var(--rn-ink-500); font-size: 11.5px; }
.rn-ifig .grouplbl { fill: var(--rn-ink-900); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; }
.rn-ifig .groupsub { fill: var(--rn-ink-500); font-size: 11.5px; }
.rn-ifig .vallbl { fill: var(--rn-ink-900); font-size: 12.5px; font-weight: 700; }
.rn-ifig .metatxt { fill: var(--rn-ink-500); font-size: 11.5px; }
.rn-ifig .hit { fill: transparent; cursor: default; }
@media (prefers-reduced-motion: reduce) { .rn-ifig *, .if-tip { transition: none !important; } }