/* Flowchart Runner (information-technology/flowchart-runner.php). The page chrome is the one-screen layout in
   /css/resource.css; the flowchart's look is /css/flowchart-draw.css. On a laptop or desktop: the flowchart on the left
   (it scrolls inside its panel), and the run, build or challenge panel on the right; on smaller screens they stack.
   Theme tokens only. */
.rp-main{gap:10px}
.fr-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,1fr);gap:10px}
.fr-chart,.fr-side{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 14px}
.fr-side{overflow:auto}
.fr-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;flex:none}
.fr-pick{display:flex;align-items:center;gap:8px}
.fr-lab{font:600 11px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fr-pick select,.fr-edit select{font:600 14px/1.3 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:7px 9px;min-height:40px;max-width:100%}
.fr-note{flex:none;margin:0;font-size:13.5px;color:var(--ink-soft)}
.fr-svgbox{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:6px}
.fr-svgbox svg{display:block;margin:0 auto}
.fr-field{display:flex;flex-direction:column;gap:4px;font:600 11px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fr-field input{font:500 15px/1.3 var(--font-mono);color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;padding:8px 10px;min-height:40px;text-transform:none;letter-spacing:0}
.fr-queue{display:flex;flex-wrap:wrap;gap:5px;flex:none}
.fr-queue span{font:600 13px/1 var(--font-mono);padding:5px 8px;border-radius:5px;border:1px solid var(--line-strong);color:var(--ink)}
.fr-queue span.used{text-decoration:line-through;opacity:.45}
.fr-queue span.next{border-color:var(--active);background:var(--active-tint)}
.fr-queue span.none{border:0;color:var(--muted);font-family:var(--font-body)}
.fr-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none}
.fr-ctl .btn{min-height:40px}
.fr-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:3em}
.fr-say b{color:var(--ink)}
.fr-say .bad{color:var(--bad)}
.fr-trace{flex:1;min-height:90px;overflow:auto;border:1px solid var(--line);border-radius:6px}
.fr-trace table{font:13px var(--font-mono)}
.fr-trace th{position:sticky;top:0;background:var(--panel-2);font:600 11.5px var(--font-mono);text-transform:none;letter-spacing:0;color:var(--ink-soft);border-bottom:1px solid var(--line-strong)}
.fr-trace td{padding:4px 10px;border-right:1px solid var(--line)}
.fr-trace tr.last td{background:var(--active-tint);color:var(--ink);font-weight:700}
.fr-trace td.empty{color:var(--muted);font-family:var(--font-body);font-style:italic}
.fr-out{flex:none;margin:0;min-height:2.6em;max-height:7.5em;overflow:auto;padding:7px 10px;border-radius:6px;background:var(--paper);border:1px solid var(--line);font:600 13.5px/1.45 var(--font-mono);color:var(--ink);white-space:pre-wrap}
.fr-tip{margin:0}
.fr-problems{flex:none;font-size:13px;color:var(--bad);background:var(--bad-tint);border-radius:6px;padding:6px 10px}
.fr-problems ul{margin:4px 0 0;padding-left:18px}
.fr-problems .okmsg{color:var(--ok);font-weight:700}
.fr-problems:has(.okmsg){background:var(--ok-tint)}
.fr-edit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fr-edit li{display:grid;grid-template-columns:26px minmax(110px,auto) minmax(0,1fr) 36px;gap:6px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.fr-edit .no{font:700 12px var(--font-mono);color:var(--on-accent);background:var(--accent);border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
.fr-edit input{font:500 14px var(--font-mono);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:7px 8px;min-height:40px;min-width:0}
.fr-edit .lines{grid-column:2 / 5;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--muted)}
.fr-edit .lines label{display:flex;align-items:center;gap:6px}
.fr-edit .lines select{max-width:220px;font-size:13px}
.fr-del{border:1px solid var(--line-strong);background:transparent;color:var(--muted);border-radius:5px;font-size:20px;line-height:1;width:36px;height:40px;cursor:pointer}
.fr-del:hover{color:var(--bad);border-color:var(--bad)}
.fr-dotrow{display:flex;flex-wrap:wrap;gap:5px}
.fr-dotrow .cq-dot{width:38px;min-height:38px}
.fr-dots p{margin:6px 0 0}
.fr-q{margin:0;font:600 16.5px/1.4 var(--font-display);color:var(--ink)}
.fr-card{display:flex;flex-direction:column;gap:10px}
.fr-opts{display:grid;gap:8px}
.fr-opts code{font:600 14.5px/1.4 var(--font-mono);background:none;color:inherit}
.mr-review{display:flex;flex-direction:column;gap:10px}
.mr-review h3{margin:0;font:700 16px/1.3 var(--font-display);color:var(--ink)}
.mr-item{border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:0 6px 6px 0;padding:8px 12px;background:var(--panel-2)}
.mr-item p{margin:0 0 4px}
.mr-item .q{font-weight:600;color:var(--ink)}
.mr-item .yours{color:var(--bad)}
.mr-item .right{color:var(--ok);font-weight:600}

@media (max-width:900px){
  .fr-work{grid-template-columns:1fr;flex:none}
  .fr-svgbox{flex:none;max-height:70vh}
  .fr-side{overflow:visible}
  .fr-trace{flex:none;max-height:320px}
}
@media (max-width:560px){
  .fr-edit li{grid-template-columns:26px minmax(0,1fr) 40px}
  .fr-edit li select[data-k="type"]{grid-column:2;grid-row:1}
  .fr-edit li .fr-del{grid-column:3;grid-row:1}
  .fr-edit li input{grid-column:1 / -1;grid-row:2}
  .fr-edit .lines{grid-column:1 / -1}
  .fc-node-label{font-size:13px}
}