/* CONNECTED EVIDENCE, chapter 5. Forecasts, and what they inherit.

   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 the same family as chapter 4's, one prefix along, so
   a reader moving from one chapter to the next sees one house style rather than
   two. `.ev5-opt` is the choosable card, `.ev5-t` the table that carries an
   argument, `.ev5-refuse` the panel that says no number is returned, and
   `.ev5-noscore` the line that says nothing is being ranked. All ten 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.

   `.ev5-cbar.hatched` is the part of a response curve outside the range the
   model was fitted in. It is hatched rather than coloured, because a solid bar
   out there would say the same thing as a solid bar inside, and the whole of
   5.6 is that those two regions are different kinds of claim.

   THE MODIFIER IS NOT CALLED `out`, AND THAT IS NOT A PREFERENCE. Suite 01
   reads a mounted component through `.sim .out`, takes the first match, and
   fails the module if it is empty. These bars are empty spans drawn entirely
   from CSS, so a bar carrying the bare class `out` was the first `.out` in the
   component and reported 5.6 as rendering nothing at all.

   `.ev5-blank` is an empty table cell drawn as an empty cell, used in 5.5 for
   the evidence base nobody has built. A dashed floor tells it apart from a cell
   nobody asked about.

   `.ev5-struck` is a row that has been withdrawn from a ranking rather than
   deleted from it, used in 5.7 for a forecast that was acted on. The reader has
   to see how much of the year disappears once acting is accounted for, so the
   row stays on the page and stops carrying a score.                           */

/* ── shared ───────────────────────────────────────────────────────────────── */
.ev5-toggles, .ev5-uses, .ev5-grains, .ev5-hist, .ev5-bases, .ev5-pins, .ev5-from,
.ev5-rulers, .ev5-reads, .ev5-kinds { display:grid; gap:6px; margin:8px 0 }
.ev5-toggles, .ev5-grains, .ev5-uses, .ev5-rulers { grid-template-columns:repeat(3,1fr) }
.ev5-pins, .ev5-bases, .ev5-from, .ev5-kinds, .ev5-hist,
.ev5-reads { grid-template-columns:repeat(2,1fr) }

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

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

.ev5-nav { display:flex; gap:5px; margin:8px 0; flex-wrap:wrap; align-items:center }
.ev5-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 }
.ev5-dot.sel { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev5-dot.done { color:var(--st,var(--acad-ev)) }
.ev5-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 }
.ev5-nb:disabled { opacity:.45; cursor:default }
.ev5-count { font-size:10.5px; color:var(--floor) }

/* ── the tables that carry the argument ───────────────────────────────────── */
.ev5-t { width:100%; border-collapse:collapse; margin:8px 0; font-size:11.5px;
  font-variant-numeric:tabular-nums }
.ev5-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 }
.ev5-t td { padding:5px 6px 5px 0; border-bottom:1px solid var(--line); vertical-align:top;
  line-height:1.4 }
.ev5-t tr.ev5-hit td { background:var(--panel) }
.ev5-t tr.ev5-struck td { opacity:.5; text-decoration:line-through }
.ev5-t tr.ev5-struck td:last-child { text-decoration:none }
.ev5-blank { border-bottom:1px dashed var(--line) }
.ev5-blank:empty::after { content:''; display:block; height:16px }

/* ── 5.0A and 5.3, the bars ───────────────────────────────────────────────── */
.ev5-bars { display:flex; align-items:flex-end; gap:2px; height:60px; margin:8px 0 0;
  padding-bottom:2px; border-bottom:1px solid var(--line) }
.ev5-bar { flex:1 1 auto; background:var(--st,var(--acad-ev)); opacity:.72; border-radius:2px 2px 0 0 }
.ev5-bar.neg { opacity:.32 }
.ev5-scale { display:flex; justify-content:space-between; margin:6px 0 0; font-size:10px;
  color:var(--floor) }

/* ── 5.0B, the two calendars ──────────────────────────────────────────────── */
.ev5-cals { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:8px 0 }
.ev5-cal h6 { margin:0 0 6px; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--st,var(--acad-ev)) }
.ev5-step { padding:5px 8px; margin:0 0 4px; font-size:11px; line-height:1.35;
  background:var(--panel); border:1px solid var(--line); border-radius:7px; opacity:.5 }
.ev5-step.done { opacity:.8 }
.ev5-step.on { opacity:1; border-color:var(--st,var(--acad-ev)) }
.ev5-step span { display:block; margin-top:3px; font-size:10.5px; color:var(--dim) }
.ev5-step.blank { border-style:dashed; color:var(--floor) }

/* ── 5.1, the twelve movements ────────────────────────────────────────────── */
.ev5-rows { display:grid; gap:5px; margin:8px 0 }
.ev5-row { display:grid; grid-template-columns:1.2fr 1.4fr; gap:8px; align-items:start;
  padding:5px 0; border-bottom:1px solid var(--line) }
.ev5-rt { font-size:11.5px; line-height:1.4 }
.ev5-rp { display:flex; gap:4px; flex-wrap:wrap }
.ev5-rw { grid-column:1 / -1; font-size:10.5px; line-height:1.45; color:var(--dim) }
.ev5-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 }
.ev5-pill:hover { border-color:var(--st,var(--acad-ev)) }
.ev5-pill.on { border-color:var(--st,var(--acad-ev)); color:var(--st,var(--acad-ev)) }

/* ── 5.6, the curve and its band ──────────────────────────────────────────── */
.ev5-lab { display:block; margin:8px 0 4px; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--floor) }
.ev5-lab input { display:block; width:100%; margin-top:5px }
.ev5-cbars { display:flex; align-items:flex-end; gap:1px; height:80px; margin:8px 0 0;
  border-bottom:1px solid var(--line) }
.ev5-cbar { flex:1 1 auto; background:var(--st,var(--acad-ev)); opacity:.7;
  border-radius:2px 2px 0 0 }
.ev5-cbar.hatched { background:repeating-linear-gradient(45deg,
  var(--line) 0 3px, transparent 3px 6px); opacity:1; border:1px solid var(--line);
  border-bottom:0 }
.ev5-cbar.here { outline:2px solid var(--st,var(--acad-ev)); outline-offset:1px }

/* ── 5.8, the twenty ranges ───────────────────────────────────────────────── */
.ev5-cells { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; margin:8px 0 }
.ev5-cell { padding:6px 2px; font:inherit; font-size:10.5px; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; cursor:pointer }
.ev5-cell u { display:block; margin-top:2px; font-size:9px; text-decoration:none;
  color:var(--floor) }
.ev5-cell.hit { border-color:var(--st,var(--acad-ev)) }
.ev5-cell.miss { border-style:dashed; opacity:.7 }

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ev5-toggles, .ev5-grains, .ev5-uses, .ev5-rulers, .ev5-pins, .ev5-bases, .ev5-from,
  .ev5-kinds, .ev5-hist, .ev5-reads, .ev5-cals { grid-template-columns:1fr }
  .ev5-row { grid-template-columns:1fr }
  .ev5-cells { grid-template-columns:repeat(5,1fr) }
}