/* File Access Visualiser (information-technology/file-access.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the controls in a bar, then the four files side by side, each scrolling
   inside itself; batch update is three columns with a stepper. On smaller screens they stack (two files across on a
   tablet, one on a phone) and the page scrolls. Theme tokens only. */
.rp-main{gap:8px}
.fa-view{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.fa-bar{flex:none;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 14px;padding:8px 12px}
.fa-field{display:flex;flex-direction:column;gap:3px;font:600 11px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fa-field input,.fa-field select{font:600 15px/1.3 var(--font-mono);color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;padding:7px 9px;min-height:40px;width:92px;text-transform:none;letter-spacing:0}
.fa-name input{width:120px;font-family:var(--font-body)}
.fa-field select{width:auto;font:600 14px var(--font-body)}
.fa-acts{display:flex;gap:6px}
.fa-acts .btn,.fa-reset{min-height:40px}
.fa-reset{margin-left:auto}
.fa-say{flex:none;margin:0;padding:7px 11px;border-radius:6px;background:var(--panel-2);border-left:3px solid var(--active);font-size:14px;line-height:1.45;color:var(--ink-soft);min-height:2.6em}
.fa-say b{color:var(--ink)}

/* the four files */
.fa-lanes{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fa-lane{min-height:0;min-width:0;display:flex;flex-direction:column;padding:8px 10px;gap:4px}
.fa-lane header .small{margin:2px 0 0;font-size:12px}
.fa-count{display:flex;gap:12px;font-size:13px;color:var(--muted)}
.fa-count b{font-size:17px;color:var(--ink)}
.fa-msg{margin:0;font-size:12.5px;line-height:1.35;min-height:2.7em;color:var(--ink-soft)}
.fa-msg.ok{color:var(--ok);font-weight:600}
.fa-msg.bad{color:var(--bad);font-weight:600}
.fa-scroll{flex:1;min-height:0;overflow:auto}
.fa-sub{font:600 10.5px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 2px}
.fa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fa-rec{display:flex;align-items:baseline;gap:7px;padding:2px 7px;border-radius:4px;border:1px solid var(--line);background:var(--paper);font-size:12.5px;color:var(--ink-soft);transition:background .15s,border-color .15s}
.fa-rec b{font:700 13px var(--font-mono);color:var(--ink)}
.fa-rec .lab{font:600 11px var(--font-mono);color:var(--muted);min-width:2ch;text-align:right}
.fa-rec span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-rec.empty{color:var(--muted);font-style:italic;border-style:dashed;background:transparent}
.fa-rec.del{text-decoration:line-through;opacity:.6}
.fa-rec.moved{border-left:3px solid var(--accent-b)}
.fa-rec.read{background:var(--active-tint);border-color:var(--active)}
.fa-rec.found{background:var(--ok-tint);border-color:var(--ok)}
.fa-rec.write{background:var(--warn-tint);border-color:var(--warn)}
.fa-rec.cur{box-shadow:0 0 0 2px var(--active)}
.fa-rec.found.cur{box-shadow:0 0 0 2px var(--ok)}
.fa-rec.write.cur{box-shadow:0 0 0 2px var(--warn)}
.fa-index .fa-rec b{min-width:6ch}

/* batch update */
.fa-batch{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fb-col{min-height:0;min-width:0;overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.fb-col .small{margin:0}
.fb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.fb-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:5px 9px;border-radius:5px;border:1px solid var(--line);background:var(--paper);font-size:13.5px;color:var(--ink-soft)}
.fb-list li b{font:700 14px var(--font-mono);color:var(--ink)}
.fb-list li em{font-style:normal;font-size:12.5px;color:var(--muted)}
.fb-list li.cur{background:var(--active-tint);border-color:var(--active);box-shadow:0 0 0 2px var(--active)}
.fb-list li.next{border-color:var(--active);border-style:dashed}
.fb-list li.done{opacity:.5}
.fb-list li.write{background:var(--warn-tint);border-color:var(--warn)}
.fb-list li.err{background:var(--bad-tint);border-color:var(--bad);box-shadow:0 0 0 2px var(--bad)}
.fb-list li.errd{background:var(--bad-tint);border-color:var(--bad)}
.fb-list li.empty{display:block;color:var(--muted);font-style:italic;border-style:dashed;background:transparent}
.fb-errh{margin-top:10px}
.fb-step{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}
.fb-step .btn{min-height:40px}
.fb-count{font-size:13px;color:var(--muted);min-width:7em;text-align:center}
.fa-quiz{flex:1;min-height:0}

@media (prefers-reduced-motion:reduce){.fa-rec{transition:none}}
@media (min-width:901px) and (max-height:720px){
  .fa-say{font-size:13px;min-height:0;padding:5px 9px}
  .fa-msg{min-height:0}
}
@media (max-width:1100px) and (min-width:901px){
  .fa-reset{margin-left:0}
}
@media (max-width:900px){
  .fa-view{flex:none}
  .fa-lanes{grid-template-columns:repeat(2,minmax(0,1fr));flex:none}
  .fa-scroll{flex:none;max-height:420px}
  .fa-batch{grid-template-columns:1fr;flex:none}
  .fb-col{overflow:visible}
  .fa-quiz{flex:none}
  .fa-reset{margin-left:0}
}
@media (max-width:560px){
  .fa-lanes{grid-template-columns:1fr}
  .fa-scroll{max-height:none}
  .fa-acts{width:100%}
  .fa-acts .btn{flex:1;justify-content:center}
}