/* Hand-built figures for lesson 3, Optimizers. */

/* shared: the three rules keep one colour each in every figure */
.op-sgd { --op: var(--ink-2); }
.op-mom { --op: var(--gold); }
.op-adam, .op-adamw { --op: var(--accent); }
.op-l2 { --op: var(--gold); }
.ts-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.ts-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.ts-tick.hi { fill: var(--ink); font-weight: 600; }
.ts-check { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--ink-2); }
.k { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.k::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--op); }
.vr-key, .ho-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8rem; margin: 8px 0 0; }
.vr-key .muted, .ho-key .muted { font-size: 0.8rem; }
.fw-top, .sd-top, .vr-top, .as-top, .dl-top, .sc-top, .cl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-bottom: 12px; }
.fw-top .slider, .sd-top .slider, .vr-top .slider, .as-top .slider, .dl-top .slider, .sc-top .slider, .cl-top .slider { font-size: 0.85rem; }
.fw-top input[type="range"], .vr-top input[type="range"], .sc-top input[type="range"], .cl-top input[type="range"], .as-top input[type="range"] { width: min(200px, 55vw); }
.fw-plot, .sd-bowl, .sd-mult, .vr-plot, .as-plot, .dl-plot, .sc-plot { width: 100%; display: block; }
.vr-read, .sd-read, .dl-read, .sc-read { font-size: 0.92rem; line-height: 1.6; margin: 10px 0 0; min-height: 3.2em; overflow-wrap: anywhere; }

