/* Fine-tuning loop explainer page (/fine-tuning).
   Theme-aware: dark by default, flips with html.psa-light (base.html tokens).
   The canvas reads these tokens at runtime, so every scene color lives here. */

.ftl{
  --ft-bg:var(--psa-bg-deep); --ft-panel:var(--psa-bg-card); --ft-sunk:var(--psa-bg-panel);
  --ft-ink:var(--psa-text-primary); --ft-muted:var(--psa-text-secondary); --ft-line:var(--psa-border);
  --ft-brand:#8f96ff; --ft-brand-soft:#23275a; --ft-drift:#ff7a4d; --ft-drift-soft:#3d2219;
  --ft-good:#3fcf9e; --ft-good-soft:#163a30; --ft-amber:#e9b04c;
  --ft-mono:ui-monospace,"JetBrains Mono","DejaVu Sans Mono",Consolas,monospace;
  max-width:1120px; margin:0 auto; padding:24px 16px 56px; display:grid; gap:40px;
  color:var(--ft-ink); font-size:15px; line-height:1.55;
}
html.psa-light .ftl{
  --ft-sunk:#eeeff7;
  --ft-brand:#4338ca; --ft-brand-soft:#e9ebfd; --ft-drift:#d1451b; --ft-drift-soft:#fbe6dd;
  --ft-good:#0e8f6c; --ft-good-soft:#dcf3ea; --ft-amber:#b7791f;
}
.ftl *{box-sizing:border-box}
.ftl h1,.ftl h2,.ftl h3{margin:0; text-wrap:balance; letter-spacing:-.01em; color:var(--ft-ink)}
.ftl h1{font-size:clamp(28px,5vw,44px); font-weight:800; line-height:1.08}
.ftl h2{font-size:24px; font-weight:700}
.ftl h3{font-size:17px; font-weight:700}
.ftl p{margin:0}
.ftl .eyebrow{font-family:var(--ft-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ft-brand)}
.ftl .lede{font-size:18px; max-width:64ch}
.ftl .muted{color:var(--ft-muted)}
.ftl header{display:grid; gap:14px}
.ftl .xlink{font-size:14px; color:var(--ft-brand); text-decoration:none; justify-self:start}
.ftl .xlink:hover{text-decoration:underline}
.ftl .facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.ftl .fact{font-size:13px; padding:5px 10px; border:1px solid var(--ft-line); border-radius:999px; background:var(--ft-panel); color:var(--ft-muted)}
.ftl .fact b{color:var(--ft-ink); font-weight:600}

