/* CONNECTED EVIDENCE, chapter 3. Buying the variation.

   Nine 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.

   Four shared shapes do most of the work here, so they are declared once:
   `.ev3-opt` for a choosable card in a settings column, `.ev3-t` for the tables
   that carry the argument, `.ev3-refuse` for the panel that says no number is
   returned, and `.ev3-noscore` for the line that says nothing is being marked.
   Eight of the nine carry one of the last two, which is the chapter.

   `.ev3-blank` is the one shape worth reading twice. It is an empty cell, drawn
   as an empty cell, and it appears wherever a component is refusing to invent an
   answer it does not hold. It has a dashed floor so a reader can tell it apart
   from a cell nobody asked about, which is `.ev3-unasked`.                    */

/* ── shared ───────────────────────────────────────────────────────────────── */
.ev3-three, .ev3-arms, .ev3-asks, .ev3-picks, .ev3-steps, .ev3-bands {
  display:grid; gap:6px; margin:8px 0 }
.ev3-three { grid-template-columns:repeat(3,1fr) }
.ev3-arms, .ev3-picks, .ev3-steps { grid-template-columns:1fr }
.ev3-asks { grid-template-columns:repeat(3,1fr) }

.ev3-card, .ev3-arm, .ev3-ask, .ev3-pt, .ev3-step, .ev3-band, .ev3-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 }
.ev3-card:hover, .ev3-arm:hover, .ev3-ask:hover, .ev3-pt:hover, .ev3-step:hover,
.ev3-band:hover, .ev3-opt:hover { border-color:var(--st,var(--acad-ev)) }
.ev3-card.sel, .ev3-arm.sel, .ev3-ask.on, .ev3-pt.on, .ev3-step.sel, .ev3-band.sel,
.ev3-opt.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev3-step.done { opacity:.72 }
.ev3-card b, .ev3-arm b, .ev3-pt b, .ev3-step b, .ev3-opt b { font-size:11.5px; line-height:1.25 }
.ev3-card span, .ev3-pt span, .ev3-step span, .ev3-opt span {
  font-size:10.5px; color:var(--dim); line-height:1.35 }
.ev3-card u { font-size:13px; text-decoration:none; font-variant-numeric:tabular-nums }
.ev3-pt u { position:absolute; top:7px; right:9px; font-size:11px; text-decoration:none;
  color:var(--st,var(--acad-ev)) }

.ev3-lab, .ev3-lab2 { display:block; margin:8px 0 4px; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }
.ev3-lab input { display:block; width:100%; margin-top:5px }
.ev3-ctrls { display:grid; grid-template-columns:repeat(2,1fr); gap:12px }

.ev3-said, .ev3-refuse, .ev3-price { margin:0 0 7px; font-size:12.5px; line-height:1.5 }
.ev3-said span, .ev3-refuse span, .ev3-price span {
  display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor) }
.ev3-refuse { border-left:2px solid var(--line); padding-left:9px }
.ev3-verdict { margin:9px 0 0; font-size:12.5px; line-height:1.55 }
.ev3-noscore { margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--floor) }
.ev3-d { margin:0 0 7px; font-size:12.5px; line-height:1.5 }
.ev3-dl { display:grid; grid-template-columns:150px 1fr; gap:3px 10px; margin:0 0 8px;
  font-size:11.5px }
.ev3-dl dt { color:var(--floor); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; padding-top:2px }
.ev3-dl dd { margin:0; line-height:1.45 }

/* ── the tables that carry the argument ───────────────────────────────────── */
.ev3-t { width:100%; border-collapse:collapse; margin:8px 0; font-size:11.5px;
  font-variant-numeric:tabular-nums }
.ev3-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:bottom }
.ev3-t td { padding:5px 6px 5px 0; border-bottom:1px solid var(--line); vertical-align:top;
  line-height:1.4 }
.ev3-t tr.ev3-hit td { background:var(--panel) }
.ev3-who { max-width:190px }
.ev3-blank { border-bottom:1px dashed var(--line) }
.ev3-blank::after { content:''; display:block; height:14px }
.ev3-unasked { color:var(--floor); font-size:10.5px; font-style:italic }

/* ── 3.0A hold one back ───────────────────────────────────────────────────── */
.ev3-lhead, .ev3-lrow { display:grid; grid-template-columns:52px 88px 88px 1fr; gap:6px;
  align-items:center; font-size:11.5px; padding:3px 0; font-variant-numeric:tabular-nums }
.ev3-lhead { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--floor);
  border-bottom:1px solid var(--line) }
.ev3-lrow { border-bottom:1px solid var(--line) }
.ev3-lrow.on { background:var(--panel) }
.ev3-gapbar { display:block; height:9px; border-radius:3px;
  background:var(--st,var(--acad-ev)); opacity:.66; min-width:1px }
.ev3-bill { margin-top:10px }

/* ── 3.1 where is your range thinnest ─────────────────────────────────────── */
.ev3-bands { gap:4px }
.ev3-bhead { display:grid; grid-template-columns:126px 1fr 54px; gap:8px; font-size:10px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--floor);
  border-bottom:1px solid var(--line); padding-bottom:3px }
.ev3-band { display:grid; grid-template-columns:126px 1fr 54px; gap:8px; align-items:center;
  flex-direction:row }
.ev3-bt { font-size:11.5px }
.ev3-btrack { display:block; height:12px; border-radius:3px; background:var(--line) }
.ev3-btrack i { display:block; height:12px; border-radius:3px;
  background:var(--st,var(--acad-ev)); opacity:.72 }
.ev3-bv { font-size:11.5px; text-align:right; font-variant-numeric:tabular-nums }

/* ── 3.4 and 3.7, the two numbers side by side ────────────────────────────── */
.ev3-set { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:8px 0 }
.ev3-setcol { display:flex; flex-direction:column; gap:5px }
.ev3-pair { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0 }
.ev3-num { padding:9px 10px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px }
.ev3-num b { display:block; font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums }
.ev3-num span { display:block; margin-top:3px; font-size:10.5px; color:var(--dim);
  line-height:1.35 }

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media (max-width:640px) {
  .ev3-three, .ev3-asks, .ev3-set, .ev3-pair, .ev3-ctrls { grid-template-columns:1fr }
  .ev3-dl { grid-template-columns:1fr }
  .ev3-lhead, .ev3-lrow { grid-template-columns:40px 1fr 1fr 46px }
  .ev3-bhead, .ev3-band { grid-template-columns:96px 1fr 46px }
}