/* Critical Path (information-technology/critical-path.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the task list on the left (scrolling inside itself), the chart on
   the right filling the height, with What if? under it. On smaller screens they stack and the page scrolls.
   Theme tokens only: critical tasks are --bad, the others --accent, float --accent-tint, a delay --warn. */

.objective h4{margin:14px 0 6px;font:700 14px/1.2 var(--font-display);color:var(--ink)}
.rp-main{gap:10px}

.cp-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(330px,400px) minmax(0,1fr);gap:12px}
.cp-quiz{flex:1;min-height:0;display:flex;flex-direction:column}
.cp-quiz .cq{flex:1}

/* ---------- the task list ---------- */
.cp-side{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 12px}
.cp-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cp-preset select,.cp-what-ctl select{font:600 13px/1.2 var(--font-body);color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px;max-width:230px}
.cp-grid-head,.cp-row{display:grid;grid-template-columns:24px minmax(0,1fr) 44px 64px 38px 26px;gap:4px;align-items:center}
.cp-grid-head{font:600 10.5px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:0 0 4px;border-bottom:1px solid var(--line)}
.cp-rows{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:3px;padding:5px 0}
.cp-row .id{font:700 13px/1 var(--font-mono);color:var(--on-accent);background:var(--accent);border-radius:4px;text-align:center;padding:5px 0}
.cp-row.crit .id{background:var(--bad)}
.cp-row.mile .id{border-radius:2px;transform:rotate(0)}
.cp-row input{width:100%;min-width:0;font:13px/1.2 var(--font-body);color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:5px 6px}
.cp-row input.num{font-family:var(--font-mono);text-align:center;padding:5px 2px}
.cp-row input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent}
.cp-row input.bad{border-color:var(--bad);background:var(--bad-tint)}
.cp-row .del{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;border-radius:4px;padding:4px 0}
.cp-row .del:hover{color:var(--bad);background:var(--bad-tint)}
.cp-side-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.cp-problems{margin-top:8px;padding:8px 10px;border-radius:6px;background:var(--bad-tint);border-left:3px solid var(--bad);font-size:13px;color:var(--ink)}
.cp-problems p{margin:0 0 3px}

/* ---------- the chart ---------- */
.cp-chart{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 12px;gap:6px}
.cp-summary{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink-soft);align-items:baseline}
.cp-summary b{color:var(--ink);font-family:var(--font-mono)}
.cp-summary .crit{color:var(--bad);font-weight:700;font-family:var(--font-mono)}
.cp-svgbox{flex:1;min-height:120px;overflow:auto;position:relative}
.cp-svgbox svg{display:block;width:100%;height:100%;touch-action:pan-y}
.cp-svgbox svg.cp-gantt{height:auto}
.cp-svgbox svg.cp-nat{width:auto;height:auto;max-width:none;margin:auto}
.cp-svgbox:has(svg.cp-nat){display:flex}
.cp-hint{margin:0;font-size:12.5px;color:var(--muted);flex:none}
.cp-whatif{flex:none;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.cp-what-say{flex-basis:100%}
.cp-whatif h3{margin:0;font:700 13px/1.2 var(--font-display);color:var(--warn);text-transform:uppercase;letter-spacing:.05em}
.cp-what-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:600 13px/1.2 var(--font-display);color:var(--ink)}
.cp-what-ctl input[type=range]{width:150px;accent-color:var(--warn)}
.cp-what-ctl output{font:600 13px var(--font-mono);color:var(--warn);min-width:52px}
.cp-what-say{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);min-height:2.9em}
.cp-what-say b{color:var(--ink)}

