/* Control Loop (information-technology/control-loop.php). The page chrome is the one-screen layout in /css/resource.css.
   On a laptop or desktop: the controls in a bar across the top; under them the block diagram and the graph on the left,
   and the readings and the flowchart on the right, filling the height. On smaller screens everything stacks and the page
   scrolls. Theme tokens only; the graph's lane colours are named below. */

:root{
  --cl-heat:var(--viz-2);   /* heater, boiler, sprinkler: the first actuator of a reading */
  --cl-cool:var(--viz-1);   /* window, fan: the second */
}

.rp-main{gap:10px}

/* the bar of controls */
.cl-bar{flex:none;display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:8px 14px}
.cl-run{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-run .btn{min-height:40px}
.cl-vars{display:flex;align-items:center;gap:8px}
.cl-lab{font:600 11px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cl-field{display:flex;flex-direction:column;gap:2px;min-width:200px;flex:1}
.cl-field label{font:600 11px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;gap:8px}
.cl-field output{font-family:var(--font-mono);text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500;text-align:right}
.cl-field input[type=range]{width:100%;accent-color:var(--accent);min-height:28px;margin:0}

/* the work area */
.cl-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,34%);gap:10px}
.cl-left,.cl-right{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px}
.cl-head{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;flex:none}
.cl-say{flex:none;margin:6px 0 4px;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:3.1em}
.cl-say b{color:var(--ink)}
.cl-diagram{flex:1.5;min-height:0;display:flex;align-items:center;justify-content:center}
.cl-graph{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.cl-diagram svg,.cl-graph svg{display:block;width:100%;height:100%;max-height:100%}
.cl-graph-head{margin-top:4px}
.cl-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.cl-legend span{display:inline-flex;align-items:center;gap:5px}
.cl-sw{display:inline-block;width:14px;height:8px;border-radius:2px}
.cl-sw.line{height:3px;background:var(--accent)}
.cl-sw.sp{height:0;border-top:2px dashed var(--ink)}
.cl-sw.safe{background:var(--ok-tint);border:1px solid var(--ok)}
.cl-sw.alert{width:8px;height:8px;border-radius:50%;background:var(--bad)}
.cl-sw.b0{background:var(--cl-heat)}
.cl-sw.b1{background:var(--cl-cool)}

/* the diagram */
.cl-box{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1.5;transition:fill .2s,stroke .2s}
.cl-box.on{fill:var(--active-tint);stroke:var(--active);stroke-width:2.6}
.cl-mp{fill:var(--accent-tint);stroke:var(--accent)}
.cl-act.is-on{fill:var(--warn-tint);stroke:var(--warn)}
.cl-act.is-on.on{stroke:var(--active)}
.cl-t{fill:var(--ink);font:500 13px var(--font-body)}
.cl-small{font-size:11.5px;fill:var(--ink-soft)}
.cl-strong{font:700 14px var(--font-display);fill:var(--ink)}
.cl-key{fill:var(--accent-deep);font-weight:700}
.cl-state{font:700 11.5px var(--font-mono);fill:var(--ink-soft)}
.cl-state.live{fill:var(--warn)}
.cl-col{fill:var(--muted);font:600 11px var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.cl-wlab{fill:var(--muted);font:10px var(--font-body)}
.cl-wire{fill:none;stroke:var(--line-strong);stroke-width:2.2}
.cl-wire.flow{stroke:var(--active);stroke-width:3.2;stroke-dasharray:9 6;animation:cl-flow .6s linear infinite}
.cl-fb.none{stroke-dasharray:4 5;stroke:var(--line)}
.cl-fbt{fill:var(--ink-soft);font:italic 12px var(--font-body)}
.cl-arrowhead{fill:var(--line-strong)}
@keyframes cl-flow{to{stroke-dashoffset:-15}}

/* the graph */
.cl-grid{stroke:var(--line);stroke-width:1}
.cl-axisline{stroke:var(--ink-soft);stroke-width:1.4}
.cl-axis{fill:var(--muted);font:11px var(--font-body)}
.cl-line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round}
.cl-sp{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:7 5;opacity:.8}
.cl-safe{fill:var(--ok-tint);stroke:var(--ok);stroke-width:1;stroke-dasharray:3 3}
.cl-alert{fill:var(--bad)}
.cl-now{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.cl-band.b0{fill:var(--cl-heat)}
.cl-band.b1{fill:var(--cl-cool)}

/* the readings and the flowchart */
.cl-readout{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px;padding:6px 10px;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.cl-readout div{display:flex;align-items:baseline;gap:6px;min-width:0}
.cl-readout .k{font:600 10px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cl-readout .v{font:700 14px/1.3 var(--font-mono);color:var(--ink);white-space:nowrap}
.cl-readout .v.bad{color:var(--bad)}
.cl-fc-box{flex:1;min-height:0;overflow:auto;margin-top:6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:4px}
.cl-fc-box svg{width:100%;height:auto;max-height:none;margin:0 auto}
.cl-quiz{flex:1;min-height:0}

@media (prefers-reduced-motion:reduce){.cl-wire.flow{animation:none}.cl-box{transition:none}}

/* smaller screens: everything stacks, and the page scrolls */
@media (max-width:900px){
  .cl-work{grid-template-columns:1fr;flex:none}
  .cl-diagram,.cl-graph{flex:none}
  .cl-diagram svg,.cl-graph svg{height:auto}
  .cl-fc-box{flex:none;max-height:none;overflow:visible}
  .cl-quiz{flex:none}
}
@media (max-width:560px){
  .cl-bar{padding:8px 10px}
  .cl-field{min-width:100%}
  .cl-axis{font-size:15px}
  .cl-vars .seg-toggle button{padding:10px 10px}
}

/* the controls at the top of the right-hand panel; the loop's heading is for screen readers (the narration says it) */
.cl-ctl{flex:none;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cl-ctl .cl-field{flex:none;min-width:0}
.cl-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl-left .cl-head:first-child{justify-content:flex-start}
/* short windows (a laptop at 600–700 px tall): tighter, so the diagram and graph keep their room */
@media (min-width:901px) and (max-height:720px){
  .cl-say{font-size:13px;min-height:0;padding:5px 9px;margin:4px 0 2px}
  .cl-run .btn{min-height:34px;padding:6px 12px}
  .cl-ctl{gap:2px}
  .cl-legend{font-size:11px}
}
@media (min-width:901px) and (max-height:720px){
  .cl-graph-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cl-graph-head{min-height:0;margin-top:2px}
  .cl-left .cl-head:first-child{min-height:0}
}