/* ============================================================================
   SITESAVER: the honesty line, the six queues, and the calibration block.

   Its own sheet because the screen has one shape nothing else in the console
   has: a sentence that qualifies the whole page, and under it a list of
   COUNTS that open into screens. Everything else here is a table, a card of
   settings, or a board of tiles.

   THE COLOURS ARE TEXT COLOURS, NOT MARK COLOURS. Rule 19: as a bar or a dot a
   tone is a graphical object and WCAG asks 3:1; as a sentence it is text and
   the bar is 4.5:1. The honesty line is a sentence, so it uses the `-text`
   siblings on every ground, print included. Orange peel is a fine bar and
   2.28:1 as a paragraph.
   ========================================================================= */

/* ---- The line at the top ----
   Not a card. It QUALIFIES the page rather than sitting beside it, and a card
   would put it in a row with the counts, which is the one reading it must not
   have: those counts are true only as far as this sentence allows.

   The mark is aligned to the first line rather than centred on the block,
   because the sentence wraps to two lines and a centred glyph beside a
   two-line paragraph drifts into the gap between them. */
.cb-watch-line {
  display: flex;
  align-items: flex-start;
  gap: var(--cb-space-lg);
  margin: 0;
  padding: var(--cb-space-xl) var(--cb-space-2xl);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-lg);
  background: var(--cbc-sunken);
  color: var(--cbc-ink-muted);
}
.cb-watch-line .cb-icon {
  flex: none;
  inline-size: var(--cb-space-2xl);
  block-size: var(--cb-space-2xl);
  color: var(--cbc-ink-faint);
}
.cb-watch-said {
  display: grid;
  gap: var(--cb-space-xxs);
  min-inline-size: 0;
}
.cb-watch-said strong {
  color: var(--cbc-ink);
  font-weight: var(--cb-font-weight-semibold);
}
.cb-watch-said span {
  font-size: var(--cb-type-sm-size);
}
/* A good day is quiet: the default above, and nothing else. A permanent green
   panel is furniture, and furniture is what people stop seeing. */
.cb-watch-line[data-tone="warn"] {
  border-color: var(--cbc-warn);
  background: var(--cbc-surface);
}
.cb-watch-line[data-tone="warn"] .cb-icon,
.cb-watch-line[data-tone="warn"] strong {
  color: var(--cbc-warn-text);
}
.cb-watch-line[data-tone="poor"] {
  border-color: var(--cbc-poor);
  background: var(--cbc-surface);
}
.cb-watch-line[data-tone="poor"] .cb-icon,
.cb-watch-line[data-tone="poor"] strong {
  color: var(--cbc-poor-text);
}

/* What makes every count below less than it looks. A list rather than a
   paragraph, because the two notes are independent facts and running them
   together would read as one qualification with a comma in it. */
/* A list for the semantics and no marker for the look: one qualification with
   a disc beside it reads as a stray dot rather than as a note, and two of them
   read as a bulleted list on a page that has none anywhere else. The indent
   goes with the marker. NOT a rule down the left edge: docs/10 rules that out,
   and it is the tell this console is built to avoid. */
.cb-watch-notes {
  margin: 0;
  list-style: none;
  display: grid;
  gap: var(--cb-space-xs);
  padding-inline: var(--cb-space-2xl);
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
}

/* ---- The six queues ----
   A LIST, NOT A GRID OF TILES. Six equal cards rank nothing, and these are
   ordered: overnight has a deadline on it and opportunities does not. Rows
   read top to bottom, which is what an order is for. */
/* ONE GRID FOR ALL SIX ROWS, THROUGH SUBGRID, and the reason is a claim this
   sheet makes a few rules down: "a column of counts lines up and reads as a
   column rather than as six sentences that happen to start with a number".
   With a grid per row that was simply false. Every row sized its own columns,
   so "Overnight 0", "Open 19" and "Waiting on you 0" put their figures at three
   different places and the sentences started at three more.

   FIVE COLUMNS: the mark, the word, the figure, the sentence, the way to the
   setting. The row is still one <a> so the hover and the press belong to one
   element; `subgrid` is what lets that element take its columns from the list
   instead of inventing its own. */
