/* The benchmarks page. era.css carries the sheet, type and panels; this file is
   only the result summary, estimate rows and expanded audit trail. */

/* ---------- summary tiles ---------- */
/* Six of them. Auto-fit packed five across at this sheet width and left the sixth alone against an
   empty half-row, so the board opens on two even rows of three instead. */
@media(min-width:760px){
  #board .tiles{grid-template-columns:repeat(3,1fr)}
  #board .tile:nth-child(3n){border-right:none}
  #board .tile:nth-child(-n+3){border-bottom:1px solid var(--rule)}
}

/* ---------- estimate rows ---------- */
.board{border:1px solid var(--line);margin:0 0 26px}
.board-row{
  display:grid;
  grid-template-columns:180px 1fr 160px;
  gap:14px;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--rule);
}
.board-row:last-child{border-bottom:none}
/* `hrow`, not `head`: era.css owns that name as a page-wide type utility. */
.board-row.hrow{
  background:var(--sheet-3);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}
/* Narrow: the outcome bar goes, leaving the score and interval readable. */
@media(max-width:820px){
  .board-row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:9px}
  .board-row .outcomes,.board-row .h-out{display:none}
}
.board-row .mdl b{font-size:13px;font-weight:600;display:block;overflow-wrap:anywhere}
.board-row .mdl span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}

/* The accuracy bar, with the 95% interval as a whisker beneath it rather than shaded over it:
   the estimate is a point and the interval is the claim, and overlaying them hides both. */
.acc-line{display:grid;grid-template-columns:minmax(0,1fr) 50px;gap:8px;align-items:center}
.acc{position:relative;height:21px;border:1px solid var(--line);background:var(--sheet-low)}
.acc .fill{position:absolute;inset:0 auto 0 0;background:var(--orange)}
.acc-line .pct{font-family:var(--mono);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.whisk{position:relative;height:9px;margin-top:2px;margin-right:58px}
.whisk .line{position:absolute;top:3px;height:2px;background:var(--ink-soft)}
.whisk .cap{position:absolute;top:0;width:2px;height:8px;background:var(--ink-soft)}
/* The accuracy axis, printed once under the board rather than on every row. */
.acc-scale{display:grid;grid-template-columns:180px 1fr 160px;gap:14px;padding:0 16px 11px}
.acc-scale div:nth-child(2){display:flex;justify-content:space-between;padding-right:58px;font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
@media(max-width:820px){.acc-scale{display:none}}

/* ---------- stacked outcome bar ---------- */
.outcomes{display:flex;height:16px;border:1px solid var(--line);background:var(--sheet-low);overflow:hidden}
.outcomes i{display:block;height:100%}
.outcomes i.ok{background:var(--orange)}
.outcomes i.wrong{background:var(--ink)}
.outcomes i.abs{background:var(--teal)}
.outcomes i.fmt{background:repeating-linear-gradient(45deg,var(--error),var(--error) 3px,var(--sheet-low) 3px,var(--sheet-low) 6px)}
.outcomes i.inc{background:repeating-linear-gradient(45deg,var(--ink-soft),var(--ink-soft) 2px,var(--sheet-low) 2px,var(--sheet-low) 5px)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--ink-soft);margin-top:12px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border:1px solid var(--line);display:block}
.legend i.ok{background:var(--orange)}
.legend i.wrong{background:var(--ink)}
.legend i.abs{background:var(--teal)}
.legend i.fmt{background:repeating-linear-gradient(45deg,var(--error),var(--error) 3px,var(--sheet-low) 3px,var(--sheet-low) 6px)}
.legend i.inc{background:repeating-linear-gradient(45deg,var(--ink-soft),var(--ink-soft) 2px,var(--sheet-low) 2px,var(--sheet-low) 5px)}

/* ---------- concise findings and spend ---------- */
.findings{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.findings>div{padding:16px 18px;border-right:1px solid var(--rule)}
.findings>div:last-child{border-right:none}
.findings b{font-size:13px}
.findings p{font-size:12px;line-height:1.65;color:var(--ink-soft);margin-top:7px}
.spend-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-bottom:14px}
.spend-grid div{padding:14px 16px;border-right:1px solid var(--rule)}
.spend-grid div:last-child{border-right:none}
.spend-grid b{display:block;font-family:var(--mono);font-size:24px;color:var(--orange)}
.spend-grid span{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:720px){
  .findings,.spend-grid{grid-template-columns:1fr}
  .findings>div,.spend-grid div{border-right:none;border-bottom:1px solid var(--rule)}
  .findings>div:last-child,.spend-grid div:last-child{border-bottom:none}
}

/* ---------- capability grid ---------- */
.grid-scroll{overflow-x:auto}
.capgrid{border-collapse:collapse;font-size:12px;min-width:520px}
.capgrid th,.capgrid td{border:1px solid var(--rule);padding:0}
.capgrid thead th{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:400;padding:8px 9px;text-align:left;vertical-align:bottom;
}
.capgrid tbody th{
  font-weight:400;font-size:11.5px;text-align:left;padding:7px 10px;color:var(--ink-soft);
  white-space:nowrap;
}
.capgrid td{text-align:center;font-variant-numeric:tabular-nums;padding:7px 6px;color:var(--ink)}
.capgrid td.none{color:var(--ink-soft)}

/* ---------- expanded audit trail ---------- */
.report-details{padding:0}
.report-details>summary{
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:17px 20px;cursor:pointer;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
}
.report-details>summary::-webkit-details-marker{display:none}
.report-details>summary::before{content:'+';font-size:18px;line-height:1}
.report-details[open]>summary::before{content:'−'}
.report-details>summary span{margin-right:auto}
.report-details>summary small{font-size:10px;color:var(--ink-soft);letter-spacing:.08em}
.report-body{border-top:1px solid var(--rule);padding:18px 20px 22px}
.report-body h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin:24px 0 9px}
.report-body h3:first-child{margin-top:0}
.capgrid.estate{min-width:320px}
#board .code{
  display:block;background:var(--sheet-low);border:1px solid var(--line);box-shadow:4px 4px 0 rgba(0,0,0,.35);
  color:var(--ink);font-family:var(--mono);padding:14px 16px;overflow-x:auto;
  font-size:11.5px;line-height:1.75;margin:12px 0;white-space:pre;
}
#board .code em{font-style:normal;color:var(--blueprint)}
.prose{font-size:13px;color:var(--ink-soft);line-height:1.8;max-width:76ch}
.prose+.prose{margin-top:12px}
.prose b{color:var(--ink)}
.prose a{color:var(--orange)}
.prose code{font-family:var(--mono);font-size:12px;color:var(--orange);background:var(--sheet-low);padding:1px 5px}
.q-list{margin:8px 0 0;padding:0;list-style:none;font-size:12px;color:var(--ink-soft)}
.q-list li{padding:7px 0;border-bottom:1px dashed var(--rule);display:grid;grid-template-columns:250px 1fr;gap:12px}
.q-list li:last-child{border-bottom:none}
@media(max-width:640px){.q-list li{grid-template-columns:1fr;gap:2px}}
.q-list code{font-family:var(--mono);color:var(--orange);font-size:11.5px}
details.drop{border:1px dashed var(--line);padding:12px 15px;margin:14px 0 0}
details.drop summary{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);cursor:pointer}
details.drop[open] summary{margin-bottom:12px}
.excl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.excl code{font-family:var(--mono);font-size:11px;color:var(--ink-soft);border:1px solid var(--rule);padding:2px 7px}
.stamp{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  border-top:1px dashed var(--rule);padding-top:12px;margin-top:8px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}