/* ==========================================================================
   Connected Search: AI answers chapter components.

   Loaded after cs_social.css and inherits from it and from cs_retail.css.
   Reused rather than re-declared, because the components are doing the same
   jobs and should look identical to a reader a chapter later: .rt-tabs,
   .rt-bar, .rt-bars, .rt-note, .readouts / .ro, .dg-q / .dg-o / .dg-a and
   .rc-col.

   One new semantic idea in this sheet: "unused". A passage can be retrieved,
   sit in the context window, and contribute nothing to the answer. It needed a
   visual state that is neither present nor absent, and it uses the existing
   muted ramp with a dashed edge rather than a new colour.
   ========================================================================== */

/* --------------------------------------------- csaiwords (A1) ------------ */
.aw-ctl{margin-bottom:12px}
.aw-ctl label{display:flex;gap:8px;align-items:center;font-family:var(--ui);font-size:12.5px;
  color:var(--ink-2);cursor:pointer}
.aw-bars{margin-bottom:10px}
.aw-why{margin-bottom:12px}
.aw-why em{display:block;font-style:normal;color:var(--ink-4);font-size:11.5px;margin-top:4px}

/* --------------------------------------------- csaicrawl (A2) ------------ */
.ac-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px;
  margin-bottom:14px}
.ac-l{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ac-l:hover{background:var(--bg-3)}
.ac-l b{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.ac-l em{display:block;font-style:normal;font-family:var(--ui);font-size:11.5px;line-height:1.45;
  color:var(--ink-4);margin-top:3px}
.ac-tbl{width:100%;border-collapse:collapse;margin-bottom:12px}
.ac-tbl th{text-align:left;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);padding:0 9px 7px;border-bottom:1px solid var(--line)}
.ac-tbl td{font-family:var(--ui);font-size:12px;color:var(--ink-2);padding:9px;
  border-bottom:1px solid var(--line);vertical-align:top}
.ac-tbl td em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-4);margin-top:3px}
.ac-tbl td.k{color:var(--ink);font-weight:600}
.ac-on{color:var(--money)}
.ac-off{color:var(--open)}
.ac-half{color:var(--warn)}
.ac-why{margin-bottom:12px}

/* --------------------------------------------- csaipipeline (A3) --------- */
.pp-q{font-family:var(--mono);font-size:13px;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:12px}
.pp-ctl{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.pp-ctl .pp-n{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.pp-stage{background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--accent-deep);
  border-radius:10px;padding:12px 14px;margin-bottom:12px}
.pp-stage h6{margin:0 0 5px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.pp-stage p{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.pp-fan{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.pp-fan code{font-family:var(--mono);font-size:11px;color:var(--ink-3);background:var(--bg-3);
  border-radius:6px;padding:4px 8px}
.pp-fl{display:block;width:100%;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.pp-list{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.pp-i{display:grid;grid-template-columns:1fr 90px 150px;gap:10px;align-items:center;width:100%;
  text-align:left;cursor:pointer;background:var(--bg-2);border:1px solid var(--line);
  border-left:2px solid var(--line-2);border-radius:9px;padding:9px 12px;font-family:var(--ui);
  font-size:12.5px;color:var(--ink-2)}
.pp-i:hover{background:var(--bg-3)}
.pp-i.on{background:var(--bg-4);color:var(--ink)}
.pp-i.mine{border-left-color:var(--accent-deep)}
.pp-i.gone{opacity:.4}
.pp-i.used{border-left-color:var(--money)}
.pp-i.unused{border-left-color:var(--warn);border-style:dashed}
.pp-i .pp-w{font-size:11.5px;color:var(--ink-4)}
.pp-i .pp-s{font-size:11.5px;color:var(--ink-4);text-align:right}
.pp-i.used .pp-s{color:var(--money)}
.pp-i.unused .pp-s{color:var(--warn)}
.pp-why{margin-bottom:12px}
@media(max-width:640px){.pp-i{grid-template-columns:1fr;gap:3px}.pp-i .pp-s{text-align:left}}

/* --------------------------------------------- csaireroll (A3) ----------- */
.rr-tabs{margin-bottom:12px}
.rr-ask{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rr-ask .rr-n{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.rr-ans{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;margin-bottom:12px}
.rr-line{margin:0;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.rr-b{margin:8px 0 0;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink)}
.rr-c{margin:7px 0 0;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.rr-freq{margin-bottom:12px}

/* --------------------------------------------- csaicite (A4) ------------- */
.ct-tabs{margin-bottom:12px}
.ct-ans{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;margin-bottom:10px}
.ct-s{margin:0;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink)}
.ct-chip{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-4);background:var(--bg-4);border-radius:6px;padding:2px 7px;vertical-align:middle}
.ct-r{background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--line-2);
  border-radius:10px;padding:11px 13px;margin-bottom:7px}
.ct-r.warn{border-left-color:var(--warn)}
.ct-r h6{margin:0 0 4px;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);font-weight:600}
.ct-r p{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ct-out{margin-top:12px}

/* --------------------------------------------- csaioutcomes (A4) --------- */
.oc-tabs{margin-bottom:12px}
.oc-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}

/* --------------------------------------------- csaishipped (A5) ---------- */
/* The sorting furniture comes from cs_social.css. Only the three bin colours
   are new, and they read left to right as certainty falling away. */
.sq-b.shipped{border-top:2px solid var(--money)}
.sq-b.announced{border-top:2px solid var(--warn)}
.sq-b.guess{border-top:2px solid var(--open)}

/* --------------------------------------------- csaievidence (A6) --------- */
/* Four bins rather than three, so they need to wrap earlier than the sort in
   A5 does. Colours read as the kind of claim, not its strength. */
.ev-bins{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.sq-b.docd{border-top:2px solid var(--money)}
.sq-b.proxy{border-top:2px solid var(--accent-deep)}
.sq-b.reasoned{border-top:2px solid var(--warn)}
.sq-b.against{border-top:2px solid var(--open)}

/* --------------------------------------------- csaipromptset (A7) -------- */
.ps-presets{margin-bottom:12px}
.ps-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:6px;
  margin-bottom:14px}
.ps-p{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}
.ps-p:hover{background:var(--bg-3)}
.ps-p.on{color:var(--ink);border-color:var(--line-2)}
.ps-p .ps-k{font-size:11px;color:var(--ink-4);white-space:nowrap}
.ps-bars{margin-bottom:12px}