/* checks — 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.

   The whole sheet is written for 375px first, and everything wider is the same layout with more
   room. Two things on this screen are made of text that cannot be broken by a browser on its own —
   a file path in the journal, and a stack trace — and either of them is enough to make the PAGE
   scroll sideways on a phone, which is the one layout failure no unit test can see. So every place
   one can appear is a box that wraps, and `.checks__quote` is the single rule that does it. */

.checks__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Without this a flex child refuses to shrink below its content, and one long selector inside
       it widens the whole column. */
    min-width: 0;
}

.checks__section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem;
    min-width: 0;
}

.checks__title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.checks__subtitle {
    margin: 1rem 0 0.4rem;
    font-weight: 600;
}

.checks__hint,
.checks__why {
    color: var(--text-muted);
    margin: 0.35rem 0;
    max-width: 46rem;
    overflow-wrap: anywhere;
}

.checks__why {
    color: var(--text);
}

.checks__good {
    color: var(--accent);
    overflow-wrap: anywhere;
}

.checks__bad {
    color: var(--danger);
    overflow-wrap: anywhere;
}

.checks__val {
    overflow-wrap: anywhere;
}

.checks__signalline {
    margin: 0.35rem 0;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- quoted evidence

   The platform's own words, kept exactly as they arrived: a path, a stack, the ten lines a run
   printed. `pre-wrap` rather than `pre` so the newlines survive and the long lines do not — and
   `anywhere` so that a 300-character selector with no space in it still breaks. The horizontal
   scroll is a last resort for whatever neither of those can split; it belongs to this box and
   never to the page. */
.checks__quote {
    margin: 0.35rem 0;
    padding: 0.5rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}

.checks__path {
    color: var(--text-muted);
}

.checks__failure {
    color: var(--danger);
    background: var(--danger-weak);
}

.checks__stack {
    max-height: 18rem;
    overflow-y: auto;
}

/* ---------------------------------------------------------------- folds */

.checks__fold {
    margin: 0.6rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.6rem;
    min-width: 0;
}

.checks__foldhead {
    cursor: pointer;
    font-weight: 600;
    /* A thumb-sized target: this is how a phone reaches the evidence. */
    padding: 0.35rem 0;
}

/* ---------------------------------------------------------------- running */

.checks__progresslist {
    list-style: none;
    margin: 0.6rem 0;
    padding: 0;
    /* Bounded, and scrolling inside itself: a battery of fifty tests is fifty lines, and a screen
       that grew by fifty lines would push the verdict off the bottom of a phone. */
    max-height: 12rem;
    overflow-y: auto;
    border-left: 3px solid var(--border-strong);
}

.checks__step {
    padding: 0.2rem 0 0.2rem 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.checks__step--done {
    color: var(--text);
    font-weight: 600;
}

/* ---------------------------------------------------------------- where the tree came from

   Marked with a rule down the side as well as with colour: "read from the working environment" and
   "somebody typed this" are the same shape of sentence in the same place, and the difference between
   them is the difference between a fact and a claim. A reader skimming on a phone should be able to
   see WHICH of the two this is without reading it. */
.checks__treebox {
    margin: 0.2rem 0 0.6rem;
    min-width: 0;
}

.checks__treemark {
    border-left: 3px solid var(--border-strong);
    padding-left: 0.6rem;
}

/* The tone is put on the element by the screen rather than inferred from what is inside it with
   `:has()`. Nothing else in this interface uses that selector, and a rule whose colour depends on a
   child's class is a rule that changes meaning the day somebody adds a paragraph. */
.checks__treemark--ok { border-left-color: var(--accent); }
.checks__treemark--warn { border-left-color: var(--notice); }
.checks__treemark--bad { border-left-color: var(--danger); }

/* The platform's own sentence about why there is no tree, or which other tree the environment is at.
   Not muted like a hint: it is the reason the box above cannot be trusted as a reading. */
.checks__treewhy {
    color: var(--notice);
    margin: 0.35rem 0;
    max-width: 46rem;
    overflow-wrap: anywhere;
}

.checks__lastrun {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}

/* The verdict, in its own colour and its own word. Three states, never two: an infrastructure error
   is drawn in the notice colour precisely so it cannot be read as the application failing. */
.checks__verdict {
    font-weight: 700;
    margin: 0.4rem 0;
    overflow-wrap: anywhere;
}

.checks__verdict--ok { color: var(--accent); }
.checks__verdict--bad { color: var(--danger); }
.checks__verdict--warn { color: var(--notice); }

/* ---------------------------------------------------------------- the gate */

.checks__coveragelist,
.checks__ledger,
.checks__partlist {
    list-style: none;
    margin: 0.4rem 0;
    padding: 0;
}

.checks__covered,
.checks__ledgerline,
.checks__runline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.checks__part {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.checks__summary {
    font-size: 0.78rem;
    max-height: 14rem;
    overflow-y: auto;
}

/* ---------------------------------------------------------------- the steps */

.checks__steplist {
    margin: 0.4rem 0;
    /* The browser's default indent is about 40px, which is a tenth of a phone. */
    padding-inline-start: 1.4rem;
}

.checks__stepline {
    padding: 0.3rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.9rem;
    min-width: 0;
}

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

.checks__stepwhat {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- what the browser said */

.checks__signal {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.checks__signaltext {
    background: var(--surface-sunken);
}

/* A signal that COUNTS, marked as well as coloured: on a page with twenty responses in it, the one
   that answered 500 has to be findable by somebody scrolling past on a phone. */
.checks__signal--bad {
    border-left: 3px solid var(--danger);
    padding-left: 0.5rem;
}

/* ---------------------------------------------------------------- the captures */

.checks__shot {
    margin: 0.8rem 0;
    min-width: 0;
}

/* The bytes themselves, served out of the journal by the platform's media route. Bounded in height
   so a full-page capture of a long page does not become the whole screen, and never wider than the
   column it is in. */
.checks__shotimg {
    display: block;
    max-width: 100%;
    max-height: 26rem;
    height: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    /* A checkerboard would be better; this at least means a transparent capture is not invisible. */
    background: var(--surface-sunken);
}

.checks__shotcap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------- writing one */

.checks__area {
    width: 100%;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    font-family: var(--font-mono);
    /* 1rem exactly: iOS Safari zooms the page in on focus for anything smaller. */
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    resize: vertical;
}

.checks__gone {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    overflow-wrap: anywhere;
}