/* Hand-built figures for lesson 4, Training deep networks. */

/* shared: controls, charts, keys, readouts */
.dn-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 12px; }
.dn-ctl .slider { font-size: 0.85rem; margin: 0; }
.dn-ctl input[type="range"] { width: min(200px, 52vw); }
.dn-ctl .seg { flex-wrap: wrap; border-radius: 14px; }
.dn-chart { display: block; width: 100%; }
.dn-grid { stroke: var(--line-2); stroke-width: 1; }
.dn-one { stroke: var(--ink-3); stroke-width: 1.2; }
.dn-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.dn-exp { font-size: 9.5px; }
.dn-axis-label { font: 12px var(--f-ui); fill: var(--ink-2); }
.dn-ctitle { font-size: 0.85rem; color: var(--ink-2); margin: 10px 0 4px; }
.dn-eq { font-size: 0.92rem; color: var(--ink-2); margin: 4px 0 6px; }
.dn-eq b, .dn-read b { color: var(--gold); font-weight: 600; }
.dn-read { font-size: 0.92rem; line-height: 1.6; margin: 12px 0 0; min-height: 3.2em; overflow-wrap: anywhere; }
.dn-key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.8rem; color: var(--ink-2); margin: 4px 0 0; }
.dn-key .sw { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--accent); vertical-align: 4px; margin-right: 6px; }
.dn-key .sw.gt-e { border-top: 2px dashed var(--ink-2); }
.dn-key .sw.sl-k-on { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--gold); vertical-align: -1px; }
.dn-key .sw.sl-k-off { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--bad); vertical-align: -1px; }

/* hero: the gradient, passed back through 30 layers */
.hdn { display: block; width: 100%; max-width: 1000px; margin: 0 auto; }
.hdn-end { font: 12px var(--f-mono); fill: var(--ink-3); }
.hdn-name { font: 500 13px var(--f-ui); fill: var(--ink-2); }
.hdn-rail { stroke: var(--line-2); stroke-width: 1; }
.hdn-dot { opacity: 0.16; transition: opacity 0.35s; }
.hdn-dot.on { opacity: 1; }
.hdn-dot.l0 { fill: var(--accent); } .hdn-dot.l1 { fill: var(--gold); } .hdn-dot.l2 { fill: var(--bad); }

/* Level 1: which fix does your network need? */
.ff-sits { display: flex; flex-wrap: wrap; border-radius: 14px; margin-bottom: 16px; }
.ff-sits button { height: auto; min-height: 30px; padding: 5px 12px; white-space: normal; text-align: left; line-height: 1.3; }
.ff-opts { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ff-opt { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-3); transition: background 0.25s, border-color 0.25s, color 0.25s; }
.ff-opt b { font: 600 0.9rem/1.3 var(--f-ui); color: var(--ink-2); }
.ff-opt span { font-size: 0.8rem; line-height: 1.35; }
.ff-state { font: 600 0.72rem var(--f-ui); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; margin-top: auto; padding-top: 6px; }
.ff-opt.use, .ff-opt.net { border-color: var(--gold); background: var(--gold-soft); color: var(--ink-2); }
.ff-opt.use b, .ff-opt.net b { color: var(--ink); }
.ff-opt.use .ff-state { color: var(--gold); }
.ff-opt.net { border-style: dashed; }
.ff-opt.net .ff-state { color: var(--gold); }
.ff-opt.check, .ff-opt.built { border-color: var(--accent); background: var(--accent-soft); color: var(--ink-2); }
.ff-opt.check b, .ff-opt.built b { color: var(--ink); }
.ff-opt.check .ff-state, .ff-opt.built .ff-state { color: var(--accent-ink); }
.ff-read { margin: 0; display: grid; gap: 10px; font-size: 0.92rem; line-height: 1.55; min-height: 11em; }
.ff-read div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; }
.ff-read dt { font: 600 0.72rem/1.9 var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ff-read dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) { .ff-read div { grid-template-columns: 1fr; } }
.ff-goal { font-size: 0.88rem; color: var(--ink-2); margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }

/* 1: pass the gradient back */
.sc-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.sc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.sc-loss { fill: var(--gold); stroke: var(--surface); stroke-width: 1.5; }

