/* verify.css — the Verify page (roadmap Phase 1B) on the Explorer's own
   tokens and its parts (ui.css: the card head, the ring, the chip, the
   facts, the mark gutter), in the reading style of the Trust and System
   pages, with one interactive element, the drop zone. The result is laid
   out as the owner's layout notes of 2026-10-14 propose: the result, what
   was checked, what the result establishes, every check one by one, this
   page's verifier. The colour rule of the Readout holds here too
   (HOW_WE_BUILD §4; explorer/test/verify-colour.test.js): green, amber and
   red only on a verdict, a mark or a chip, for meaning; the theme's accent
   for decoration. */
.vf-drop { border: 1px dashed var(--border-hi); border-radius: 8px; padding: 34px 16px; text-align: center; background: color-mix(in srgb, var(--accent) 6%, transparent); cursor: pointer; margin: 18px 0 12px; }
.vf-drop.compact { padding: 18px 16px; margin: 0; }
.vf-drop:hover, .vf-drop:focus-visible, .vf-drop.over { border-color: var(--accent); outline: none; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.vf-drop-t { color: var(--text-hi); font-size: 16px; }
.vf-drop.compact .vf-drop-t { font-size: 14px; }
.vf-drop-s { color: var(--text-dim); font-size: 12px; margin-top: 8px; }
.vf-small { color: var(--text-dim); font-size: 12px; }
.vf-note { color: var(--text-dim); font-size: 12px; }
/* The landing card is built as the result cards are (the owner, 2026-10-14):
   the band, the body, then its notes set apart by a rule in a muted line. */
.vf-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-dim); }
.vf-foot p { margin: 0 0 6px; } .vf-foot p:last-child { margin-bottom: 0; }
/* The result card: the verdict, then its sentence, then the file in a
   muted line set apart by a rule, a size smaller (the owner, 2026-10-14). */
.vf-verdict { font-size: 40px; line-height: 1.1; letter-spacing: 0.02em; margin: 6px 0 14px; color: var(--text-hi); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vf-verdict.ok { color: var(--ok); } .vf-verdict.warn { color: var(--warn); } .vf-verdict.err { color: var(--err); }
.vf-verdict.none { color: var(--text-hi); }   /* "not a bundle": the grey ring and no status colour, nothing was checked */
.vf-again { font-size: 13px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border-hi); cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; font-family: inherit; }
.vf-again:hover { border-bottom-color: var(--accent); }
.vf-meaning { font-size: 15px; color: var(--text-hi); margin: 0 0 18px; overflow-wrap: anywhere; text-wrap: balance; }   /* two or three lines of even length, never a last line of one word (the owner, 2026-10-14) */
.vf-file { color: var(--text-dim); font-size: 11px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border-dim); overflow-wrap: anywhere; }
/* A hash or commit: monospace and the full value in the title, with no box
   or padding, so it lines up with the text beside it (the owner, 2026-10-13,
   on his phone: the boxed form sat a few pixels in from the column). A long
   name wraps in the file line and in a fact rather than widening the page. */
.vf code.vf-id { white-space: nowrap; cursor: help; padding: 0; background: transparent; }
.vf code.vf-name { white-space: normal; overflow-wrap: anywhere; cursor: help; padding: 0; background: transparent; }   /* a file's or a record's name, wrapping, the whole name in the title */
/* What the result establishes: a row per kind, its mark in the gutter (the
   ring in the status colour; a dash, no colour, for a standing limit). */
.vf-scope { margin: 0 0 4px; }
.vf-grp { padding: 12px 0 10px; border-top: 1px solid var(--border-dim); }
.vf-grp h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--text-hi); }
.vf-grp .vf-small { margin: 0 0 6px; }
.vf-list { list-style: none; margin: 0; padding: 0; }
.vf-list li { margin: 0 0 6px; color: var(--text-mid); font-size: 13px; overflow-wrap: anywhere; text-wrap: balance; }
.vf-list li strong { color: var(--text); font-weight: 600; }
.vf-mark { display: inline-block; width: 22px; text-align: center; color: var(--text-dim); font-weight: 700; }
.vf-mark.ok { color: var(--ok); } .vf-mark.warn { color: var(--warn); } .vf-mark.err { color: var(--err); }
/* Every check, one by one (the owner, 2026-10-14): a row each, the name
   from the code on top as its title with a status chip beside it when the
   check did not pass, the question under it as its description, the ring
   in the gutter, and at the far right, centred, the clusters page's sign
   that a row opens: a chevron in the accent, turned down while the row is
   open. The verifier's own words fold open under the row by the clusters
   page's fold rule (one grid row from 0fr to 1fr over 280 ms; the
   controller sets is-open a frame after open, and open off once the fold
   has run), starting at the question's left edge: the gutter's 22px and
   the 24px gap. The same on a phone. Still with motion off. */
