/* Hand-built figures for lesson 2, Neural networks. */

/* shared */
.nn-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.nn-grid { stroke: var(--line-2); stroke-width: 1; }
.nn-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero */
.hnn { display: block; width: 100%; max-width: 900px; margin: 0 auto; }
.hnn-edge { stroke: var(--ink-3); }
.hnn-node { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1.5; transition: fill 0.3s, stroke 0.3s; }
.hnn-node.fwd { fill: var(--gold-soft); stroke: var(--gold); }
.hnn-node.back { fill: var(--accent-soft); stroke: var(--accent); }
.hnn-pulse.fwd { fill: var(--gold); }
.hnn-pulse.back { fill: var(--accent); }

/* 1: one knob */
.nk { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .nk { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.nk-plot { width: 100%; max-width: 480px; margin: 0 auto; display: block; }
@media (max-width: 600px) { .nk-plot .nn-tick { font-size: 18px; } }
.nk-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.nk-hop { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; }
.nk-past { fill: var(--gold); opacity: 0.55; }
.nk-now { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.nk-tan { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.nk-side .slider { font-size: 0.9rem; }
.nk-factor { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 10px; }
.nk-factor b { color: var(--gold); }
.nk-off { color: var(--bad); }
.nk-scroll { overflow-x: auto; }
.nk-table { border-collapse: collapse; width: 100%; font: 0.85rem var(--f-mono); font-variant-numeric: tabular-nums; }
.nk-table th { font: 500 0.72rem var(--f-ui); color: var(--ink-3); text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line-2); }
.nk-table td { text-align: right; padding: 4px 8px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.nk-table th:first-child, .nk-table td:first-child { text-align: left; }
.nk-table tr:last-child td { color: var(--ink); }

/* 2: a neuron */
.nd { display: grid; gap: 18px; }
.nd-ctl { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; font-size: 0.85rem; }
.nd-pair { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nd-line { width: 100%; max-width: 640px; display: block; margin: 0 auto; }
.nd-dead { fill: var(--ink); fill-opacity: 0.05; }
.nd-guide { stroke: var(--line-2); stroke-dasharray: 2 4; }
.nd-vote { stroke-width: 5; stroke-linecap: round; }
.nd-vote.pos { stroke: var(--gold); } .nd-vote.neg { stroke: var(--bad); }
.nd-head.pos { fill: var(--gold); } .nd-head.neg { fill: var(--bad); }
.nd-lbl { font: 13px var(--f-mono); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.nd-lbl.pos { fill: var(--gold); } .nd-lbl.neg { fill: var(--bad); }
.nd-total { stroke: var(--accent); stroke-width: 2.5; }
.nd-total-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.nd-sum { font: 1rem/1.5 var(--f-mono); color: var(--ink-2); margin: 4px 0 0; overflow-wrap: anywhere; }
.nd-sum b { color: var(--accent-ink); }
.nd-verdict { margin: 4px 0 0; color: var(--ink-2); font-size: 0.92rem; }
.nd-verdict b { color: var(--ink); }

/* 3: blame through one neuron */
.bf-ctl { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 0.85rem; }
.bf-ctl .controls { margin-top: 0; }
.bf-dir { margin: 18px 0 6px; font: 0.75rem var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3); }
.bf-trunk { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 760px) { .bf-trunk { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; } }
.bf-card { padding: 10px 14px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.bf-card span { font-size: 0.78rem; color: var(--ink-3); }
.bf-card b { font: 500 1.15rem var(--f-mono); color: var(--gold); }
.bf-link { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4px 8px; font-size: 0.75rem; color: var(--ink-3); text-align: center; }
.bf-link::before { content: "←"; color: var(--accent); font-size: 1.1rem; line-height: 1; }
.bf-link b { font: 500 0.9rem var(--f-mono); color: var(--accent-ink); }
.bf-arrive { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 8px; }
.bf-arrive b { color: var(--accent-ink); }
.bf-scroll { overflow-x: auto; }
.bf-knobs { border-collapse: collapse; width: 100%; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.bf-knobs th, .bf-knobs td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bf-knobs thead th { font-weight: 500; font-size: 0.72rem; color: var(--ink-3); border-bottom-color: var(--line-2); white-space: normal; }
.bf-knobs td { font-family: var(--f-mono); color: var(--ink-2); }
.bf-knobs tbody th { font: italic 1rem var(--f-body); color: var(--ink); }
.bf-knobs td.neg, .bf-knobs td.pos { color: var(--accent-ink); font-weight: 600; }
.bf-barc { width: 30%; min-width: 80px; }
.bf-bar { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.bf-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; transition: width 0.3s var(--ease); }
.bf-hist { font: 0.85rem/1.6 var(--f-mono); color: var(--ink-2); margin: 12px 0 0; overflow-wrap: anywhere; }
.bf-hist b { color: var(--good); }

/* 4: the moons */
.mt-ctl { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.mt-ctl .controls { margin-top: 0; }
.mt-stage { margin: 16px auto 0; max-width: 640px; }
.mt-canvas { display: block; margin: 0 auto; border-radius: var(--r-1); border: 1px solid var(--line-2); }
.mt-read { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mt-read b { color: var(--ink); }
.mt-key { text-align: center; font-size: 0.8rem; color: var(--ink-2); margin: 6px 0 0; }
.mt-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
.mt-key .k0 { background: var(--accent); } .mt-key .k1 { background: var(--gold); }

/* 5: activation functions */
.ap-ctl { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 0.85rem; }
.ap-plots { display: grid; grid-template-columns: 1fr; gap: 10px 26px; margin-top: 14px; }
@media (min-width: 720px) { .ap-plots { grid-template-columns: 1fr 1fr; } }
.ap-title { margin: 0 0 4px; font: 500 0.8rem var(--f-ui); color: var(--ink-2); }
.ap-plot { width: 100%; max-width: 420px; display: block; }
.ap-other { fill: none; stroke: var(--ink-3); stroke-width: 1.2; opacity: 0.45; }
.ap-this { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.ap-cursor { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ap-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.ap-read { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 8px; font-size: 0.9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ap-read b { color: var(--ink); }
.ap-meter { max-width: 520px; }
.ap-bar { display: block; height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.ap-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bad), var(--gold), var(--good)); border-radius: 6px; transition: width 0.25s var(--ease); }
.ap-scale { display: flex; justify-content: space-between; font: 0.72rem var(--f-mono); color: var(--ink-3); margin-top: 4px; }

/* 6: two layers */
.tl-ctl { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 0.85rem; }
.tl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
@media (min-width: 560px) { .tl-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tl-cards { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tl-card { position: relative; padding: 8px 10px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; min-height: 84px; }
.tl-name { font-size: 0.74rem; color: var(--ink-3); }
.tl-f { font: 500 1rem var(--f-mono); color: var(--gold); overflow-wrap: anywhere; }
.tl-g { font: 0.78rem var(--f-mono); color: var(--accent-ink); overflow-wrap: anywhere; }
.tl-card.now-f { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.tl-card.now-g { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tl-card.reads { border-style: dashed; border-color: var(--ink-3); }
.tl-card.cached::after { content: "cached"; position: absolute; top: -9px; right: 8px; padding: 0 6px; border-radius: 999px; font: 500 0.66rem var(--f-ui); background: var(--accent); color: var(--bg); }
.tl-now { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; min-height: 3.2em; margin: 14px 0 6px; font-size: 0.9rem; color: var(--ink-2); }
.tl-step { font: 0.74rem var(--f-mono); color: var(--ink-3); letter-spacing: 0.04em; width: 100%; }
.tl-eq { color: var(--ink); }
.tl-num { font-family: var(--f-mono); overflow-wrap: anywhere; }
.tl-num b { color: var(--ink); }
.tl-cache { font-size: 0.8rem; color: var(--accent-ink); }
.tl-shrink { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.85rem; color: var(--ink-2); }
.tl-bar { flex: 1 1 140px; max-width: 320px; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: var(--accent); transition: width 0.25s var(--ease); }
.tl-shrink b { font-family: var(--f-mono); color: var(--ink); }

/* 7: batch, step, epoch */
.ed-ctl { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 0.85rem; }
.ed-ctl .controls { margin-top: 0; }
.ed-sum { font-size: 0.92rem; color: var(--ink-2); margin: 16px 0 10px; }
.ed-sum b { color: var(--ink); }
.ed-deck { display: flex; flex-wrap: wrap; gap: 6px; max-height: 420px; overflow-y: auto; padding: 2px; }
.ed-batch { display: grid; grid-template-columns: repeat(var(--cols), 9px); gap: 2px; padding: 4px; border-radius: 6px; border: 1px solid var(--line-2); align-content: start; transition: border-color 0.2s, background 0.2s; }
.ed-batch i { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); opacity: var(--o); }
.ed-batch.short { border-style: dashed; border-color: var(--gold); }
.ed-batch.done { background: var(--surface-2); }
.ed-batch.done i { filter: saturate(0.3); }
.ed-batch.now { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold); }
.ed-status { font-size: 0.88rem; color: var(--ink-2); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.ed-status b { color: var(--ink); }