/* Systems Life Cycle Planner (information-technology/systems-life-cycle.php). The page chrome is the one-screen
   layout in /css/resource.css; this is the stage: the six stages along the top, the work panel (scrolling inside
   itself) and the project panel. On a laptop or desktop it fits one window; on smaller screens it stacks and the page
   scrolls. Theme tokens only. */

.rp-main{gap:10px}
.slc{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,350px);grid-template-rows:auto minmax(0,1fr);gap:10px 12px}

/* ---------- the stages ---------- */
.slc-steps{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;counter-reset:step}
.slc-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;
  padding:7px 10px;border-radius:6px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;min-width:0}
.slc-step:hover{border-color:var(--accent)}
.slc-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.slc-step-n{grid-row:1 / span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font-mono);background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line-strong)}
.slc-step-t{font:600 13.5px/1.2 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slc-step-s{font:500 11px/1.2 var(--font-mono);color:var(--muted);white-space:nowrap}
.slc-step[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.slc-step[aria-selected="true"] .slc-step-n{background:var(--on-accent);color:var(--accent-deep);border-color:transparent}
.slc-step[aria-selected="true"] .slc-step-s{color:var(--on-accent);opacity:.85}
.slc-step.is-done .slc-step-n{background:var(--ok);color:var(--on-viz);border-color:var(--ok)}
.slc-step.is-done .slc-step-n::after{content:"";}
/* an arrow between the stages: it's a cycle, in order */
.slc-step:not(:last-child)::after{content:"";position:absolute;right:-6px;top:50%;width:6px;height:2px;background:var(--line-strong)}

/* ---------- the work panel ---------- */
.slc-work{min-height:0;min-width:0;overflow:auto;padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px}
.slc-work-head p{margin:4px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.slc-work-head h2{color:var(--accent-deep);font-size:12.5px}
.slc-lead{margin:0 0 4px;font-size:14px;line-height:1.45;color:var(--ink)}
.slc-q{border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:9px 11px;display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.slc-qt{margin:0;font:600 14px/1.35 var(--font-display);color:var(--ink)}
.slc-qt .slc-n{margin-right:8px}
.slc-qt code,.slc-td code{font:500 12.5px/1.2 var(--font-mono);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--accent-deep)}
.slc-n{flex:none;font:700 11px/1 var(--font-mono);color:var(--muted)}
.slc-row{display:flex;align-items:flex-start;gap:8px}
.slc-lab{flex:none;width:76px;padding-top:6px;font:600 11px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.slc-ev{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.4}

/* the choice buttons */
.slc-chips{display:flex;flex-wrap:wrap;gap:5px}
.slc-chip{font:600 13px/1.2 var(--font-body);padding:6px 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;min-height:32px}
.slc-chips-sm .slc-chip{font-size:12px;padding:5px 9px;min-height:30px}
.slc-chip:hover{border-color:var(--accent)}
.slc-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.slc-chip.is-right{background:var(--ok-tint);border-color:var(--ok);color:var(--ink)}
.slc-chip.is-right::before{content:"✓ ";color:var(--ok);font-weight:700}
.slc-chip.is-wrong{background:var(--bad-tint);border-color:var(--bad);color:var(--ink)}
.slc-chip.is-wrong::before{content:"✗ ";color:var(--bad);font-weight:700}
.slc-chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* feedback */
.slc-fb{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);padding:6px 10px;border-radius:5px;border-left:3px solid var(--line-strong);background:var(--panel)}
.slc-fb.ok{border-left-color:var(--ok)}.slc-fb.ok>b:first-child{color:var(--ok)}
.slc-fb.bad{border-left-color:var(--bad)}.slc-fb.bad>b:first-child{color:var(--bad)}
.slc-fb.warn{border-left-color:var(--warn)}.slc-fb.warn>b:first-child{color:var(--warn)}
.ok{color:var(--ok)}.bad{color:var(--bad)}

/* the test plan */
.slc-plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.slc-plan-h,.slc-plan-r{display:grid;grid-template-columns:minmax(70px,.7fr) minmax(0,1.6fr) minmax(0,1.15fr) minmax(90px,.9fr);gap:8px;align-items:center;padding:6px 10px}
.slc-plan-h{background:var(--accent-tint);font:600 10.5px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.slc-plan-r{border-top:1px solid var(--line)}
.slc-plan-r:nth-child(odd){background:var(--panel-2)}
.slc-plan-fb{grid-column:1 / -1;font-size:12.5px;line-height:1.35;color:var(--ink-soft)}
.slc-act{font:600 12.5px/1.2 var(--font-mono);color:var(--muted)}
.slc-act.ok{color:var(--ok)}.slc-act.bad{color:var(--bad)}
.slc-runbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.slc-bug{margin-top:8px;padding:9px 12px;border-radius:6px;background:var(--warn-tint);border:1px solid var(--warn);font-size:13.5px;line-height:1.45;color:var(--ink)}

/* implementation: the simulation */
.slc-ctl{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
.slc-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 13px/1.3 var(--font-display);color:var(--ink)}
.slc-ctl output{font:500 12.5px/1.3 var(--font-mono);color:var(--accent-deep)}
.slc-ctl input[type=range]{width:100%;margin:0;height:26px;accent-color:var(--accent);cursor:pointer}
.slc-tl{display:grid;grid-template-columns:minmax(90px,150px) repeat(var(--weeks),minmax(0,1fr));gap:2px;align-items:center;font-size:12px;margin-top:4px}
.slc-tl-w{text-align:center;font:500 10.5px/1.6 var(--font-mono);color:var(--muted);border-radius:3px}
.slc-tl-w.is-fault{background:var(--bad);color:var(--on-viz)}
.slc-tl-name{font:600 12px/1.2 var(--font-body);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:4px}
.slc-tl-x{height:20px;border-radius:3px}
.slc-tl-x.old,.slc-key i.old{background:var(--line-strong)}
.slc-tl-x.new,.slc-key i.new{background:var(--accent)}
.slc-tl-x.both,.slc-key i.both{background:repeating-linear-gradient(135deg,var(--accent) 0 4px,var(--line-strong) 4px 8px)}
.slc-tl-x.fail,.slc-key i.fail{background:var(--bad);box-shadow:0 0 0 2px var(--bad-tint)}
.slc-tl-x.saved{outline:2px solid var(--ok);outline-offset:-1px}
.slc-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 0;padding:0;list-style:none;font-size:12px;color:var(--ink-soft)}
.slc-key li{display:flex;align-items:center;gap:5px}
.slc-key i{width:14px;height:11px;border-radius:2px;display:inline-block}
table.slc-read,table.slc-cmp{margin-top:8px;font-size:13px}
table.slc-read th{width:42%;font:600 12.5px/1.3 var(--font-display);text-transform:none;letter-spacing:0;color:var(--ink);padding:6px 8px}
table.slc-read td{font:600 13px/1.3 var(--font-mono);color:var(--accent-deep);padding:6px 8px}
table.slc-read td.bad{color:var(--bad)}
table.slc-read td span{display:block;margin-top:2px;font:400 12.5px/1.4 var(--font-body);color:var(--ink-soft)}
table.slc-cmp th{font-size:10.5px;padding:5px 8px}
table.slc-cmp td{padding:5px 8px;font-family:var(--font-mono);font-size:12.5px}
table.slc-cmp td:first-child{font-family:var(--font-body);font-weight:600}
table.slc-cmp tr.on td{background:var(--accent-tint)}
.slc-rec{margin-top:10px;border-color:var(--accent);background:var(--accent-tint)}

/* documentation: two columns where there's room */
.slc-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 8px}
.slc-doc .slc-qt{font-size:13.5px}

/* the review */
.slc-review{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.slc-review b{color:var(--ink)}
.slc-rv-stage{display:inline-block;margin-right:6px;font:600 10.5px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--accent-deep);background:var(--accent-tint);border-radius:3px;padding:0 5px}

/* ---------- the project panel ---------- */
.slc-side{min-height:0;min-width:0;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.slc-side>section{display:flex;flex-direction:column;gap:6px}
.slc-side>section+section{border-top:1px solid var(--line);padding-top:10px}
.slc-brief{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.slc-brief b{color:var(--ink)}
.slc-brief .slc-now,.slc-brief .slc-goal{display:block;margin-top:4px}
.slc-brief .slc-goal{color:var(--ink)}
.slc-bar{height:6px;border-radius:3px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.slc-bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
.slc-score{margin:0;font-size:13px;color:var(--ink-soft)}
.slc-score .num{font-weight:700;color:var(--ok)}
.slc-side .btn{align-self:flex-start}
.slc-ref h3{margin:4px 0 2px;font:700 13px/1.2 var(--font-display);color:var(--ink)}
.slc-ref-item{font-size:13px;line-height:1.4}
.slc-ref-item b{color:var(--ink)}
.slc-pc{margin:2px 0 4px;padding:0;list-style:none;color:var(--ink-soft);font-size:12.5px}
.slc-pc li{padding-left:16px;position:relative;margin:1px 0}
.slc-pc li.pro::before{content:"+";position:absolute;left:2px;font-weight:700;color:var(--ok)}
.slc-pc li.con::before{content:"−";position:absolute;left:2px;font-weight:700;color:var(--bad)}
.slc-dl{margin:0;font-size:12.5px;line-height:1.4}
.slc-dl dt{font-weight:700;color:var(--ink);margin-top:4px}
.slc-dl dd{margin:0;color:var(--ink-soft)}
.slc-note{margin:2px 0;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.slc-ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.slc-ul li{margin:2px 0}
table.slc-mini{font-size:12px}
table.slc-mini th{font-size:10px;padding:4px 6px}
table.slc-mini td{padding:4px 6px}

@media (prefers-reduced-motion:reduce){.slc-bar i{transition:none}}

/* ---------- laptops: tighter stage buttons ---------- */
@media (max-width:1180px){
  .slc-step{padding:6px 8px;column-gap:6px}
  .slc-step-n{width:20px;height:20px;font-size:11px}
  .slc-step-t{font-size:12.5px}
}
@media (min-width:901px) and (max-width:1060px){
  .slc{grid-template-columns:minmax(0,1fr) 280px}
  .slc-step-n{display:none}
  .slc-step{grid-template-columns:minmax(0,1fr)}
}

/* ---------- tablets and phones: stack, and the page scrolls ---------- */
@media (max-width:900px){
  .slc{display:flex;flex-direction:column}
  .slc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slc-step:not(:last-child)::after{display:none}
  .slc-step{min-height:44px}
  .slc-work,.slc-side{overflow:visible}
  .slc-chip,.slc-chips-sm .slc-chip{min-height:40px;padding:8px 12px;font-size:13.5px}
  .slc-ctl input[type=range]{height:40px}
  .btn{min-height:40px}
  .rp-controls{width:100%}
  .seg-toggle button{min-height:40px}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .slc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slc-work{padding:10px 10px 14px}
  .slc-row{flex-direction:column;gap:4px}
  .slc-lab{width:auto;padding-top:0}
  /* the test plan: one card per test */
  .slc-plan-h{display:none}
  .slc-plan-r{grid-template-columns:1fr;gap:6px;padding:8px 10px}
  .slc-tl{grid-template-columns:72px repeat(var(--weeks),minmax(0,1fr));gap:1px}
  .slc-tl-name{font-size:11px}
  .slc-tl-w{font-size:9px}
  table.slc-read th{width:38%}
  .slc-docs{grid-template-columns:1fr}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;white-space:normal;text-align:center;line-height:1.15;padding:8px 4px;min-width:0}
}