/* Hand-built figures for lesson 11, Fine-tuning in practice. */

/* shared: two columns that stack on a phone, bars, chart text, readouts, tables */
.ft-two { display: grid; gap: 22px 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .ft-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ft-track { display: block; height: 18px; border-radius: 6px; background: var(--surface-2); overflow: hidden; min-width: 0; }
.ft-track i { display: block; height: 100%; min-width: 2px; background: var(--accent); transition: width 0.2s; }
.ft-track i.ok { background: var(--good); } .ft-track i.no { background: var(--bad); }
.ft-track i.task { background: var(--accent); } .ft-track i.gen { background: var(--gold); }
.ft-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.ft-grid { stroke: var(--line); }
.ft-drop { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.ft-dots { stroke: var(--ink-3); stroke-dasharray: 2 4; }
.ft-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.ft-tick.hi { fill: var(--ink); font-weight: 600; }
.ft-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.ft-dot.task { fill: var(--accent); } .ft-dot.gen { fill: var(--gold); }
.ft-work { font: 0.9rem/1.6 var(--f-mono); color: var(--ink-2); margin: 0 0 8px; overflow-wrap: anywhere; }
.ft-work b { color: var(--ink); }
.ft-big { font: 400 1.4rem/1.3 var(--f-display); margin: 8px 0; overflow-wrap: anywhere; }
.ft-big b { color: var(--gold); font-weight: 400; }
.ft-two .slider, .fl-top .slider, .rl-top .slider, .ol-top .slider, .md-top .slider, .je-bottom .slider { font-size: 0.85rem; margin: 6px 0; }
.ft-two .muted, .fig .muted { font-size: 0.85rem; line-height: 1.5; }
.ft-two input[type="range"], .fl-top input[type="range"], .rl-top input[type="range"], .ol-top input[type="range"], .md-top input[type="range"], .je-bottom input[type="range"] { width: min(220px, 55vw); }
.ft-legend { font-size: 0.8rem; color: var(--ink-2); margin: 8px 0 0; line-height: 1.8; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.sw.prompt, .sw.gen { background: var(--gold); } .sw.tuned, .sw.task { background: var(--accent); }
.sw.dot { border-radius: 50%; background: var(--accent); }
.sw.dash, .sw.dots { height: 0; width: 18px; border-top: 2px dashed var(--ink-3); vertical-align: 3px; }
.sw.dots { border-top-style: dotted; }
.ft-table { border-collapse: collapse; width: 100%; font: 0.85rem var(--f-ui); margin-bottom: 10px; }
.ft-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); }
.ft-table td { padding: 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ft-table td.num { font-family: var(--f-mono); font-size: 0.82rem; color: var(--ink); white-space: nowrap; }
.ft-table tr.now td { background: var(--bg-2); color: var(--ink); }
.fig .bad { color: var(--bad); } .fig .good { color: var(--good); }
.fig p.bad, .fig p.good { font-size: 0.9rem; margin: 6px 0; }
.fl-top, .rl-top, .ol-top, .md-top, .je-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 14px; }
.fl-top .seg, .rl-top .seg, .ol-top .seg, .md-top .seg { flex-wrap: wrap; border-radius: 18px; max-width: 100%; }
.fl-top .seg button, .rl-top .seg button, .ol-top .seg button, .md-top .seg button { height: auto; min-height: 28px; padding: 4px 12px; white-space: normal; text-align: left; line-height: 1.3; }

/* hero: 97 weights, four models */
.hf { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 860px; }
.hf-mid { stroke: var(--line-2); }
.hf-ghost rect { fill: none; stroke: var(--ink-3); stroke-width: 0.8; opacity: 0.55; }
.hf-layer { opacity: 0; transition: opacity 0.7s var(--ease); }
.hf-layer.in { opacity: 1; }
.hf-base { fill: var(--ink-2); } .hf-a { fill: var(--accent); } .hf-c { fill: var(--gold); }
.hf-label { font: 16px var(--f-ui); fill: var(--ink-2); }
@media (max-width: 600px) { .hf-label { font-size: 21px; } }

/* Level 1: the options map */
.fo-ask .kicker { margin-bottom: 8px; }
.fo-sits { flex-wrap: wrap; border-radius: 18px; max-width: 100%; gap: 4px; padding: 4px; }
.fo-sits button { height: auto; min-height: 28px; padding: 4px 12px; white-space: normal; text-align: left; line-height: 1.3; font-size: 0.82rem; }
.fo-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) { .fo-verdict { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fo-verdict p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.fo-verdict .fo-h { font: 600 0.7rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); margin-bottom: 4px; }
.fo-verdict .watch .fo-h { color: var(--bad); }
.fo-verdict a { color: var(--accent-ink); }
.fo-always { font-size: 0.85rem; color: var(--ink-2); margin: 12px 0 0; }
.fo-always b { color: var(--ink); }
.fo-cards { list-style: none; margin: 22px 0 0; padding: 16px 0 0 !important; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fo-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; }
.fo-name { font: 600 0.9rem/1.3 var(--f-ui); color: var(--ink); }
.fo-where { font-size: 0.78rem; color: var(--ink-3); }
.fo-does { font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); margin-top: 4px; }
.fo-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; }
.fo-card.on { border-color: var(--good); background: color-mix(in oklab, var(--good) 10%, var(--surface-2)); }
.fo-card.on .fo-pick { opacity: 1; }
.fo-card.dim { opacity: 0.45; }
@media (max-width: 480px) {
  .fo-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .fo-card { padding: 10px 10px 26px; }
  .fo-name { font-size: 0.82rem; }
  .fo-does { display: none; }
  .fo-pick { left: 10px; font-size: 0.62rem; }
}

