/* Library defines its own values — does NOT depend on shelves' tokens.
     Q38 (token reuse) was overruled in the Library Embed UI session:
     Webflow tab panes load embed CSS lazily, so shelves' :root tokens
     are not guaranteed to be present when Library renders. Literals
     ensure Library renders correctly regardless of which tab loaded
     first. Values mirror the shelves embed's --bs-* token values
     exactly. The one Library-specific token, --bl-grey-out, stays. */
  :root {
    --bl-grey-out: rgba(26, 26, 26, 0.35);
  }
  #blauw-library {
    font-family: 'Roboto', Arial, sans-serif;
    color: #1a1a1a;
    background: #f9f9f9;
    margin-top: 1rem;
  }
  /* Tab list — visually mirrors .bs-seg from the shelves embed. */
  .bl-tablist {
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  /* Tab button — visually mirrors .bs-seg-btn. Library uses its own class
     for ARIA correctness (these are real tabs, not filters). Explicit
     font properties because Webflow tab-pane parents may override. */
  .bl-tab {
    appearance: none;
    border: 1px solid #dadada;
    background: #f1f1f1;
    color: #1a1a1a;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 0.5rem 1rem;
    border-radius: 1px;
    cursor: pointer;
    transition: background 100ms cubic-bezier(.22,.61,.36,1);
  }
  .bl-tab:not(.is-on):hover {
    background: #ececec;
  }
  .bl-tab.is-on {
    background: #1451eb;
    color: #f1f1f1;
    border-color: #1451eb;
  }
  /* Tab panels — show/hide via [hidden]. */
  [role="tabpanel"][hidden] {
    display: none;
  }
  /* Empty state — mirrors shelves' .bs-empty-all visually. */
  .bl-empty {
    padding: 2rem 0;
    text-align: center;
  }
  .bl-empty strong {
    display: block;
    margin-bottom: 0.5rem;
  }
  /* Grey-out treatment for unscanned Artifacts (NFC 3.1 surface). */
  .bl-artifact-tile.is-unscanned {
    opacity: 1;
    color: var(--bl-grey-out);
  }
  /* Wallpaper grid — multiple cards laid out as a flex wrap.
     Container is the Wallpapers tab panel; cards arrange responsively.
     :not([hidden]) is critical: without it, display:flex overrides the
     [role=tabpanel][hidden]{display:none} rule via higher specificity,
     and the panel renders on every tab. */
  #bl-panel-wallpapers:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  /* Wallpaper card — vertical: thumbnail on top, body below.
     Self-contained values matching the Blauw aesthetic (per the
     Q38-overruled-lesson). */
  .bl-wallpaper-card {
    display: flex;
    flex-direction: column;
    width: 200px;
    background: #f1f1f1;
    border: 1px solid #dadada;
    border-radius: 1px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: background 100ms cubic-bezier(.22,.61,.36,1);
  }
  .bl-wallpaper-card:hover {
    background: #ececec;
  }
  .bl-wallpaper-card__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #dadada;
  }
  .bl-wallpaper-card__body {
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .bl-wallpaper-card__name {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
  }
  .bl-wallpaper-card__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .bl-wallpaper-card__size-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #ffffff;
    border: 1px solid #dadada;
    border-radius: 1px;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #1a1a1a;
  }
  .bl-wallpaper-card__time {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.6);
  }

  /* === Artifacts tab (NFC 3.1 surface) =====================================
     Sectioned layout: Owned + Found objects, each with its own grid of
     tiles. Tiles are cloned from a hidden Webflow Collection List on the
     my-account page (.bl-artifact-source) — Webflow renders all Artifact
     items there with proper Name + Product Image + href, and the embed
     deep-clones the matching tile per API row, injecting an edition +
     date meta line into the [data-bl-artifact-meta] placeholder.

     :not([hidden]) on the panel selector mirrors the wallpapers rule so
     display: flex doesn't override [role=tabpanel][hidden]{display:none}. */

  /* The hidden Webflow Collection List that holds every artifact tile
     template. Stays in the DOM (Webflow's CMS bindings rely on its
     render pass) but invisible. */
  .bl-artifact-source {
    display: none;
  }

  #bl-panel-artifacts:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .bl-artifact-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .bl-artifact-section-label {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(26, 26, 26, 0.6);
    margin: 0;
  }
  .bl-artifact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Tile — image on top, body (name + meta) below. Same 200px width
     as a wallpaper card for visual parity across the library. */
  .bl-artifact-tile {
    display: flex;
    flex-direction: column;
    width: 200px;
    background: #f1f1f1;
    border: 1px solid #dadada;
    border-radius: 1px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: background 100ms cubic-bezier(.22,.61,.36,1);
  }
  .bl-artifact-tile:hover {
    background: #ececec;
  }

  /* Image area — slightly taller than the 16:9 source so there's a
     subtle natural mat above and below the image (about 4px) from the
     aspect mismatch with object-fit: contain. No inner padding — the
     hero image goes edge-to-edge horizontally, with the tile border
     plus the minimal mat doing the framing. */
  .bl-artifact-tile__image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: #f1f1f1;
    border-bottom: 1px solid #dadada;
  }
  /* object-fit: contain so the full image is visible. With aspect 5/3
     container and a 16/9 image, the image scales to full width and
     the 4px difference becomes a clean horizontal band of mat above
     and below — the gallery framing without the inset. */
  .bl-artifact-tile__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* NFC scanned badge — top-left corner of the image. Bare icon, no
     background pill. Three concentric arcs in the upper-left around a
     phone rectangle in the bottom-right, drawn inline by the embed at
     clone time. Sized 18x18 — a few px larger than the previous 16x16
     for better visual presence in the tile corner. */
  .bl-artifact-tile__nfc-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 18px;
    height: 18px;
    color: #1451eb;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hover sheen — a wide soft silver wash sweeps slowly across the
     image, then waits off-screen for the next pass. Loops as long as
     the tile is hovered. Tones are pure neutral grays/whites (no blue
     tint) to read as a metallic shimmer rather than a brand accent.
     Easing is symmetric for a calm, ceremonial pace. */
  .bl-artifact-tile__image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(220, 220, 220, 0.04) 25%,
      rgba(255, 255, 255, 0.22) 50%,
      rgba(220, 220, 220, 0.04) 75%,
      transparent 100%
    );
    transform: translateX(-130%);
    pointer-events: none;
  }
  .bl-artifact-tile:hover .bl-artifact-tile__image::after {
    animation: bl-artifact-sheen 5s ease-in-out infinite;
  }
  @keyframes bl-artifact-sheen {
    0%   { transform: translateX(-130%); }
    50%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
  }

  /* Body — title plus the embed-injected meta grid. */
  .bl-artifact-tile__body {
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .bl-artifact-tile__name {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
  }
  /* Meta block — two-column grid (label left, value right). Industrial
     ledger treatment: labels in sentence-case light gray, values in
     regular weight tabular numerals. align-items: baseline aligns text
     baselines across the row so the smaller label and larger value
     read as bottom-aligned despite different line-heights. */
  .bl-artifact-tile__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 3px;
    margin: 0;
    align-items: baseline;
  }
  .bl-artifact-tile__meta-label {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.55);
    line-height: 1.5;
  }
  .bl-artifact-tile__meta-value {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }