/* CONNECTED EVIDENCE, chapter 4. What each method says about the others.

   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.

   The chapter's shapes are deliberately the same family as chapter 3's, because
   this chapter is where chapter 3's method meets chapter 2's and a reader should
   see one house style rather than two. `.ev4-opt` is the choosable card,
   `.ev4-t` the table that carries an argument, `.ev4-refuse` the panel that says
   no number is returned, and `.ev4-noscore` the line that says nothing is being
   marked. All ten components carry one of the last two, which is the chapter.

   `.ev4-blank` is the one shape worth reading twice. It is an empty row, drawn
   as an empty row, and in 4.3 it is the part of the gap that module will not
   name because naming it belongs to chapter 2 and the exercise turns on the
   reader bringing it. A dashed floor tells it apart from a row nobody asked
   about.                                                                      */

/* ── shared ───────────────────────────────────────────────────────────────── */
.ev4-two, .ev4-say, .ev4-cols, .ev4-kinds, .ev4-pos, .ev4-claims, .ev4-charts,
.ev4-asks, .ev4-bans, .ev4-reads, .ev4-case { display:grid; gap:6px; margin:8px 0 }
.ev4-two { grid-template-columns:repeat(2,1fr) }
.ev4-cols, .ev4-bans { grid-template-columns:repeat(3,1fr) }
.ev4-kinds, .ev4-pos { grid-template-columns:repeat(2,1fr) }
.ev4-reads { grid-template-columns:repeat(2,1fr) }
.ev4-say, .ev4-claims, .ev4-charts, .ev4-asks, .ev4-case { grid-template-columns:1fr }

.ev4-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 }
.ev4-opt:hover { border-color:var(--st,var(--acad-ev)) }
.ev4-opt.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev4-opt.done { opacity:.86 }
.ev4-opt b { font-size:11.5px; line-height:1.3 }
.ev4-opt span { font-size:10.5px; color:var(--dim); line-height:1.35 }
.ev4-opt u { font-size:12.5px; text-decoration:none; font-variant-numeric:tabular-nums;
  color:var(--st,var(--acad-ev)) }

.ev4-num { padding:9px 10px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px }
.ev4-num b { display:block; font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums }
.ev4-num i { display:block; margin-top:2px; font-style:normal; font-size:11px;
  color:var(--st,var(--acad-ev)) }
.ev4-num span { display:block; margin-top:3px; font-size:10.5px; color:var(--dim);
  line-height:1.35 }

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

.ev4-nav { display:flex; gap:5px; margin:8px 0; flex-wrap:wrap }
.ev4-dot { width:26px; height:26px; font:inherit; font-size:11px; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; cursor:pointer }
.ev4-dot.sel { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev4-dot.done { color:var(--st,var(--acad-ev)) }

.ev4-q { display:block; width:100%; text-align:left; padding:6px 9px; margin:0 0 5px;
  font:inherit; font-size:11.5px; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:7px; cursor:pointer }
.ev4-q:hover { border-color:var(--st,var(--acad-ev)) }
.ev4-q.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }

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

/* ── 4.2 the two axes ─────────────────────────────────────────────────────── */
.ev4-lab { display:block; margin:8px 0 4px; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }
.ev4-lab input { display:block; width:100%; margin-top:5px }
.ev4-brow { display:grid; grid-template-columns:220px 1fr 48px; gap:8px; align-items:center;
  padding:3px 0; font-size:11.5px; font-variant-numeric:tabular-nums }
.ev4-blab { font-size:11px; color:var(--dim) }
.ev4-btrack { display:block; height:12px; border-radius:3px; background:var(--line) }
.ev4-btrack i { display:block; height:12px; border-radius:3px;
  background:var(--st,var(--acad-ev)); opacity:.5 }
.ev4-btrack i.b { opacity:.85 }
.ev4-btrack i.c { opacity:.3 }
.ev4-bv { text-align:right }

/* ── 4.4 the twelve estimates ─────────────────────────────────────────────── */
.ev4-warn { display:grid; gap:3px; margin:8px 0 }
.ev4-whead, .ev4-wrow { display:grid; grid-template-columns:1.4fr .9fr 1fr 1.2fr 1.2fr;
  gap:8px; align-items:center; font-size:11px; text-align:left }
.ev4-whead { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--floor);
  border-bottom:1px solid var(--line); padding-bottom:3px }
.ev4-wrow { padding:5px 6px; font:inherit; font-size:11px; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; cursor:pointer }
.ev4-wrow:hover { border-color:var(--st,var(--acad-ev)) }
.ev4-wrow.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev4-wout { color:var(--st,var(--acad-ev)) }

/* ── 4.8 the twelve weeks ─────────────────────────────────────────────────── */
.ev4-whead2, .ev4-wrow2 { display:grid; grid-template-columns:52px 88px 1fr; gap:8px;
  align-items:center; font-size:11.5px; padding:3px 0; font-variant-numeric:tabular-nums }
.ev4-whead2 { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--floor);
  border-bottom:1px solid var(--line) }
.ev4-wrow2 { border-bottom:1px solid var(--line) }
.ev4-wrow2.on { background:var(--panel) }
.ev4-bar { display:block; height:9px; border-radius:3px;
  background:var(--st,var(--acad-ev)); opacity:.66; min-width:1px }

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media (max-width:640px) {
  .ev4-two, .ev4-cols, .ev4-kinds, .ev4-pos, .ev4-bans, .ev4-reads {
    grid-template-columns:1fr }
  .ev4-brow { grid-template-columns:1fr 60px 40px }
  .ev4-whead, .ev4-wrow { grid-template-columns:1.2fr 1fr 1fr }
  .ev4-whead span:nth-child(3), .ev4-wrow span:nth-child(3) { display:none }
  .ev4-whead2, .ev4-wrow2 { grid-template-columns:40px 70px 1fr }
  .ev4-who { max-width:none }
}