@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 {
    /* polish/ui-simplification: clip removed for a cleaner board. Reverse by removing this line. */
    display: none;
    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; }
}

@layer components {
  /* ── Drafts (Jul 16, Basecamp's status model) ── */
  .ann-draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: color-mix(in srgb, #a98a4a 12%, var(--paper));
    border: 1px solid color-mix(in srgb, #a98a4a 35%, transparent);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: var(--space-4);
    font-size: 13.5px;
    color: var(--ink-soft);
  }
  .ann-draft-tag {
    display: inline-block;
    vertical-align: 2px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: #8a6d33;
    border: 1px solid color-mix(in srgb, #a98a4a 45%, transparent);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
  }
  .ann-draft-note { font-size: 13px; margin: var(--space-4) 0 0; }
  .board-compose-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  /* Never let the compose block force a sideways scroll on a phone. */
  .board-compose-form { max-width: 100%; }
  .board-compose-form .nom-input,
  .board-compose-form lexxy-editor,
  .board-compose-form trix-editor { max-width: 100%; }
  .ann-edit { margin: var(--space-4) 0 0; }
  .ann-edit-toggle { cursor: pointer; list-style: none; }
  .ann-edit-toggle::-webkit-details-marker { display: none; }
  .ann-edit-form { margin-top: var(--space-3); }
  .ann-draft-publish { margin: 0; }
  .prep-messages--face { margin: 0; }
}

@layer components {
  /* ── The board's two states (Neal, Aug 3) ──
     READING: centered head, one ＋ button, the rows in the same
     680px column the message page reads at (Basecamp's board
     posture, Gather's type). WRITING: the compose sheet alone —
     the title you type is the title everyone reads, set in the
     same display type at the same size. */
  .board-head { text-align: center; }
  .board-surface { max-width: 680px; margin: 0 auto; }
  .board-new-row { text-align: center; margin: 22px 0 8px; }
  .board-empty-note { text-align: center; margin: 30px 0 8px; font-size: 14px; }
  .board-locked-note { text-align: center; margin: 22px auto 8px; max-width: 46ch; }

  .board-compose-sheet { max-width: 680px; margin: 0 auto; }
  .board-compose-kicker { margin: 26px 0 0; }
  /* prep.css's details-composer (happenings) caps the form at 480px —
     the message sheet writes at full column width. */
  .board-compose-sheet .board-compose-form { max-width: none; margin-top: 0; }
  .board-compose-sheet .ann-title-input { margin-top: 10px; }
  .board-compose-body { margin-top: 18px; }
  .board-compose-sheet .board-compose-actions { margin-top: 18px; }
  /* The quiet placeholder under giant type — faint ink, full weight. */
  .ann-title-input::placeholder { color: var(--ink-faint); opacity: 1; }
}