/* Dashboard-specific styles */

/* The compliance status cards. The row is sized by a minimum card width rather than a column
   count, so a card added later joins the row without touching this file, and the cards stack
   when the viewport is too narrow to hold them side by side. The minimum is what one card needs
   to keep its ring beside its legend: the 108px ring, the gap, the longest label next to its
   count, and the card's own padding and border. Three of them need a 1280px viewport; below that
   the third card takes a row of its own rather than all three squeezing. */
.status-card-grid {
  display: grid;
  gap: var(--size-4);
  grid-template-columns: repeat(auto-fit, minmax(var(--size-80), 1fr));
}

/* The Dashboard's two columns: the list of what needs attention, and beside it the Education
   calendar. Both columns are fluid and the rail takes a little over a third, so a schedule row
   reads on one line instead of wrapping its name and its timing. Each column starts at the top,
   so the two headings sit level however long the list runs. */
.dashboard-grid {
  align-items: start;
  column-gap: var(--size-12);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  margin-block-start: var(--size-10);
}

/* Placed by a class rather than by the order of the markup, so the column a thing sits in and the
   order a narrow viewport stacks them in cannot drift apart. */
.dashboard-grid__main {
  grid-column: 1;
}

.dashboard-grid__rail {
  grid-column: 2;
}

/* One explicit column, which the rail has to be put back into: left in the second it would open an
   implicit column beside the list rather than stacking under it. */
@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    row-gap: var(--size-8);
  }

  .dashboard-grid__rail {
    grid-column: 1;
  }
}

.status-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}

.status-card__title {
  align-items: center;
  display: flex;
  gap: var(--size-2);
  margin: 0;
}

.status-card__body {
  align-items: center;
  display: flex;
  gap: var(--size-4);
}

/* Too narrow to hold the ring beside its legend: stack them rather than squeeze the labels. A size
   query measures the card's content box, and the grid's narrowest column leaves 286px inside the
   card's padding and border, so a card in the grid never reaches this — only a viewport narrower
   than a phone's does. Widen the card's padding and this margin narrows with it. */
@container (width < 280px) {
  .status-card__body {
    flex-direction: column;
  }

  .status-card__legend {
    flex: none;
    inline-size: 100%;
  }
}

.status-card__gauge {
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
}

.status-card__ring {
  display: block;
  transform: rotate(-90deg); /* The arcs are laid out from twelve o'clock. */
}

.status-card__ring circle {
  fill: none;
}

.status-card__track {
  stroke: var(--color-border-light);
}

.status-card__arc {
  stroke: var(--status-tone);
}

/* The headline reads from the middle of the ring. */
.status-card__headline {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  line-height: 1;
  margin: 0;
  position: absolute;
  text-align: center;
}

.status-card__percentage {
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-bold);
  letter-spacing: -0.025em;
}

.status-card__caption {
  color: var(--color-text-subtle);
  font-size: 0.625rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.11em;
  margin-block-start: var(--size-1);
  text-transform: uppercase;
}

.status-card__legend {
  display: flex;
  flex: 1;
  flex-direction: column;
  list-style: none;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
}

.status-card__legend-row {
  align-items: center;
  border-block-end: var(--border) solid var(--color-border-light);
  column-gap: var(--size-2);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-block: var(--size-2);
}

.status-card__legend-row:last-child {
  border-block-end: 0;
}

.status-card__dot {
  background-color: var(--status-tone);
  block-size: 9px;
  border-radius: var(--rounded-full);
  inline-size: 9px;
}

.status-card__legend-label {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.status-card__legend-count {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
}

/* A group with a tone wears it on its heading and on the icon of each of its rows, but not on the
   rows' own words. A group with no tone keeps a plain heading and plain icons. */
.attention-list__group:is(.tone--warn, .tone--alert) {
  --icon-color: var(--status-tone);
}

.attention-list__group:is(.tone--warn, .tone--alert) .attention-list__group-heading {
  color: var(--status-tone);
}

/* The calendar is a week to read, not a list to work through, so it sits in a recessed tray. */
.education-calendar {
  background-color: color-mix(in oklab, var(--color-secondary) 55%, transparent);
  border: var(--border) solid var(--color-border-light);
  border-radius: var(--rounded-2xl);
  padding: var(--size-4);
}

.education-calendar__group-heading {
  margin-block: var(--size-4) var(--size-2);
}

.education-calendar__group:first-of-type .education-calendar__group-heading {
  margin-block-start: 0;
}

/* Flat rows on the tray's tint: no card frame of their own, just a hairline between them. The
   borderless row already draws a transparent border, so colouring its top edge adds the rule
   without moving anything. */
.education-calendar .list {
  --list-gap: 0;
}

.education-calendar .list-row {
  padding: var(--size-2_5) var(--size-1_5);
}

.education-calendar .list-row + .list-row {
  border-block-start-color: var(--color-border);
}