@layer components {
  /* ── CLIPBOARD SCENE ──
     Cork desk-surface (Circle's tiled corkboard texture) with the beige
     clipboard paper sitting on top as the actual screen. The cork shows
     only as a frame around the paper. */
  .clipboard-scene {
    min-height: 100vh;
    background: url("/assets/corkboard-tile-bd8a6d00.png") repeat;
    background-size: 400px 400px;
    background-color: var(--cork);
    padding: var(--space-6) var(--space-6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
  }

  /* Optional fade-in when arriving from another page. The fade-in
     controller removes [data-fade-pending] on the next animation frame. */
  .clipboard-scene.fade-in {
    transition: opacity 800ms cubic-bezier(.2, .7, .2, 1);
  }
  .clipboard-scene.fade-in[data-fade-pending] { opacity: 0; }

  /* Legacy masonite board — kept only for compat with views still using
     <div class="board">. New clipboard renders the paper directly on cork
     and skips this entirely. Safe to delete once all views migrate. */
  .board.legacy-only {
    background:
      radial-gradient(ellipse at 30% 20%, #7a5b3c 0%, var(--board) 40%, var(--board-2) 100%);
    position: relative;
    border-radius: 4px;
    box-shadow:
      inset 0 0 0 1px var(--board-edge),
      inset 0 1px 0 rgba(255, 220, 180, 0.15),
      0 22px 50px rgba(20, 12, 4, 0.45),
      0 6px 14px rgba(20, 12, 4, 0.25);
  }
  .board::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background-image: repeating-linear-gradient(
      92deg,
      transparent 0 13px,
      rgba(0,0,0,0.07) 13px 14px,
      transparent 14px 27px,
      rgba(255, 230, 200, 0.04) 27px 28px
    );
    pointer-events: none;
  }
  .board::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background-image:
      radial-gradient(circle at 12% 35%, rgba(0,0,0,0.18) 0 1px, transparent 2px),
      radial-gradient(circle at 78% 12%, rgba(0,0,0,0.15) 0 1px, transparent 2px),
      radial-gradient(circle at 55% 80%, rgba(0,0,0,0.12) 0 1px, transparent 2px),
      radial-gradient(circle at 33% 60%, rgba(255,220,180,0.1) 0 1px, transparent 2px),
      radial-gradient(circle at 88% 90%, rgba(0,0,0,0.13) 0 1px, transparent 2px);
    pointer-events: none;
  }

  /* Board-as-stage — the beige paper IS the page. No dark wooden board
     behind it; the cork desk shows around the edges. */
  .board-stage {
    --sheet-side-gutter: 0px;
    --sheet-top-gutter: 60px;
    --sheet-bottom-gutter: 0px;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding:
      var(--sheet-top-gutter)
      var(--sheet-side-gutter)
      var(--sheet-bottom-gutter);
  }

  /* Metal clip — sits at the top of the paper stack, overlapping the
     sheet's top edge so the punched holes hide behind the clip body.
     Wide enough to host the engraved event name without competing with
     any rivet detail (rivets removed). */
  /* Image-based clip — clip.png (1255×270) supplies the metal body,
     rivets, and lever in one asset. Width is held at the original
     380px; height tracks the image's aspect ratio (~82px). The drop
     shadow stays in CSS so the clip casts onto the paper. */
  .clip {
    position: absolute;
    top: calc(var(--sheet-top-gutter) - 144px);
    left: 50%;
    transform: translateX(-50%);
    width: 810px;
    height: 174px;
    z-index: 30;
    pointer-events: none;
  }
  .clip-body {
    position: absolute;
    inset: 0;
    background: url("/assets/clip-adfccab2.png") center/contain no-repeat;
  }
  /* The PNG already includes the bar and rivets — no separate element. */
  .clip-bar { display: none; }
}