/* CONNECTED EVIDENCE, chapter 6. What would happen if we moved the money.

   Eight components, and every one of them reuses tokens already declared in
   academy.css rather than minting values. A seventh Academy inventing its own
   scale makes the design the thing a reader remembers instead of the curriculum.

   The chapter's shapes are the same family as chapter 5's, one prefix along, so
   a reader moving from one chapter to the next sees one house style rather than
   two. `.ev6-opt` is the choosable card, `.ev6-t` the table that carries an
   argument, `.ev6-refuse` the panel that says no number is returned, and
   `.ev6-noscore` the line that says nothing is being ranked. All eight
   components carry one of the last two.

   THREE SHAPES ARE WORTH READING TWICE, because in this chapter the drawing is
   the argument rather than a decoration of it.

   `.ev6-bandline` and `.ev6-bandfill` are the band, drawn under every slider in
   6.4 and 6.5. The filled part is the range that line has actually run at and
   the rest of the track is the part where the curve is a shape somebody chose.
   The research stream's design note says this single piece of drawing carries
   most of the module, and it is the reason a slider is used here rather than a
   number field. A number field would let a reader type a level with no sense of
   where it sits.

   `.ev6-slab.out` restyles the whole control when its line leaves the band,
   rather than adding a warning next to it. A warning beside a normal looking
   control reads as advice. A control that changes character reads as a
   different kind of claim, which is what it is.

   `.ev6-none` is a cell that carries no number, used for the four outputs the
   simulator refuses and for the awareness row it refuses at every setting. It is
   drawn as an absence rather than as a zero, because a zero is a measurement.

   ONE NOTE ON THE PARAMETER TABLE. `.ev6-par` is dense on purpose. Twenty one
   numbers on one screen is the point of it: a reader who has to scroll to see
   the assumptions is being told they are secondary.                           */

/* ── shared ───────────────────────────────────────────────────────────────── */
.ev6-moves, .ev6-recs, .ev6-who, .ev6-parts { display:grid; gap:6px; margin:8px 0 }
.ev6-moves { grid-template-columns:repeat(3,1fr) }
.ev6-recs, .ev6-who, .ev6-parts { grid-template-columns:repeat(2,1fr) }

.ev6-opt {
  position:relative; display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:8px 9px; font:inherit; font-size:11.5px; line-height:1.35; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; cursor:pointer }
.ev6-opt:hover { border-color:var(--st,var(--acad-ev)) }
.ev6-opt.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev6-opt b { font-size:11.5px; line-height:1.3 }
.ev6-opt span { font-size:10.5px; color:var(--dim); line-height:1.35 }
.ev6-opt u { font-size:11px; text-decoration:none; font-variant-numeric:tabular-nums;
  color:var(--st,var(--acad-ev)) }

.ev6-said, .ev6-refuse, .ev6-statement { margin:0 0 7px; font-size:12.5px; line-height:1.5 }
.ev6-said span, .ev6-refuse span {
  display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor) }
.ev6-refuse { border-left:2px solid var(--line); padding-left:9px }
.ev6-noscore { margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--floor) }
.ev6-quote { margin:0 0 4px; font-size:12.5px; line-height:1.5; color:var(--dim) }
.ev6-quote b { color:inherit }
.ev6-alab { display:block; margin:12px 0 4px; font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }

.ev6-nav { display:flex; gap:5px; margin:8px 0; flex-wrap:wrap; align-items:center }
.ev6-nb { padding:5px 11px; font:inherit; font-size:11.5px; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:7px; cursor:pointer }
.ev6-nb:hover { border-color:var(--st,var(--acad-ev)) }
.ev6-nb.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev6-nb:disabled { opacity:.45; cursor:default }
.ev6-count { font-size:10.5px; color:var(--floor) }
.ev6-presets { display:flex; gap:5px; flex-wrap:wrap; margin:8px 0 }

/* ── the tables that carry the argument ───────────────────────────────────── */
.ev6-t { width:100%; border-collapse:collapse; margin:8px 0; font-size:11.5px;
  font-variant-numeric:tabular-nums }
.ev6-t th { text-align:left; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor); font-weight:500; padding:4px 6px 4px 0;
  border-bottom:1px solid var(--line); vertical-align:top }
.ev6-t td { padding:5px 6px 5px 0; border-bottom:1px solid var(--line); vertical-align:top;
  line-height:1.4 }
