/* Anatomy geometry, dressed in Saywit's public tokens. No kit page/card styles. */
.process-figure {
  --anatomy-paper: var(--paper);
  --anatomy-face: var(--surface);
  --anatomy-top: var(--surface);
  --anatomy-shade-0: #b8c5b1;
  --anatomy-shade-1: #cbd5c1;
  --anatomy-shade-2: #dce3d1;
  --anatomy-shade-3: #edf0e3;
  --anatomy-lit-top: var(--lime-strong);
  --anatomy-lit-shade: var(--lime);
  --anatomy-hi: var(--ink-2);
  --anatomy-mid: #75896d;
  --anatomy-lo: #9eae91;
  --anatomy-faint: #b5c3a7;
  --anatomy-lit: var(--ink);
  margin: 0;
  width: 100%;
  min-width: 0;
  color: var(--ink);
}
.process-figure__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px 0; color: var(--muted); font-size: 12px; }
.process-figure__head > span:last-child { font-weight: 600; }
.process-figure__art { width: 100%; padding: 0 10px; }
.process-figure .iso-svg { width: 100%; height: auto; overflow: visible; }
.process-figure .iso-svg :is(path, circle) { vector-effect: non-scaling-stroke; }
.process-figure .iso-fill { fill: var(--anatomy-paper); stroke: none; }
.process-figure .iso-solid[data-lit] > .iso-fill { fill: var(--anatomy-face); }
.process-figure :is(.iso-shade, .iso-top) { stroke: none; }
.process-figure .iso-shade[data-shade="0"] { fill: var(--anatomy-shade-0); }
.process-figure .iso-shade[data-shade="1"] { fill: var(--anatomy-shade-1); }
.process-figure .iso-shade[data-shade="2"] { fill: var(--anatomy-shade-2); }
.process-figure .iso-shade[data-shade="3"] { fill: var(--anatomy-shade-3); }
.process-figure .iso-top { fill: var(--anatomy-top); }
.process-figure .iso-solid[data-lit] > .iso-top { fill: var(--anatomy-lit-top); }
.process-figure .iso-solid[data-lit] > .iso-shade { fill: var(--anatomy-lit-shade); }
.process-figure .iso-line { fill: none; stroke: var(--anatomy-lo); stroke-width: .65px; stroke-linecap: round; stroke-linejoin: round; }
.process-figure .iso-line[data-tone="hi"] { stroke: var(--anatomy-hi); }
.process-figure .iso-line[data-tone="mid"] { stroke: var(--anatomy-mid); }
.process-figure .iso-line[data-tone="faint"] { stroke: var(--anatomy-faint); }
.process-figure .iso-line[data-tone="lit"], .process-figure .iso-solid[data-lit] > .iso-edge { stroke: var(--anatomy-lit); }
.process-figure .iso-halo { fill: #738568; stroke: none; filter: blur(9px); opacity: .12; }
.process-figure .iso-dots circle { fill: var(--ink-2); opacity: .55; stroke: none; }
.process-figure .iso-face-text { fill: var(--anatomy-mid); font-family: var(--font-mono); letter-spacing: .04em; }
.process-figure__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 18px; }
.process-figure__steps button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px 5px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.process-figure__steps button > span { font: 10px var(--font-mono); opacity: .75; }
.process-figure__steps button:hover { background: var(--lime-wash); }
.process-figure__steps button[aria-pressed="true"] { border-color: var(--line); background: var(--surface); color: var(--ink); font-weight: 600; }
.process-figure__caption { padding: 16px 22px 10px; min-height: 122px; }
.process-figure__caption strong { display: block; font-size: 15px; font-weight: 650; }
.process-figure__caption p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.process-figure__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; padding: 0 18px 12px; }
.process-figure__footer > .mono { font-size: 9px; letter-spacing: .035em; }
.process-figure__footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.process-figure__footer button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--ink-2); font-size: 12px; cursor: pointer; }
.process-figure__pause { color: var(--muted) !important; }
.process-figure__footer button:disabled { cursor: default; }
.process-figure__footer button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.tile--process { grid-column: span 3; }
.tile--process .tile__visual { padding: 0; background: var(--paper-2); overflow: visible; }
.help-topic__body > .process-figure { margin: 26px 0; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
@media (max-width: 1000px) { .tile--process { grid-column: 1 / -1; } }
@media (max-width: 680px) {
  .process-figure__head { padding-inline: 14px; }
  .process-figure__steps { margin-inline: 10px; }
  .process-figure__steps button { gap: 5px; font-size: 12px; }
  .process-figure__caption { min-height: 140px; padding-inline: 16px; }
  .process-figure__footer { padding-inline: 14px; }
  .process-figure__art { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .process-figure * { transition: none !important; } }
@media (forced-colors: active) {
  .process-figure .iso-line { stroke: CanvasText; }
  .process-figure :is(.iso-fill, .iso-top, .iso-shade) { fill: Canvas; }
  .process-figure .iso-halo { display: none; }
  .process-figure__steps button[aria-pressed="true"] { border-color: Highlight; }
}