/* CONNECTED EVIDENCE, chapter 2. Two answers you can have without spending
   anything.

   Ten 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:
   `.ev2-pick` for a grid of choosable cards, `.ev2-slice` for a share of a pool,
   `.ev2-refuse` for the panel that says no number is returned, and
   `.ev2-noscore` for the line that says nothing is being marked. Seven of the
   ten carry one of the last two, which is the chapter.                       */

/* ── shared ───────────────────────────────────────────────────────────────── */
.ev2-pick, .ev2-rules, .ev2-routes, .ev2-cases, .ev2-claims, .ev2-steps, .ev2-moves,
.ev2-lines {
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:8px 0 }
.ev2-rule, .ev2-route, .ev2-case, .ev2-claim, .ev2-step, .ev2-move, .ev2-line {
  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 }
.ev2-rule:hover, .ev2-route:hover, .ev2-case:hover, .ev2-claim:hover, .ev2-step:hover,
.ev2-move:hover, .ev2-line:hover { border-color:var(--st,var(--acad-ev)) }
.ev2-rule.sel, .ev2-route.sel, .ev2-case.sel, .ev2-claim.sel, .ev2-step.sel, .ev2-move.sel {
  border-color:var(--st,var(--acad-ev)); box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev2-rule.done, .ev2-route.done, .ev2-case.done, .ev2-claim.done, .ev2-step.done,
.ev2-move.done { opacity:.74 }
.ev2-claim.blank { border-style:dashed }
.ev2-rule b, .ev2-route b, .ev2-step b, .ev2-line b { font-size:11.5px; line-height:1.25 }
.ev2-rule span, .ev2-route span, .ev2-step span, .ev2-line span {
  font-size:10.5px; color:var(--dim); line-height:1.35 }

.ev2-said, .ev2-jrow, .ev2-refuse, .ev2-sumline, .ev2-fan-out, .ev2-always {
  margin:0 0 7px; font-size:12.5px; line-height:1.5 }
.ev2-said span, .ev2-jrow span, .ev2-refuse span, .ev2-sumline span {
  display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor) }
.ev2-refuse { border-left:2px solid var(--line); padding-left:9px }
.ev2-verdict { margin:9px 0 0; font-size:12.5px; line-height:1.55 }
.ev2-noscore, .ev2-real2 { margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--floor) }
.ev2-real2 { color:var(--dim); font-size:12px }
.ev2-lab { display:block; margin:8px 0 4px; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }
.ev2-lab input { display:block; width:100%; margin-top:5px }
.ev2-sopts, .ev2-reasons, .ev2-ans, .ev2-guesses, .ev2-calls, .ev2-plans {
  display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 }
.ev2-so.on, .ev2-plan.on { border-color:var(--st,var(--acad-ev)); color:var(--ink) }

/* ── the pool, shared by 2.0A and 2.2 ─────────────────────────────────────── */
.ev2-slice { display:grid; grid-template-columns:150px 1fr 54px; align-items:center; gap:8px;
  margin:0 0 5px }
.ev2-sl { font-size:11.5px }
.ev2-sb { display:block; height:12px; border-radius:3px;
  background:var(--st,var(--acad-ev)); opacity:.72; min-width:2px }
.ev2-sv { font-size:12px; text-align:right; font-variant-numeric:tabular-nums }
.ev2-sum { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--dim) }

/* ── 2.0A slice it, then fit it ───────────────────────────────────────────── */
.ev2-fitwrap { margin-top:14px; border-top:1px solid var(--line); padding-top:10px }
.ev2-fhead, .ev2-frow { display:grid; grid-template-columns:1fr repeat(3,74px); gap:4px;
  font-size:11.5px; padding:3px 0; font-variant-numeric:tabular-nums }
.ev2-fhead { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--floor);
  border-bottom:1px solid var(--line) }
.ev2-frow { border-bottom:1px solid var(--line) }
.ev2-fitout { margin:8px 0 0; font-size:12px; line-height:1.5 }

