/* ===========================================================================
   Shared components. Anything used by more than one app lives here; anything
   specific to a single view lives in that view's own stylesheet.
   Reference: docs/design/03-ui-patterns.md
   =========================================================================== */

@layer components {

  /* -------------------------------------------------------------------------
     Buttons
     ------------------------------------------------------------------------- */
  .bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    /* No fixed widths anywhere: Spanish labels run 15-30% longer than English. */
    min-block-size: 44px;              /* tactile target floor */
    padding-inline: var(--sp-5);
    padding-block: var(--sp-2);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: var(--bh-surface-2);
    color: var(--bh-chrome);
    font-size: var(--fs-body-s);
    font-weight: 600;
    text-decoration: none;
    transition:
      background var(--dur-instant) var(--ease-human),
      transform var(--dur-instant) var(--ease-human);
  }

  .bh-btn:hover { background: var(--bh-surface-3); }
  .bh-btn:active { transform: scale(0.98); }

  .bh-btn--primary {
    background: var(--bh-ember);
    /* Never white. White on Ember is 2.86:1 and fails WCAG. */
    color: var(--bh-on-accent);
  }
  .bh-btn--primary:hover {
    background: color-mix(in oklch, var(--bh-ember) 88%, white);
  }

  .bh-btn--quiet {
    background: transparent;
    border-color: var(--bh-hairline);
    color: var(--bh-titanium);
  }
  .bh-btn--quiet:hover { background: var(--bh-surface-1); color: var(--bh-chrome); }

  .bh-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

  @supports (corner-shape: squircle) {
    .bh-btn:not(.bh-btn--pill) { corner-shape: squircle; }
  }

  /* -------------------------------------------------------------------------
     Card
     ------------------------------------------------------------------------- */
  .bh-card {
    padding: var(--sp-5);
    border: 1px solid var(--bh-hairline);
    /* Nested radius rule: inner radius = outer radius - padding. */
    border-radius: var(--r-lg);
    background: var(--bh-surface-1);
    box-shadow: var(--elev-1);
  }
  @supports (corner-shape: squircle) {
    .bh-card { corner-shape: squircle; }
  }

  .bh-card__title { margin-block-end: var(--sp-2); font-size: var(--fs-h3); }
  .bh-card__meta {
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  /* -------------------------------------------------------------------------
     Trust badge

     Structural guarantee, not a convention: the label is a real element and
     the ring is aria-hidden, so the level cannot be rendered as colour alone.
     Level is read by arc length first, colour second, label third.
     ------------------------------------------------------------------------- */
  .bh-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding-inline: var(--sp-1) var(--sp-3);
    padding-block: var(--sp-1);
    border-radius: var(--r-full);
    background: var(--bh-surface-2);
    font-size: var(--fs-caption);
    font-weight: 500;
    white-space: nowrap;
  }

  /* The ring is drawn by .bh-arcmark in provenance.css, at its default 16px.
     No size override here on purpose: both selectors have the same specificity
     and live in the same layer, so whichever file loads last would silently win.
     One declaration, one place. */

  .bh-badge__label { color: var(--bh-chrome); }

  .bh-badge--none .bh-badge__label { color: var(--bh-titanium); }

  /* The Heartbeat. One pulse when a verified badge is revealed, never a loop.
     420ms, spring curve. It is the heartbeat, not a spinner. */
  .bh-badge--reveal { animation: bh-heartbeat var(--dur-slow) var(--ease-spring) both; }

  @keyframes bh-heartbeat {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* Entry animation for a badge that was already on the page at load. */
  @starting-style {
    .bh-badge { opacity: 0; }
  }

  /* -------------------------------------------------------------------------
     Provenance ring — the component version, for avatars and media thumbnails.
     Arc length is driven by --bh-arc so one rule covers every trust level.
     ------------------------------------------------------------------------- */
  .bh-ring {
    --bh-arc: 100%;
    --bh-ring-size: 44px;
    --bh-ring-w: 3px;

    position: relative;
    inline-size: var(--bh-ring-size);
    aspect-ratio: 1;
    border-radius: var(--r-full);
    background:
      conic-gradient(from -90deg,
        var(--bh-ring-color, var(--bh-aurora)) 0 var(--bh-arc),
        transparent var(--bh-arc) 100%),
      conic-gradient(var(--bh-surface-3) 0 100%);
    mask: radial-gradient(farthest-side,
      transparent calc(100% - var(--bh-ring-w)),
      black calc(100% - var(--bh-ring-w)));
  }

  .bh-ring--spectrum {
    background:
      conic-gradient(from -90deg in oklch,
        var(--bh-tone-1) 0,
        var(--bh-tone-4) calc(var(--bh-arc) / 2),
        var(--bh-tone-7) var(--bh-arc),
        transparent var(--bh-arc) 100%),
      conic-gradient(var(--bh-surface-3) 0 100%);
  }

  /* -------------------------------------------------------------------------
     Header and shell
     ------------------------------------------------------------------------- */
  .bh-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
  }

  /* Superseded by .bh-topbar in nav.css, and kept only while the last layouts
     are still on it. The blur now reads the token instead of a 16px literal, so
     the two bars cannot look like different materials during the migration: the
     documented Vapor value is 24px and this was the file that disagreed. */
  .bh-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-3) var(--sp-5);
    border-block-end: 1px solid var(--bh-hairline);
    background: var(--bh-vapor);
    -webkit-backdrop-filter: blur(var(--blur-vapor)) saturate(1.4);
    backdrop-filter: blur(var(--blur-vapor)) saturate(1.4);
    box-shadow: inset 0 1px 0 0 var(--bh-vapor-edge);
  }

  .bh-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--bh-chrome);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  /* -------------------------------------------------------------------------
     The Arc, drawn in CSS instead of loaded as an SVG.

     The mark carries the Human Spectrum, and the spectrum uses a different ramp
     per theme, so any file with baked-in stops is wrong in one of them: the
     on-dark artwork's palest stop measures 1.09:1 against the light page. Drawn
     from tokens it follows the theme, and it costs no request.

     No track circle behind it, unlike the provenance ring: the logo IS the arc,
     and its incompleteness is the point. Verification is never finished.

     The SVG files stay in wwwroot/brand for email and Open Graph, where there is
     no CSS to read tokens from.
     ------------------------------------------------------------------------- */
  .bh-brandmark {
    --bh-brandmark-size: 28px;
    --bh-brandmark-w: 3px;
    --bh-arc: 78%;

    display: block;
    inline-size: var(--bh-brandmark-size);
    aspect-ratio: 1;
    flex: none;
    border-radius: var(--r-full);
    background: conic-gradient(from -90deg in oklch,
      var(--bh-tone-1) 0,
      var(--bh-tone-4) calc(var(--bh-arc) / 2),
      var(--bh-tone-7) var(--bh-arc),
      transparent var(--bh-arc) 100%);
    mask: radial-gradient(farthest-side,
      transparent calc(100% - var(--bh-brandmark-w)),
      black calc(100% - var(--bh-brandmark-w)));
  }

  .bh-header__nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-inline-start: auto;
    font-size: var(--fs-body-s);
  }

  .bh-header__nav a {
    color: var(--bh-titanium);
    text-decoration: none;
  }
  .bh-header__nav a:hover,
  .bh-header__nav a[aria-current="page"] { color: var(--bh-chrome); }

  .bh-main {
    inline-size: 100%;
    max-inline-size: 1100px;
    margin-inline: auto;
    padding: var(--sp-7) var(--sp-5) var(--sp-9);
  }

  /* .bh-footer now lives in nav.css, with the rest of the navigation chrome.
     It was declared here as well, and two declarations of the same selector in
     the same cascade layer means the winner is decided by which stylesheet the
     layout happens to link last. That is the exact failure the .bh-badge comment
     above warns about, so it gets one home. */

  /* .bh-lang, the pill of uppercase ISO codes, is gone. Both places that used it -
     the byh.one top bar and the verification portal's masthead - now open a
     .bh-menu listing each language in its own language, because a switcher that
     renders "en" and "es" asks the reader to know an ISO table, and the portal in
     particular is opened by people arriving from a citation in a language they do
     not read. See surfaces.css for the menu. */

  /* -------------------------------------------------------------------------
     Evidence block — hashes, credential IDs, Merkle paths.
     ------------------------------------------------------------------------- */
  .bh-evidence-row {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: var(--sp-2) var(--sp-4);
    padding-block: var(--sp-2);
    border-block-end: 1px solid var(--bh-hairline);
    font-size: var(--fs-body-s);
  }

  .bh-evidence-row dt { color: var(--bh-titanium); }
  .bh-evidence-row dd {
    margin: 0;
    font-family: var(--ff-evidence);
    font-size: var(--fs-micro);
    overflow-wrap: anywhere;
  }

  /* Container queries, not viewport breakpoints: a component should respond to
     the space it is given, not to the size of the window. */
  .bh-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    container-type: inline-size;
  }
}