.vf-grouph { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 2px; }
.vf-check { border-top: 1px solid var(--border-dim); }
.vf-check summary { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; column-gap: 24px; align-items: start; padding: 10px 0; margin: 0; cursor: pointer; list-style: none; touch-action: manipulation; }
.vf-check summary::-webkit-details-marker { display: none; }
.vf-check summary::after { content: '›'; grid-column: 3; align-self: center; justify-self: end; color: var(--accent); font-size: 20px; line-height: 1; transition: transform .2s ease; }
.vf-check.is-open summary::after { transform: rotate(90deg); }
.vf-cmark { text-align: center; }
.vf-check-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 5px; }
.vf-check-ask { display: block; color: var(--text); font-size: 13px; max-width: 46ch; text-wrap: balance; }
@media (hover: hover) { .vf-check summary:hover .vf-check-ask { color: var(--text-hi); } }
.vf-check.is-open .vf-check-ask { color: var(--text-hi); }
.vf-check-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(.4, 0, .2, 1); }
.vf-check.is-open .vf-check-body { grid-template-rows: 1fr; }
.vf-check-clip { min-height: 0; overflow: hidden; }
.vf-check-why { margin: 0; padding: 0 0 10px 46px; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 600px) { .vf-check-ask { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .vf-check summary::after, .vf-check-body { transition: none; } }
.vf-busy { color: var(--text-dim); }
/* This page's verifier: the device's confirmation of each row in a narrow
   column of its own between the label and the value, so the three marks
   line up and the values keep their left edge (the owner, 2026-10-13): a
   small ring, grey and going round while the device confirms the row, then
   drawn in the status colour with its mark; the word kept off screen. */
.vf-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; row-gap: 6px; margin: 0 0 14px; font-size: 13px; }
.vf-dl dt { color: var(--text-hi); } .vf-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-mid); }
.vf-dl-marks { grid-template-columns: max-content 1.4em minmax(0, 1fr); column-gap: 10px; }
.vf-dl-marks .vf-cell { text-align: center; }
.vf-confirm { display: inline-block; min-width: 1.4em; text-align: center; cursor: help; }
.vf-confirm.ok { color: var(--ok); } .vf-confirm.warn { color: var(--warn); }
.vf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vf-drop.checking { display: flex; align-items: center; justify-content: center; gap: 14px; cursor: default; text-align: left; }
.vf-drop.checking .vf-drop-t { font-size: 14px; }
.vf [hidden] { display: none; }

/* The witness section (Stage 3 step 4; verify/witness.js): the one sentence as the meaning, green only for a
   check that verified here, amber only for an integrity refusal, none otherwise; the chain and the reading
   step by step behind a fold, as the evidence sheet's card has them. */
.vf-witness .vf-meaning.ok { color: var(--ok); } .vf-witness .vf-meaning.refused { color: var(--warn); }
.vf-witness .card-head .vf-again { margin-left: auto; }
.vf-witness .wc-details { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--text-mid); }
.vf-witness .wc-details summary { cursor: pointer; color: var(--text-dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.vf-witness .wc-h { font-size: 10px; letter-spacing: 1px; color: var(--text-dim); margin: 10px 0 2px; }
.vf-witness .wc-steps { list-style: none; margin: 0; padding: 0; }
.vf-witness .wc-steps li { display: flex; gap: 8px; align-items: baseline; }
.vf-witness .wc-steps .wc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; flex: 0 0 auto; }
.vf-witness .wc-steps .wc-status { font-size: 10px; color: var(--text-dim); flex: 0 0 auto; }
.vf-witness .wc-steps li.ok .wc-code { color: var(--ok); } .vf-witness .wc-steps li.refused .wc-code { color: var(--warn); }
.vf-witness .wc-facts { margin: 6px 0 0; font-size: 11px; } .vf-witness .wc-facts dt { color: var(--text-dim); } .vf-witness .wc-facts dd { margin: 0 0 4px; word-break: break-all; }
.vf-witness .wc-sources { font-size: 11px; color: var(--text-dim); margin-top: 6px; }