.ftl .bench{background:var(--ft-panel); border:1px solid var(--ft-line); border-radius:14px; overflow:hidden}
.ftl .toolbar{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--ft-line)}
.ftl .tgroup{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.ftl .lbl{font-family:var(--ft-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ft-muted)}
.ftl .seg{display:inline-flex; background:var(--ft-sunk); border-radius:9px; padding:3px; gap:2px}
.ftl .seg button{font:inherit; font-size:13px; font-weight:500; color:var(--ft-muted); background:transparent; border:0; border-radius:7px; padding:6px 11px; cursor:pointer}
.ftl .seg button[aria-pressed="true"]{background:var(--ft-panel); color:var(--ft-ink); box-shadow:0 1px 2px rgba(0,0,0,.18)}
.ftl .seg button:hover{color:var(--ft-ink)}
.ftl .ctrl{display:inline-flex; gap:6px}
.ftl .btn{font:inherit; font-size:13px; font-weight:600; border:1px solid var(--ft-line); background:var(--ft-panel); color:var(--ft-ink); border-radius:8px; padding:6px 12px; cursor:pointer}
.ftl .btn:hover{border-color:var(--ft-brand)}
.ftl .btn.primary{background:var(--ft-brand); border-color:var(--ft-brand); color:var(--ft-panel)}
.ftl button:focus-visible,.ftl select:focus-visible{outline:2px solid var(--ft-brand); outline-offset:2px}
.ftl .scene{background:var(--ft-sunk)}
.ftl canvas{display:block; width:100%}
.ftl .scene-note{display:block; text-align:right; padding:4px 12px 8px; font-size:11px; color:var(--ft-muted); font-family:var(--ft-mono)}

.ftl .rail{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--ft-line); border-bottom:1px solid var(--ft-line)}
.ftl .step{position:relative; border:0; background:transparent; text-align:left; padding:12px 12px 14px; cursor:pointer; color:var(--ft-muted); border-right:1px solid var(--ft-line); font:inherit; min-width:0}
.ftl .step:last-of-type{border-right:0}
.ftl .step .n{font-family:var(--ft-mono); font-size:11px; display:block}
.ftl .step .t{font-weight:600; font-size:14px; color:var(--ft-ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ftl .step .bar{position:absolute; left:0; bottom:0; height:3px; background:var(--ft-brand); width:0}
.ftl .step[aria-current="step"]{background:var(--ft-brand-soft)}
.ftl .step[aria-current="step"] .n{color:var(--ft-brand)}
.ftl .step.done .bar{opacity:.35}
.ftl .step:hover{background:var(--ft-sunk)}
.ftl .step[aria-current="step"]:hover{background:var(--ft-brand-soft)}
.ftl .loopnote{grid-column:1/-1; font-size:12px; color:var(--ft-muted); padding:6px 12px; border-top:1px solid var(--ft-line); font-family:var(--ft-mono)}

.ftl .reading{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ftl .detail{padding:20px 22px; display:grid; gap:12px; align-content:start; border-right:1px solid var(--ft-line); min-width:0}
.ftl .detail .out{font-size:14px; padding:10px 12px; background:var(--ft-sunk); border-radius:8px}
.ftl .detail .out b{font-family:var(--ft-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ft-muted); font-weight:500; display:block; margin-bottom:2px}
.ftl .ex{display:grid; gap:8px; font-size:14px}
.ftl .ex .q{font-family:var(--ft-mono); font-size:12.5px; background:var(--ft-sunk); border-radius:8px; padding:9px 11px; overflow-wrap:anywhere}
.ftl .ex .r{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; align-items:start; padding:8px 10px; border-radius:8px; border:1px solid var(--ft-line); transition:opacity .4s,border-color .4s,background .4s}
.ftl .ex .r .tag{font-family:var(--ft-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding-top:2px}
.ftl .ex .r.plain .tag{color:var(--ft-drift)}
.ftl .ex .r.tuned .tag{color:var(--ft-good)}
.ftl .ex .r.on.plain{border-color:var(--ft-drift); background:var(--ft-drift-soft)}
.ftl .ex .r.on.tuned{border-color:var(--ft-good); background:var(--ft-good-soft)}
.ftl .ex .r.off{opacity:.45}

.ftl .meters{padding:20px 22px; display:grid; gap:16px; align-content:start; min-width:0}
.ftl .meter{display:grid; gap:6px}
.ftl .meter .top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.ftl .meter .name{font-size:14px; font-weight:500}
.ftl .meter .val{font-family:var(--ft-mono); font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap}
.ftl .meter .hint{font-size:12px; color:var(--ft-muted)}
.ftl .track{position:relative; height:10px; border-radius:5px; background:var(--ft-sunk)}
.ftl .fill{position:absolute; left:0; top:0; bottom:0; border-radius:5px; width:0}
.ftl .ghost{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ft-muted); opacity:0; border-radius:1px}
.ftl .meter.low .fill{background:var(--ft-drift)}
.ftl .meter.high .fill{background:var(--ft-good)}
.ftl .meter.pending .val{color:var(--ft-muted)}
.ftl .check{font-family:var(--ft-mono); font-size:13px; padding:4px 8px; border-radius:6px; display:inline-block; justify-self:start}
.ftl .check.ok{background:var(--ft-good-soft); color:var(--ft-good)}
.ftl .check.no{background:var(--ft-sunk); color:var(--ft-muted)}
.ftl .mnote{font-size:12px; color:var(--ft-muted); border-top:1px solid var(--ft-line); padding-top:10px}

.ftl .sec{display:grid; gap:16px}
.ftl .sec-head{display:grid; gap:6px; max-width:72ch}
.ftl .two{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; align-items:start}
.ftl .card{background:var(--ft-panel); border:1px solid var(--ft-line); border-radius:12px; padding:18px; min-width:0}
.ftl .chart svg{display:block; width:100%; height:auto}
.ftl .legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--ft-muted); margin-top:8px}
.ftl .legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.ftl .legend i.lg-before{border:2px solid var(--ft-muted); background:var(--ft-panel)}
.ftl .legend i.lg-good{background:var(--ft-good)}
.ftl .legend i.lg-amber{background:var(--ft-amber)}
.ftl .tablewrap{overflow-x:auto}
.ftl table{border-collapse:collapse; width:100%; font-size:14px}
.ftl th,.ftl td{text-align:left; padding:8px; border-bottom:1px solid var(--ft-line); vertical-align:top}
.ftl th{font-family:var(--ft-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ft-muted); font-weight:500}
.ftl td.num{font-family:var(--ft-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.ftl td.num b{color:var(--ft-good); font-weight:500}
.ftl tr.sel td{background:var(--ft-brand-soft)}
.ftl .cap{font-size:12px; color:var(--ft-muted); margin-top:10px}

.ftl .next{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.ftl .next .card{display:grid; gap:8px; align-content:start}
.ftl .next .k{font-family:var(--ft-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase}
.ftl .k.done{color:var(--ft-good)}
.ftl .k.first{color:var(--ft-amber)}
.ftl .k.open{color:var(--ft-brand)}
.ftl .plainw{background:var(--ft-panel); border:1px solid var(--ft-line); border-radius:12px; padding:20px 22px; display:grid; gap:10px}
.ftl .plainw p{max-width:75ch}
.ftl .foot{font-size:12px; color:var(--ft-muted); max-width:90ch}

@media (max-width:860px){
  .ftl .reading,.ftl .two{grid-template-columns:1fr}
  .ftl .detail{border-right:0; border-bottom:1px solid var(--ft-line)}
  .ftl .next{grid-template-columns:1fr}
  .ftl .rail{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ftl .step{border-bottom:1px solid var(--ft-line)}
  .ftl .step:nth-of-type(4){border-right:0}
}
@media (max-width:480px){
  .ftl .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftl .step:nth-of-type(2n){border-right:0}
}
@media (prefers-reduced-motion: reduce){ .ftl .ex .r{transition:none} }