/* the valley: contours, trails, start, minimum */
.vl-bg { fill: var(--bg-2); }
.vl-ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.vl-star { fill: var(--ink); }
.vl-start { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.trail { opacity: 0; transition: opacity 0.6s; }
.trail.in { opacity: 1; }
.tr-line { fill: none; stroke: var(--op); stroke-width: 1.6; stroke-linejoin: round; }
.tr-dot { fill: var(--op); }
.tr-now { fill: var(--op); stroke: var(--bg); stroke-width: 2; }

/* hero */
.ho { display: block; }
.ho-key { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .trail { transition: none; } }

/* Level 1: which optimizer for your run? */
.oc-pick { flex-wrap: wrap; margin-bottom: 16px; border-radius: 14px; height: auto; }
.oc-pick button, .cl-top .seg button { white-space: normal; text-align: left; height: auto; min-height: 30px; padding: 5px 12px; }
.oc-map { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .oc-map { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.oc-gh { font: 500 0.72rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.oc-cards { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .oc-group + .oc-group .oc-cards { grid-template-columns: minmax(0, 1fr); } }
.oc-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 10px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--surface-2); transition: opacity 0.25s, border-color 0.25s, background 0.25s; }
.oc-card b { font: 600 0.92rem var(--f-ui); color: var(--ink); padding-right: 44px; }
.oc-what { font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }
.oc-chip { font-size: 0.72rem; color: var(--ink-3); margin-top: auto; padding-top: 4px; }
.oc-note { font-size: 0.75rem; color: var(--gold); min-height: 1.1em; }
.oc-use { position: absolute; top: 10px; right: 10px; font: 600 0.68rem var(--f-ui); letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--gold); color: var(--bg); visibility: hidden; }
.oc-card.on { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 12%, var(--surface)); }
.oc-card.on .oc-use { visibility: visible; }
.oc-card.off { opacity: 0.5; }
.oc-none { font-size: 0.9rem; color: var(--ink-2); margin: 10px 0 0; min-height: 1.5em; }
.oc-out { display: grid; gap: 18px 26px; grid-template-columns: 1fr; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); min-height: 13em; }
@media (min-width: 900px) { .oc-out { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.oc-h { font: 500 0.72rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.oc-out ul { margin: 0; padding-left: 1.1em; font-size: 0.88rem; line-height: 1.5; color: var(--ink); }
.oc-out li { margin-bottom: 4px; }
.oc-watch li b { color: var(--ink); }
.oc-src, .oc-cost { font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); margin: 8px 0 0; }
.oc-mem { display: flex; gap: 6px; min-height: 26px; }
.oc-sq { width: 26px; height: 26px; border-radius: 5px; }
.oc-sq.w { background: var(--ink-2); }
.oc-sq.s { background: var(--gold); }

/* the idea: walking downhill in fog */
.fw-fog { fill: var(--bg-2); }
.fw-whole { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.fw-seen { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.fw-tangent { stroke: var(--gold); stroke-width: 2; }
.fw-step .shaft { stroke: var(--gold); stroke-width: 2.5; } .fw-step .head { fill: var(--gold); }
.fw-past { fill: var(--accent); opacity: 0.6; }
.fw-me { fill: var(--ink); stroke: var(--bg); stroke-width: 2.5; }
.fw-loop { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 0; margin: 12px 0 4px; counter-reset: s; }
.fw-loop li { padding: 8px 10px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; transition: border-color 0.2s, background 0.2s; }
.fw-loop li b { font-weight: 600; color: var(--ink-2); }
.fw-loop li span { font-family: var(--f-mono); color: var(--ink-3); min-height: 1.3em; }
.fw-loop li.now { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 12%, var(--surface)); }
.fw-loop li.now b, .fw-loop li.now span { color: var(--ink); }
.fw-table, .as-table { overflow-x: auto; margin-top: 12px; }
.fw-table { min-height: 172px; }
.fw-table table, .as-table table { border-collapse: collapse; width: 100%; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.fw-table th, .fw-table td, .as-table th, .as-table td { padding: 5px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fw-table th, .as-table thead th { font: 500 0.75rem var(--f-ui); color: var(--ink-3); }
.fw-table th, .as-table thead th, .as-table th[scope="row"] { white-space: normal; vertical-align: bottom; }
@media (max-width: 640px) { .fw-table th, .fw-table td, .as-table th, .as-table td { padding: 5px 5px; font-size: 0.8rem; } }
.fw-table td:first-child, .fw-table th:first-child, .as-table th[scope="row"], .as-table thead th:first-child { text-align: left; }
.as-table th[scope="row"] { font: 400 0.85rem var(--f-ui); color: var(--ink-2); }
.fw-table td.muted { text-align: left; white-space: normal; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }

/* the learning rate */
.sd-curve { fill: none; stroke: var(--line-2); stroke-width: 2; }
.sd-hops { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.sd-dot { fill: var(--accent); }
.sd-start { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.sd-off .shaft { stroke: var(--bad); stroke-width: 2; stroke-dasharray: 5 4; } .sd-off .head { fill: var(--bad); }
.sd-band { fill: color-mix(in oklab, var(--good) 22%, transparent); }
.sd-mark { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }

/* Adam: the draggable start */
.as-handle { fill: var(--ink); stroke: var(--bg); stroke-width: 3; cursor: grab; touch-action: none; }
.as-handle:focus-visible { outline: none; stroke: var(--accent); stroke-width: 4; }

/* weight decay */
.dl-zero { stroke: var(--line-2); stroke-dasharray: 3 4; }
.dl-line { fill: none; stroke: var(--op); stroke-width: 2.5; }
.dl-line.op-l2 { stroke-dasharray: 7 4; }
.dl-end { fill: var(--op); stroke: var(--bg); stroke-width: 2; }

/* warmup and cosine */
.sc-grid { stroke: var(--line); }
.sc-warm { fill: color-mix(in oklab, var(--gold) 10%, transparent); }
.sc-ran { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.sc-plan { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.7; }
.sc-lesson { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.sc-stop { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }

/* clipping */
.cl-two { display: grid; gap: 18px 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .cl-two { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
.cl-plot { width: 100%; display: block; margin: 0 auto; }
.cl-grid { stroke: var(--line); }
.cl-axis { stroke: var(--ink-3); }
.cl-limit { fill: color-mix(in oklab, var(--good) 14%, transparent); stroke: var(--good); stroke-width: 1.5; }
.cl-raw .shaft { stroke: var(--ink); stroke-width: 2.5; } .cl-raw .head { fill: var(--ink); }
.cl-raw.clipped .shaft { stroke: var(--ink-3); stroke-dasharray: 5 4; } .cl-raw.clipped .head { fill: var(--ink-3); }
.cl-new .shaft { stroke: var(--accent); stroke-width: 3; } .cl-new .head { fill: var(--accent); }
.cl-read { font-size: 0.9rem; line-height: 1.55; min-height: 12em; }
.cl-read p { margin: 0 0 8px; }
.cl-top .seg { flex-wrap: wrap; height: auto; border-radius: 14px; }
.cl-top .seg button { white-space: normal; }