/* the SVG parts */
.cp-axis{stroke:var(--line-strong);stroke-width:1}
.cp-gridline{stroke:var(--line);stroke-width:1}
.cp-tick{fill:var(--muted);font:11px var(--font-mono)}
.cp-label{fill:var(--ink);font:13px var(--font-body)}
.cp-label .lt{font:700 13px var(--font-mono)}
.cp-small{fill:var(--muted);font:11.5px var(--font-body)}
.cp-bar{fill:var(--accent)}
.cp-bar.crit{fill:var(--bad)}
.cp-bar.drag{cursor:ew-resize}
.cp-bar.moving{opacity:.8}
.cp-delay{fill:var(--warn)}
.cp-floatbar{fill:var(--accent-tint);stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}
.cp-ghost{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 3}
.cp-mile{fill:var(--accent);stroke:var(--panel);stroke-width:1.5}
.cp-mile.crit{fill:var(--bad)}
.cp-end{stroke:var(--bad);stroke-width:2;stroke-dasharray:5 4}
.cp-endtext{fill:var(--bad);font:700 12px var(--font-mono)}
.cp-hist{fill:var(--accent-b)}
.cp-histmax{stroke:var(--accent-b-deep);stroke-width:1;stroke-dasharray:3 3}
.cp-node rect.box{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.5}
.cp-node.crit rect.box{stroke:var(--bad);stroke-width:3}
.cp-node rect.mid{fill:var(--panel-2)}
.cp-node.crit rect.mid{fill:var(--bad-tint)}
.cp-node line{stroke:var(--line-strong);stroke-width:1}
.cp-node .v{fill:var(--ink);font:600 13px var(--font-mono);text-anchor:middle}
.cp-node .f{fill:var(--accent-deep)}
.cp-node.crit .f{fill:var(--bad)}
.cp-node .nm{fill:var(--ink);font:13px var(--font-body);text-anchor:middle}
.cp-node .nm .lt{font:700 13px var(--font-mono)}
.cp-node.delayed rect.box{stroke:var(--warn);stroke-width:3}
.cp-edge{fill:none;stroke:var(--muted);stroke-width:1.6}
.cp-edge.crit{stroke:var(--bad);stroke-width:3}
.cp-head{fill:var(--muted)}
.cp-head.crit{fill:var(--bad)}

/* the table of times */
.cp-times{width:100%;border-collapse:collapse;font-size:13.5px}
.cp-times th,.cp-times td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center}
.cp-times th:nth-child(2),.cp-times td:nth-child(2){text-align:left}
.cp-times td{font-family:var(--font-mono)}
.cp-times td:nth-child(2){font-family:var(--font-body)}
.cp-times tr.crit td{color:var(--bad);font-weight:600}
.cp-times tr.crit td:nth-child(2){color:var(--ink)}
.cp-times td.fl{font-weight:700}

@media (min-width:901px) and (max-height:700px){.cp-hint{display:none}.cp-what-say{min-height:0}}

/* ---------- smaller laptops: a narrower task list ---------- */
@media (min-width:901px) and (max-width:1150px){
  .cp-stage{grid-template-columns:330px minmax(0,1fr)}
  .cp-preset select{max-width:170px}
}

/* ---------- tablets and phones: stacked, the page scrolls ---------- */
@media (max-width:900px){
  .cp-stage{display:flex;flex-direction:column}
  .cp-side{max-height:none}
  .cp-rows{overflow:visible}
  .cp-svgbox{flex:none;min-height:0}
  .cp-svgbox svg{height:auto}
  .cp-svgbox.wide svg{min-width:640px}
  .cp-row input{padding:9px 6px;font-size:14px}
  .cp-row .del{min-height:40px}
  .btn,.cp-preset select,.cp-what-ctl select{min-height:40px}
  .seg-toggle button{min-height:40px}
  .cp-what-ctl input[type=range]{height:40px;flex:1;min-width:120px}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .cp-grid-head,.cp-row{grid-template-columns:24px minmax(0,1fr) 40px 56px 34px 30px}
  .cp-preset select{max-width:180px}
}

/* the challenges' task tables */
.cq-tasks{width:auto;min-width:260px;margin-top:10px;border-collapse:collapse;font:500 14px/1.3 var(--font-body)}
.cq-tasks th,.cq-tasks td{padding:4px 14px;border:1px solid var(--line);text-align:center}
.cq-tasks th{background:var(--panel-2);font-size:11px}
.cq-tasks td{font-family:var(--font-mono)}
.cq-working ol li{line-height:1.5}

.seg-toggle.is-off{opacity:.45;pointer-events:none}