/* il-overview.css — the Overview's layout, after the redesign in
   app.js::renderDashboard (you first, then the matrix, then the universe).
   Scoped to #dashboardBody so nothing else in the terminal moves. */

/* This morning, at a third of the width: four figures as a 2 x 2 rather than
   a column of four, so it stands the same height as the run beside it. */
#dashboardBody [data-span="4"] .il-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
}
#dashboardBody [data-span="4"] .il-stat-note { font-size: 12px; }

/* The matrix: the chart draws at the host's width; the legend sits tight
   under it rather than a paragraph away. */
#dashboardBody .dash-matrix { margin: 0 -4px; }
#dashboardBody .dash-matrix-legend { margin-top: .2rem; }

/* Reporting soon, in a third-width card. Four columns (days, name and date,
   verdict, freshness) wrapped the verdict pill and the date onto two lines
   each. Two rows inside the tile instead: days on the left spanning both,
   name over date in the middle, verdict over freshness on the right. */
#dashboardBody .calrow {
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto; row-gap: .15rem;
}
#dashboardBody .calrow > .days { grid-row: 1 / span 2; }
#dashboardBody .calrow > div:nth-child(2) { grid-row: 1 / span 2; min-width: 0; }
#dashboardBody .calrow > div:nth-child(3) { grid-column: 3; grid-row: 1; justify-self: end; }
#dashboardBody .calrow > div:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; }
#dashboardBody .calrow .small { white-space: nowrap; }
#dashboardBody .calrow .verdict { white-space: nowrap; }

/* Cards that share a row share a height. The run (short when nothing is
   held) stopped 100px above the counts beside it, and the levels card ended
   halfway down the calendar next to it: a ragged row reads as unfinished. */
#dashboardBody .il-grid > .card { align-self: stretch; }