/* Fill-Down Lab (information-technology/fill-down.php). The page chrome is the one-screen layout in /css/resource.css,
   the grid, formula bar and the moved/fixed colours sheet.css. On a laptop or desktop: the spreadsheet on the left,
   the references and copies on the right (scrolling inside its panel). On smaller screens they stack. Theme tokens only. */
.rp-main{gap:10px}
.fd-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:12px}
.fd-work>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px 12px}
.fd-sheet{gap:8px}
.fd-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.fd-picks{display:flex;gap:5px;flex-wrap:wrap}
.fd-pick{font:600 12.5px/1.1 var(--font-display);padding:6px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);cursor:pointer}
.fd-pick:hover{border-color:var(--accent);color:var(--accent-deep)}
.fd-pick.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fd-pick.first{box-shadow:inset 0 -3px 0 var(--ok)}
.fd-pick.done{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ok) 50%,transparent)}
.fd-pick.shown{box-shadow:inset 0 -3px 0 var(--hint)}
.fd-pick.tried{border-color:var(--bad)}
.fd-pick:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.fd-pick .fd-pname{display:none}
.fd-pick.on .fd-pname{display:inline}
.fd-grid{flex:1;min-height:0;display:flex;flex-direction:column}
.fd-grid .sg-wrap{flex:1}
.fd-grid table.sg{min-width:520px}
td.fd-src{background:var(--accent-tint)}
td.fd-src .sg-v{font-weight:700}
td.fd-copy{background:color-mix(in srgb,var(--moved-tint) 55%,var(--panel))}
td.fd-copy.sg-ok{background:var(--ok-tint)}
td.fd-copy.sg-bad,td.sg-bad{background:var(--bad-tint)}
.fd-under{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;flex:none}
.fd-hint{margin:0;font-size:13px;color:var(--ink-soft)}

/* the side: the task, the references, the copies */
.fd-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px}
.fd-sec{display:flex;flex-direction:column;gap:7px}
.fd-sec+.fd-sec{border-top:1px solid var(--line);padding-top:12px}
.fd-sec:empty{display:none}
.fd-small{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.fd-note,.fd-task{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.fd-task{font:600 15px/1.45 var(--font-display);color:var(--ink)}
.fd-note b{color:var(--ink)}
.fd-btns{display:flex;gap:8px;flex-wrap:wrap}
.fd-bad{margin:4px 0 0;padding:9px 12px;border-left:3px solid var(--bad);background:var(--bad-tint);border-radius:0 6px 6px 0;font-size:14px;color:var(--ink)}
.fd-wrongs{margin:0;padding-left:18px;font-size:13px;color:var(--ink-soft)}
.fd-sec code,.fd-review code{font:12.5px var(--font-mono);background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:0 4px;overflow-wrap:anywhere}
.cq-working.shown{border-left-color:var(--hint)}
.cq-working.shown h4{color:var(--hint)}
.cq-working p{margin:0 0 6px}
.fd-review{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--ok-tint)}
.fd-review h3{margin:0 0 6px;font:700 14px/1.3 var(--font-display);color:var(--ink)}
.fd-review ol{margin:0 0 8px;padding-left:20px;font-size:13px;color:var(--ink-soft)}
.fd-review li{margin:3px 0}

.fd-refs{display:flex;flex-direction:column;gap:6px}
.fd-ref{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 8px;border-radius:6px;border-left:4px solid var(--ref,var(--line-strong));background:var(--panel-2)}
.fd-parts{display:inline-flex;align-items:center;gap:2px}
.fd-part{font:700 16px/1 var(--font-mono);min-width:34px;height:34px;padding:0 7px;border-radius:5px;border:1.5px dashed var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer}
.fd-part:hover{border-color:var(--accent)}
.fd-part.abs{border-style:solid;border-color:var(--fixed);background:var(--fixed-tint);color:var(--fixed)}
.fd-part:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.fd-colon{font:700 16px var(--font-mono);color:var(--muted);padding:0 2px}
.fd-name{font:700 15px var(--font-mono);color:var(--fixed)}
.fd-what{font-size:12.5px;color:var(--ink-soft);flex:1;min-width:150px}

.fd-key{margin:0;display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.fd-key .mv,.fd-key .fx{border-radius:3px;padding:1px 6px;font-weight:700}
.fd-key .mv{background:var(--moved-tint);color:var(--moved)}
.fd-key .fx{background:var(--fixed-tint);color:var(--fixed)}
.fd-dim{color:var(--muted)}
.fd-copies{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.fd-copy-i{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:4px 8px;border-radius:5px;border:1px solid transparent;cursor:pointer}
.fd-copy-i:hover,.fd-copy-i.on{border-color:var(--line-strong);background:var(--panel-2)}
.fd-copy-i:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.fd-copy-i .ftext{font-size:13.5px;line-height:1.5}
.fd-orig .ftext{color:var(--accent-deep);font-weight:700}
.fd-a{font:700 12px/1 var(--font-mono);color:var(--muted)}
.fd-v{font:12.5px var(--font-mono);color:var(--ink-soft);text-align:right;white-space:nowrap}
.fd-wrong .fd-v{color:var(--bad);font-weight:700}
.fd-want{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.fd-none{font-size:13px;color:var(--muted)}

@media (min-width:901px) and (max-width:1180px){
  .fd-work{grid-template-columns:minmax(0,1fr) 320px}
  .fd-grid table.sg{min-width:0}
}
@media (min-width:901px) and (max-height:700px){
  .fd-work>.panel{padding:8px 12px 10px}
  .fd-sheet{gap:6px}
  .fd-part{height:30px;min-width:30px;font-size:15px}
  .fd-pick{padding:4px 8px;font-size:12px}
  .fd-head h2{display:none}
}
@media (max-width:900px){
  .fd-work{display:flex;flex-direction:column}
  .fd-scroll{overflow:visible}
  .fd-pick{min-height:40px;padding:8px 12px}
  .fd-part{min-width:44px;height:44px}
  .btn{min-height:40px}
  .seg-toggle button{min-height:40px}
  .rp-controls{width:100%}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .fd-work>.panel{padding:10px}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;padding:8px 6px;min-width:0}
  .fbar .fbar-fx{display:none}
}

/* the Explanation's colour key, and each reference's colour in the list (the grid's --ref-n, sheet.css) */
.fd-key-moved{color:var(--moved);font-weight:700}
.fd-key-fixed{color:var(--fixed);font-weight:700}
.fd-ref.r1{--ref:var(--ref-1)}.fd-ref.r2{--ref:var(--ref-2)}.fd-ref.r3{--ref:var(--ref-3)}
.fd-ref.r4{--ref:var(--ref-4)}.fd-ref.r5{--ref:var(--ref-5)}.fd-ref.r6{--ref:var(--ref-6)}