/* Feedback loop builder (assets/tools/feedback-loops.js). Slot colors follow
   the course visual language (anp.css): the sensor and afferent pathway in
   the afferent color, the efferent pathway and effector in the efferent
   color, the control center in the course accent. */
.fl-app{min-height:62vh;margin:0 0 40px;max-width:900px;}
.fl-loading{padding:40px 0;}
.fl-panel,.fl-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--lift-sm);padding:20px 22px;margin:0 0 18px;}
.fl-h2{font-size:21px;margin:0 0 8px;}
.fl-h3{font-size:17px;margin:0 0 8px;outline:none;}
.fl-intro{font-weight:600;line-height:1.6;margin:0 0 14px;max-width:64ch;}

.fl-seg{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.fl-seg button{min-height:40px;padding:7px 13px;border-radius:var(--radius-pill);border:2px solid var(--line);background:var(--paper);color:var(--ink);font:800 13.5px var(--font-ui);cursor:pointer;}
.fl-seg button:hover{border-color:var(--cink);}
.fl-seg button[aria-pressed="true"]{background:var(--cink);border-color:var(--cink);color:var(--paper);}
.fl-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.fl-pick{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;height:100%;text-align:left;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-family:var(--font-ui);}
.fl-pick:hover{border-color:var(--cink);}
.fl-pick-t{font-weight:800;font-size:15px;line-height:1.35;}
.fl-pick-m{font-weight:700;font-size:12.5px;color:var(--muted);}
.fl-pick-s{font-weight:800;font-size:12px;color:var(--amber-text);}
.fl-pick-s.full{color:var(--good-text);}
.fl-parts{margin:0 0 10px;padding-left:22px;display:grid;gap:4px;font-weight:700;}
.fl-part-sensor::marker,.fl-part-afferent::marker{color:var(--anp-aff);}
.fl-part-efferent::marker,.fl-part-effector::marker{color:var(--anp-eff);}

.fl-progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:0 0 12px;}
.fl-progress .track{min-width:40px;}
.fl-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
.fl-tag{display:inline-block;padding:4px 11px;border-radius:var(--radius-pill);background:var(--ctint);color:var(--cink);font:800 12px var(--font-ui);text-decoration:none;}
a.fl-tag:hover{text-decoration:underline;}
.fl-title{font-size:22px;margin:0 0 8px;outline:none;}
.fl-scenario{font-weight:600;line-height:1.65;margin:0 0 14px;max-width:66ch;}
.fl-stepper{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;counter-reset:st;}
.fl-stepper li{counter-increment:st;padding:5px 12px;border-radius:var(--radius-pill);background:var(--paper);color:var(--muted);font:800 12.5px var(--font-ui);}
.fl-stepper li::before{content:counter(st) ". ";}
.fl-stepper li.is-on{background:var(--cink);color:var(--paper);}
.fl-stepper li.is-done{background:var(--ctint);color:var(--cink);}
.fl-stepper li.is-done::before{content:"✓ ";}
.fl-build,.fl-classify,.fl-failure,.fl-done{border-top:1px solid var(--line);padding-top:14px;margin-top:16px;}
.fl-build{border-top:0;padding-top:0;margin-top:0;}
.fl-how{margin:0 0 12px;}

