@import url('tokens.css');

/* ============================================================================
   Validation page — configuration health, on the shared scrolling scaffold (Template A,
   ScrollPageLayout) with the content column widened: the findings are sentences, and the
   reading measure that suits a column of settings rows would break every one of them over
   three lines. The window frame, the masthead and the scroll column are the scaffold's;
   only what a list of findings needs lives here — the one statement of health at the top,
   a head per surface (Process · Logic · Dashboards), and the finding row: the entity and
   where it lives on the first line, the faulty field and what it names on the second.
   Prefixed validation-* ; every themed value resolves through var(--…) tokens.
   ============================================================================ */

/* ---- The one statement of health, and the page's one command -----------------
   The mark, the answer and Rescan on a single line of a single card: this is everything the
   page says about the configuration as a whole, which is why a station with nothing wrong is
   announced here and nowhere else on the screen. */
.validation-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-4);
}
/* The dot sits on the answer's own line, whatever the sentence under it wraps to. */
.validation-status-mark {
    display: flex; align-items: center;
    height: calc(var(--font-size-section) * 1.2);
}
.validation-status-text { min-width: 0; }
.validation-status-command { align-self: center; }
.validation-status-title {
    margin: 0;
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
/* The card runs the width of the window; its prose keeps a measure it can be read at. */
.validation-status-detail { margin: var(--space-1) 0 0; max-width: 96ch; }

/* ---- Surface group ----------------------------------------------------------- */
.validation-group { margin-top: var(--space-8); }

/* The head names the surface: its mark and the name, at the same weight the scaffold gives
   a section on any other page. */
.validation-group-title {
    display: flex; align-items: center; gap: var(--space-3);
    margin: 0;
}
.validation-group-glyph { color: var(--color-text-secondary); }

/* Under it, one line of prose: how many are here, then what this surface is scanned for.
   The count leads in the text ink so it reads as a fact, never as an alarm badge. */
.validation-group-hint { margin: var(--space-2) 0 var(--space-4); max-width: 120ch; }
.validation-group-count { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.validation-group-count::after {
    content: "\00B7";
    margin: 0 0.5em;
    color: var(--color-text-disabled);
    font-weight: var(--font-weight-regular);
}

/* The card is a row container — rows own their own padding + separators. */
.validation-card { padding: 0; overflow: hidden; }

/* ---- One finding -------------------------------------------------------------
   Two lines and a chevron: what it is on top, what is wrong under it, and the mark that says
   the row opens something. Where it opens is not written on the row — the card at the top of
   the page says it once, and the row's title and accessible name carry it per row — which is
   what lets ten findings read as ten findings and gives each sentence the width. */
.validation-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "mark head open"
        "mark explain open";
    align-items: center;
    column-gap: var(--space-4); row-gap: var(--space-1);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: transparent; border: none;
    border-bottom: 1px solid var(--color-stroke-subtle);
    text-align: left; cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-sans); font-size: var(--font-size-body);
}
.validation-item:last-child { border-bottom: none; }
.validation-item:hover { background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover)); }

/* The row under the pointer wears the accent edge the navigation rail marks its active entry
   with: the app's one mark for "this is the one you are on". */
.validation-item::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 2px;
    background: var(--color-accent);
    opacity: 0;
    transition: opacity var(--dur-quick) var(--ease-out);
}
.validation-item:hover::before,
.validation-item:focus-visible::before { opacity: 1; }

.validation-item-mark { grid-area: mark; color: var(--color-text-secondary); }

/* First line: what it is called, what it is, and where it lives. */
.validation-item-head {
    grid-area: head;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
    min-width: 0;
}
.validation-item-name {
    font-weight: var(--font-weight-semibold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* The kind, as quiet lettering rather than a filled chip: one chip per row is more ink than
   the word it holds, and the list is long before it is interesting. */
.validation-item-type {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-text-secondary);
}
.validation-item-where { font-size: var(--font-size-description); color: var(--color-text-secondary); }

/* Second line: the sentence. The field leads it, the named target is set in mono and
   in the caution tone — it is the thing that is wrong, and the only coloured word here. */
.validation-item-explain {
    grid-area: explain;
    font-size: var(--font-size-description);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.validation-item-explain > span { margin-right: 0.25em; }
.validation-item-explain > span:last-child { margin-right: 0; }
.validation-item-field { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.validation-item-ref {
    font-size: var(--font-size-small);
    color: var(--color-caution);
    overflow-wrap: anywhere;
}
/* The comma and the tail of the sentence read as one with the address before them. */
.validation-item-ref + span { margin-left: -0.25em; }

/* Right: the mark that the row opens something, lit once the row is under the pointer or
   holds the keyboard. */
.validation-item-open { grid-area: open; color: var(--color-text-disabled); }
.validation-item:hover .validation-item-open,
.validation-item:focus-visible .validation-item-open { color: var(--color-accent-text); }