/* ===========================================================================
   Provenance components: the ring, the credential sheet, the ceremony.
   Reference: docs/design/03-ui-patterns.md
   =========================================================================== */

/* Registering --bh-arc as a typed custom property is what makes the Spectrum
   Sweep possible without a single line of JavaScript. An unregistered custom
   property is just a string to the engine and cannot be interpolated; declared
   as a <percentage> it animates like any other CSS value.

   inherits MUST be true. The ring is drawn by a ::before pseudo-element, and
   with inherits: false a pseudo-element does not receive the value set on its
   originating element — it falls back to initial-value and every arc renders at
   0%, which looks exactly like a plain track and is easy to mistake for a
   styling nit rather than the level being wrong.

   @property lives outside @layer on purpose: it is a registration, not a rule,
   and cascade layers do not apply to it. */
@property --bh-arc {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@layer components {

  /* -------------------------------------------------------------------------
     Provenance Ring — an avatar or thumbnail wrapped in its trust arc.

     The arc length carries the meaning. A user with no colour perception, or
     reading a black-and-white printout, still sees a quarter ring versus a
     closed ring. Colour is the second channel and the label is the third.
     ------------------------------------------------------------------------- */
  .bh-provenance {
    --bh-arc: 0%;
    --bh-pv-size: 56px;
    --bh-pv-ring: 3px;
    --bh-pv-gap: 3px;
    --bh-pv-color: var(--bh-aurora);

    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--bh-pv-size);
    aspect-ratio: 1;
    flex: none;
  }

  /* The ring itself. Two stacked conic gradients — the arc on top of a full
     track — masked into an annulus so the avatar stays visible in the middle. */
  .bh-provenance::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-full);
    background:
      conic-gradient(from -90deg,
        var(--bh-pv-color) 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-pv-ring)),
      black calc(100% - var(--bh-pv-ring)));
  }

  /* From C3 the ring switches from Aurora to the Human Spectrum: the creation
     process itself was witnessed, so the human enters the mark. */
  .bh-provenance--spectrum::before {
    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%);
  }

  /* C0 is a dotted track, because nothing is proven. Recessive but legible:
     #68687A at 3.48:1, not titanium-dim at 2.79:1. Someone who cannot see this
     ring is missing the most important information on the card. */
  .bh-provenance--none::before {
    background: none;
    mask: none;
    border: var(--bh-pv-ring) dotted var(--bh-state-dim);
  }

  .bh-provenance__avatar {
    inline-size: calc(100% - 2 * (var(--bh-pv-ring) + var(--bh-pv-gap)));
    aspect-ratio: 1;
    border-radius: var(--r-full);
    object-fit: cover;
    background: var(--bh-surface-3);
  }

  /* Initials fallback, so a user with no picture still gets a real avatar
     instead of a broken image icon. */
  .bh-provenance__initials {
    display: grid;
    place-items: center;
    inline-size: calc(100% - 2 * (var(--bh-pv-ring) + var(--bh-pv-gap)));
    aspect-ratio: 1;
    border-radius: var(--r-full);
    background: var(--bh-surface-2);
    color: var(--bh-titanium);
    font-size: calc(var(--bh-pv-size) * 0.3);
    font-weight: 600;
    letter-spacing: 0;
    user-select: none;
  }

  .bh-provenance--sm { --bh-pv-size: 32px; --bh-pv-ring: 2px; --bh-pv-gap: 2px; }
  .bh-provenance--lg { --bh-pv-size: 96px; --bh-pv-ring: 4px; --bh-pv-gap: 4px; }
  .bh-provenance--xl { --bh-pv-size: 160px; --bh-pv-ring: 6px; --bh-pv-gap: 6px; }

  /* -------------------------------------------------------------------------
     Arc mark — the small ring used inside a trust badge.

     This was originally the drawn badge-cN.svg files loaded through <img>, and
     that was wrong for one specific reason: a static SVG has its colours baked
     in, so on the Paper reading surface the Aurora ring measured about 1.5:1
     against warm white and failed WCAG 1.4.11, which asks 3:1 for a graphical
     object. Drawn as CSS it consumes the same themed tokens as everything else
     and follows the surface it is placed on. It also removes five HTTP requests.

     The SVG files stay in wwwroot/brand for contexts that cannot run CSS:
     e-mail, Open Graph images, app store assets.
     ------------------------------------------------------------------------- */
  .bh-arcmark {
    --bh-arc: 0%;
    --bh-arcmark-size: 16px;
    --bh-arcmark-w: 2.5px;
    --bh-arcmark-color: var(--bh-aurora);

    display: block;
    inline-size: var(--bh-arcmark-size);
    block-size: var(--bh-arcmark-size);
    flex: none;
    border-radius: var(--r-full);
    background:
      conic-gradient(from -90deg,
        var(--bh-arcmark-color) 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-arcmark-w)),
      black calc(100% - var(--bh-arcmark-w)));
  }

  .bh-arcmark--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%);
  }

  .bh-arcmark--none {
    background: none;
    mask: none;
    border: 2px dotted var(--bh-state-dim);
  }

  /* The drawn badge-c4.svg carries an Ember core inside the closed ring. That is
     deliberately not reproduced here: the annulus mask would clip any centred
     pseudo-element, and reproducing it needs mask-composite gymnastics for a
     channel that is already covered. C3 is a three-quarter arc, C4 is closed,
     and both carry a text label. That is enough to tell them apart.

     ------------------------------------------------------------------------- */

  /* -------------------------------------------------------------------------
     Credential Sheet — what opens when someone asks "how do you know?"

     Built on the native Popover API: no JavaScript, no focus-trap library, no
     click-outside listener. The platform gives light dismiss, Escape, focus
     management and top-layer stacking for free, and gets all of them right.
     ------------------------------------------------------------------------- */
  /* The sheet shell - size, position, backdrop, entry, and the head - moved to
     surfaces.css, which is where every sheet in the product now gets it.

     They were both here and there for a while, and that is not a duplicate to
     tidy up later: two declarations of one selector in one cascade layer means
     the winner is whichever stylesheet a given layout happens to link last, so
     the credential sheet would have looked different in the verify portal than
     in the feed for no reason visible in either file.

     What stays here is what is specific to a credential: the honest sentence,
     the evidence list, the limits, the actions. */

  .bh-sheet__what {
    margin-block: 0 var(--sp-4);
    color: var(--bh-titanium);
    font-size: var(--fs-body-s);
  }

  .bh-sheet__evidence { margin: 0; }

  /* The honest disclaimer. Present on every sheet, not buried in a FAQ: the
     product proves a human process, it does not detect machine authorship, and
     claiming otherwise would be the one lie that discredits everything else. */
  .bh-sheet__limit {
    margin-block: var(--sp-4) 0;
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--bh-hairline);
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  .bh-sheet__actions {
    display: flex;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
  }

  /* The trigger. A real button, so it is keyboard reachable and announced as
     interactive rather than being a div with a click handler. */
  .bh-badge-button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
  }

  /* -------------------------------------------------------------------------
     Verification Ceremony — the Spectrum Sweep.

     900ms, the only movement in the system allowed past 480ms, because it
     happens once in the lifetime of an account and it is the moment the product
     is actually about. Then the badge does one Heartbeat and stops.
     ------------------------------------------------------------------------- */
  .bh-ceremony {
    display: grid;
    justify-items: center;
    gap: var(--sp-5);
    padding-block: var(--sp-8);
    text-align: center;
  }

  .bh-ceremony__ring {
    animation: bh-spectrum-sweep var(--dur-ceremony) var(--ease-human) forwards;
  }

  /* Interpolating a registered custom property. The gradient redraws itself as
     --bh-arc travels from 0% to 100%, which is the whole animation. */
  @keyframes bh-spectrum-sweep {
    from { --bh-arc: 0%; }
    to { --bh-arc: 100%; }
  }

  .bh-ceremony__badge {
    animation: bh-heartbeat var(--dur-slow) var(--ease-spring) var(--dur-ceremony) both;
  }

  .bh-ceremony__title {
    margin: 0;
    font-size: var(--fs-h1);
    letter-spacing: -0.03em;
  }

  .bh-ceremony__what {
    margin: 0;
    max-inline-size: 46ch;
    color: var(--bh-titanium);
  }

  /* prefers-reduced-motion already zeroes the duration tokens, so the sweep
     lands on its final state instantly. This is the correct outcome: the
     information is the completed ring, not the movement. Stated explicitly here
     so nobody "fixes" it later by removing the animation entirely. */
}