/* The board: slots beside the card pool on wide screens, stacked on phones. */
.fl-board{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start;}
.fl-slots{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.fl-slot{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:9px 12px;border-radius:13px;border:2px dashed var(--line);border-left:6px solid var(--anp-shape);background:var(--paper);color:var(--ink);cursor:pointer;font-family:var(--font-ui);min-height:52px;}
.fl-s-sensor,.fl-s-afferent{border-left-color:var(--anp-aff);}
.fl-s-efferent,.fl-s-effector{border-left-color:var(--anp-eff);}
.fl-s-control{border-left-color:var(--cink);}
.fl-slot.is-filled{border-style:solid;background:var(--white);}
.fl-slot[aria-pressed="true"]{border-top-color:var(--cink);border-right-color:var(--cink);border-bottom-color:var(--cink);border-style:solid;background:var(--ctint);box-shadow:0 0 0 2px var(--ctint);}
.fl-slot:hover:not(:disabled){border-top-color:var(--cink);border-right-color:var(--cink);border-bottom-color:var(--cink);}
.fl-slot:disabled{cursor:default;}
.fl-slot:focus-visible,.fl-tile:focus-visible,.fl-choice:focus-visible,.fl-opt:focus-visible,.fl-pick:focus-visible,.fl-seg button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.fl-slot-n{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ctint);color:var(--cink);font:900 12px var(--font-ui);margin-top:1px;}
.fl-slot-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fl-slot-l{font:900 11.5px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.fl-slot-v{font-weight:700;font-size:14px;line-height:1.4;color:var(--muted);}
.fl-slot.is-filled .fl-slot-v{color:var(--ink);}
.fl-slot[aria-pressed="true"] .fl-slot-v{color:var(--cink);}
.fl-slotrow.is-ok .fl-slot{border-top-color:var(--good);border-right-color:var(--good);border-bottom-color:var(--good);border-style:solid;}
.fl-slotrow.is-no .fl-slot{border-top-color:var(--bad);border-right-color:var(--bad);border-bottom-color:var(--bad);border-style:solid;background:var(--tint-bad);}
.fl-slot-fb{margin:6px 2px 4px 36px;font-weight:600;font-size:14px;line-height:1.55;}
.fl-slot-fb p{margin:0 0 4px;}
.fl-app .ok{color:var(--good-text);} .fl-app .no{color:var(--bad-text);}
.fl-poolwrap{position:sticky;top:calc(var(--site-header-h, 112px) + 10px);}
.fl-pool-h{margin:0 0 8px;font:900 11.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.fl-pool{display:flex;flex-wrap:wrap;gap:7px;}
.fl-tile{padding:9px 12px;border-radius:12px;border:2px solid var(--line);background:var(--white);box-shadow:var(--lift-sm);color:var(--ink);font:700 14px/1.4 var(--font-ui);text-align:left;cursor:pointer;min-height:44px;max-width:100%;}
.fl-tile:hover{border-color:var(--cink);}
.fl-pool-empty{margin:0;}
.fl-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;}
.fl-live{min-height:1.4em;margin:10px 0 0;}
.fl-live-score{font:800 15px var(--font-ui);color:var(--ink);}

.fl-choices{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px;}
.fl-choice,.fl-opt{padding:11px 16px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:800 14.5px/1.45 var(--font-ui);cursor:pointer;text-align:left;}
.fl-choice:hover:not(:disabled),.fl-opt:hover:not(:disabled){border-color:var(--cink);}
.fl-choice:disabled,.fl-opt:disabled{cursor:default;}
.fl-choice.is-right,.fl-opt.is-right{border-color:var(--good);background:var(--tint-good);}
.fl-choice.is-wrong,.fl-opt.is-wrong{border-color:var(--bad);background:var(--tint-bad);}
.fl-cfb p{margin:0 0 6px;font-weight:600;line-height:1.6;}
.fl-q{font-weight:700;line-height:1.6;margin:0 0 10px;}
.fl-opts{display:grid;gap:8px;}
.fl-opt{display:block;width:100%;font-weight:700;}
.fl-opt-why{display:block;margin-top:4px;font-weight:600;font-size:13.5px;color:var(--muted);}
.fl-report{margin-top:6px;}

.fl-figure{margin:6px 0 12px;}
.fl-svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;}
.fl-figure figcaption{font:600 13px/1.5 var(--font-ui);color:var(--muted);margin-top:8px;max-width:60ch;}
.anp-fig .fl-svg-t{font:700 12.5px var(--font-ui);fill:var(--ink);}
.anp-fig .fl-svg-l{font-size:10.5px;letter-spacing:.04em;}
.anp-fig .fl-svg-k{font:900 13px var(--font-ui);fill:var(--cink);}
.fl-final{font-weight:700;margin:0 0 10px;}
.fl-after-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

@media (max-width:700px){
  .fl-board{grid-template-columns:1fr;}
  .fl-poolwrap{position:static;}
}
@media (max-width:620px){
  .fl-panel,.fl-card{padding:16px 14px;border-radius:var(--radius);}
  .fl-progress{grid-template-columns:auto 1fr;}
  .fl-progress .fl-back{grid-column:1 / -1;justify-self:start;}
  .fl-title{font-size:19px;}
  .fl-slot-fb{margin-left:4px;}
}