/* ==========================================================================
   SIGMA SCANNER — cookie-consent.css
   A single fixed-bottom consent banner, shared across every page.

   ---------------------------------------------------------------------------
   WHY THE MARKUP IS JS-INJECTED, NOT HAND-WRITTEN PER PAGE
   ---------------------------------------------------------------------------
   Every other component in this project (nav, footer) is hand-written into
   each HTML file, because each one carries page-specific content — a
   different aria-current link, a different breadcrumb. This banner has
   zero page-specific content: the same three sentences and the same button
   everywhere. Hand-copying identical markup into every page is exactly the
   kind of thing that quietly drifts out of sync (a copy-edit lands on one
   page and not the other four) — so js/cookie-consent.js builds the one
   markup block once and every page just links this stylesheet plus that
   script. See that file's own header for the render + consent logic.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   @layer components, same as every other stylesheet in this project — an
   override left in @layer layout has silently lost to a components-layer
   base rule more than once here, regardless of specificity.
   ========================================================================== */

@layer components {

  .ss-cookie {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-toast);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .ss-cookie__card {
    pointer-events: auto;
    inline-size: 100%;
    background: var(--paper);
    border-block-start: 1px solid var(--ink-150);
    box-shadow: var(--shadow-lg);

    /* Enter/exit is a plain opacity+rise fade, matching this project's own
       reveal grammar (animations.css: "everything rises slightly and
       resolves — no fly-ins, no bounce"). Starts already visible so a
       first-time visitor sees it immediately, not after a delay; the
       animation only plays going the other way, on dismiss. */
    animation: ss-cookie-in 420ms var(--ease-out-cubic);
  }
  .ss-cookie__card.is-leaving {
    animation: ss-cookie-out 260ms var(--ease-out-quad) forwards;
  }

  /* The strip touches both screen edges; the actual text/button line up
     with the same container width every other section on the page uses. */
  .ss-cookie__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    max-inline-size: var(--container);
    margin-inline: auto;
    padding: var(--sp-5) var(--sp-6);
  }

  @keyframes ss-cookie-in {
    from { opacity: 0; transform: translateY(var(--reveal-y-sm)); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes ss-cookie-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(var(--reveal-y-sm)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ss-cookie__card,
    .ss-cookie__card.is-leaving { animation: none; }
  }

  .ss-cookie__title {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--ink-900);
    margin-block-end: 2px;
  }
  .ss-cookie__body {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-500);
  }

  .ss-cookie__action { flex: none; }

  /* Below this, side-by-side is too tight for comfortable line lengths —
     the card stacks, and the button (already .ss-btn, already meets the
     44px touch target everywhere else on this site) goes full-width for
     an easy tap rather than a small end-aligned target. */
  @media (max-width: 559px) {
    .ss-cookie__inner {
      flex-direction: column;
      align-items: stretch;
      gap: var(--sp-4);
      padding: var(--sp-4) var(--sp-3) calc(var(--sp-5) + env(safe-area-inset-bottom));
    }
    .ss-cookie__action .ss-btn { width: 100%; }
  }
}