/* ==========================================================================
   Connected Search: Part III and Part IV components.

   Loaded last, after cs_ai.css, and inherits everything it can from the three
   chapter sheets before it: .rt-tabs, .rt-bar, .rt-bars, .rt-note, .readouts,
   .ro, .dg-q / .dg-o / .dg-a, .rc-col, and the whole .sq-* sorting furniture.
   A reader arriving here has seen those shapes four times, and a new look for
   the same job would read as a new idea.

   Two genuinely new semantic states in this sheet, both belonging to Part III
   rather than to any chapter:

   1. "dropped". A field can be sent, accepted and silently discarded. That is
      neither present nor absent and it needed its own state, so it uses the
      muted ramp with a strike rather than a new colour.
   2. "why it is stuck". Every trapped signal carries one of four reasons, and
      the reason decides the remedy, so the four are colour-separated in the
      same order everywhere they appear.
   ========================================================================== */

/* --------------------------------------------- csrecord (C1) ------------- */
.cr-dest{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.cr-tbl{width:100%;border-collapse:collapse;margin-bottom:12px}
.cr-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)}
.cr-tbl td{font-family:var(--ui);font-size:12px;color:var(--ink-2);padding:9px;
  border-bottom:1px solid var(--line);vertical-align:top}
.cr-tbl td.k{color:var(--ink);font-weight:600;white-space:nowrap}
.cr-tbl td.val{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cr-tbl tr.same td.k{border-left:2px solid var(--money)}
.cr-tbl tr.cut td.k{border-left:2px solid var(--warn)}
.cr-tbl tr.gone td.k{border-left:2px solid var(--open)}
.cr-tbl tr.gone td.val{color:var(--ink-4);text-decoration:line-through}
.cr-tag{display:inline-block;font-family:var(--ui);font-size:10.5px;letter-spacing:.03em;
  text-transform:uppercase;border-radius:6px;padding:2px 7px;margin-left:7px}
.cr-tag.same{color:var(--money);background:var(--money-soft)}
.cr-tag.cut{color:var(--warn);background:var(--warn-soft)}
.cr-tag.gone{color:var(--open);background:var(--open-soft)}
.cr-why{margin-bottom:12px}

/* --------------------------------------------- csoneasset (C2) ----------- */
.oa-props{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:8px;
  margin-bottom:14px}
.oa-p{cursor:pointer;text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:11px;padding:11px 13px;font-family:var(--ui);color:var(--ink-4)}
.oa-p:hover{background:var(--bg-3)}
.oa-p.on{background:var(--bg-4);border-color:var(--line-2);color:var(--ink)}
.oa-p b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.oa-p em{display:block;font-style:normal;font-size:11.5px;line-height:1.45;margin-top:3px}
.oa-p .oa-c{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:6px}
.oa-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.oa-r{display:grid;grid-template-columns:150px 1fr;gap:11px;align-items:start;
  background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--line-2);
  border-radius:10px;padding:10px 12px}
.oa-r.hit{border-left-color:var(--money)}
.oa-r.miss{opacity:.45}
.oa-r .oa-s{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.oa-r .oa-d{font-family:var(--ui);font-size:12px;line-height:1.5;color:var(--ink-3)}
.oa-r .oa-d em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-4);margin-top:4px}
@media(max-width:640px){.oa-r{grid-template-columns:1fr;gap:4px}}

