/* Spec It Out (information-technology/spec-it-out.php). The page chrome is the one-screen layout in /css/resource.css;
   this is the stage. Build: the user, the parts and the readouts side by side on a wide screen (two columns on a
   laptop, the panels scrolling inside themselves); stacked on a phone, with a small bar of readouts kept in view.
   Parts explained: the storage table and the sorting sets. Theme tokens only. */

.rp-main{gap:10px}
.so-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.so-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}

/* ---------- Build: three columns ---------- */
.so-build{flex:1;min-height:0;display:grid;grid-template-columns:minmax(250px,290px) minmax(0,1fr) minmax(290px,330px);grid-template-areas:"scen parts side";gap:12px}
.so-scen{grid-area:scen;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.so-parts-p{grid-area:parts;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.so-side{grid-area:side;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}

.so-scen-nav{display:flex;gap:6px;align-items:stretch}
.so-select{flex:1;min-width:0;font:600 14px/1.2 var(--font-display);color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px}
.so-select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.so-story{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.so-needs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft)}
.so-needs li{padding:6px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line)}
.so-needs b{color:var(--ink);font-family:var(--font-display);margin-right:6px}
.so-progress-wrap{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.so-plabel{font:600 11px/1.2 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.so-progress{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.so-pdot{font:600 12px/1 var(--font-mono);padding:7px 0;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);cursor:pointer}
.so-pdot.current{outline:2px solid var(--accent);outline-offset:1px}
.so-pdot.tried{background:var(--warn-tint);border-color:var(--warn);color:var(--ink)}
.so-pdot.done{background:var(--ok);border-color:var(--ok);color:var(--on-viz)}
.so-pdot:focus-visible{outline:2px solid var(--focus)}

/* the parts */
.so-parts{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:9px;padding-right:2px}
.so-cat h3{margin:0 0 5px;font:700 13px/1.2 var(--font-display);color:var(--ink);display:flex;align-items:center;gap:6px}
.so-hint{font:500 12px/1.2 var(--font-body);color:var(--muted)}
.so-chips{display:flex;flex-wrap:wrap;gap:5px}
.so-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:5px 10px;border-radius:7px;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;font:600 13px/1.25 var(--font-body);transition:border-color .15s,background .15s}
.so-chip small{display:block;font:500 11.5px/1.2 var(--font-body);color:var(--muted)}
.so-chip .so-cost{font:500 11px/1.2 var(--font-mono);color:var(--muted)}
.so-chip:hover:not(.off){border-color:var(--accent)}
.so-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.so-chip.on{border-color:var(--accent);background:var(--accent-tint)}
.so-chip.on .so-cost,.so-chip.on small{color:var(--accent-deep)}
.so-chip.builtin{border-style:solid;border-color:var(--accent-deep);background:var(--accent-tint)}
.so-chip.off{opacity:.42;border-style:dashed;cursor:help}
.so-rom{margin:5px 0 0;font-size:12px;color:var(--muted)}
.so-rom b{color:var(--ink-soft)}
.so-mark{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;font:700 12px/1 var(--font-mono);color:var(--on-viz);flex:none}
.so-mark.so-good{background:var(--ok)}.so-mark.so-ok{background:var(--warn)}.so-mark.so-bad{background:var(--bad)}

/* readouts */
.so-meter{display:flex;flex-direction:column;gap:4px}
.so-mrow{display:flex;justify-content:space-between;gap:8px;font:600 13px/1.2 var(--font-display);color:var(--ink)}
.so-val{font:600 12.5px/1.2 var(--font-mono);color:var(--accent-deep);text-align:right}
.so-bar{position:relative;height:10px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line)}
.so-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--accent);transition:width .3s}
.so-bar i.good{background:var(--ok)}.so-bar i.ok{background:var(--warn)}.so-bar i.bad{background:var(--bad)}
.so-bar b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink)}
@media (prefers-reduced-motion:reduce){.so-bar i{transition:none}}
.so-about{padding:9px 11px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--accent)}
.so-about h3{margin:0 0 4px;font:700 13.5px/1.25 var(--font-display);color:var(--ink)}
.so-about h3 small{font:500 12px var(--font-body);color:var(--muted)}
.so-why{margin:0 0 4px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.so-why:last-child{margin-bottom:0}
.so-good-t b{color:var(--ok)}.so-bad-t b{color:var(--bad)}
.so-note{color:var(--warn)}
#soCheck{justify-content:center;flex:none}
.so-feedback{display:flex;flex-direction:column;gap:8px}
.so-fb-head{margin:0;font-size:14px;color:var(--ink)}
.so-fb-head b{font:700 18px/1 var(--font-mono);margin-right:6px}
.so-fb{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.so-fb li{display:flex;gap:8px;font-size:13px;line-height:1.42;color:var(--ink-soft);padding:6px 8px;border-radius:6px;background:var(--panel-2)}
.so-fb li b{color:var(--ink);font-family:var(--font-display)}
.so-fb li.so-bad{background:var(--bad-tint)}
.so-fb li.so-ok{background:var(--warn-tint)}
.so-fb li.so-good{background:var(--ok-tint)}
#soShow{align-self:flex-start}
.so-mini{display:none}

/* ---------- Parts explained ---------- */
.so-learn{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:12px}
.so-table-p,.so-sort-p{padding:12px 14px;min-height:0;min-width:0;overflow:auto;display:flex;flex-direction:column;gap:8px}
.so-tablewrap{overflow-x:auto}
table.so-table{font-size:13px;min-width:640px}
table.so-table th[scope=row]{font:700 13px/1.3 var(--font-display);text-transform:none;letter-spacing:0;color:var(--ink)}
table.so-table td{color:var(--ink-soft)}
.so-h2-gap{margin-top:8px !important}
.so-text{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.so-text b{color:var(--ink)}
.so-sort-toggle{align-self:flex-start;flex:none}
.so-tablewrap,.so-text{flex:none}
.so-sort{display:flex;flex-direction:column;gap:10px}
.so-sort-intro{margin:0;font-size:13px;color:var(--muted)}
.so-sort-n{margin:0;font:600 12px/1 var(--font-mono);color:var(--muted)}
.so-sort-q{margin:0;font:600 19px/1.35 var(--font-display);color:var(--ink)}
.so-sort-btns{display:flex;flex-wrap:wrap;gap:8px}
.so-sort-b{flex:1 1 110px;min-height:44px;font:600 15px/1.2 var(--font-display);border-radius:8px;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer}
.so-sort-b:hover:not(:disabled){border-color:var(--accent);background:var(--accent-tint)}
.so-sort-b:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.so-sort-b:disabled{cursor:default;opacity:.6}
.so-sort-b.right{opacity:1;border-color:var(--ok);background:var(--ok-tint)}
.so-sort-b.wrong{opacity:1;border-color:var(--bad);background:var(--bad-tint)}
.so-sort-fb{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft);padding:9px 12px;border-radius:7px;background:var(--panel-2)}
.so-sort .btn{align-self:flex-start}
.so-sort-score{margin:0;font-size:15px;color:var(--ink)}
.so-sort h3{margin:0;font:700 13px/1.2 var(--font-display);color:var(--ink)}
.so-review{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.so-review b{color:var(--ink)}

/* ---------- laptops: the user above the parts, the readouts on the right ---------- */
@media (max-width:1250px){
  .so-build{grid-template-columns:minmax(0,1fr) minmax(280px,320px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"scen side" "parts side"}
  .so-scen{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,250px);gap:6px 14px;overflow:visible}
  .so-scen > h2{grid-column:1/-1}
  .so-scen-nav{grid-column:2;grid-row:2}
  .so-story{grid-column:1;grid-row:2/5;font-size:13.5px}
  .so-needs{grid-column:2;grid-row:3}
  .so-progress-wrap{grid-column:2;grid-row:4;margin-top:0}
  .so-needs li{padding:4px 8px}
}
/* a short laptop window: tighter still */
@media (min-width:901px) and (max-height:700px){
  .so-story{font-size:13px;line-height:1.4}
  .so-scen{padding:9px 12px}
  .so-plabel{display:none}
  .so-pdot{padding:5px 0}
  .so-chip{padding:4px 8px}
  .so-parts{gap:6px}
  .so-cat h3{margin-bottom:3px}
}

/* ---------- tablets and phones: everything stacks and the page scrolls ---------- */
@media (max-width:900px){
  .so-build{display:flex;flex-direction:column}
  .so-scen{display:flex}
  .so-parts{overflow:visible}
  .so-side,.so-scen,.so-parts-p{overflow:visible}
  .so-learn{display:flex;flex-direction:column}
  .so-chip{min-height:44px;justify-content:center}
  .so-pdot{min-height:40px}
  .so-select{min-height:40px}
  .btn{min-height:40px}
  .seg-toggle button{min-height:40px}
  .rp-controls{width:100%}
  .so-mini{display:flex;position:sticky;bottom:0;z-index:5;justify-content:space-between;gap:8px;padding:9px 12px;margin:0 -2px;border-radius:8px;background:var(--panel);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:13px;color:var(--ink-soft)}
  .so-mini b{font-family:var(--font-mono);color:var(--ink)}
  #soBuild[hidden] ~ .so-mini{display:none}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center}
  .so-sort-toggle{display:flex;width:100%}
  .so-sort-toggle button{flex:1 1 0;justify-content:center;white-space:normal;text-align:center;line-height:1.15;padding:8px 6px}
  .so-mini{font-size:12px;padding:8px 10px}
}
.so-story b{color:var(--ink);font-family:var(--font-display)}