/* ── 2.0B one week, two totals ────────────────────────────────────────────── */
.ev2-setups { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 }
.ev2-setup b { display:block; font-size:11.5px; margin-bottom:5px }
.ev2-setup span { display:block; font-size:10.5px; color:var(--floor); line-height:1.4 }
.ev2-setup .ev2-sopts { flex-direction:column; margin:0 0 5px }
.ev2-two { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px }
.ev2-tcard { padding:9px 10px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px }
.ev2-tcard em { display:block; font-style:normal; font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }
.ev2-tcard b { display:block; margin:3px 0; font-size:28px; line-height:1;
  font-variant-numeric:tabular-nums }
.ev2-tcard span { font-size:11px; color:var(--dim); line-height:1.4 }
.ev2-tgap { grid-column:1 / -1; margin:2px 0 0; font-size:12.5px; line-height:1.55 }

/* ── 2.1 hold everything still ────────────────────────────────────────────── */
.ev2-lines { grid-template-columns:repeat(3,1fr) }
.ev2-line.froze { border-style:dashed; opacity:.72 }
.ev2-all { grid-column:1 / -1 }
.ev2-moving { margin:6px 0 8px; font-size:13px }
.ev2-m { display:grid; grid-template-columns:150px 1fr; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--line); font-size:11.5px; line-height:1.45 }
.ev2-m b { font-size:11.5px }
.ev2-m.off { opacity:.55 }
.ev2-m.off b { text-decoration:line-through }

/* ── 2.3 whose movement is this ───────────────────────────────────────────── */
.ev2-steps { grid-template-columns:repeat(3,1fr) }

/* ── 2.4 where does the evidence stop ─────────────────────────────────────── */
.ev2-band { display:grid; grid-template-columns:118px 1fr 62px; align-items:center; gap:8px;
  margin:0 0 5px; font-size:11.5px }
.ev2-btrack { position:relative; display:block; height:14px; border-radius:3px;
  background:var(--panel2,var(--panel)); border:1px solid var(--line) }
.ev2-btrack i { position:absolute; top:2px; bottom:2px; border-radius:2px;
  background:var(--st,var(--acad-ev)); opacity:.5 }
.ev2-btrack u { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink) }
.ev2-bv { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--floor);
  text-align:right }
.ev2-band.out .ev2-bv { color:var(--ink) }
.ev2-band.out .ev2-btrack { border-style:dashed }
.ev2-joint { margin-top:10px; border-top:1px solid var(--line); padding-top:9px }
.ev2-jrow b { font-size:13px }
.ev2-always { margin-top:9px; color:var(--dim); font-size:12px }

/* ── 2.5 name the quantity ────────────────────────────────────────────────── */
.ev2-claims { grid-template-columns:repeat(2,1fr) }
.ev2-claim { font-size:11px }

/* ── 2.6 three roles, one party ───────────────────────────────────────────── */
.ev2-cases { grid-template-columns:repeat(3,1fr) }
.ev2-roles { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0 0 8px;
  font-size:12px }
.ev2-roles dt { color:var(--floor); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; padding-top:2px }
.ev2-roles dd { margin:0; line-height:1.5 }

/* ── 2.7 move them together ───────────────────────────────────────────────── */
.ev2-est { margin:8px 0 7px; font-size:12px }
.ev2-est b { font-size:26px; line-height:1; font-variant-numeric:tabular-nums }
.ev2-est em { font-style:normal; font-size:11px; color:var(--floor); margin-left:9px }
.ev2-fan-out { border-top:1px solid var(--line); padding-top:8px; color:var(--dim) }

/* ── 2.8 which of these is a result ───────────────────────────────────────── */
.ev2-moves { grid-template-columns:repeat(3,1fr) }

@media (max-width:760px) {
  .ev2-pick, .ev2-rules, .ev2-routes, .ev2-cases, .ev2-claims, .ev2-steps, .ev2-moves,
  .ev2-lines, .ev2-setups, .ev2-two { grid-template-columns:1fr }
  .ev2-slice { grid-template-columns:104px 1fr 48px }
  .ev2-band { grid-template-columns:96px 1fr 56px }
  .ev2-m { grid-template-columns:1fr }
  .ev2-fhead, .ev2-frow { grid-template-columns:1fr repeat(3,54px) }
}