/**
 * @file readings.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description A status page's readings and its verdict: the measured thing and why it matters, its
 *   state mark, its value as a mono reading; the status word in the poster face with its line and
 *   stamp, the readings beside it. Drawn by components/Readings.js.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.0.0 — 2026-09-27 — Moved out of views/admin.css (.adm-mrow, .adm-mrow--two, .adm-why,
 *     .adm-mval, .adm-ov-grid, .adm-ov-status, .adm-ov-up, .adm-alert-line) under the component's own
 *     names, with the page sheets' variants as the component's own: no rule under the last row
 *     (apps, compliance, CORS), a mono value that breaks anywhere (CORS), the quiet status word
 *     (realtime), the right cell that holds controls (compliance), and the phone layout (apps, CORS).
 */

/* ── One reading ────────────────────────────────────────────────────────────────────────────── */
.reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(10rem, auto);
  gap: 0 1.2rem;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
  color: var(--text);
}
.reading--two { grid-template-columns: minmax(0, 1fr) auto; }
.reading--last { border-bottom: 0; }
.reading-why { display: block; font-size: .78rem; font-weight: 400; line-height: 1.45; color: var(--text-dim); margin-top: 2px; }
.reading-value { font-family: var(--font-mono); font-size: .78rem; color: var(--text-dim); text-align: right; overflow-wrap: anywhere; }
.reading-end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

/* ── The verdict ────────────────────────────────────────────────────────────────────────────── */
.verdict { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0 44px; align-items: start; }
.verdict-word {
  font-family: var(--font-poster);
  font-weight: var(--font-poster-weight, 400);
  font-size: 3.4rem;
  line-height: var(--font-poster-leading, 1);
  letter-spacing: var(--font-poster-tracking, .01em);
  text-transform: var(--shape-case-heading);
  color: var(--text);
}
.verdict-word--danger { color: var(--accent); }
.verdict-word--watch { color: var(--warn-fg); }
.verdict-word--quiet { color: var(--text-dim); }
.verdict-line { margin: .6rem 0 0; font-size: .9rem; font-weight: 600; color: var(--text); }
.verdict-stamp { margin-top: .5rem; font-family: var(--font-mono); font-size: .75rem; color: var(--text-dim); }
.verdict-doors { margin-top: .8rem; }

@media (max-width: 860px) {
  .verdict { grid-template-columns: 1fr; gap: 14px 0; }
}

/* A phone: the name keeps its width; the mark and the value stand under each other on the right; a
   right cell of controls goes under the name. */
@media (max-width: 768px) {
  .reading { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; }
  .reading:not(.reading--two) > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .reading:not(.reading--two) > :nth-child(2) { grid-column: 2; grid-row: 1; justify-self: end; }
  .reading:not(.reading--two) > :nth-child(3) { grid-column: 2; grid-row: 2; max-width: 11rem; white-space: normal; }
  .reading--two > .reading-end { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
}