/* Emerging Tech Debates (information-technology/emerging-tech.php). The page chrome is the one-screen layout in
   /css/resource.css. Technologies: the ten cards on the left, the chosen one on the right (scrolling inside itself).
   Evaluation builder: the situation across the top, then the points, For, Against and the conclusion in four
   columns, each scrolling inside itself. On smaller screens everything stacks and the page scrolls. Theme tokens
   only: For is --ok, Against --bad. */

.objective h4{margin:14px 0 6px;font:700 14px/1.2 var(--font-display);color:var(--ink)}
.rp-main{gap:10px}
.panel h2{margin:0 0 8px}   /* the rest is css/resource.css */

/* ---------- the technologies ---------- */
.et-cards{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:12px}
.et-picker{padding:10px;min-height:0;overflow:auto}
.et-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.et-tech{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);cursor:pointer;text-align:left;font:600 13.5px/1.2 var(--font-display);min-height:64px}
.et-tech .ic{font-size:22px;line-height:1}
.et-tech:hover{border-color:var(--accent)}
.et-tech[aria-selected="true"]{border:2px solid var(--accent);background:var(--accent-tint)}
.et-tech:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.et-detail{min-height:0;overflow:auto;padding:14px 18px}
.et-detail h2.et-name{margin:0 0 6px;font:700 22px/1.2 var(--font-display);color:var(--accent-deep);text-transform:none;letter-spacing:0}
.et-detail .et-what{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.et-detail h3{margin:12px 0 6px;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.et-uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.et-uses div{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.et-uses b{display:block;font:700 12.5px/1.2 var(--font-display);color:var(--ink);margin-bottom:3px}
.et-bd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.et-bd ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.et-bd li{margin-bottom:4px}
.et-bd h3.good{color:var(--ok)}
.et-bd h3.bad{color:var(--bad)}
.et-imp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.et-imp div{border-left:3px solid var(--accent-b);background:var(--panel-2);border-radius:0 6px 6px 0;padding:8px 10px;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.et-imp b{display:block;font:700 12.5px/1.2 var(--font-display);color:var(--ink);margin-bottom:3px}
.et-go{margin-top:12px}

/* ---------- the evaluation builder ---------- */
.et-build{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.et-ctx{flex:none;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:10px 14px}
.et-ctx-pick{display:flex;align-items:center;gap:8px;font:600 11.5px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.et-ctx-pick select{font:600 14px/1.2 var(--font-body);color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:6px;padding:7px 10px;text-transform:none;letter-spacing:0}
.et-q{margin:0;flex:1;min-width:240px;font:600 15px/1.4 var(--font-display);color:var(--ink)}
.et-cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(270px,1.05fr);gap:10px}
.et-col{min-height:0;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;transition:background .15s,border-color .15s}
.et-col.over{border-color:var(--accent);background:var(--accent-tint)}
.et-for h2{color:var(--ok)}
.et-against h2{color:var(--bad)}
.et-total,.et-count{font-family:var(--font-mono);letter-spacing:0}
.et-tip{margin:0 0 6px}
.et-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;min-height:40px}
.et-pt{background:var(--panel-2);border:1px solid var(--line-strong);border-radius:6px;padding:7px 9px;font-size:13.5px;line-height:1.35;color:var(--ink);cursor:grab;display:flex;flex-direction:column;gap:5px}
.et-pt.dragging{opacity:.5}
.et-pt .tags{display:flex;gap:4px;flex-wrap:wrap}
.et-pt .tag{font:600 10px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;padding:3px 5px;border-radius:3px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.et-pt .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.et-pt .mv{font:600 11.5px/1 var(--font-display);padding:5px 8px;border-radius:4px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);cursor:pointer}
.et-pt .mv.f:hover{border-color:var(--ok);color:var(--ok)}
.et-pt .mv.a:hover{border-color:var(--bad);color:var(--bad)}
.et-pt .wt{display:inline-flex;gap:2px;margin-left:auto}
.et-pt .wt button{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--accent);background:transparent;cursor:pointer;padding:0}
.et-pt .wt button.on{background:var(--accent)}
.et-pt .wrong{font-size:12.5px;color:var(--bad);font-weight:600}
.et-pt.is-wrong{border-color:var(--bad);background:var(--bad-tint)}
.et-for .et-pt:not(.is-wrong){border-left:3px solid var(--ok)}
.et-against .et-pt:not(.is-wrong){border-left:3px solid var(--bad)}
.et-empty{font-size:13px;color:var(--muted);border:1.5px dashed var(--line-strong);border-radius:6px;padding:14px 10px;text-align:center}
.et-out h3{margin:12px 0 6px;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.et-balance{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.et-balance .f{background:var(--ok);transition:width .3s}
.et-balance .a{background:var(--bad);transition:width .3s}
.et-concl{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft);padding:10px 12px;border-radius:6px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent)}
.et-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.35}
.et-check li{display:flex;gap:8px;color:var(--ink-soft)}
.et-check li::before{content:"○";flex:none;width:16px;color:var(--muted);font-weight:700}
.et-check li.met{color:var(--ink)}
.et-check li.met::before{content:"✓";color:var(--ok)}
.et-check small{display:block;color:var(--muted);font-size:11.5px}

@media (min-width:901px) and (max-width:1250px){
  .et-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .et-out{grid-column:1/-1;max-height:none}
  .et-cols{overflow:auto;grid-template-rows:minmax(260px,1fr) auto}
}
@media (max-width:900px){
  .et-cards,.et-cols{display:flex;flex-direction:column}
  .et-picker,.et-detail,.et-col{overflow:visible}
  .et-uses,.et-bd,.et-imp{grid-template-columns:1fr}
  .seg-toggle button,.btn,.et-ctx-pick select{min-height:40px}
  .et-pt .mv{min-height:40px;padding:8px 12px}
  .et-pt .wt button{width:40px;height:40px}
  .et-tech{min-height:56px}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .et-ctx-pick{flex-wrap:wrap}
  .et-ctx-pick select{max-width:100%}
}