/* ═══════════════════════════════════════════════════════════════════════════
   /status, on top of landing.css and pages.css.

   WRITTEN AT 390px FIRST, like everything else here, because the person most
   likely to open this page is an officer standing next to a projector that is
   not working, holding a phone. The desk is the second case and it gets one
   media query.

   COLOUR IS NEVER THE ONLY SIGNAL. Every line carries the word UP or DOWN as
   well as its colour, and the dot has a shape of its own: a filled disc when
   the answer was yes, a ring when it was not. A room lit for a projector and a
   phone held at arm's length are both places where a green and a red pill look
   like the same grey pill.
   ═══════════════════════════════════════════════════════════════════════════ */

.checks { margin-top: 22px; display: grid; gap: 10px; }

.check {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: start;
  gap: 10px 12px;
  padding: 14px 14px;
  background: var(--panel);
  border: 1px solid var(--sky-line);
  border-radius: 12px;
}

/* The dot. Filled for up, a ring for down, and neither of them is only a
   colour: at 390px on a lit stage the ring is what reads first. */
.check .dot {
  width: 14px; height: 14px; border-radius: 50%;
  margin-top: 4px;
  border: 2px solid var(--sky-faint);
  background: transparent;
}
.check.up .dot { background: #46C46E; border-color: #46C46E; }
.check.down .dot { background: transparent; border-color: #FF6B57; }
.check.wait .dot { background: transparent; border-color: var(--sky-line); }

.check .what { min-width: 0; }
.check .name { color: #fff; font-weight: 600; font-size: 1rem; }
.check .said {
  color: var(--sky-muted); font-size: .88rem; line-height: 1.45;
  margin-top: 3px;
  /* A long error from a browser has no spaces in it and would push the card
     sideways off a handset. */
  overflow-wrap: anywhere;
}
.check.down .said { color: #ffd8d0; }

.check .verdict {
  font-family: Oswald, 'Arial Narrow', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  font-size: .78rem; white-space: nowrap;
  color: var(--sky-faint);
  text-align: right;
}
.check.up .verdict { color: #46C46E; }
.check.down .verdict { color: #FF6B57; }
.check .ms { display: block; color: var(--sky-faint); font-size: .74rem; letter-spacing: .06em; margin-top: 2px; }

/* The verdict at the top of the page takes the colour too, so the answer is
   readable from the doorway. */
h1.all-up { color: #46C46E; }
h1.all-down { color: #FF6B57; }

/* The hairlines between the rows are the grid's own gap showing the container
   through, which is why the container carries the line colour and the rows
   carry the panel. `section` in landing.css has a gutter, so this lives on a
   dl INSIDE the section rather than on the section: a background on the
   section paints the gutter as well and the box ends up wider than the cards
   above it. */
.facts { margin: 18px 0 0; display: grid; gap: 1px; background: var(--sky-line); border: 1px solid var(--sky-line); border-radius: 12px; overflow: hidden; }
.fact { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 11px 14px; background: #0b1020; align-items: baseline; }
.fact dt { color: var(--sky-muted); font-size: .86rem; }
.fact dd {
  margin: 0; color: #fff; font-size: .86rem;
  font-family: 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere; text-align: right;
}

.again { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.again .when { color: var(--sky-faint); font-size: .84rem; }

.status-notes { padding-top: 28px; }
.status-notes h2:first-child { margin-top: 0; }

@media (min-width: 760px) {
  .check { grid-template-columns: 22px 1fr auto; padding: 16px 18px; }
  .check .name { font-size: 1.05rem; }
}