.cb-queues {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}
.cb-queue {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  border-radius: var(--cb-radius-lg);
}
.cb-queue + .cb-queue {
  border-block-start: 1px solid var(--cbc-line);
}
.cb-queue-open {
  min-inline-size: 0;
  display: grid;
  grid-column: 1 / 5;
  grid-template-columns: subgrid;
  align-items: baseline;
  column-gap: var(--cb-space-lg);
  padding: var(--cb-space-xl) var(--cb-space-lg);
  border-radius: var(--cb-radius-lg);
  text-decoration: none;
  color: inherit;
  /* The fill answers immediately and the mark follows a beat behind on the
     overshoot curve, which is the rail's own hover and the reason a pointer
     feels like it is pushing something. */
  transition: background var(--cb-motion-fast) var(--cb-motion-ease);
}
.cb-queue-open .cb-icon {
  /* Baseline alignment is right for the three text children and wrong for a
     glyph, which has no baseline worth aligning to. */
  align-self: center;
  inline-size: var(--cb-space-2xl);
  block-size: var(--cb-space-2xl);
  color: var(--cbc-ink-faint);
  transition:
    color var(--cb-motion-base) var(--cbc-spring),
    transform var(--cb-motion-base) var(--cbc-spring);
}
.cb-queue-open:hover {
  background: var(--cbc-hover);
}
.cb-queue-open:hover .cb-icon {
  color: var(--cbc-accent);
  transform: translateX(var(--cb-space-xxs));
}
.cb-queue-name {
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink);
  white-space: nowrap;
}
/* THE FIGURE IS THE THING SOMEBODY CHECKS, so it is the largest type in the
   row. Tabular numerals, so a column of counts lines up and reads as a
   column rather than as six sentences that happen to start with a number. */
.cb-queue-figure {
  font-size: var(--cb-type-lg-size);
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cb-queue-said {
  min-inline-size: 0;
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The one row worth looking at first, marked on the FIGURE rather than on the
   whole row: a tinted row is an alarm, and a coloured number is a reading. */
.cb-queue[data-urgent] .cb-queue-figure {
  color: var(--cbc-warn-text);
}
/* The way to the setting that governs the row, and never the setting itself.
   Quiet, and only fully legible on approach, because it is a footnote on a row
   whose job is a count: a control shows its affordance when you reach for it
   and not before. */
.cb-queue-tune {
  justify-self: end;
  margin-inline-end: var(--cb-space-lg);
  padding: var(--cb-space-xs) var(--cb-space-md);
  border-radius: var(--cb-radius-md);
  font-size: var(--cb-type-xs-size);
  color: var(--cbc-ink-faint);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--cb-motion-fast) var(--cbc-spring),
    background var(--cb-motion-fast) var(--cb-motion-ease);
}
.cb-queue:hover .cb-queue-tune,
.cb-queue-tune:focus-visible {
  color: var(--cbc-ink-muted);
  background: var(--cbc-hover);
}

/* Under the lg breakpoint the row's three columns do not fit a sentence, so
   the reading moves under the name and the figure.
   1024px mirrors tokens.breakpoint.lg, which CSS cannot read inside a media
   prelude. */
@media (max-width: 1024px) {
  /* The fold takes the row off the shared grid, which is what a fold is: the
     five columns become two lines, so there is nothing left to line up with
     the row above. The list stops being a grid at all here for the same
     reason, or its own tracks would go on sizing rows that no longer use them. */
  .cb-queues,
  .cb-queue,
  .cb-queue-open {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .cb-queue {
    display: flex;
    align-items: center;
  }
  .cb-queue-open {
    flex: 1 1 auto;
    grid-template-areas:
      "mark name figure"
      "mark said said";
    row-gap: var(--cb-space-xxs);
  }
  .cb-queue-open .cb-icon {
    grid-area: mark;
  }
  .cb-queue-name {
    grid-area: name;
  }
  .cb-queue-figure {
    grid-area: figure;
    justify-self: end;
  }
  .cb-queue-said {
    grid-area: said;
    white-space: normal;
  }
}

/* ---- Setting the thresholds from real numbers ----
   At the bottom, and turned off until a fortnight of real data exists. It is
   the one block on this page about a decision nobody has to make today, so it
   is quiet and it is last. */
/* Quieter than the card above it, because it is the one block on this page
   about a decision nobody has to make today. A card at full strength at the
   foot of a page of work reads as a seventh queue. */
.cb-calib {
  background: var(--cbc-sunken);
}
.cb-calib-head {
  display: grid;
  gap: var(--cb-space-xs);
  margin-block-end: var(--cb-space-xl);
}
.cb-calib-head h2 {
  margin: 0;
  font-size: var(--cb-type-md-size);
  font-weight: var(--cb-font-weight-semibold);
}
.cb-calib-body {
  display: grid;
  gap: var(--cb-space-xl);
}
.cb-calib-wait {
  display: grid;
  gap: var(--cb-space-lg);
  justify-items: start;
}
/* The shortfall, as pairs. A definition list rather than a table: two readings
   are not a table, and a table of two rows is a table drawn to fill a space. */
.cb-calib-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--cb-space-xs) var(--cb-space-2xl);
  font-size: var(--cb-type-sm-size);
}
.cb-calib-facts dt {
  color: var(--cbc-ink-muted);
}
.cb-calib-facts dd {
  margin: 0;
  color: var(--cbc-ink);
  font-variant-numeric: tabular-nums;
}
.cb-calib-table {
  /* The proposal table is five narrow columns of numbers on a card that is
     already inside the page's own width, so it takes the width it needs
     rather than the table default's full stretch. */
  inline-size: 100%;
}
.cb-calib-table td,
.cb-calib-table th {
  font-variant-numeric: tabular-nums;
}

