/* ==========================================================================
   The verification ledger

   `.page` in `pages.css` already gives this the area below the header, its own
   scroll and the `display: none` that makes `hidden` mean it. Everything here
   is what goes inside, and every selector stays under `.ledger`.

   **The three states are three different things to look at, not one thing in
   three colours.** A figure is mono and bright; *no record* is dim italic
   lower-case words; *not measurable* is the warning colour with a rule under it
   so it reads as a mark on the page rather than as a value. That difference has
   to survive a photograph, a colour-blind reader and a phone in sunlight, which
   is why weight, case and shape all move and not only the hue.

   No entrance animation, for the same reason as the two pages before this one:
   a `translateX` sits at its first keyframe for as long as the animation is
   `running`, and a renderer that throttles animations leaves the thing on screen
   and off the edge of it. See the note in `pages.css`.
   ========================================================================== */
.ledger {
    padding: clamp(16px, 3vw, 34px);
    color: var(--ink);
    background:
        radial-gradient(circle at 92% -10%, rgba(157, 164, 237, .11), transparent 31rem),
        var(--bg);
}
.ledger button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ledger h1:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 4px; }

.ledger-shell { width: min(980px, 100%); margin: 0 auto; padding-bottom: 48px; }
.ledger-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ledger-heading h1 { margin: 2px 0 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.04; letter-spacing: -.04em; }
.ledger-lede { max-width: 620px; margin: 10px 0 0; color: var(--dim); font-size: 14px; }
.ledger-stat { color: var(--faint); font: 12px/1.5 var(--mono); text-align: right; }
.ledger-status { min-height: 20px; margin: 12px 2px; color: var(--dim); font-size: 13px; }
.ledger-detail-title { margin: 8px 0 0; overflow-wrap: anywhere; font: 680 clamp(18px, 3vw, 26px)/1.2 var(--mono); letter-spacing: -.03em; }

.ledger-back {
    margin: 0 0 8px;
    border: 0;
    padding: 6px 2px;
    background: none;
    color: var(--dim);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.ledger-back:hover { color: var(--ink); }

/* ---- the block that names no Feature -------------------------------------
   Above every Feature and outside all of them, in the peer colour rather than
   the accent: it is not one of the rows, it is the reason the rows are short. */
.ledger-unattributed {
    margin: 8px 0 20px;
    border: 1px solid var(--peer-ed);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--peer-in);
}
.ledger-block-name { margin: 0; font-size: 15px; }
.ledger-block-say { max-width: 640px; margin: 6px 0 10px; color: var(--dim); font-size: 13px; }

/* ---- one Feature --------------------------------------------------------- */

.ledger-rows { display: grid; gap: 10px; margin: 8px 0 0; }
.ledger-card {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--card);
}
.ledger-unattributed .ledger-card { border-color: transparent; background: transparent; padding: 0; }
.ledger-card-head { display: flex; align-items: baseline; gap: 10px; }
.ledger-card-kind { color: var(--faint); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ledger-card-name { overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
/* Beside a name the id is the smaller fact, and on its own it is the only one. */
.ledger-card-id { overflow-wrap: anywhere; font: 13px/1.4 var(--mono); }
.ledger-card-name + .ledger-card-id { color: var(--faint); font-size: 12px; }
.ledger-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--faint); font-size: 12px; }

.ledger-row, .ledger-token {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}
.ledger-row-name { min-width: 8.5em; color: var(--dim); font-size: 12px; }
.ledger-tokens { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.ledger-token-name { min-width: 8.5em; color: var(--dim); font-size: 12px; }
.ledger-token-rows { color: var(--faint); font: 11px/1.4 var(--mono); }
/* The bucket nothing declared a side for sits under a hairline of its own, so it cannot be read
   as a subtotal of the two above it. */
.ledger-token-undeclared { border-top: 1px dashed var(--line); padding-top: 4px; }

/* ---- the three states ---------------------------------------------------- */

/* A figure. Mono, bright, tabular — the only thing on this page that is a number. */
.ledger-figure { color: var(--ink); font: 680 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
/* A floor. The same face, plus the words that say it is one, so it can never be added up with a
   total beside it by mistake. */
.ledger-floor { color: var(--ink); font: 500 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
/* No record. Lower-case words, dim, italic: deliberately not shaped like a value at all. */
.ledger-absent { color: var(--faint); font-size: 13px; font-style: italic; }
/* Not measurable. The warning colour and a rule under it — a mark on the page rather than a
   quantity, because it is the state a reader is most likely to read as zero. */
.ledger-unknown {
    border-bottom: 1px dashed var(--warn);
    color: var(--warn);
    font-size: 13px;
    font-style: italic;
}
.ledger-clean { color: var(--ok); font-size: 13px; }

/* ---- findings ------------------------------------------------------------ */

.ledger-severity {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 8px;
    color: var(--dim);
    font: 11px/1.6 var(--mono);
}
.ledger-severity-blocking { border-color: var(--bad); color: var(--bad); }
.ledger-severity-important { border-color: var(--warn); color: var(--warn); }
.ledger-verdict, .ledger-axis {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 8px;
    color: var(--dim);
    font: 11px/1.6 var(--mono);
}
.ledger-axis-findings { border-color: var(--warn); color: var(--warn); }
.ledger-axis-pass { border-color: var(--ok); color: var(--ok); }

.ledger-finding {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--card);
}
.ledger-finding-blocking { border-left-color: var(--bad); }
.ledger-finding-important { border-left-color: var(--warn); }
.ledger-finding-id { color: var(--faint); font: 11px/1.4 var(--mono); }
.ledger-finding-summary { margin: 0; font-size: 14px; }
.ledger-evidence { margin: 0; padding-left: 18px; color: var(--faint); font: 11px/1.6 var(--mono); }
.ledger-evidence-name { color: var(--dim); font: 11px/1.6 var(--ui); list-style: none; margin-left: -18px; }

.ledger-open {
    justify-self: start;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    background: none;
    color: var(--dim);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.ledger-open:hover { border-color: var(--accent-ed); color: var(--ink); }