/* CONNECTED EVIDENCE, chapter 1. The number all five run on.

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

   Three shared shapes do most of the work here, so they are declared once:
   `.ev1-pick` for a grid of choosable cards, `.ev1-big` for the one number a
   component is about, and `.ev1-noscore` for the line that says there is no
   right answer. Four of the seven carry that last one, which is the chapter. */

/* ── shared ───────────────────────────────────────────────────────────────── */
.ev1-big { margin:6px 0 2px; font-size:30px; line-height:1; font-variant-numeric:tabular-nums }
.ev1-big em { font-style:normal; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--floor); margin-left:7px }
.ev1-cap { margin:0 0 8px; font-size:12px; line-height:1.5; color:var(--dim) }
.ev1-noscore { margin:10px 0 0; font-size:11.5px; line-height:1.5; color:var(--floor);
  border-top:1px solid var(--line); padding-top:8px }
.ev1-you, .ev1-usual, .ev1-slow, .ev1-scope, .ev1-has, .ev1-gap, .ev1-cant, .ev1-jrisk {
  margin:0 0 7px; font-size:12.5px; line-height:1.5 }
.ev1-you span, .ev1-usual span, .ev1-slow span, .ev1-scope span, .ev1-has span, .ev1-gap span,
.ev1-cant span, .ev1-jrisk span {
  display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor) }
.ev1-real { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--dim) }

/* ── 1.0A four desks ──────────────────────────────────────────────────────── */
.ev1-calls { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:8px 0 }
.ev1-call { 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 }
.ev1-call:hover { border-color:var(--st,var(--acad-ev)) }
.ev1-call.sel { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev1-call.done { opacity:.72 }
.ev1-call span { display:block; margin-top:4px; font-size:10px; color:var(--floor) }
.ev1-desks { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0 }
.ev1-desk { display:flex; flex-direction:column; gap:3px; text-align:left; padding:8px 9px;
  font:inherit; color:inherit; background:var(--panel2,var(--panel));
  border:1px dashed var(--line); border-radius:8px; cursor:pointer }
.ev1-desk:hover { border-color:var(--st,var(--acad-ev)); border-style:solid }
.ev1-desk b { font-size:11.5px; line-height:1.25 }
.ev1-desk span { font-size:10.5px; color:var(--dim); line-height:1.35 }

/* ── 1.0B four setups, one week ───────────────────────────────────────────── */
.ev1-4opts { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 }
.ev1-4o.on { border-color:var(--st,var(--acad-ev)); color:var(--ink) }
.ev1-4grid { margin:10px 0 }
/* THE HEADER AND THE ROWS ARE TWO SEPARATE GRIDS AND THEY MUST RESOLVE TO THE
   SAME COLUMN WIDTHS, or the day names stop naming the bars underneath them.
   `1fr` is `minmax(auto,1fr)`, so no track can shrink below its own content's
   min-content width — and the two grids have different content. The header's
   narrowest cell is a day name ("WED" at 9.5px ≈ 20px); a row's is a three
   digit number in a centred flex column (16px). Above about 400px there is
   slack and both grids land on the same numbers, so this looks fine. At 360px,
   the common Android viewport, the header tracks stay content-sized while the
   row tracks collapse to 16px, and the labels drift up to 10.5px — more than
   half a column. Thursday's label sits over Wednesday's bar and the exhibit
   reads as something it does not say. `minmax(0,1fr)` removes the content floor
   so both grids are resolved by the available space alone and cannot disagree.
   Found by the first real-render pass; jsdom has no layout engine and every
   suite was green. */
.ev1-4head, .ev1-4row { display:grid;
  grid-template-columns:150px repeat(7,minmax(0,1fr)) 52px;
  align-items:end; gap:4px }
.ev1-4head { margin-bottom:4px }
.ev1-4head span { font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor); text-align:center }
.ev1-4head span:first-child, .ev1-4head span:last-child { text-align:right }
.ev1-4row { margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line) }
.ev1-4lab { font-size:11px; color:var(--dim); line-height:1.3; align-self:center }
.ev1-4cell { display:flex; flex-direction:column; align-items:center; gap:2px }
.ev1-4cell i { display:block; width:100%; border-radius:2px 2px 0 0; min-height:2px;
  background:linear-gradient(180deg,var(--st,var(--acad-ev)),var(--acad-ev)) }
.ev1-4cell u { text-decoration:none; font-size:9.5px; color:var(--floor);
  font-variant-numeric:tabular-nums }
.ev1-4tot { font-size:14px; text-align:right; align-self:center;
  font-variant-numeric:tabular-nums }
.ev1-4says { margin:6px 0 6px; font-size:13px; line-height:1.55 }
.ev1-4why { margin:0 0 6px; font-size:12px; line-height:1.5; color:var(--dim) }
.ev1-4why span { display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--floor) }

/* ── 1.1 one report, five sources ─────────────────────────────────────────── */
.ev1-src { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:8px 0 }
.ev1-s { 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; opacity:.45 }
.ev1-s.on { opacity:1; border-color:var(--st,var(--acad-ev)) }
.ev1-s b { font-size:11px; line-height:1.25 }
.ev1-s span { font-size:10px; color:var(--floor); font-variant-numeric:tabular-nums }
.ev1-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px }
.ev1-age, .ev1-where { padding:10px 12px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px }
.ev1-moves { margin:0 0 7px; font-size:12px; line-height:1.5; color:var(--dim) }
.ev1-tog { display:flex; gap:6px; margin:0 0 6px }
.ev1-t { font-size:11px }
.ev1-t.on { border-color:var(--st,var(--acad-ev)); color:var(--ink) }

