/* ============================================================================
   COVER CARD — single source of truth (extracted Jun 2026).
   Canonical CSS for the 3:4 document-cover tile (.cv + band / body / code /
   title-mini / foot, availability + validity overlays, below-cover strip). The
   cover is container-query-sized — every glyph scales with the card width — so
   it renders identically at any size and to a static og:image.

   SHARED by comp-cover-card.html (catalogue / search "cover" view, all validity
   states) and comp-lib-cover.html (My-library "cover" view — valid covers +
   a library below-cover strip in _lib-cover.css). Edit HERE, not the pages.

   Dark mode is co-located token revalues only (--cv-tint 4%→13%, frost vars);
   not one .cv rule is theme-aware. Import AFTER colors_and_type.css. The
   validity-overlay geometry reads --tw-* vars set per-page (tweaks panel) /
   broadcast by the playground; defaults live on .cv__img consumers.
   ============================================================================ */

  @layer tokens {
    :root {
      --cv-tint: 4%;                          /* doc-type paper tint amount */
      --cv-frost-bg: rgba(255,255,255,0.94);  /* availability chip (frosted) */
      --cv-frost-border: rgba(12,24,56,0.10);
      --cv-frost-shadow: 0 1px 2px rgba(12,24,56,0.10);
    }
  }
  @layer theme {
    [data-theme="dark"] {
      --cv-tint: 13%;
      --cv-frost-bg: rgba(20,25,42,0.86);
      --cv-frost-border: rgba(255,255,255,0.14);
      --cv-frost-shadow: 0 1px 2px rgba(0,0,0,0.45);
    }
  }

  @layer components {

  /* ============================================================
     CARD
     ============================================================ */
  .cv {
    display: flex; flex-direction: column; gap: 10px;
    text-align: left;
    cursor: pointer;
    background: transparent; border: 0; padding: 0;
    font: inherit; color: inherit;
  }
  /* State: unified data-state vocabulary mirrors the live pseudo-classes. */
  .cv:hover .cv__img,
  .cv[data-state~="hover"] .cv__img { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .cv:hover .cv__title,
  .cv[data-state~="hover"] .cv__title { color: var(--gov-color-primary-700); text-decoration: underline; text-underline-offset: 2px; }
  .cv:focus-visible,
  .cv[data-state~="focus"] { outline: none; }
  .cv:focus-visible .cv__img,
  .cv[data-state~="focus"] .cv__img { box-shadow: var(--shadow-focus); }

  /* ---------- COVER (the "image") ----------
     Container-query-sized: every text size scales with the cover width.
     3:4 portrait. Renderable to a static image for og:image / share / mobile. */
  .cv__img {
    container-type: inline-size;
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--gov-color-neutral-0);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
    isolation: isolate;
  }

  /* Default z-indices (valid covers — no validity gradient present).
     Non-valid covers restack below so the gradient covers the footer but the
     body content stays above the fade. */
  .cv__band, .cv__foot { position: relative; z-index: 1; }
  .cv__body { z-index: 1; }

  /* Type variants — set the band background as a CSS var so the edition
     gradient fade can reuse exactly the same color. Validity color is stored
     as separate r/g/b values so we can compose rgba() with tweakable alpha. */
  .cv--cos     .cv__img { --band-bg: var(--doc-cos); }
  .cv--stanag  .cv__img { --band-bg: var(--doc-stanag); }
  .cv--stanrec .cv__img { --band-bg: var(--doc-stanrec); }
  .cv--ap      .cv__img { --band-bg: var(--doc-ap); }

  .cv--invalid  .cv__img { --state-rgb: 74, 87, 92;   }
  .cv--replaced .cv__img { --state-rgb: 176, 107, 0;  }
  .cv--draft    .cv__img { --state-rgb: 125, 137, 142;}

  /* ---------- TOP BAND ---------- */
  .cv__band {
    position: relative;
    background: var(--band-bg);
    color: white;
    padding: clamp(5px, 3.4cqw, 9px) clamp(8px, 5cqw, 13px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(10px, 6cqw, 13px);
    letter-spacing: 0.06em;
    line-height: 1.1;
    overflow: hidden;
    z-index: 1;
  }
  .cv__band-mark { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .cv__band-mark i { font-size: 0.92em; opacity: 0.9; }
  /* Edition floats over the band-mark with a same-color gradient fade so
     long marks (STANREC) or long editions (Ed. 6 · Am. 6) never cut hard. */
  .cv__band-edition {
    position: absolute;
    right: clamp(8px, 5cqw, 13px);
    top: 50%;
    transform: translateY(-50%);
    padding-left: clamp(22px, 13cqw, 34px);
    background: linear-gradient(to right, transparent 0, var(--band-bg) clamp(18px, 10cqw, 28px));
    font-weight: 500;
    opacity: 0.92;
    letter-spacing: 0.02em;
    font-size: 0.92em;
    line-height: 1;
    pointer-events: none;
  }

  /* ---------- BODY ---------- */
  .cv__body {
    position: relative;
    padding: clamp(10px, 7cqw, 18px) clamp(10px, 6cqw, 14px) clamp(8px, 5cqw, 12px);
    display: flex; flex-direction: column;
    gap: clamp(4px, 2.6cqw, 8px);
    background: var(--gov-color-neutral-0);
    z-index: 0;
  }
  /* Subtle paper tint by type. Paper base = --gov-color-neutral-0 (flips to the
     dark card surface); tint amount = --cv-tint (4% light / 13% dark). Both
     resolve on the element, so this set is theme-agnostic — no _dark.css mirror. */
  .cv--cos     .cv__body { background: linear-gradient(180deg, color-mix(in oklab, var(--doc-cos) var(--cv-tint), var(--gov-color-neutral-0)), var(--gov-color-neutral-0) 60%); }
  .cv--stanag  .cv__body { background: linear-gradient(180deg, color-mix(in oklab, var(--doc-stanag) var(--cv-tint), var(--gov-color-neutral-0)), var(--gov-color-neutral-0) 60%); }
  .cv--stanrec .cv__body { background: linear-gradient(180deg, color-mix(in oklab, var(--doc-stanrec) var(--cv-tint), var(--gov-color-neutral-0)), var(--gov-color-neutral-0) 60%); }
  .cv--ap      .cv__body { background: linear-gradient(180deg, color-mix(in oklab, var(--doc-ap) var(--cv-tint), var(--gov-color-neutral-0)), var(--gov-color-neutral-0) 60%); }

  .cv__head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: clamp(20px, 11.5cqw, 28px);
  }
  .cv__eyebrow {
    flex: 1; min-width: 0;
    font-size: clamp(8.5px, 5cqw, 11px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-fg-tertiary);
    font-weight: 500;
    line-height: 1.2;
    /* fade out under the availability chip on the right */
    white-space: nowrap;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, black 0, black 70%, transparent 100%);
            mask-image: linear-gradient(to right, black 0, black 70%, transparent 100%);
  }
  .cv__code {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(22px, 14cqw, 38px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-fg-default);
    font-variant-numeric: tabular-nums;
    margin-top: clamp(0px, 0.6cqw, 4px);
    word-break: break-word;
  }
  .cv__rule {
    width: clamp(20px, 12cqw, 38px);
    height: 2px;
    background: var(--band-bg);
    opacity: 0.9;
    margin-top: clamp(2px, 1.5cqw, 6px);
  }
  /* Title inside the cover — ~2/3 of code, scales together. */
  .cv__title-mini {
    font-size: clamp(14px, 9.3cqw, 25px);
    line-height: 1.18;
    color: var(--color-fg-default);
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: clamp(2px, 2cqw, 8px);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Auto-hyphens — tweakable. Default off (manual). */
    hyphens: var(--tw-hyphens, manual);
    -webkit-hyphens: var(--tw-hyphens, manual);
  }

  /* ---------- FOOTER ---------- */
  .cv__foot {
    position: relative;
    z-index: 1;
    display: flex; align-items: center;
    padding: clamp(6px, 4cqw, 10px) clamp(8px, 5cqw, 13px);
    font-size: clamp(8.5px, 5cqw, 11px);
    color: var(--color-fg-tertiary);
    border-top: 1px solid var(--color-border-default);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    line-height: 1.1;
    overflow: hidden;
    background: inherit;
  }
  .cv__foot-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  /* Language pin on the right, with the same gradient-over-fade as the band */
  .cv__foot-r {
    position: absolute;
    right: clamp(8px, 5cqw, 13px);
    top: 50%;
    transform: translateY(-50%);
    padding-left: clamp(22px, 13cqw, 32px);
    font-weight: 600;
    background: linear-gradient(to right, transparent 0, var(--color-bg-surface) clamp(18px, 10cqw, 26px));
  }
  /* When the body tint bleeds through, match the gradient end to it. neutral-0
     flips to the dark card surface, so no _dark.css override is needed. */
  .cv--cos     .cv__foot-r { background: linear-gradient(to right, transparent 0, var(--gov-color-neutral-0) clamp(18px, 10cqw, 26px)); }
  /* paper-tint at footer is ~white from earlier gradient stop, so plain white works for all */

  /* ---------- OVERLAY: availability chip ----------
     Lives inside the eyebrow flex row so they share a vertical center. */
  .cv__over-av {
    flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--cv-frost-bg);
    backdrop-filter: blur(2px);
    border: 1px solid var(--cv-frost-border);
    border-radius: 999px;
    padding: clamp(2px, 1.4cqw, 4px) clamp(7px, 4cqw, 11px);
    font-size: clamp(9.5px, 5.6cqw, 12.5px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-fg-default);
    box-shadow: var(--cv-frost-shadow);
    white-space: nowrap;
  }
  .cv__over-av i { font-size: 0.92em; }
  .cv__over-av--pub   { color: var(--gov-color-success-700); }
  .cv__over-av--pub   i { color: var(--gov-color-success-500); }
  .cv__over-av--ctrl  i { color: var(--gov-color-warning-700); }
  .cv__over-av--login i { color: var(--gov-color-info-700); }
  .cv__over-av--meta  i { color: var(--gov-color-neutral-700); }

  /* ---------- VALIDITY OVERLAY (non-valid covers) ----------
     Two pieces:
       1. .cv__bg-fade  — full-cover gradient layer at z-index 0, BEHIND the
          band/body/foot content so the title remains readable.
       2. .cv__over-state — solid colored band + label at the bottom (z 2),
          visually replaces the footer.
     All sizes are tweakable via CSS variables. */
  .cv__bg-fade {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
  }
  /* ONE combined gradient does both jobs: solid state band at the bottom
     (0 → band-height: CSS holds the first stop's color flat) AND the fade
     above it (band-height → overlay-height: linear fade to transparent).
     The fade boundary therefore sits EXACTLY at `--tw-band-height` from the
     bottom — pixel-perfect at any band height.

     Z-stacking for non-valid covers (see rules below) puts:
       cv__foot      → z 0 (covered by gradient — footer is replaced visually)
       cv__bg-fade   → z 1 (the combined gradient)
       cv__body      → z 2 (title/code sit ABOVE the fade — readable)
       cv__band(top) → z 2
       cv__over-state→ z 3 (just the state label — its solid bg is removed,
                            the gradient already paints the band) */
  .cv--invalid .cv__bg-fade,
  .cv--replaced .cv__bg-fade,
  .cv--draft .cv__bg-fade {
    background: linear-gradient(
      to top,
      rgba(var(--state-rgb), var(--tw-band-opacity, 0.96)) var(--tw-band-height, clamp(34px, 22cqw, 60px)),
      rgba(var(--state-rgb), var(--tw-top-opacity, 0)) var(--tw-overlay-height, 58%)
    );
    z-index: 1;
  }
  /* Hide the footer entirely on non-valid covers \u2014 the state label band
     replaces it as the bottom band, and at any band-opacity < 1 the footer
     text would otherwise leak through the gradient. */
  .cv--invalid .cv__foot,
  .cv--replaced .cv__foot,
  .cv--draft .cv__foot { visibility: hidden; z-index: 0; }
  .cv--invalid .cv__body,
  .cv--replaced .cv__body,
  .cv--draft .cv__body { z-index: 2; }
  .cv--invalid .cv__band,
  .cv--replaced .cv__band,
  .cv--draft .cv__band { z-index: 2; }
  /* When body is transparent (non-valid), let the gradient show through. */
  .cv--invalid .cv__body,
  .cv--replaced .cv__body,
  .cv--draft .cv__body { background: transparent; filter: saturate(0.5); }

  .cv__over-state {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    height: var(--tw-band-height, clamp(34px, 22cqw, 60px));
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    /* No background — the gradient (.cv__bg-fade) paints the solid band so
       the fade boundary is guaranteed to align with the label band. This
       element exists only to center the state label inside that band. */
    background: transparent;
    overflow: hidden;
  }
  .cv__over-state-label {
    padding: clamp(9px, 6cqw, 18px) clamp(10px, 5cqw, 14px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(11px, 6.8cqw, 15px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    color: white;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .cv__over-state-label i { font-size: 0.95em; }

  /* Defaults: clear leftover background colour rules that previously held
     hard-coded gradients on .cv__over-state--* classes; the bg-fade owns
     them now, and the over-state owns just its solid band. */
  .cv__over-state--invalid,
  .cv__over-state--replaced,
  .cv__over-state--draft { /* solid bg already on .cv__over-state via state-rgb */ }

  /* Subtle desaturation of cover artwork (band + foot text). The title stays
     full-color so it remains the dominant focal point. */
  .cv--invalid  .cv__band,
  .cv--invalid  .cv__foot,
  .cv--replaced .cv__band,
  .cv--replaced .cv__foot,
  .cv--draft    .cv__band,
  .cv--draft    .cv__foot { filter: saturate(0.5) opacity(0.85); }
  .cv--invalid  .cv__img  { background: var(--gov-color-neutral-50); }

  /* ============================================================
     BELOW-COVER STRIP — only Title + CTA
     ============================================================ */
  .cv__meta { display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
  .cv__title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-fg-default);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(14px * 1.35 * 2);
  }
  /* CTA = the real .btn component (see _buttons.css) plus this layout modifier:
     full-width, centred label, snug top margin. Every visual state — colour,
     hover, PRESSED, focus ring, disabled, dark mode — comes from
     .btn / .btn--primary|secondary|ghost, not from here. */
  .cv__cta { margin-top: 2px; width: 100%; justify-content: center; }

  } /* end @layer components — cover-card */