/**
 * dashboard — the desk.
 *
 * Six to eight plates, each one a piece of work with a way into it. The visual job of
 * this screen is to let someone standing up read the counts, and let someone sitting
 * down read the sentences under them.
 *
 * Nothing here is a chart. A sparkline would be the only thing on this screen that
 * cannot be clicked into a queue, and a number nobody can act on is not work.
 */

#view-dashboard #dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--md);
  margin: var(--md) 0 var(--lg);
}

/* A document plate, the same object the registers use: hard offset, zero blur, and
   the trim marks that say this is a printed sheet rather than a card. */
#view-dashboard .dash-tile {
  position: relative;
  background: var(--paper-lit);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  padding: var(--md);
  margin: 0 3px 3px 0;
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  min-width: 0;
}
#view-dashboard .dash-tile::before,
#view-dashboard .dash-tile::after {
  content: '+';
  position: absolute;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1;
  color: var(--rule);
}
#view-dashboard .dash-tile::before { top: 4px; left: 5px; }
#view-dashboard .dash-tile::after { top: 4px; right: 5px; }

#view-dashboard .dash-tile h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-secondary);
}

/* The count is the one thing readable across a room. Above 24px, so on the single
   tile that carries the primary action it may take Marking Orange. */
#view-dashboard .dash-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#view-dashboard .dash-tile-primary .dash-count { color: var(--mark); }
#view-dashboard .dash-tile-urgent { border-left: 3px solid var(--mark-ink); }

#view-dashboard .dash-detail {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

/* The named items behind the count. Four at most: this is a pointer to the queue,
   not a second copy of it. */
#view-dashboard .dash-lines {
  margin: var(--xs) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
#view-dashboard .dash-lines li {
  padding: var(--xs) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

#view-dashboard .dash-tile button {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--sm);
}

/* --------------------------------------------------------------------------
   Loading

   Each request on this screen owns a slot, and the slot is placed before its answer
   arrives so the grid is the right shape from the first frame. `display: contents`
   keeps the wrapper out of the layout: the plates inside it are still the grid's own
   children, so the columns are the same whether a slot holds one plate or three.
   -------------------------------------------------------------------------- */

#view-dashboard .dash-slot { display: contents; }

/* A plate with the shape of a tile and none of its content. The bones are the `.sh-bone`
   primitive from shell.css, sized here: the count keeps its full line so the plate is
   the height it will be when filled and nothing below it moves when the number lands.

   Nothing on the plate moves. The one animated thing while this screen loads is the
   progress rule under the header — a grid of eight plates each shimmering four bars is
   a busy screen pretending to be a fast one. */
#view-dashboard .dash-tile-loading .dash-count { min-height: 2.5rem; }
#view-dashboard .dash-tile-loading h3 .sh-bone { width: 9ch; }
#view-dashboard .dash-tile-loading .dash-count .sh-bone {
  height: 2rem;
  width: 3ch;
  margin: 0;
}
#view-dashboard .dash-tile-loading .dash-detail .sh-bone-short { width: 62%; }

/* A role with nothing on this desk is told which roles hold the rest, rather than
   being shown an empty screen and left to guess. */
#view-dashboard .dash-none {
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink);
  padding: var(--sm) var(--md);
  max-width: 66ch;
  line-height: 1.55;
}

#view-dashboard #dash-open h3 { margin-bottom: var(--sm); }

@media (max-width: 40rem) {
  #view-dashboard #dash-tiles { grid-template-columns: 1fr; }
  #view-dashboard .dash-count { font-size: 2rem; }
}