/* monitor — this screen owns this file. See the comment beside the <link> in index.html.
   Rules that two screens want belong in style.css, not duplicated here.

   Two things here are styled to be IMPOSSIBLE to miss rather than merely present: the watchdog's
   reason for stopping an application, and the difference between "probed and failed" and "not
   probed". Both are cases where a quiet, tidy rendering is itself the failure. */

/* ------------------------------------------------------------------ the watchdog's reason

   Above every panel, in the danger colour, with a heavy left border so it survives a monochrome
   screen and a colour-blind reader. `07`: the saved reason is exactly the anti-silent-failure
   thing — an application stopped in the night with no visible reason is the case this platform
   exists to argue with, so this block is loud on purpose. */

.monitor__alarm {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--danger);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    background: var(--danger-weak);
}

.monitor__alarmhead {
    margin: 0 0 0.4rem;
    font-weight: 700;
    color: var(--danger);
    overflow-wrap: anywhere;
}

/* The platform's own sentence, verbatim and in full. It wraps rather than truncating: the useful
   half of a watchdog reason is usually the end of it — which ceiling, for how long, and whether the
   port came back — and an ellipsis would cut exactly that. */
.monitor__reason {
    margin: 0 0 0.6rem;
    overflow-wrap: anywhere;
    max-width: 46rem;
}

/* ------------------------------------------------------------------ health, and the three answers */

.monitor__health {
    margin-top: 1.25rem;
}

.monitor__health h4,
.monitor__ceilings h4 {
    margin: 0 0 0.35rem;
}

/* One word, large, and coloured by which of the answers it is. `--none` is neither green nor red on
   purpose: "nobody has asked" must not read as a failure, and it must not read as good news. */
.monitor__verdict {
    margin: 0.4rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.monitor__verdict--ok {
    color: var(--accent);
}

.monitor__verdict--bad {
    color: var(--danger);
}

.monitor__verdict--none {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 600;
}

/* One reason that covers several readings, which is the ordinary case: it takes a row of its own
   under them rather than a column beside one of them, because a sentence about three things must not
   look like it belongs to the third. `.monitor__now` is a wrapping flex row, so a full basis is what
   breaks the line. */
.monitor__sharedwhy {
    flex: 1 0 100%;
}

/* ------------------------------------------------------------------ ceilings and caveats */

.monitor__ceilings {
    margin-top: 1.25rem;
}

.monitor__ceiling {
    padding: 0.6rem 0 0.5rem;
    border-top: 1px solid var(--border);
}

/* What a good-looking number does not establish: a truncated walk, a ceiling being approached, a
   watchdog on its cooldown. Drawn beside the good news, never instead of it. */
.monitor__caveat {
    margin: 0.35rem 0 0;
    color: var(--notice);
    font-size: 0.85rem;
    max-width: 46rem;
    overflow-wrap: anywhere;
}

/* The action rows sit under the section they act on, with room above so they are not mistaken for
   part of the reading. */
.monitor__health .btn-row,
.monitor__disk .btn-row {
    margin-top: 0.75rem;
}