/* ---- The mark in the rail foot ----
   Only when the watch is behind. A collapsing grid track, not `hidden`, which
   is the recipe .cb-live uses and for the same reason: the corner is PUSHED
   when the mark arrives rather than rewritten under whatever the pointer was
   already reaching for. The row stays in place on the way out so the track has
   something to shrink; `inert` is what shut means here. */
.cb-watch-mark {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--cb-motion-base) var(--cbc-spring),
    margin-block-end var(--cb-motion-base) var(--cbc-spring);
}
.cb-watch-mark[inert] {
  grid-template-rows: 0fr;
  margin-block-end: calc(var(--cb-space-lg) * -1);
}
.cb-watch-mark-in {
  overflow: hidden;
  min-block-size: 0;
}
.cb-watch-mark-row {
  display: flex;
  align-items: center;
  gap: var(--cb-space-md);
  padding: var(--cb-space-sm) var(--cb-space-md);
  border-radius: var(--cb-radius-md);
  font-size: var(--cb-type-xs-size);
  font-weight: var(--cb-font-weight-medium);
  text-decoration: none;
  color: var(--cbc-ink-muted);
  transition: background var(--cb-motion-fast) var(--cb-motion-ease);
}
.cb-watch-mark-row:hover {
  background: var(--cbc-hover);
}
.cb-watch-mark-row .cb-icon {
  flex: none;
  inline-size: var(--cb-space-xl);
  block-size: var(--cb-space-xl);
}
.cb-watch-mark-word {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The TEXT siblings, because this is a word rather than a mark (rule 19). */
.cb-watch-mark[data-tone="warn"] .cb-watch-mark-row {
  color: var(--cbc-warn-text);
}
.cb-watch-mark[data-tone="poor"] .cb-watch-mark-row {
  color: var(--cbc-poor-text);
}
/* The narrow rail drops every word it can, and this one goes with them: the
   mark and its tooltip still say what it is, and the row is still a way in.
   1024px mirrors tokens.breakpoint.lg, which CSS cannot read in a prelude. */
@media (max-width: 1024px) {
  .cb-watch-mark-word {
    display: none;
  }
  .cb-watch-mark-row {
    justify-content: center;
  }
}

/* ---- The estate card on the dashboard ----
   Four figures and a sentence. The sentence first, because whether the machine
   ran is what qualifies the four; a card that opened with "498 up" would be
   telling somebody the estate was healthy on a morning nothing had checked it.
   The tone is on the FIGURE and never on the row, because a tinted row reads as
   an alarm and a coloured number reads as a reading. */
.cb-estate {
  display: grid;
  gap: var(--cb-space-lg);
  align-content: start;
}
.cb-estate-said {
  margin: 0;
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
}
.cb-estate-said[data-tone="warn"] {
  color: var(--cbc-warn-text);
}
.cb-estate-said[data-tone="poor"] {
  color: var(--cbc-poor-text);
}
.cb-estate-figures {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--cb-space-xs) var(--cb-space-lg);
  font-size: var(--cb-type-sm-size);
}
.cb-estate-figures dt {
  color: var(--cbc-ink-muted);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-estate-figures dd {
  margin: 0;
  color: var(--cbc-ink);
  font-weight: var(--cb-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.cb-estate-figures dd[data-tone="warn"] {
  color: var(--cbc-warn-text);
}