/* ===========================================================================
   The verification portal. Views/Verify only.

   docs/design/04-per-product-identity.md describes this surface as an instrument
   panel and originally specified pure --bh-void for it. It is light here, on the
   same human surface as the rest of byhumans, and the reason is recorded in that
   document: the product decided against a dark default, and a single page that
   inverted it would read as a different site - which on the one page whose whole
   job is to be recognisably ours is the wrong trade.

   So the instrument character comes from the other three levers the document
   names, and they are all here: mono as the primary voice, maximum density, and
   a hairline grid instead of cards. No new colours, no new radii, no new
   durations. Aurora is the only accent, and it means exactly one thing.
   =========================================================================== */

@layer components {

  /* --- Shell --------------------------------------------------------------- */

  .vf-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
  }

  /* Mono is the page voice, not an exception inside it. Everything on this page
     is a value someone may need to copy, compare or read aloud over a phone. */
  .vf-shell,
  .vf-shell input,
  .vf-shell button {
    font-family: var(--ff-evidence);
    font-variant-ligatures: none;
    letter-spacing: 0;
  }

  /* Sticky, because this page is long and the masthead is the only thing on it
     that says whose instrument it is. The border comes from .bh-vapor--under, so
     it is not declared again here. */
  .vf-head {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-inline: var(--sp-4);
    padding-block: var(--sp-2);
  }

  /* The mono voice is set on the shell, and these are the exceptions: a language
     name and a notification are prose, not evidence. Grouped in one rule so the
     list of things that are deliberately not mono stays readable. */
  .vf-shell .bh-menu__item,
  .vf-shell .bh-toast,
  .vf-shell .bh-empty__title,
  .vf-shell .bh-empty__body,
  .vf-shell .bh-field__label,
  .vf-shell .bh-field__hint,
  .vf-shell .bh-field__error {
    font-family: var(--ff-ui);
  }

  .vf-head__mark {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-body-s);
    font-weight: 600;
  }

  .vf-head__org {
    color: var(--bh-titanium);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* The query container for everything inside. Without this declaration the
     @container rules below would never match anything, because a container query
     with no container silently applies to nothing at all. */
  .vf-main {
    inline-size: 100%;
    max-inline-size: 68rem;
    margin-inline: auto;
    padding: var(--sp-5) var(--sp-4);
    container-type: inline-size;
  }

  .vf-foot {
    padding: var(--sp-3) var(--sp-4);
    border-block-start: 1px solid var(--bh-hairline);
    color: var(--bh-titanium);
    font-size: var(--fs-micro);
  }

  .vf-foot p { margin: 0; }

  /* --- The verdict -------------------------------------------------------- */

  .vf-verdict {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--sp-4);
    padding-block-end: var(--sp-5);
    border-block-end: 1px solid var(--bh-hairline);
  }

  /* Container query, not viewport: the report responds to the space it was
     given, and Spanish labels here run noticeably longer than English. */
  @container (max-width: 34rem) {
    .vf-verdict { grid-template-columns: 1fr; }
  }

  .vf-verdict__line {
    margin-block: 0 var(--sp-2);
    font-family: var(--ff-ui);
    font-size: var(--fs-h2);
  }

  /* Aurora on this page marks one thing and one thing only: a claim that held up
     under checking. Nothing decorative is ever allowed to borrow it. */
  .vf-verdict--verified .vf-verdict__line { color: var(--bh-aurora); }
  .vf-verdict--altered .vf-verdict__line { color: var(--bh-crimson); }
  .vf-verdict--incomplete .vf-verdict__line { color: var(--bh-amber); }

  .vf-verdict__what {
    margin-block: 0 var(--sp-3);
    color: var(--bh-titanium);
    font-family: var(--ff-ui);
    font-size: var(--fs-body-s);
    max-inline-size: var(--measure);
  }

  .vf-id {
    margin: 0;
    font-size: var(--fs-body-s);
    overflow-wrap: anywhere;
  }

  /* --- Notices ------------------------------------------------------------ */

  /* Not a red banner. A finding this serious is stated in words the reader can
     act on, and a decorated alert box is read as chrome and skipped. */
  .vf-alarm {
    margin-block: var(--sp-5) 0;
    padding-inline-start: var(--sp-4);
    border-inline-start: 2px solid var(--bh-crimson);
    color: var(--bh-chrome);
    font-family: var(--ff-ui);
    max-inline-size: var(--measure);
  }

  .vf-note {
    margin-block: var(--sp-4) 0;
    padding-inline-start: var(--sp-4);
    border-inline-start: 2px solid var(--bh-amber);
    font-family: var(--ff-ui);
    font-size: var(--fs-body-s);
    max-inline-size: var(--measure);
  }

  .vf-h {
    margin-block: var(--sp-6) var(--sp-3);
    font-family: var(--ff-ui);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bh-titanium);
  }

  /* --- The evidence grid --------------------------------------------------- */

  .vf-grid {
    margin: 0;
    border-block-start: 1px solid var(--bh-hairline);
  }

  /* Hairlines rather than cards. Fourteen rows of card would be fourteen boxes
     of visual overhead carrying no information. */
  .vf-row {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
    border-block-end: 1px solid var(--bh-hairline);
  }

  @container (max-width: 44rem) {
    .vf-row { grid-template-columns: 1fr; gap: 0; }
  }

  .vf-row dt {
    color: var(--bh-titanium);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-block-start: var(--sp-05);
  }

  .vf-row dd {
    margin: 0;
    font-size: var(--fs-body-s);
    overflow-wrap: anywhere;
  }

  /* A digest wraps at any character and never at a word boundary, because the
     line it wraps on has to be reproducible when someone copies it out. */
  .vf-hash {
    font-size: var(--fs-caption);
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  /* A value and the button that copies it. The button is last in the flow and
     baseline-aligned to the first line rather than centred, so on a wrapped
     64-character digest it sits beside the start of the value instead of floating
     in the middle of three lines of hex. */
  .vf-value {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .vf-value > .vf-hash { min-inline-size: 0; }

  /* --- Row annotations ---------------------------------------------------- */

  /* A machine-readable code: H2, human-only, canon/v1. Untranslated on purpose,
     so it is drawn as data rather than as prose. */
  .vf-tag {
    display: inline-block;
    padding: 0 var(--sp-1);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-xs);
    background: var(--bh-surface-2);
    font-size: var(--fs-micro);
  }

  /* The sentence next to a code. Interface face, because it is prose. */
  .vf-said {
    color: var(--bh-titanium);
    font-family: var(--ff-ui);
    font-size: var(--fs-caption);
  }

  /* Both states carry a mark as well as a colour: colour is never the only channel
     for a finding. See docs/rules/11-accessibility.md.

     The mark used to be a text glyph in ::before - a check and a multiplication
     sign - which put it outside the icon system and made it a character the reader
     could select and copy into the middle of a digest. It is a <bh-icon> in the
     markup now, at 1em so it tracks the micro type rather than being pinned to the
     20px default. */
  .vf-ok,
  .vf-bad {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .vf-ok .bh-icon,
  .vf-bad .bh-icon { --bh-icon-size: 1em; }

  .vf-ok { color: var(--bh-aurora); }
  .vf-bad { color: var(--bh-crimson); }

  /* --- The Merkle path ---------------------------------------------------- */

  /* The path is a .bh-sheet now, so it is a bottom sheet on a phone and a centred
     dialog on a desktop, and it still needs no JavaScript: popovertarget on the
     button and popover here are the whole mechanism, and the platform brings
     Escape, light dismiss and focus handling with it.
     It was a <details>, which was correct about needing no script and wrong about
     the shape - a nine-entry list of 64-character digests unrolling in the middle
     of a fourteen-row table pushed the rest of the evidence off the screen at the
     moment the reader was comparing two values in it. */
  .vf-path__open {
    margin-block-start: var(--sp-5);
  }

  .vf-path__list {
    margin-block: var(--sp-3) 0;
    padding-inline-start: var(--sp-6);
    display: grid;
    gap: var(--sp-1);
  }

  /* The leaf is where the reader starts, so it is the one entry that is not
     recessive. */
  .vf-path__list li:first-child { color: var(--bh-chrome); }
  .vf-path__list li { color: var(--bh-titanium); }

  /* --- The chain of published heads ---------------------------------------- */

  /* An ordered list, because the order is the claim. Each head has to contain the
     one above it, and a reader following the roots down the page is reading the
     argument that the log only ever grew. */
  .vf-chain {
    margin-block: var(--sp-4);
    padding-inline-start: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    font-family: var(--ff-ui);
    font-size: var(--fs-body-s);
  }

  .vf-chain__head {
    display: grid;
    gap: var(--sp-1);
    padding-block-end: var(--sp-3);
    border-block-end: 1px solid var(--bh-hairline);
  }

  .vf-chain__head:last-child { border-block-end: 0; }

  .vf-chain__size {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bh-titanium);
  }

  /* The fingerprint of the signature, recessive next to the root. A monitor copies
     it; a reader mostly needs to know it exists. */
  .vf-chain__print { color: var(--bh-titanium); }

  /* --- Check this yourself ------------------------------------------------- */

  /* The constructive half of the honest block below: not "here is what we cannot
     prove" but "here is how to stop taking our word for any of it". Same weight,
     same box, deliberately - a reader who reaches the bottom of this page should
     find the two sitting as equals. */
  .vf-audit {
    margin-block-start: var(--sp-6);
    padding: var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-sm);
    background: var(--bh-surface-1);
  }

  .vf-audit .vf-h { margin-block-start: 0; }

  .vf-audit__links {
    margin: var(--sp-3) 0;
    padding-inline-start: var(--sp-5);
    display: grid;
    gap: var(--sp-1);
    font-family: var(--ff-ui);
    font-size: var(--fs-body-s);
  }

  /* --- Limits and the honest block ---------------------------------------- */

  .vf-limits {
    margin: 0;
    padding-inline-start: var(--sp-5);
    display: grid;
    gap: var(--sp-1);
    font-family: var(--ff-ui);
    font-size: var(--fs-body-s);
    max-inline-size: var(--measure);
  }

  /* Weighted like the rest of the page, not tucked away. Overpromising here is
     the exact failure this product argues against, so the block that says what
     we cannot prove gets the same prominence as the block that says what we can.
     See docs/projects/verify-web.md. */
  .vf-honest {
    margin-block-start: var(--sp-6);
    padding: var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-sm);
    background: var(--bh-surface-1);
  }

  .vf-honest .vf-h { margin-block-start: 0; }

  .vf-honest ul {
    margin: 0;
    padding-inline-start: var(--sp-5);
    display: grid;
    gap: var(--sp-2);
    font-family: var(--ff-ui);
    font-size: var(--fs-body-s);
    max-inline-size: var(--measure);
  }

  /* --- The lookup form ---------------------------------------------------- */

  .vf-lookup {
    max-inline-size: var(--measure);
    padding-block: var(--sp-6);
  }

  .vf-lookup__title {
    font-family: var(--ff-ui);
    font-size: var(--fs-h2);
  }

  /* .bh-field carries the label, the hint and the error now, so what is left here
     is the form's own layout. The input keeps the evidence face - the reader is
     pasting a digest into it, and mono is what makes a transposed character
     visible before the page comes back and says there is no such credential. */
  .vf-form {
    display: grid;
    gap: var(--sp-4);
    margin-block: var(--sp-5);
  }

  .vf-form .bh-field__control {
    font-family: var(--ff-evidence);
    font-size: var(--fs-body-s);
  }

  .vf-form .bh-btn { justify-self: start; }

  /* --- Narrow viewports ---------------------------------------------------- */

  /* The report's own breakpoints are container queries above, which is right: it
     responds to the column it was given. These are the ones that cannot be, because
     they are about the device rather than about the column - the page gutter, the
     masthead, and the space a phone's home indicator occupies.
     Before this the portal had no viewport breakpoint at all, so a 360px screen got
     desktop gutters on both sides of a fourteen-row table of digests. */
  @media (max-width: 34rem) {
    .vf-main { padding-inline: var(--sp-3); }

    .vf-head {
      padding-inline: var(--sp-3);
      gap: var(--sp-2);
    }

    /* The masthead loses the section name rather than wrapping onto a second line.
       "byhumans" plus the wordmark is what identifies the page; the section is
       repeated as the heading of every one of these pages anyway. */
    .vf-head__org { display: none; }

    .vf-verdict__line { font-size: var(--fs-h3); }

    /* Landscape on a phone with a notch, and the footer of a page whose gesture
       area overlaps its last line. */
    .vf-foot {
      padding-inline: max(var(--sp-3), env(safe-area-inset-left));
      padding-block-end: calc(var(--sp-3) + env(safe-area-inset-bottom));
    }
  }
}