/* ── 1.2 break the join ───────────────────────────────────────────────────── */
.ev1-keys { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:8px 0 }
.ev1-k { text-align:left; padding:8px 9px; font:inherit; font-size:11.5px; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; cursor:pointer }
.ev1-k:hover { border-color:var(--st,var(--acad-ev)) }
.ev1-k.sel { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev1-jbar { margin:10px 0 }
.ev1-jr { display:grid; grid-template-columns:150px 1fr 40px; align-items:center; gap:8px;
  margin:0 0 5px }
.ev1-jr span { font-size:11px; color:var(--dim) }
.ev1-jr i { display:block; height:14px; border-radius:3px; min-width:2px;
  background:var(--line); transition:width .25s }
.ev1-jr u { text-decoration:none; font-size:12px; text-align:right;
  font-variant-numeric:tabular-nums }
.ev1-jr.out i { background:linear-gradient(90deg,var(--acad-ev),var(--st,var(--acad-ev))) }
.ev1-jr.out.up u { font-weight:700 }
.ev1-jwhat { margin:8px 0 6px; font-size:13px; line-height:1.55 }
.ev1-jnone { margin:10px 0 0; padding:9px 11px; border:1px dashed var(--line); border-radius:8px }
.ev1-jnone b { display:block; font-size:12px; margin-bottom:4px }
.ev1-jnone p { margin:0; font-size:11.5px; line-height:1.5; color:var(--dim) }

/* ── 1.3 read it on the wrong day ─────────────────────────────────────────── */
.ev1-days { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; margin:10px 0;
  align-items:end }
.ev1-day { display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:2px; padding:6px 3px; font:inherit; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; cursor:pointer; min-height:78px }
.ev1-day:hover { border-color:var(--st,var(--acad-ev)) }
.ev1-day.sel { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev1-day.settle { border-style:dashed; border-color:var(--st,var(--acad-ev)) }
.ev1-day.none { opacity:.5 }
.ev1-day i { display:block; width:100%; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--st,var(--acad-ev)),var(--acad-ev)) }
.ev1-day u { text-decoration:none; font-size:9.5px; color:var(--floor);
  font-variant-numeric:tabular-nums }
.ev1-day b { font-size:9px; letter-spacing:.03em; text-transform:uppercase; color:var(--dim) }
.ev1-null { margin:6px 0; font-size:12.5px; line-height:1.55; color:var(--dim) }
.ev1-warn { margin:10px 0 0; font-size:12px; line-height:1.5; padding-top:8px;
  border-top:1px solid var(--line) }

/* ── 1.4 buy it or build it ───────────────────────────────────────────────── */
.ev1-caps { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0 }
.ev1-cap-b { 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 }
.ev1-cap-b:hover { border-color:var(--st,var(--acad-ev)) }
.ev1-cap-b.sel { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev1-routes { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 0 }
.ev1-route { padding:10px 12px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px }
.ev1-route h6 { margin:0 0 5px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--floor) }
.ev1-route p { margin:0 0 7px; font-size:12.5px; line-height:1.5 }

/* ── 1.5 who could stop this ──────────────────────────────────────────────── */
.ev1-cases { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:8px 0 }
.ev1-case { 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 }
.ev1-case:hover { border-color:var(--st,var(--acad-ev)) }
.ev1-case.sel { border-color:var(--st,var(--acad-ev));
  box-shadow:inset 0 0 0 1px var(--st,var(--acad-ev)) }
.ev1-case.done { opacity:.72 }
.ev1-bodies { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 }
.ev1-body { padding:6px 10px; font:inherit; font-size:11px; color:inherit;
  background:var(--panel2,var(--panel)); border:1px dashed var(--line); border-radius:20px;
  cursor:pointer }
.ev1-body:hover { border-color:var(--st,var(--acad-ev)); border-style:solid }
.ev1-nobody { border-style:solid }
.ev1-empty { margin:8px 0; padding:9px 11px; border:1px dashed var(--line); border-radius:8px }
.ev1-empty b { display:block; font-size:12px; margin-bottom:4px }
.ev1-empty p { margin:0; font-size:11.5px; line-height:1.5; color:var(--dim) }

@media (max-width:760px) {
  .ev1-calls, .ev1-keys, .ev1-cases { grid-template-columns:1fr }
  .ev1-desks, .ev1-src, .ev1-caps { grid-template-columns:repeat(2,1fr) }
  .ev1-two, .ev1-routes { grid-template-columns:1fr }
  .ev1-4head, .ev1-4row { grid-template-columns:100px repeat(7,minmax(0,1fr)) 44px }
  .ev1-days { grid-template-columns:repeat(5,1fr) }
}

/* Below about 400px the seven day columns are what runs out of room first.
   Aligning them was the correctness fix above; this is the legibility one.
   With a 100px row label and a 44px total, a 360px viewport leaves 16px per
   day, and "WED" at 9.5px uppercase needs 20px — so the labels overflow their
   own tracks and run into each other, and MON TUE WED THU reads as MONTUE
   WEDTHU. Correctly aligned and still unreadable is not a fix. The row label
   and the total give up the difference: they are the two columns that can
   afford it, because the label already wraps and the total is four digits at
   14px. Do not shrink the day names instead — 9.5px is already the second
   smallest type in this Academy and under 9px a phone stops being readable. */
@media (max-width:400px) {
  .ev1-4head, .ev1-4row { grid-template-columns:72px repeat(7,minmax(0,1fr)) 38px;
    gap:3px }
  .ev1-4head span { letter-spacing:0 }
  .ev1-4tot { font-size:13px }
}