/* ==========================================================================
   S3 · What a mix model can and cannot see. One component: sh3mix.

   Loaded after the Connected Search chapter sheets, and it inherits almost
   everything from them. .btn, .readouts, .ro and .ro.key are already defined
   and are used here unchanged, on the same argument the other shared sheets
   make: a reader who has seen a shape four times should not meet a new look
   for the same job.

   Only two things in this component are genuinely new and so only two things
   are styled here.

   1. The two charts. A spend chart whose whole purpose is to let two lines be
      seen lying on top of each other, and a scatter of forty fitted answers
      against a marked truth. Both are drawn from the numbers and neither is
      decorative, so both are sized to be read rather than glanced at.
   2. The verdict line, which changes as the reader moves the slider and is the
      sentence the component exists to deliver. It is set apart from the
      readouts because it is the finding rather than a figure.
   ========================================================================== */

/* ------------------------------------------------- the pair presets ------ */
.s3-presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.s3-p{font-size:12px}

/* ------------------------------------------------- the slider ------------ */
.s3-slide{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:10px}
.s3-slide label{font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.s3-range{width:100%}
.s3-cval{font-family:var(--mono);font-size:13px;color:var(--ink);justify-self:end;margin-top:-24px}

/* Why this pair moves together. Authored per preset, so it is prose rather
   than a caption, and it sits directly under the control that set it. */
.s3-why{font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--acad-cs);
  border-radius:10px;padding:10px 12px;margin:0 0 14px}
.s3-why b{color:var(--ink)}

/* ------------------------------------------------- the two charts -------- */
.s3-spend,.s3-plot{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
  padding:8px 10px;margin-bottom:12px}
.s3-svg{display:block;width:100%;height:auto}

.s3-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px;padding-left:2px}
.s3-legend span{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);
  font-size:11.5px;color:var(--ink-3)}
.s3-legend i{width:14px;height:2.5px;border-radius:2px}
.s3-legend .s3-cap{margin-left:auto;color:var(--ink-4);font-size:11px}

/* ------------------------------------------------- readouts and actions -- */
.s3-out{margin-bottom:12px}
.s3-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* ------------------------------------------------- the verdict ----------- */
/* The sentence the whole component is for. Deliberately not a readout: a
   figure invites comparison, and this is a finding that changes as the reader
   moves the control. */
.s3-verdict{font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:11px;
  padding:12px 14px}
.s3-verdict b,.s3-verdict strong{color:var(--ink)}

@media(max-width:640px){
  .s3-presets{flex-direction:column}
  .s3-p{width:100%;text-align:left}
  .s3-cval{justify-self:start;margin-top:0}
}