/* 1: break-even */
.be-ctl .kicker { margin: 10px 0 2px; }
.be-ctl .kicker:first-child { margin-top: 0; }
.be-ctl .controls { margin-top: 10px; }
.be-chart, .em-chart, .fl-chart, .rl-chart, .ol-chart, .md-chart { width: 100%; display: block; }
.be-line { fill: none; stroke-width: 2.5; }
.be-line.prompt { stroke: var(--gold); } .be-line.tuned { stroke: var(--accent); }

/* 2b: the Jaccard editor */
.je-in { display: grid; gap: 10px; margin-bottom: 14px; }
.je-field { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 0.85rem; color: var(--ink-2); }
.je-field input { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 0.95rem var(--f-ui); }
.je-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.je-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; margin: 6px 0; }
.je-lbl { font: 0.8rem var(--f-mono); color: var(--ink-3); padding-top: 5px; }
.je-chip { display: inline-block; margin: 0 6px 6px 0; padding: 4px 9px; border-radius: 8px; font: 0.85rem var(--f-mono); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); }
.je-chip.shared { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.je-read .ft-big { margin: 0; }
@media (max-width: 480px) { .je-row { grid-template-columns: 1fr; } .je-lbl { padding-top: 0; } }

/* 2d: label noise */
.ln-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 48px; gap: 10px; align-items: center; margin: 10px 0; font-size: 0.85rem; }
.ln-row > span { color: var(--ink-2); display: flex; flex-direction: column; }
.ln-row i { font: 600 0.68rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ln-row b { text-align: right; }
@media (max-width: 480px) { .ln-row { grid-template-columns: minmax(0, 1fr) 48px; } .ln-row .ft-track { grid-column: 1 / -1; } }

/* 3a, 3b, 4, 5b: the labs */
.fl-pt { opacity: 0.25; } .fl-pt.seen { opacity: 0.8; }
.fl-pt.task { fill: var(--accent); } .fl-pt.gen { fill: var(--gold); }
.rl-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.ol-line { fill: none; stroke-width: 2.5; }
.ol-line.task { stroke: var(--accent); } .ol-line.gen { stroke: var(--gold); }
.em-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.em-mark { fill: var(--ink-3); }
.md-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 56px; gap: 10px; align-items: center; margin: 8px 0; font-size: 0.88rem; color: var(--ink-2); }
.md-row b { text-align: right; color: var(--ink); }
@media (max-width: 480px) { .md-row { grid-template-columns: minmax(0, 1fr) 56px; } .md-row .ft-track { grid-column: 1 / -1; } }

/* 5a: task arithmetic by hand */
.ta-ctl { display: grid; gap: 10px; }
.ta-ctl .kicker { margin-bottom: 0; }
.ta-grp { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; padding: 8px 10px; border-radius: var(--r-1); background: var(--bg-2); border: 1px solid var(--line); }
.ta-g { flex-basis: 100%; font: 500 0.8rem var(--f-ui); color: var(--ink-2); }
.ta-grp .slider { margin: 0; font-size: 0.85rem; }
.ta-grp input[type="range"] { width: 90px; }
.ta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-1); font-size: 0.85rem; color: var(--ink-2); }
.ta-row.tau { color: var(--ink-2); } .ta-row.merged { background: var(--bg-2); color: var(--ink); }
.ta-vec { display: inline-flex; gap: 4px; }
.ta-vec i { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 30px; border-radius: 6px; font-style: normal; font: 0.82rem var(--f-mono); color: var(--ink); background: color-mix(in oklab, var(--accent) calc(max(var(--a), 0) * 45%), color-mix(in oklab, var(--gold) calc(max(-1 * var(--a), 0) * 45%), var(--surface-2))); border: 1px solid var(--line); }
.ta-out .ft-big { margin-top: 12px; }
.ta-out .ft-work { margin-top: 8px; }
@media (max-width: 480px) { .ta-vec i { width: 46px; font-size: 0.76rem; } }