/* Figures 1 and 2: drawn natively so they share the type, palette, and tiles of Figure 3. */

/* ---------- Figure 1: who sets the goal, who proposes, who selects ---------- */
.intro-row > .fig-roles { width: 19rem; margin-top: 0.35rem; }
.fig-roles svg { display: block; width: 100%; height: auto; overflow: visible; }
.r-tag { font: 500 9.5px var(--mono); letter-spacing: 0.12em; fill: var(--ink-soft); }
.r-lab { font: 12.5px var(--text); fill: var(--ink); text-anchor: middle; }
.r-lab.soft { fill: var(--ink-soft); }
.r-verb { font: italic 12.5px var(--text); fill: var(--green-deep); }
.r-verb.past { fill: var(--ink-soft); }
.r-edge { fill: none; stroke: #9fbcae; stroke-width: 1.5; stroke-linecap: round; }
.r-edge.past { stroke: #bcc5c1; }
.r-tile { fill: #fff; stroke: #b5cac0; stroke-width: 1.2; }
.r-ico { fill: none; stroke: var(--ink-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.r-spark { fill: #fff; }
.r-propose .r-tile { fill: var(--green); stroke: var(--green); }
.r-solve .r-tile { fill: var(--blossom); stroke: var(--blossom); }
.r-panel { fill: var(--bg-card); stroke: rgba(63, 143, 116, 0.2); }
.r-card { fill: #fff; stroke: #a9bdb4; stroke-width: 1.1; }
.r-card.past { stroke: #bcc5c1; }
.r-q { font: 600 12px var(--text); fill: #8a9b94; text-anchor: middle; }
.r-pick .r-card { fill: var(--green-deep); stroke: var(--green-deep); }
.r-check { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r-chev { fill: none; stroke: #bcc5c1; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Figure 2: novel and difficult are common, interesting is rare ---------- */
.intro-row > .fig-rare { float: left; width: 16.5rem; margin: 0.4rem 1.8rem 0.85rem 0; }
.rare-chart { padding: 0.15rem 0 0; }
.rare-row + .rare-row { margin-top: 0.6rem; }
.rare-head { display: flex; align-items: baseline; gap: 0.5rem; }
.rare-name { font-size: 1rem; line-height: 1.2; color: var(--ink); }
.rare-src { font: 0.6rem var(--mono); letter-spacing: 0.04em; color: var(--ink-soft); }
.rare-val { margin-left: auto; font: 600 1.3rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--blossom-deep); }
.rare-track { height: 0.5rem; margin-top: 0.35rem; border-radius: 999px; background: rgba(31, 60, 50, 0.07); overflow: hidden; }
.rare-fill { display: block; height: 100%; border-radius: inherit; background: var(--blossom); }
.rare-row.key .rare-name { font-weight: 600; }
.rare-row.key .rare-val { color: var(--green-deep); }
.rare-row.key .rare-fill { background: var(--green-deep); min-width: 6px; }

@media (max-width: 679px) {
  .intro-row > .fig-roles, .intro-row > .fig-rare { float: none; width: 100%; max-width: 19rem; margin: 1.2rem auto 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rare-fill { transform-origin: left center; animation: rare-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    @keyframes rare-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}