/* --------------------------------------------- cstrapped (C3) ------------ */
/* The four reasons, in the same order and the same colours everywhere. */
.tp-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tp-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.tp-i{display:grid;grid-template-columns:1fr 132px;gap:11px;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:10px;padding:10px 12px;
  font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.tp-i:hover{background:var(--bg-3)}
.tp-i.on{background:var(--bg-4);color:var(--ink)}
.tp-i .tp-m{font-family:var(--ui);font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  text-align:right}
.tp-i.travels{border-left-color:var(--money)}
.tp-i.policy{border-left-color:var(--accent-deep)}
.tp-i.law{border-left-color:var(--warn)}
.tp-i.built{border-left-color:var(--open)}
.tp-i.money{border-left-color:var(--ink-4)}
.tp-i.travels .tp-m{color:var(--money)}
.tp-i.policy .tp-m{color:var(--accent-deep)}
.tp-i.law .tp-m{color:var(--warn)}
.tp-i.built .tp-m{color:var(--open)}
.tp-i.money .tp-m{color:var(--ink-4)}
.tp-why{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;margin-bottom:12px}
.tp-why h6{margin:0 0 5px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.tp-why p{margin:0 0 7px;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.tp-why p:last-child{margin-bottom:0}
.tp-why .tp-do{font-family:var(--ui);font-size:12px;color:var(--ink-2);
  border-left:2px solid var(--accent-deep);padding-left:10px}
@media(max-width:640px){.tp-i{grid-template-columns:1fr;gap:3px}.tp-i .tp-m{text-align:left}}

/* --------------------------------------------- cssum (C4) ---------------- */
.sm-sys{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px;
  margin-bottom:14px}
.sm-s{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.sm-s:hover{background:var(--bg-3)}
.sm-s b{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.sm-s 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}
.sm-opts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.sm-bars{margin-bottom:12px}
.sm-total{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.sm-t{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.sm-t .k{font-family:var(--ui);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.sm-t .v{font-family:var(--mono);font-size:26px;color:var(--ink);margin-top:5px;line-height:1}
.sm-t .sub{font-family:var(--ui);font-size:11.5px;line-height:1.45;color:var(--ink-4);margin-top:6px}
.sm-t.over .v{color:var(--warn)}
.sm-t.real .v{color:var(--money)}
.sm-msg{margin-bottom:12px}
@media(max-width:640px){.sm-total{grid-template-columns:1fr}}

/* --------------------------------------------- csdecisions (C5) ---------- */
.sd-list{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.sd-d{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:11px;padding:11px 13px}
.sd-d:hover{background:var(--bg-3)}
.sd-d.on{background:var(--bg-4)}
.sd-d.strong{border-left-color:var(--money)}
.sd-d.medium{border-left-color:var(--warn)}
.sd-d.weak{border-left-color:var(--open)}
.sd-d .sd-h{display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.sd-d .sd-n{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.sd-d .sd-e{font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap}
.sd-d.strong .sd-e{color:var(--money)}
.sd-d.medium .sd-e{color:var(--warn)}
.sd-d.weak .sd-e{color:var(--open)}
.sd-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:12px}
.sd-card 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}
.sd-card p{margin:0 0 10px;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.sd-card p:last-child{margin-bottom:0}
.sd-card .sd-ask{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--bg-3);
  border-radius:9px;padding:10px 12px;line-height:1.55}

/* --------------------------------------------- cssplit (J1) -------------- */
.sp-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.sp-r{display:grid;grid-template-columns:1fr 118px;gap:11px;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:10px;padding:10px 12px;
  font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.sp-r:hover{background:var(--bg-3)}
.sp-r.on{background:var(--bg-4);color:var(--ink)}
.sp-r.fix{border-left-color:var(--money)}
.sp-r.hold{border-left-color:var(--open)}
.sp-r .sp-v{font-family:var(--ui);font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  text-align:right}
.sp-r.fix .sp-v{color:var(--money)}
.sp-r.hold .sp-v{color:var(--open)}
@media(max-width:640px){.sp-r{grid-template-columns:1fr;gap:3px}.sp-r .sp-v{text-align:left}}

/* --------------------------------------------- csnotconnect (J2) --------- */
.nc-cases{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.nc-test{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.nc-q{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.nc-q .nc-m{font-family:var(--mono);font-size:14px;line-height:1.3}
.nc-q.yes .nc-m{color:var(--money)}
.nc-q.no .nc-m{color:var(--open)}
.nc-q .nc-t{font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.nc-q .nc-t b{color:var(--ink)}
.nc-v{background:var(--bg-3);border-radius:11px;padding:12px 14px;margin-bottom:12px;
  font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2)}
.nc-v.pass{border-left:2px solid var(--money)}
.nc-v.fail{border-left:2px solid var(--open)}

/* --------------------------------------------- csbusiness (J3) ----------- */
.bp-tabs{margin-bottom:12px}
.bp-setup{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:12px;font-family:var(--ui);font-size:13px;line-height:1.6;
  color:var(--ink-2)}
.bp-ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;
  margin-bottom:12px}
.bp-e{cursor:pointer;text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.bp-e:hover{background:var(--bg-3)}
.bp-e.on{background:var(--bg-4);border-color:var(--line-2);color:var(--ink-2)}
.bp-e b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.bp-e .bp-x{display:block;margin-top:5px;line-height:1.5}
.bp-out{margin-bottom:12px}

/* --------------------------------------------- cshorizon (J4) ------------ */
/* Three registers, and they must be visually distinct enough that a reader
   can tell them apart from across a room. Solid, dashed, dotted, in that
   order, plus the colour ramp used for certainty everywhere else. */
.hz-tabs{margin-bottom:12px}
.hz-list{display:flex;flex-direction:column;gap:7px}
.hz-i{background:var(--bg-2);border-radius:11px;padding:11px 13px}
.hz-i h6{margin:0 0 4px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.hz-i p{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.hz-i .hz-d{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-top:6px}
.hz-i.now{border:1px solid var(--line);border-left:3px solid var(--money)}
.hz-i.said{border:1px dashed var(--line-2);border-left:3px dashed var(--warn)}
.hz-i.guess{border:1px dotted var(--line-2);border-left:3px dotted var(--open)}
.hz-key{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-family:var(--ui);
  font-size:11.5px;color:var(--ink-4)}
.hz-key span{display:flex;gap:7px;align-items:center}
.hz-key i{display:block;width:22px;height:0;border-top:3px solid var(--line-2)}
.hz-key i.now{border-top-style:solid;border-top-color:var(--money)}
.hz-key i.said{border-top-style:dashed;border-top-color:var(--warn)}
.hz-key i.guess{border-top-style:dotted;border-top-color:var(--open)}