/* Hand-built figures for lesson 44, Retrieval-augmented generation. */

/* the lesson's own list indent and spacing (.chapter ol) don't apply to these lists */
.fig ol.rg-cards, .fig ol.rf-list, .fig ol.rr-list, .fig ol.rv-claims, .fig ol.ra-log, .fig ul.rgr-nb, .fig ol.rd-qs, .fig ol.rd-tree, .fig ul.rp-damage { padding-left: 0; }
.fig ol.rp-text { padding-left: 38px; }
.fig :is(.rg-cards, .rf-list, .rr-list, .rv-claims, .ra-log, .rgr-nb, .rd-qs, .rd-tree, .rp-damage, .rp-text) > li { margin-bottom: 0; }

/* shared: labels, selects, index cards, citation chips, tags */
.rg-label { font: 500 0.7rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 8px; }
.rg-select { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-3); max-width: 100%; }
.rg-select select { font: 0.88rem var(--f-ui); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; max-width: 100%; min-width: 0; }
.rg-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rg-card { padding: 10px 12px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); }
.rg-card.hit { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.rg-card.cut { border-color: var(--bad); border-style: dashed; }
.rg-card.locked { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.rg-card.stale { opacity: 0.75; border-color: var(--bad); }
.rg-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.rg-id, .rf-id { font: 500 0.78rem var(--f-mono); color: var(--accent-ink); }
.rg-text { margin: 0; font: 0.95rem/1.45 var(--f-body); color: var(--ink); }
.rg-meta { margin: 6px 0 0; font: 0.74rem/1.4 var(--f-mono); color: var(--ink-3); }
.rg-tag { display: inline-block; font: 500 0.7rem/1.5 var(--f-ui); padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.rg-tag.good { color: var(--good); border-color: color-mix(in oklab, var(--good) 50%, transparent); }
.rg-tag.bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 50%, transparent); }
.rg-tag.gold { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.rg-cite { display: inline-block; font: 500 0.74em/1.5 var(--f-mono); padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.rg-cite.want { background: var(--gold-soft); color: var(--gold); }
[data-component^="rag-"] .good { --v: var(--good); } [data-component^="rag-"] .bad { --v: var(--bad); } [data-component^="rag-"] .gold { --v: var(--gold); }

/* hero */
.hr { display: grid; justify-items: center; gap: 16px; padding: 10px 0 6px; max-width: 760px; margin: 0 auto; }
.hr-q { margin: 0; font: italic 400 clamp(1.3rem, 3.4vw, 2rem)/1.2 var(--f-display); color: var(--ink); text-align: center; }
.hr-shelf { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; width: 100%; }
.hr-doc { font: 500 clamp(0.52rem, 1.3vw, 0.72rem)/1 var(--f-mono); color: var(--ink-3); padding: 10px 2px; text-align: center; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); transition: background 0.5s, color 0.5s, border-color 0.5s, transform 0.5s; }
.hr.s1 .hr-doc.cand, .hr.s2 .hr-doc.cand, .hr.s3 .hr-doc.cand { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.hr.s2 .hr-doc.kept, .hr.s3 .hr-doc.kept { background: var(--gold); color: var(--bg); border-color: var(--gold); transform: translateY(-3px); }
.hr-a { margin: 0; min-height: 3em; font: 400 clamp(0.95rem, 2vw, 1.15rem)/1.45 var(--f-body); color: var(--ink-2); text-align: center; opacity: 0; transition: opacity 0.5s; }
.hr.s3 .hr-a { opacity: 1; }
@media (max-width: 600px) { .hr-shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hr-doc { font-size: 0.66rem; padding: 7px 2px; } }

/* 1: the shelf */
.rs-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.rs-shelf, .rgr-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rs-doc { display: grid; gap: 2px; text-align: left; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); cursor: pointer; font: 0.74rem/1.3 var(--f-ui); min-width: 0; }
.rs-doc b { font: 500 0.76rem var(--f-mono); color: var(--accent-ink); }
.rs-doc span { overflow-wrap: anywhere; }
.rs-doc[aria-pressed="false"] { background: transparent; border-style: dashed; color: var(--ink-3); }
.rs-doc[aria-pressed="false"] b { color: var(--ink-3); }
.rs-doc[aria-pressed="false"] b::after { content: " · off the shelf"; font: 0.7rem var(--f-ui); }
.rs-out { display: grid; gap: 8px 26px; grid-template-columns: 1fr; margin-top: 6px; }
@media (min-width: 860px) { .rs-out { grid-template-columns: 1.1fr 1fr; } }
.rs-answer { font: 400 1.25rem/1.4 var(--f-body); color: var(--ink); margin: 0 0 8px; }
.rs-answer.dk { color: var(--gold); font-style: italic; }
.rs-why, .rs-count { font-size: 0.85rem; color: var(--ink-2); margin: 6px 0; }
@media (max-width: 600px) { .rs-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rs-doc { font-size: 0.68rem; padding: 6px 7px; } }

/* 2: parsing */
.rp-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-step, .rr-feat { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); cursor: pointer; font: 500 0.82rem var(--f-ui); }
.rp-step i { font: 500 0.72rem var(--f-mono); font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); }
.rp-step[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.rp-step[aria-pressed="true"] i { border-color: var(--bg); }
.rp { display: grid; gap: 8px 26px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 860px) { .rp { grid-template-columns: 1.3fr 1fr; } }
.rp-text { margin: 0; padding: 10px 12px 10px 38px; border-radius: var(--r-1); background: var(--bg-2); border: 1px solid var(--line); font: 0.8rem/1.6 var(--f-mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-text li { padding: 1px 4px; border-radius: 4px; }
.rp-text li::marker { color: var(--ink-3); }
.rp-text li.hit { background: var(--gold-soft); color: var(--ink); }
.rp-damage { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: grid; gap: 4px; }
.rp-damage li { color: var(--ink-2); }
.rp-damage li span { display: inline-block; width: 1.2em; color: var(--v); font-weight: 700; }
.rp-damage li.good { color: var(--ink-3); }
.rp-damage em { font: 500 0.72rem var(--f-mono); font-style: normal; color: var(--good); margin-left: 4px; }
.rp-hit { margin: 0; padding: 10px 12px; border-radius: var(--r-1); background: var(--gold-soft); font: 0.85rem/1.5 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.rp-verdict, .rpm-verdict, .ru-verdict, .rv-verdict { font-weight: 600; color: var(--v); margin: 10px 0 0; font-size: 0.9rem; }

/* 3: chunks */
.rc-ctl .rg-select select { max-width: min(360px, 80vw); }
.rc-cards .rg-card { max-width: 46rem; }

/* 4: fusion */
.rf { display: grid; gap: 4px 18px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 900px) { .rf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rf-item { width: 100%; display: grid; grid-template-columns: 1.4em auto 1fr; gap: 2px 8px; align-items: baseline; text-align: left; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; font: 0.8rem/1.35 var(--f-ui); }
.rf-item.ans { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.rf-item.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.rf-rank { font: 500 0.78rem var(--f-mono); color: var(--ink-3); }
.rf-score { font: 0.76rem var(--f-mono); color: var(--ink-3); text-align: right; }
.rf-text { grid-column: 2 / 4; color: var(--ink-2); font: 0.82rem/1.35 var(--f-body); }
.rf-none { font-size: 0.85rem; padding: 6px 0; }

/* 5: rerank */
.rr-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rr-feat i { width: 12px; height: 12px; border-radius: 3px; background: var(--fc); }
.rr-feat small { color: var(--ink-3); font: 0.72rem var(--f-mono); }
.rr-feat[aria-pressed="true"] { color: var(--ink); border-color: var(--fc); }
.rr-feat[aria-pressed="false"] i { background: transparent; border: 1px dashed var(--ink-3); }
.rr-feat.f0, .rr-bar .f0 { --fc: var(--accent); } .rr-feat.f1, .rr-bar .f1 { --fc: var(--gold); } .rr-feat.f2, .rr-bar .f2 { --fc: oklch(var(--field-l) var(--field-c) 155); } .rr-feat.f3, .rr-bar .f3 { --fc: oklch(var(--field-l) var(--field-c) 210); }
.rr-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.rr-row { display: grid; grid-template-columns: 1.6em 1fr; gap: 8px; padding: 8px 10px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--surface-2); opacity: 0.72; }
.rr-row.kept { opacity: 1; border-color: var(--line-2); }
.rr-row.ans { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.rr-pos { font: 500 0.9rem var(--f-mono); color: var(--ink-3); padding-top: 2px; }
.rr-body { min-width: 0; }
.rr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 0.78rem var(--f-ui); }
.rr-score { margin-left: auto; font: 600 0.9rem var(--f-mono); color: var(--ink); }
.rr-text { margin: 3px 0 5px; font: 0.88rem/1.4 var(--f-body); color: var(--ink); }
.rr-bar { display: flex; height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.rr-bar i { background: var(--fc); }
.rr-sum { margin: 4px 0 0; font: 0.74rem var(--f-mono); color: var(--ink-3); overflow-wrap: anywhere; }

/* 6: verify */
.rv { display: grid; gap: 8px 26px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rv-ctx { margin: 0; padding: 12px; border-radius: var(--r-1); background: var(--bg-2); border: 1px solid var(--line); font: 0.74rem/1.55 var(--f-mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rv-presets .btn.small { height: auto; min-height: 32px; padding: 5px 12px; font-size: 0.78rem; }
.rv-in { width: 100%; box-sizing: border-box; font: 0.9rem/1.45 var(--f-body); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 10px; resize: vertical; }
.rv-claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-claims li { font-family: var(--f-ui); padding: 9px 11px; border-radius: var(--r-1); border: 1px solid var(--line); border-left: 3px solid var(--v); background: var(--surface-2); font-size: 0.85rem; }
.rv-claims p { margin: 0 0 6px; color: var(--ink-2); }
.rv-claim { font: 0.8rem/1.7 var(--f-mono); }
.rv-claim .in { color: var(--ink); background: var(--gold-soft); border-radius: 4px; padding: 0 3px; }
.rv-claim .out { color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 4px; padding: 0 3px; }
.rv-meter { position: relative; height: 8px; border-radius: 4px; background: var(--bg-2); }
.rv-meter i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--v); }
.rv-meter b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }

/* 7: permissions */
.rpm { display: grid; gap: 8px 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .rpm { grid-template-columns: 1.1fr 1fr; } }
.rpm-wrote { margin: 0; font: 0.95rem/1.45 var(--f-body); color: var(--ink-2); }
.rpm-got { margin: 0; font: 400 1.15rem/1.45 var(--f-body); color: var(--ink); }
mark.leak { background: color-mix(in oklab, var(--bad) 22%, transparent); color: var(--ink); border-bottom: 2px solid var(--bad); padding: 0 2px; }

/* 8: upgrades */
.ru-q { margin: 16px 0 2px; font: italic 400 1.35rem/1.3 var(--f-display); color: var(--ink); }
.ru-setup { margin: 0; font-size: 0.82rem; }
.ru-show { font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; margin: 12px 0 0; }
mark.add { background: var(--gold-soft); color: var(--ink); border-bottom: 2px solid var(--gold); padding: 0 2px; }
.ru .seg, .rpm-ctl .seg, .rd + * .seg { flex-wrap: wrap; }
.controls .seg { flex-wrap: wrap; border-radius: 18px; max-width: 100%; }
.controls .seg button { height: auto; min-height: 28px; padding: 4px 12px; }

/* 9: agent */
.ra { display: grid; gap: 8px 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ra { grid-template-columns: 1.3fr 1fr; } }
.ra-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ra-log li { padding: 8px 11px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--surface-2); font: 0.85rem/1.5 var(--f-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.ra-log li b { display: block; font: 500 0.68rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.ra-log li.call { border-left: 3px solid var(--accent); font-family: var(--f-mono); font-size: 0.8rem; }
.ra-log li.tool { border-left: 3px solid var(--ink-3); }
.ra-log li.ans { border-left: 3px solid var(--good); color: var(--ink); font-family: var(--f-body); font-size: 0.95rem; }
.ra-log li.stop { border-left: 3px solid var(--bad); color: var(--bad); }
.ra-sum { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.ra-plain { font: 0.95rem/1.45 var(--f-body); color: var(--ink); margin: 0; }
.btn.small:disabled { opacity: 0.45; cursor: default; transform: none; }

/* 10: graph */
.rgr { display: grid; gap: 8px 26px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .rgr { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.rgr-svg { width: 100%; max-width: 430px; display: block; margin: 0 auto; }
.rgr-edge { stroke: var(--line-2); stroke-width: 1.5; }
.rgr-edge.on { stroke: var(--accent); stroke-width: 2.5; }
.rgr-node { cursor: pointer; outline: none; }
.rgr-node circle { stroke: var(--bg); stroke-width: 2; }
.rgr-node.sel circle { stroke: var(--ink); stroke-width: 2.5; }
.rgr-node:focus-visible circle { stroke: var(--gold); stroke-width: 3; }
.rgr-node.gone circle { fill: transparent; stroke: var(--ink-3); stroke-dasharray: 3 3; }
.rgr-lbl { font: 500 16px var(--f-ui); fill: var(--ink); }
.rgr-node.gone .rgr-lbl { fill: var(--ink-3); }
.rgr-docs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.rgr-nb { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.88rem; }
.rgr-nb b { font-weight: 600; margin-right: 4px; }

/* 11: debug */
.rd-tally { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 16px; }
.rd-tally i { background: var(--v); }
.rd { display: grid; gap: 12px 26px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 900px) { .rd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rd-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rd-q { width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; font: 0.82rem/1.35 var(--f-ui); }
.rd-q .rg-tag { flex: none; min-width: 7.6em; text-align: center; }
.rd-q.on { border-color: var(--accent); color: var(--ink); }
.rd-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rd-tree li { font-family: var(--f-ui); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 11px; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--surface-2); font-size: 0.86rem; }
.rd-tree li.yes .rd-ans { color: var(--good); } .rd-tree li.no .rd-ans { color: var(--bad); }
.rd-ans { font-weight: 600; }
.rd-tree li.fix { display: block; border-left: 3px solid var(--v); color: var(--ink); }
.rd-got { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rd-ans-text { margin: 0; font: 0.95rem/1.45 var(--f-body); color: var(--ink); }

/* a select's chosen option, in full, where a phone would cut it short */
.rg-asked { display: none; }
@media (max-width: 600px) { .rg-asked { display: block; flex-basis: 100%; margin: 2px 0 0; font: italic 400 1.05rem/1.3 var(--f-body); color: var(--ink); } }