/* Spurs at a glance: a row per location with the four numbers to tap, on the
   full page, on Home's compact card and on Spurs's own page. The same tokens as
   the stat tiles (cards, line, muted, warn), so it reads as part of the kit.
   Two across on a phone, four across from an upright iPad; a single location
   (or the total) is drawn a size up with .glance-big. */
.glance-places { display: grid; gap: 0.75rem; }
.glance-place {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-card);
}
.glance-place-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.glance-place-name { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--color-ink); }
.glance-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 48rem) {
  .glance-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.glance-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: inherit;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  /* The tile is the size its figure is measured against (below). */
  container-type: inline-size;
}
a.glance-cell { transition: box-shadow 0.15s, border-color 0.15s, background 0.15s; }
a.glance-cell:hover { background: var(--color-accent-soft); border-color: var(--color-line-strong); }
.glance-cell-label { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--color-muted); }
.glance-cell-value {
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  white-space: nowrap;
}
/* A long figure (seven characters or more, marked by glance_cell) steps down
   with its tile, as the stat tiles' do, so "$15,746.70" fits two across on a
   phone; a short one keeps the full size. A browser without container units
   keeps the plain size (the declaration is dropped). */
.glance-cell-value[data-long] { font-size: min(1.375rem, 14cqi); }
.glance-cell-sub { font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); overflow-wrap: anywhere; }
.glance-cell-words { font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
/* A truck needs room for a day, a time and a driver: it never wraps a figure. */
.glance-cell-truck { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .glance-cell-truck { grid-column: auto; }
}
/* An install in the next three days with no truck: amber, with its words and
   a mark beside it, never colour alone. */
.glance-warn { color: var(--color-warn); background: var(--color-warn-soft); border-color: var(--color-warn-fill); }
a.glance-warn:hover { background: var(--color-warn-soft); border-color: var(--color-warn); }
.glance-warn .glance-cell-words, .glance-warn .glance-cell-sub { color: var(--color-warn); }
.glance-warn-line { display: flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; }
.glance-warn-line svg { flex: none; width: 1.125rem; height: 1.125rem; }
/* A tile's own link is a whole 44px tap (live critique 27 Oct: 22px). */
a.glance-cell-sub { display: inline-flex; align-items: center; min-height: 2.75rem; }
.glance-quiet { color: var(--color-muted); }
/* A place (or the whole page) with nothing to show: one plain line, not a wall of $0. */
.glance-nothing { margin: 0; font-size: 1rem; line-height: 1.5rem; color: var(--color-muted); overflow-wrap: anywhere; }
.glance-run { display: flex; flex-direction: column; gap: 0.125rem; min-height: 2.75rem; justify-content: center; color: inherit; border-radius: 0.375rem; }
.glance-run:hover .glance-cell-words { text-decoration: underline; text-underline-offset: 2px; }
/* The single location: the numbers a size up (the roomier tile only from an
   upright iPad; on a phone the figure needs the width). */
.glance-big .glance-cell-value { font-size: var(--text-number); line-height: var(--text-number--line-height); }
.glance-big .glance-cell-value[data-long] { font-size: min(var(--text-number), 14cqi); }
@media (min-width: 48rem) {
  .glance-big .glance-cell { padding: 1rem 1.25rem; }
}
.glance-total { background: var(--color-accent-soft); }
.glance-months { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.glance-months > span:first-child { margin-right: 0.25rem; font-weight: 600; }
.glance-month { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0 0.375rem; border-radius: 0.375rem; color: inherit; font-variant-numeric: tabular-nums; }
a.glance-month { color: var(--color-accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
a.glance-month:hover { background: var(--color-accent-soft); }
.glance-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
/* HOME'S CARD (.glance-compact): the same four numbers a size down and
   without the tiles' boxes, one line a location from an upright iPad (the
   name, then its four numbers), so the card is a glance and not a second page
   on Home. On a phone the counts and ages under a figure are the full page's;
   the truck keeps its line (which truck, or what still needs one). */
.glance-compact { gap: 0; }
.glance-compact .glance-place {
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: none;
}
.glance-compact .glance-place:first-child { border-top: 0; }
.glance-compact .glance-total { background: var(--color-accent-soft); border-radius: 0.5rem; }
.glance-compact .glance-total + .glance-place { border-top: 0; }
.glance-compact .glance-place-name { font-size: 1rem; line-height: 1.375rem; }
.glance-compact .glance-cells { gap: 0.25rem 0.5rem; }
.glance-compact .glance-cell { padding: 0.25rem 0.5rem; background: none; border-color: transparent; }
.glance-compact a.glance-cell:hover { background: var(--color-accent-soft); border-color: var(--color-line); }
.glance-compact .glance-warn { background: var(--color-warn-soft); border-color: var(--color-warn-fill); }
.glance-compact .glance-cell-label { font-size: 0.75rem; line-height: 1rem; }
.glance-compact .glance-cell-value { font-size: 1.0625rem; line-height: 1.5rem; }
.glance-compact .glance-cell-value[data-long] { font-size: min(1.0625rem, 13cqi); }
.glance-compact .glance-cell-words { font-size: 0.9375rem; line-height: 1.25rem; }
.glance-compact .glance-cell-sub { font-size: 0.75rem; line-height: 1rem; }
@media (max-width: 47.99rem) {
  .glance-compact .glance-cell:not(.glance-cell-truck) .glance-cell-sub { display: none; }
}
@media (min-width: 48rem) {
  .glance-compact .glance-place { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; }
}
.glance-stops { margin: 0.375rem 0 0; padding-left: 1.25rem; font-size: 0.875rem; color: var(--color-muted); }
.glance-stops li + li { margin-top: 0.125rem; }

/* Home's third card, Spurs and money: the billed and outstanding figures side by
   side and the truck under them, inside the card (so no box of their own), at
   any width. The earlier months and the unbilled orders are the full page's. */
/* The card has no place name beside the figures, so the place is one column
   at every width (the compact card's "name, then four numbers" grid from an
   upright iPad squeezed the figures into the name's 8.5rem). The two figures
   are the card's point, so they keep the full page's size. */
.glance-third .glance-place { grid-template-columns: minmax(0, 1fr); padding: 0; background: none; border: 0; box-shadow: none; }
.glance-third .glance-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.glance-third .glance-cell-truck { grid-column: 1 / -1; }
.glance-third .glance-cell-value { font-size: 1.375rem; line-height: 1.75rem; }
.glance-third .glance-cell-value[data-long] { font-size: min(1.375rem, 14cqi); }