/* Hand-built figures for lesson 12, Reinforcement learning. */

/* shared: arm colours, chart text, tables, wrapping segmented controls */
.a0 { --ac: var(--c3); } .a1 { --ac: var(--gold); } .a2 { --ac: var(--accent); }
.rl-arm { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ac); color: var(--bg); font: 700 0.78rem var(--f-mono); vertical-align: -5px; }
.rl-grid { stroke: var(--line); }
.rl-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.rl-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.rl-tick.on { fill: var(--ink); font-weight: 600; }
.pp-work { font: 0.9rem/1.6 var(--f-mono); color: var(--ink-2); margin: 0 0 6px; overflow-wrap: anywhere; }
.pp-work b { color: var(--ink); }
.pp-table { border-collapse: collapse; width: 100%; font: 0.85rem var(--f-ui); margin-bottom: 12px; }
.pp-table th { text-align: left; font: 500 0.66rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 5px 6px; border-bottom: 1px solid var(--line-2); }
.pp-table td { padding: 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.pp-table td.num { font-family: var(--f-mono); font-size: 0.82rem; color: var(--ink); white-space: nowrap; }
.pp-table tr.on td { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.pp-table td i { font-style: normal; font-size: 0.72rem; }
.seg.rl-wrap { flex-wrap: wrap; border-radius: 18px; max-width: 100%; }
.seg.rl-wrap button { height: auto; min-height: 28px; padding: 4px 12px; white-space: normal; text-align: left; line-height: 1.3; }
.bad { color: var(--bad); } .good { color: var(--good); } .pos { color: var(--good); } .neg { color: var(--bad); }
.rl-legend { font-size: 0.78rem; line-height: 1.6; color: var(--ink-3); text-align: center; margin: 6px 0 0; }
.rl-legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 5px 0 10px; }
.rl-legend .key:first-child { margin-left: 0; }
.rl-legend span { white-space: nowrap; }
.rl-legend span:first-child .key { margin-left: 0; }
.key.pol { background: var(--accent); } .key.true { background: var(--good); } .key.proxy { background: var(--bad); }
.key.rated { background: color-mix(in oklab, var(--ink-3) 25%, transparent); border: 1px solid var(--ink-3); }
.key.ref { background: transparent; border: 1.5px dashed var(--ink-3); }
.rf-c { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn.small.good { border-color: var(--good); color: var(--good); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }

/* hero */
.hrl { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 900px; }
.hrl-base { stroke: var(--line-2); stroke-width: 1.5; }
.hrl-bar { fill: var(--ac); transition: y 0.7s var(--ease), height 0.7s var(--ease); }
.hrl-p { font: 600 18px var(--f-mono); fill: var(--ink); transition: y 0.7s var(--ease); }
.hrl-arm { font: 17px var(--f-mono); fill: var(--ink-3); }
.hrl-cap { font: italic 18px var(--f-body); fill: var(--ink-3); }
.hrl-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0; transition: opacity 0.4s; }
.hrl-ring.in { opacity: 1; }
.hrl-coin { opacity: 0; transition: opacity 0.4s; }
.hrl-coin.in { opacity: 1; }
.hrl-coin-face { fill: var(--surface-2); stroke: var(--bad); stroke-width: 2; }
.hrl-coin.win .hrl-coin-face { fill: var(--gold); stroke: var(--gold); }
.hrl-coin-t { font: 700 20px var(--f-mono); fill: var(--bad); }
.hrl-coin.win .hrl-coin-t { fill: var(--bg); }
@media (max-width: 600px) { .hrl-p, .hrl-arm, .hrl-cap { font-size: 24px; } .hrl-coin-t { font-size: 26px; } }

/* Level 1: the options map */
.so-ask .kicker { margin-bottom: 8px; }
.so-sits { gap: 4px; padding: 4px; }
.so-sits button { font-size: 0.82rem; }
.so-map { display: grid; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.so-gh { font: 500 0.7rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.so-cards { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.so-card { margin: 0 !important; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 30px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); transition: opacity 0.25s, border-color 0.25s, background 0.25s; }
.so-name { font: 600 0.9rem/1.3 var(--f-ui); color: var(--ink); }
.so-ex { font-size: 0.78rem; color: var(--ink-3); }
.so-does { font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); margin-top: 4px; }
.so-pick { position: absolute; left: 14px; bottom: 9px; font: 600 0.68rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); opacity: 0; transition: opacity 0.25s; }
.so-card.on { border-color: var(--good); background: color-mix(in oklab, var(--good) 10%, var(--surface-2)); }
.so-card.on .so-pick { opacity: 1; }
.so-card.dim { opacity: 0.45; }
@media (max-width: 600px) {
  .so-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .so-card { padding: 10px 10px 26px; }
  .so-name { font-size: 0.82rem; }
  .so-does { display: none; }
  .so-pick { left: 10px; font-size: 0.62rem; }
}
.so-verdict { display: grid; gap: 10px 22px; grid-template-columns: 1fr; margin-top: 18px; padding: 16px 18px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--bg-2); min-height: 9rem; }
@media (min-width: 760px) { .so-verdict { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.so-verdict p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.so-verdict .so-h { font: 600 0.7rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); margin-bottom: 4px; }
.so-verdict .watch .so-h { color: var(--bad); }
.so-verdict a { color: var(--accent-ink); }
.so-always { font-size: 0.85rem; color: var(--ink-2); margin: 12px 0 0; }
.so-always b { color: var(--ink); }

/* Level 2: the dog */
.tl-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .tl-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tl-say { font: 400 1.25rem/1.4 var(--f-display); color: var(--ink); margin: 0 0 6px; min-height: 3.6rem; }
.tl-say b { color: var(--gold); font-weight: 400; font-style: italic; }
.tl-ctl { margin-top: 6px; }
.tl-tally { font-size: 0.85rem; margin: 12px 0 0; min-height: 1.4em; }
.tl-policy { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--line); }
.tl-row { display: grid; grid-template-columns: 78px 1fr 58px; gap: 10px; align-items: center; font-size: 0.9rem; color: var(--ink-2); }
.tl-row.on .tl-act { color: var(--gold); font-weight: 600; }
.tl-bar { height: 22px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.tl-bar i { display: block; height: 100%; width: var(--w); background: var(--accent); transition: width 0.4s var(--ease); }
.tl-row.on .tl-bar i { background: var(--gold); }
.tl-row b { font-family: var(--f-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* the worked example: the policy and its J */
.bp-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .bp-two { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.bp-side .slider { font-size: 0.85rem; margin: 6px 0; }
.bp-side .kicker { margin-bottom: 6px; }
.bp-arms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bp-arm { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--ink-2); text-align: center; }
.bp-bar { display: flex; align-items: flex-end; width: 100%; max-width: 90px; height: 120px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bp-bar i { display: block; width: 100%; height: var(--h); background: var(--ac); transition: height 0.3s var(--ease); }
.bp-arm b { font-family: var(--f-mono); color: var(--ink); }
.bp-win { font-size: 0.75rem; color: var(--ink-3); line-height: 1.35; }
.bp-win i { font-style: italic; }
.bp-j { font: 0.9rem/1.6 var(--f-mono); color: var(--ink-2); margin: 14px 0 0; overflow-wrap: anywhere; }
.bp-j b { color: var(--ink); }
.bp-coins { min-height: 4.6rem; margin-top: 10px; }
.bp-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.bp-coin { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ac); color: var(--ink-3); font: 600 0.78rem var(--f-mono); }
.bp-coin.win { background: var(--ac); color: var(--bg); }
.bp-coins p { margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.bp-coins p b { color: var(--ink); }

/* REINFORCE: the step */
.rf-ctl { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: 0.85rem; margin-bottom: 14px; }
.rf-table { overflow-x: auto; }
@media (max-width: 600px) { .rf-table .lg, .rf-eq { display: none; } .rf-table th, .rf-table td { padding-left: 4px; padding-right: 4px; } }
.rf-read { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.rf-read b { color: var(--ink); }
.rf-run { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rf-runhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rf-runhead .kicker { margin: 0; }
.rf-chart { width: 100%; height: auto; display: block; }
.rf-line { fill: none; stroke: var(--ac); stroke-width: 2; }
.rf-final { font-size: 0.88rem; color: var(--ink-2); margin: 8px 0 0; min-height: 1.5em; }
.rf-final b { color: var(--ink); }

/* baselines */
.bl-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .bl-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bl-side .slider { font-size: 0.85rem; margin: 6px 0; }
.bl-side .controls { margin: 6px 0 12px; }
.bl-read { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.bl-read b { color: var(--ink); }
.bl-chart { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.bl-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.bl-avg { stroke: var(--gold); stroke-dasharray: 4 4; }
.bl-dot { fill: var(--gold); }

/* PPO: the clip */
.pc-ctl { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: 0.85rem; margin-bottom: 10px; }
.pc-ctl .slider b { min-width: 4ch; }
.pc-presets { margin: 0 0 14px; gap: 8px 10px; }
.pc-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .pc-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pc-chart { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.pc-band { fill: color-mix(in oklab, var(--ink-3) 18%, transparent); }
.pc-raw { stroke: var(--ink-3); stroke-dasharray: 5 4; stroke-width: 1.5; }
.pc-obj { fill: none; stroke-width: 3; }
.pc-obj.pos { stroke: var(--accent); } .pc-obj.neg { stroke: var(--bad); }
.pc-dot { fill: var(--gold); }
.pc-L { font-size: 1.1em; }
.pc-what { font-size: 0.9rem; color: var(--ink-2); margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--ink-3); }
.pc-what.cap { border-color: var(--gold); } .pc-what.bad { border-color: var(--bad); }

/* the KL leash */
.kl-ctl { display: grid; gap: 8px 22px; grid-template-columns: 1fr; font-size: 0.85rem; margin-bottom: 10px; }
@media (min-width: 760px) { .kl-ctl { grid-template-columns: 1fr 1fr; } }
.kl-ctl .slider b { min-width: 4ch; }
.kl-ctl + .controls { margin: 0 0 16px; }
.kl-bar { position: relative; height: 28px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.kl-bar i { position: absolute; top: 0; bottom: 0; display: block; }
.kl-base { left: 0; background: var(--accent); }
.kl-fee { background: repeating-linear-gradient(135deg, var(--bad) 0 5px, color-mix(in oklab, var(--bad) 35%, transparent) 5px 10px); }
.kl-refund { background: repeating-linear-gradient(135deg, var(--good) 0 5px, color-mix(in oklab, var(--good) 35%, transparent) 5px 10px); }
.kl-ticks { position: relative; height: 18px; font: 11px var(--f-mono); color: var(--ink-3); }
.kl-ticks span { position: absolute; top: 3px; transform: translateX(-50%); }
.kl-read { margin-top: 10px; }
.kl-what { font-size: 0.9rem; color: var(--ink-2); margin: 6px 0 0; }
.kl-what b { color: var(--ink); }
.kl-what.fee b { color: var(--bad); } .kl-what.refund b { color: var(--good); }

/* GRPO: the group */
.gg-ctl { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: 0.85rem; margin-bottom: 10px; }
.gg-btns { margin: 0 0 16px; gap: 8px 10px; }
.gg-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .gg-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gg-dist .kicker, .gg-group .kicker { margin-bottom: 8px; }
.gg-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.gg-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gg-bar b { font: 500 0.66rem var(--f-mono); color: var(--ink-3); }
.gg-bar.right b { color: var(--gold); font-weight: 700; }
.gg-col { display: flex; align-items: flex-end; width: 100%; height: 110px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.gg-col i { display: block; width: 100%; height: var(--h); background: var(--accent); opacity: 0.75; transition: height 0.3s var(--ease); }
.gg-bar.right .gg-col i { background: var(--gold); opacity: 1; }
.gg-d { font: 0.78rem var(--f-mono); color: var(--ink-3); }
.gg-bar.right .gg-d { color: var(--gold); font-weight: 700; }
.gg-acc { font-size: 0.85rem; color: var(--ink-2); margin: 10px 0 0; min-height: 3em; }
.gg-acc b { color: var(--ink); }
.gg-delta { color: var(--ink-3); }
.gg-group { min-height: 14rem; }
.gg-empty { font-size: 0.9rem; }
.gg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gg-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; width: 44px; padding: 5px 0 4px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); }
.gg-chip b { font: 600 1.05rem var(--f-mono); color: var(--ink); }
.gg-chip i { font: 0.68rem var(--f-mono); font-style: normal; }
.gg-chip.ok { border-color: var(--good); } .gg-chip.ok i { color: var(--good); }
.gg-chip.no { border-color: var(--bad); } .gg-chip.no i { color: var(--bad); }
.gg-adv { display: grid; gap: 4px; }
.gg-row { display: grid; grid-template-columns: 24px 1fr 56px; gap: 10px; align-items: center; font: 0.82rem var(--f-mono); color: var(--ink-2); }
.gg-abar { position: relative; height: 14px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.gg-abar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink-3); }
.gg-abar i { position: absolute; top: 0; bottom: 0; width: var(--w); }
.gg-abar i.pos { left: 50%; background: var(--good); } .gg-abar i.neg { right: 50%; background: var(--bad); }
.gg-row b { text-align: right; font-variant-numeric: tabular-nums; }
.gg-note { font-size: 0.88rem; color: var(--ink-2); margin: 10px 0 0; }
.gg-note b { color: var(--ink); }

/* reward hacking: the scrub */
.hk-ctl { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: 0.85rem; margin-bottom: 14px; }
.hk-ctl .slider b { min-width: 3ch; }
.hk-jumps { margin: 0; gap: 8px; }
.hk-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .hk-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hk-chart, .hk-traj { width: 100%; height: auto; display: block; }
.hk-rated { fill: color-mix(in oklab, var(--ink-3) 14%, transparent); }
.hk-bar { fill: var(--accent); opacity: 0.8; }
.hk-true { fill: none; stroke: var(--good); stroke-width: 2.5; }
.hk-proxy { fill: none; stroke: var(--bad); stroke-width: 2.5; }
.hk-now { stroke: var(--gold); stroke-dasharray: 4 4; }
.hk-dot.true { fill: var(--good); } .hk-dot.proxy { fill: var(--bad); }
.hk-read { font-size: 0.88rem; color: var(--ink-2); margin: 8px 0 0; }
.hk-read b { color: var(--ink); }

/* the closed form */
.ld-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 0.85rem; margin-bottom: 16px; }
.ld-ctl .slider b { min-width: 4ch; }
.ld-hint { font-size: 0.78rem; }
.ld-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .ld-two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ld-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ld-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ld-bar b { font: 500 0.66rem var(--f-mono); color: var(--ink-3); min-height: 0.8rem; }
.ld-col { position: relative; width: 100%; height: 130px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ld-col i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); display: block; }
.ld-col i.pol { background: var(--accent); opacity: 0.85; transition: height 0.3s var(--ease); }
.ld-col i.ref { border: 1.5px dashed var(--ink-3); border-bottom: 0; background: transparent; }
.ld-read .pp-work b.bad { color: var(--bad); } .ld-read .pp-work b.good { color: var(--good); }
.ld-two-act { font-size: 0.88rem; color: var(--ink-2); margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.ld-two-act b { color: var(--ink); }