/* CONNECTED EVIDENCE, chapter 7. Spending the variation, and the price of
   keeping it.

   Nine components, and every one 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 shapes are the same family as chapters 5 and 6, one prefix along, so a
   reader closing the course sees one house style rather than eight. `.ev7-opt`
   is the choosable card, `.ev7-t` the table that carries an argument,
   `.ev7-refuse` the panel that says no number is returned, and `.ev7-noscore`
   the line that says nothing is being ranked. Every component in this chapter
   carries one of the last two, which is unusual and deliberate: this is the
   chapter where the reader holds all five methods, and it is the worst possible
   place to hand back a confident number.

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

   `.ev7-bar` is the loop scale in 7.3, and it is the only bar in the Academy
   that is not to scale. It cannot be. The fastest loop and the slowest are about
   three hundred million to one apart, so a true bar for the auction would be
   less than one pixel wide at any width this page can offer. The widths are
   ordered rather than proportional and the caption says so on screen, because a
   bar that quietly compresses a ratio is a bar that hides the finding.

   `.ev7-cell` is the twenty cell table in 7.1, drawn with all three options
   visible in every cell rather than behind a menu. A menu would let a reader
   skim. Three visible options make them read.

   `.ev7-cellq u` is the sorting line on 7.7's eight absences: whether the
   advertiser's own spending could ever have reached the question. It is set
   quieter than the question itself because it is the second thing to read, not
   the first.

   ONE NOTE ON `.ev7-use`. It is dense on purpose. Twelve uses of four words on
   one screen is the point of that component: a reader who has to scroll between
   two uses of the same word cannot see them collide.                          */

/* ── shared ───────────────────────────────────────────────────────────────── */
.ev7-modes, .ev7-runs, .ev7-coms { display:grid; gap:6px; margin:8px 0 }
.ev7-modes { grid-template-columns:repeat(3,1fr) }
.ev7-runs { grid-template-columns:repeat(5,1fr) }
.ev7-coms { grid-template-columns:repeat(2,1fr) }

.ev7-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 }
.ev7-opt:hover { border-color:var(--st,var(--acad-ev)) }
.ev7-opt.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev7-opt b { font-size:11.5px; line-height:1.3 }
.ev7-opt span { font-size:10.5px; color:var(--dim); line-height:1.35 }

.ev7-said, .ev7-refuse { margin:0 0 7px; font-size:12.5px; line-height:1.5 }
.ev7-said span, .ev7-refuse span {
  display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor) }
.ev7-refuse { border-left:2px solid var(--line); padding-left:9px }
.ev7-noscore { margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--floor) }
.ev7-prompt { margin:0; font-size:12px; color:var(--dim) }
.ev7-none { color:var(--floor); font-style:italic }
.ev7-alab { display:block; margin:12px 0 4px; font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }
.ev7-lab { display:block; margin:6px 0; font-size:11px; color:var(--dim) }
.ev7-lab input[type=range] { display:block; width:100%; margin-top:3px }
.ev7-lab input[type=number] { display:block; width:110px; margin-top:3px; padding:4px 6px;
  font:inherit; font-size:12px; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:6px }

.ev7-t { width:100%; border-collapse:collapse; margin:8px 0; font-size:11.5px;
  font-variant-numeric:tabular-nums }
.ev7-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 }
.ev7-t td { padding:5px 6px 5px 0; border-bottom:1px solid var(--line); vertical-align:top;
  line-height:1.4 }
.ev7-ul { margin:0; padding-left:15px }
.ev7-ul li { margin:0 0 3px; line-height:1.4 }

/* ── 7.1 · the twenty cell table ──────────────────────────────────────────── */
.ev7-grid { overflow-x:auto }
.ev7-mname { font-weight:600; white-space:nowrap; padding-right:10px }
.ev7-cell { display:block; width:100%; margin:0 0 3px; padding:5px 7px; text-align:left;
  font:inherit; font-size:10.5px; line-height:1.35; color:var(--dim); background:transparent;
  border:1px solid var(--line); border-radius:6px; cursor:pointer }
.ev7-cell:hover { border-color:var(--st,var(--acad-ev)); color:inherit }
.ev7-cell.on { color:inherit; background:var(--panel); border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }

/* ── 7.3 · the loop scale, which is ordered rather than proportional ──────── */
.ev7-loops { display:grid; gap:7px; margin:8px 0 }
.ev7-loop { position:relative; padding:8px 9px 12px; background:var(--panel);
  border:1px solid var(--line); border-radius:8px }
.ev7-loop b { display:block; font-size:12px }
.ev7-loop u { display:block; margin:1px 0 3px; font-size:11px; text-decoration:none;
  color:var(--st,var(--acad-ev)); font-variant-numeric:tabular-nums }
.ev7-loop span { display:block; font-size:10.5px; color:var(--dim); line-height:1.4 }
.ev7-bar { position:absolute; left:0; bottom:0; height:3px; background:var(--st,var(--acad-ev));
  opacity:.55; border-radius:0 0 0 8px }

/* ── 7.4 · twelve uses, dense on purpose ──────────────────────────────────── */
.ev7-uses { display:grid; gap:5px; margin:8px 0 }
.ev7-use { display:grid; grid-template-columns:130px 1fr; gap:4px 10px; align-items:start;
  padding:6px 8px; background:var(--panel); border:1px solid var(--line); border-radius:8px }
.ev7-uw b { display:block; font-size:11.5px }
.ev7-uw em { display:block; font-style:normal; font-size:10px; color:var(--floor);
  line-height:1.3 }
.ev7-ut { font-size:11.5px; line-height:1.4 }
.ev7-up { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px }
.ev7-pill { padding:3px 8px; font:inherit; font-size:10.5px; color:var(--dim);
  background:transparent; border:1px solid var(--line); border-radius:99px; cursor:pointer }
.ev7-pill:hover { border-color:var(--st,var(--acad-ev)); color:inherit }
.ev7-pill.on { color:inherit; border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }

/* ── 7.6 · six media, and what can be measured about each ─────────────────── */
.ev7-med { display:grid; gap:6px; margin:8px 0 }
.ev7-mrow { padding:8px 9px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px }
.ev7-mh { display:flex; justify-content:space-between; align-items:baseline; gap:8px }
.ev7-mh b { font-size:12px }
.ev7-mh u { font-size:12px; text-decoration:none; color:var(--st,var(--acad-ev));
  font-variant-numeric:tabular-nums }
.ev7-mm { margin:2px 0 1px; font-size:10.5px; color:var(--st,var(--acad-ev)) }
.ev7-mn { font-size:10.5px; color:var(--dim); line-height:1.4 }
.ev7-sl { display:block; width:100%; margin-top:5px }

/* ── 7.7 · the eight absences ─────────────────────────────────────────────── */
.ev7-cells { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:8px 0 }
.ev7-cellq { display:flex; flex-direction:column; gap:3px; text-align:left; padding:8px 9px;
  font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; cursor:pointer }
.ev7-cellq:hover { border-color:var(--st,var(--acad-ev)) }
.ev7-cellq.on { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev7-cellq b { font-size:11.5px; line-height:1.3 }
.ev7-cellq em { font-style:normal; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--st,var(--acad-ev)) }
.ev7-cellq u { font-size:10.5px; text-decoration:none; color:var(--floor); line-height:1.35 }
.ev7-fill { margin:4px 0 7px }

@media (max-width:760px) {
  .ev7-modes, .ev7-runs, .ev7-coms, .ev7-cells { grid-template-columns:1fr }
  .ev7-use { grid-template-columns:1fr }
}