@layer components {
  /* Side pager — vertical dot indicator in the dark margin beside the board. */
  .side-pager {
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 40;
  }
  .pager-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 235, 210, 0.32);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
  }
  .pager-dot:hover { background: rgba(255, 235, 210, 0.6); }
  .pager-dot.on {
    background: rgba(255, 235, 210, 0.95);
    transform: scale(1.25);
  }

  /* "Scroll to continue" prompt at the bottom of an active sheet. */
  .scroll-flip {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    padding: 14px 0 16px;
    text-align: center;
    font-family: var(--sans);
    font-size: var(--cap-sm);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-soft);
    background: linear-gradient(180deg, rgba(244,240,232,0) 0%, rgba(244,240,232,0.9) 50%, rgba(244,240,232,1) 100%);
    z-index: 15;
    cursor: pointer;
    border: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    user-select: none;
    font-weight: var(--weight-semibold);
  }
  .scroll-flip:hover { color: var(--ink); }
  .scroll-flip .arrow { font-size: 14px; animation: bob 1.6s ease-in-out infinite; }
  @keyframes bob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(3px); opacity: 1; }
  }
  .scroll-flip.disabled { opacity: 0.3; pointer-events: none; }
  .scroll-flip.disabled .arrow { animation: none; }

  /* Hero scroll hint (used on invite). */
  .scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: var(--cap-sm);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-semibold);
  }
  .scroll-hint svg { animation: chev-bob 1.6s ease-in-out infinite; }
  @keyframes chev-bob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(3px); opacity: 1; }
  }

  /* Page-corner fold (nav affordance, bottom-right of a sheet). */
  .page-corner {
    position: absolute;
    bottom: 0; right: 0;
    width: 76px; height: 76px;
    cursor: pointer;
    z-index: 12;
    background: transparent;
    border: none;
    padding: 0;
  }
  .page-corner svg { display: block; width: 100%; height: 100%; }
  .page-corner:hover .pc-fold { transform: translate(-3px, -3px); }
  .pc-fold { transition: transform .18s ease; transform-origin: bottom right; }
  .page-corner.left { right: auto; left: 0; transform: scaleX(-1); }
}