.ev6-t tr.ev6-hit td { background:var(--panel) }
.ev6-t em { display:block; font-style:normal; font-size:10.5px; color:var(--floor) }
.ev6-gap { color:var(--dim) }
.ev6-none { color:var(--floor); font-style:italic }
.ev6-yes { color:var(--st,var(--acad-ev)) }
.ev6-kindcell { font-size:10.5px; color:var(--dim) }
.ev6-why { font-size:10.5px; color:var(--dim); line-height:1.4 }

/* ── 6.0B, the seven steps ────────────────────────────────────────────────── */
.ev6-steps { display:grid; gap:4px; margin:8px 0 }
.ev6-step { padding:5px 8px; font-size:11px; line-height:1.35; background:var(--panel);
  border:1px solid var(--line); border-radius:7px; opacity:.5 }
.ev6-step.done { opacity:.8 }
.ev6-step.on { opacity:1; border-color:var(--st,var(--acad-ev)) }
.ev6-step.blank { border-style:dashed }
.ev6-step span { display:block; margin-top:3px; font-size:10.5px; color:var(--dim) }

/* ── 6.2, the ten questions ───────────────────────────────────────────────── */
.ev6-rows { display:grid; gap:5px; margin:8px 0 }
.ev6-row { display:grid; grid-template-columns:1.3fr 1.3fr; gap:8px; align-items:start;
  padding:5px 0; border-bottom:1px solid var(--line) }
.ev6-rt { font-size:11.5px; line-height:1.4 }
.ev6-rp { display:flex; gap:4px; flex-wrap:wrap }
.ev6-rw { grid-column:1 / -1; font-size:10.5px; line-height:1.45; color:var(--dim) }
.ev6-pill { padding:3px 8px; font:inherit; font-size:10.5px; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:20px; cursor:pointer }
.ev6-pill:hover { border-color:var(--st,var(--acad-ev)) }
.ev6-pill.on { border-color:var(--st,var(--acad-ev)); color:var(--st,var(--acad-ev)) }
.ev6-lab { display:block; margin:8px 0 4px; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }
.ev6-lab input { display:block; width:100%; margin-top:5px }

/* ── 6.4 and 6.5, the sliders and the band ────────────────────────────────── */
.ev6-sliders { display:grid; gap:9px; margin:10px 0 }
.ev6-slab { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:baseline }
.ev6-sname { font-size:11.5px }
.ev6-sval { font-size:11.5px; font-variant-numeric:tabular-nums;
  color:var(--st,var(--acad-ev)) }
.ev6-slab input { grid-column:1 / -1; width:100%; margin:2px 0 0 }
.ev6-bandline { grid-column:1 / -1; position:relative; display:block; height:4px;
  background:repeating-linear-gradient(45deg, var(--line) 0 3px, transparent 3px 6px);
  border-radius:2px }
.ev6-bandfill { position:absolute; top:0; bottom:0; display:block;
  background:var(--st,var(--acad-ev)); opacity:.62; border-radius:2px }
.ev6-brange { grid-column:1 / -1; font-size:10px; line-height:1.4; color:var(--floor) }
.ev6-slab.out .ev6-sval { color:var(--floor); font-style:italic }
.ev6-slab.out .ev6-sname { opacity:.7 }
.ev6-slab.out .ev6-brange { color:var(--dim) }

/* ── 6.5, the statement, the panel and the assumptions ────────────────────── */
.ev6-statement { padding:10px 11px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px }
.ev6-winrow { display:flex; gap:5px; flex-wrap:wrap; margin:8px 0 }
.ev6-panel td:first-child { white-space:nowrap }
.ev6-par td { font-variant-numeric:tabular-nums }
.ev6-par b { display:inline-block; min-width:34px; text-align:center; font-size:11.5px }
.ev6-tick { padding:1px 5px; font:inherit; font-size:9.5px; color:var(--floor);
  background:var(--panel); border:1px solid var(--line); border-radius:5px; cursor:pointer }
.ev6-tick:hover { border-color:var(--st,var(--acad-ev)); color:var(--st,var(--acad-ev)) }

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ev6-moves, .ev6-recs, .ev6-who, .ev6-parts { grid-template-columns:1fr }
  .ev6-row { grid-template-columns:1fr }
  .ev6-par { font-size:10.5px }
  .ev6-par b { min-width:26px }
}