/* 2: the tilt */
.gt-pre { display: flex; flex-wrap: wrap; gap: 6px; }
.gt-pre .btn[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.gt-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.gt-line-dot { fill: var(--accent); }
.gt-est { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: 6 5; }
.gt-read { display: grid; gap: 2px; }

/* 3: match the starting weights */
.im-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.im-lbl { font-size: 0.85rem; color: var(--ink-3); min-width: 8.5em; }
.dn-ctl:has(.im-row) { flex-direction: column; align-items: flex-start; gap: 8px; }
.im-std { font: 0.92rem/1.6 var(--f-mono); color: var(--ink-2); margin: 4px 0 0; overflow-wrap: anywhere; }
.im-std b { color: var(--gold); }
.im-ok { color: var(--good); } .im-no { color: var(--bad); }
.im-two { display: grid; gap: 8px 26px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .im-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.im-f { fill: none; stroke: var(--gold); stroke-width: 2; } .im-f-dot { fill: var(--gold); }
.im-b { fill: none; stroke: var(--accent); stroke-width: 2; } .im-b-dot { fill: var(--accent); }
.im-verdict { font-size: 0.85rem; color: var(--ink-2); margin: 2px 0 0; }
.im-verdict b { color: var(--ink); }

/* 4: the express lanes */
.sl-stack { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.sl-end { font: 12px var(--f-mono); color: var(--ink-3); flex: none; }
.sl-blocks { display: flex; flex-wrap: wrap; gap: 5px; flex: 0 1 auto; }
.sl-b { width: 34px; height: 30px; border-radius: 7px; border: 1.5px solid var(--bad); background: transparent; color: var(--ink-2); font: 500 0.8rem var(--f-mono); cursor: pointer; }
.sl-b[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.sl-line { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.sl-on { fill: var(--gold); } .sl-off { fill: var(--bad); } .sl-top { fill: var(--ink-2); }

/* 5: grading on a curve */
.ng-two { display: grid; gap: 6px 26px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .ng-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ng-scroll { overflow-x: auto; }
.ng-grid { border-collapse: separate; border-spacing: 3px; font: 0.85rem var(--f-mono); }
.ng-grid th { font: 500 0.72rem var(--f-ui); color: var(--ink-3); text-align: center; padding: 2px 4px; }
.ng-grid tbody th { text-align: left; white-space: nowrap; color: var(--ink-2); }
.ng-grid td { min-width: 4.8em; height: 34px; padding: 0; text-align: center; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.ng-grid td.feed { background: var(--accent-soft); border-color: var(--accent); }
.ng-grid.out td.you { background: var(--gold-soft); border-color: var(--gold); font-weight: 600; }
.ng-grid input { width: 3.6em; height: 30px; box-sizing: border-box; border: 0; background: transparent; color: var(--ink); font: 0.85rem var(--f-mono); text-align: center; -moz-appearance: textfield; }
.ng-grid input::-webkit-inner-spin-button { opacity: 0.5; }
.ng-grid tr.off td, .ng-grid tr.off th { opacity: 0.3; }
.ng-dir { color: var(--accent-ink); }
.ng-moved { color: var(--ink-2); }
.dn-ctl .controls { margin-top: 0; }
.dn-ctl .btn[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }

/* 6: the circuit breaker */
.cb-top { display: grid; gap: 14px 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 720px) { .cb-top { grid-template-columns: 300px minmax(0, 1fr); } }
.cb-plane { width: 100%; max-width: 300px; margin: 0 auto; display: block; touch-action: none; cursor: crosshair; }
.cb-axis { stroke: var(--line-2); stroke-width: 1; }
.cb-limit { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cb-raw { stroke: var(--ink-2); stroke-width: 2.5; } .cb-raw-head { fill: var(--ink-2); }
.cb-clip { stroke: var(--gold); stroke-width: 3.5; } .cb-clip-head { fill: var(--gold); }
.cb-handle { fill: transparent; stroke: var(--ink-3); stroke-width: 1.2; }
.cb-side .slider { font-size: 0.85rem; margin: 6px 0; }
.cb-side input[type="range"] { width: min(200px, 52vw); }
.cb-read { font: 0.88rem/1.7 var(--f-mono); color: var(--ink-2); margin-top: 10px; min-height: 5.1em; overflow-wrap: anywhere; }
.cb-read b { color: var(--gold); }
.cb-run { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.cb-runhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.cb-runhead .dn-ctitle { margin: 0; }
.cb-bar { fill: var(--ink-3); }
.cb-bar.trip { fill: var(--bad); fill-opacity: 0.55; }
.cb-cap { fill: var(--gold); }
.cb-line { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 4; }