/* ===========================================================================
   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.
     ------------------------------------------------------------------------- */
  .bh-sheet {
    inline-size: min(440px, calc(100vw - 2 * var(--sp-4)));
    padding: var(--sp-5);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-lg);
    background: var(--bh-surface-1);
    color: var(--bh-chrome);
    box-shadow: var(--elev-3);
  }

  @supports (corner-shape: squircle) {
    .bh-sheet { corner-shape: squircle; }
  }

  .bh-sheet::backdrop {
    background: var(--bh-scrim);
    backdrop-filter: blur(4px);
  }

  /* Entry and exit both animate, which needs allow-discrete plus a starting
     style: without them the popover pops in with no transition on the way in. */
  .bh-sheet {
    opacity: 0;
    translate: 0 8px;
    transition:
      opacity var(--dur-base) var(--ease-enter),
      translate var(--dur-base) var(--ease-enter),
      overlay var(--dur-base) allow-discrete,
      display var(--dur-base) allow-discrete;
  }

  .bh-sheet:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .bh-sheet:popover-open {
      opacity: 0;
      translate: 0 8px;
    }
  }

  /* Inline: no entry animation to wait through, because it was never hidden. */
  .bh-sheet--inline {
    opacity: 1;
    translate: 0 0;
    transition: none;
    box-shadow: var(--elev-1);
  }

  .bh-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-end: var(--sp-4);
    padding-block-end: var(--sp-4);
    border-block-end: 1px solid var(--bh-hairline);
  }

  .bh-sheet__title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
  }

  .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. */
}