@layer components {
  /* ── Stay shell ──
     One page architecturally for every stay/* URL. Cork desk wraps the
     beige board (the prep page); summoned cards (Profile, Logistics)
     layer onto the board itself — they're NOT floating modals. They
     scroll with the rest of the page. The clip is absolute on the
     board too; it's hidden when no card is summoned and slides into
     place when one is. */

  /* The shell paints cork on the body and html roots so the texture
     covers the entire viewport edge-to-edge regardless of content
     height, scroll bounce, or pull-to-refresh gestures. */
  html:has(.stay-shell),
  body:has(.stay-shell) {
    background-color: #4f6d7a;
  }

  .stay-shell {
    position: relative;
    min-height: 100vh;
    background-color: #4f6d7a;
    padding: 92px var(--space-6) var(--space-9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* Landscape backdrop — inline SVG rendered as the first child of the
     shell. Fixed to the viewport so the board scrolls in front of a
     stable scene. Pointer-events disabled so it never intercepts clicks. */
  .stay-landscape {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
  }

  /* ── Stay nav bar ──
     Sits in the cork space above the clip. The gap between nav and
     clip is the nav-bar clearance — the modal anchor floor is the
     board top, never higher. */
  .stay-nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 64px;
    /* Right padding reserves space for the fixed avatar (36px wide
       sitting at right: 32px) so the +new-gathering CTA never slides
       under it. */
    padding: 0 88px 0 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 80;
    pointer-events: auto;
    transition: opacity 220ms ease;
  }
  .stay-nav--hidden {
    opacity: 0;
    pointer-events: none;
  }
  .stay-nav-brand {
    font-family: var(--display);
    font-style: normal;
    font-size: 18px;
    font-weight: var(--weight-bold);
    color: rgba(255,255,255,0.94);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.30);
    text-decoration: none;
  }
  .stay-nav-brand:hover { color: #fff; text-decoration: none; }
  /* Wordmark fades on scroll past the nav-bar threshold. The avatar
     stays put because it's a separate element. */
  .stay-nav-brand {
    transition: opacity 220ms ease, transform 220ms ease;
  }
  .stay-nav-brand.scrolled {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  .stay-nav-links {
    display: flex;
    gap: 18px;
    flex: 1;
  }
  .stay-nav-link {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    padding: 4px 2px;
  }
  .stay-nav-link:hover { color: #fff; text-decoration: underline; }
  .stay-nav-avatar {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-warm);
    border: 1px solid rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: var(--ink);
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: var(--weight-semibold);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform .12s ease;
  }
  /* Pin the photo to the container so flex-item intrinsic sizing can't shrink it. */
  .stay-nav-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .stay-nav-avatar:hover { transform: translateY(-1px); text-decoration: none; }
  /* The avatar is now a <button> — reset native chrome. */
  button.stay-nav-avatar {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font: inherit;
  }
  button.stay-nav-avatar:focus { outline: none; }
  button.stay-nav-avatar:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 2px;
  }

  /* ── Avatar dropdown ──
     Wrap is detached from the flex nav and pinned to the top-right of
     the viewport so the avatar remains visible as the page scrolls.
     The dropdown still positions absolutely against this wrap. */
  .stay-nav-avatar-wrap {
    position: fixed;
    top: 14px;
    right: 32px;
    z-index: 90;
  }
  /* Avatar dropdown — a stack of glass pill buttons that drops below
     the avatar when open. No paper card; each item is its own pill,
     same family as .btn-glass. */
  .avatar-menu {
    position: absolute;
    top: 48px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 90;
  }
  .avatar-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Each pill borrows a region color from the landscape SVG (teal,
     purple, olive) so the menu reads as part of the same palette
     rather than floating glass. Sign-out uses ink as the calmer
     last entry. */
  .avatar-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 18px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: #B57DB5;                   /* fallback — overridden per item */
    border: 1px solid rgba(0, 0, 0, 0.20);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.15s ease;
  }
  .avatar-menu-item:nth-child(1) { background: #B57DB5; }   /* purple sky */
  .avatar-menu-item:nth-child(2) { background: #74832A; }   /* olive ground */
  .avatar-menu-item:nth-child(3) { background: var(--ink); }/* sign out — calm */
  /* Sign-out is a button_to-rendered form. The form is the nth-child;
     its inner button carries .avatar-menu-item but isn't a direct
     child of .avatar-menu, so the nth-child color rule above doesn't
     match. Set it explicitly. */
  .avatar-menu form { display: contents; margin: 0; }
  .avatar-menu form button.avatar-menu-item--signout { background: var(--ink); }
  .avatar-menu-item:hover {
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
    transform: translateX(-1px);
  }
  .avatar-menu-item--quiet { opacity: 0.92; }
  .avatar-menu-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* The beige board IS the prep page. Padding-top is 0 — the card and
     prep content live at the very top of the board, sharing the same
     baseline. Internal breathing room comes from .stay-board-content. */
  /* ── Wood tray ──
     Thin masonite backer wrapping the paper board so the clipboard
     metaphor reads beyond just the metal clip. Tray is sized just
     larger than the board, so on wide viewports only a hairline of
     wood is visible past the paper edge. On narrow viewports the tray
     fills the available width and the wood frame absorbs whatever gap
     existed between paper and shell padding. */
  /* Glass return button — sits centered on the landscape below the
     tray, takes the member back to the lodge. Uses the shared
     .btn-glass shape so it matches other landscape-resting CTAs. */
  .stay-back-home {
    position: relative;
    z-index: 1;
    margin: var(--space-7) auto 0;
    align-self: center;
  }

  /* Quiet withdraw link — sits under the back-home pill. Subtle by
     design; this is a serious-but-rare action. */
  .stay-withdraw-link {
    position: relative;
    z-index: 1;
    display: block;
    margin: var(--space-4) auto var(--space-6);
    text-align: center;
    font-family: var(--sans);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .stay-withdraw-link:hover { color: #fff; }

  .stay-board-tray {
    position: relative;
    /* The tray creates the actual stacking context for the board's
       contents. Lift it above .stay-back-home and .stay-withdraw-link
       (both at z-index: 1) so a dropdown spilling past the paper's
       bottom edge renders over the glass back-home button. */
    z-index: 2;
    width: 100%;
    max-width: 980px;
    /* Thicker wood edge on all sides (more visible masonite frame).
       Top padding is larger so a band of wood is visible above the
       paper — the clip rivets into that band. */
    padding: 22px 18px 18px;
    background-color: #3a2414;
    background-image: url("/assets/wood-drawer-6e423f3d.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: top center;
    border-radius: 6px;
    /* Routed/beveled wood edge — same family of insets as the lodge
       invite drawer, scaled down to the thinner tray border so the
       grooved frame still reads at 10px of wood. */
    box-shadow:
      inset 0 1px 0 rgba(255, 225, 185, 0.22),
      inset 0 0 0 1px rgba(0, 0, 0, 0.55),
      inset 0 0 0 4px rgba(60, 35, 18, 0.85),
      inset 0 0 0 5px rgba(255, 215, 170, 0.18),
      inset 0 0 0 7px rgba(0, 0, 0, 0.40),
      0 -1px 0 rgba(0, 0, 0, 0.18),
      0 12px 26px rgba(20, 12, 4, 0.45),
      0 24px 52px rgba(20, 12, 4, 0.22);
  }

  .stay-board {
    position: relative;
    /* z-index: 2 lifts the board (and everything inside it — modals,
       the host-picker dropdown, etc.) above .stay-back-home and
       .stay-withdraw-link below, both of which sit at z-index: 1.
       Without this, a dropdown that extends past the paper's bottom
       edge renders behind the glass back-home button. */
    z-index: 2;
    width: 100%;
    max-width: none;
    background: var(--paper);
    border-radius: 0;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.06),
      inset 0 0 0 1px rgba(58, 36, 20, 0.12);
    padding: 0 80px 72px;
    /* Establish a block formatting context so the clip's negative top
       margin pulls only the clip up — without flow-root, that margin
       would collapse through and drag the paper out of the tray. */
    display: flow-root;
  }
  .stay-board-content {
    position: relative;
    z-index: 0;
    padding-top: 100px;
    transition: opacity 320ms ease;
  }

  /* When a card is layered on top AND not in pending state, dim the
     prep CONTENT to ~22% opacity. Pending == card is animating in or
     out: in those phases prep returns to full opacity, fading back as
     the card slides away. */
  .stay-shell--modal-open:not([data-stay-modal-pending]) .stay-board-content {
    opacity: 0.22;
    /* Disable clicks on the dimmed content while a modal is open. The
       click event still bubbles to .stay-shell (where the dismiss
       action lives), but nothing inside the dimmed area can be
       activated. */
    pointer-events: none;
  }
  .stay-board-content { transition: opacity 320ms ease; }

  /* ── Anchored clip ──
     Sticky inside the board's flow. As the page scrolls, the clip
     scrolls with content until its top edge would pass viewport
     top - 28; from there it sticks (top portion cut off, bottom half
     remains visible). */
  /* Sticky clip — top cut off but stops short of the engraved label
     (which sits at y=18 inside the clip), so "Corkins Exchange 2026"
     stays fully readable when pinned. The clip is part of the board's
     identity and stays visible through every state — including modal
     entrance and close — so we don't gate it on the pending flag. */
  .stay-board-clip {
    display: block;
    position: sticky;
    /* Sticky anchor: when pinned, the lever curve and the very top of
       the body are clipped above the fold, but rivets + body + bar all
       still read. */
    top: -44px;
    width: 370px;
    height: 79px;
    /* Default position — clip sits with its lever cresting well above
       the tray top; bar overlaps the paper below. */
    margin: -52px auto -50px;
    z-index: 60;
    cursor: pointer;
  }
  .stay-board-clip:focus { outline: none; }
  .stay-board-clip:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* ── Summoned card ──
     Absolute on the board, centered. Scrolls with the page. Slides up
     from below on entry. Each card variant is its own designed thing —
     distinct paper, decorations, padding, etc. */
  /* Card sits at the top of the board, aligned with the clip's flow
     position. The card's internal padding-top makes room for the clip
     overlap so the heading and form fields never collide with the clip
     visually — even as the user scrolls and the clip's bottom half stays
     pinned at the top of the viewport. */
  .stay-modal-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 760px;
    max-width: calc(100% - 48px);
    z-index: 2;
    background: var(--paper);
    border-radius: 14px;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.04),
      0 4px 10px rgba(40, 25, 5, 0.10);
    padding: 64px 60px 64px;
    transform: translate(-50%, 0);
    transition: transform 480ms cubic-bezier(.18, .85, .25, 1);
  }
  .stay-shell[data-stay-modal-pending] .stay-modal-card {
    transform: translate(-50%, 100vh);
  }

  /* Close affordance — small ring with an X glyph, sits at the card's
     top-right corner. Click-outside also dismisses (handled by the
     stay-modal Stimulus controller). */
  .stay-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ink-faint);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    z-index: 3;
    transition: color 0.15s ease;
  }
  .stay-modal-close:hover {
    color: var(--ink);
    text-decoration: none;
  }

  /* ── Profile card variant ──
     Warm short-form paper, narrower, soft top gradient. */
  .stay-modal-card--short-form {
    width: 620px;
    background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-warm-2) 100%);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.04),
      0 4px 10px rgba(40, 25, 5, 0.10);
  }

  /* ── Logistics / todo card variant ──
     Index-card aesthetic: rounded by default, faint inner shading,
     ruled hairline near the top, slightly cooler paper. Square edges
     are opt-in per modal (tone-lined for the stay todo; the host ask
     gets squared via the .ask-modal-paper selector below). */
  .stay-modal-card--index-card {
    width: 760px;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.018) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.025) 100%),
      var(--paper);
  }
  /* Host-side ask edit modal wraps its content in .ask-modal-paper
     (ruled paper with negative margins to fill the card). Square the
     outer card so the lined inner doesn't sit inside a rounded shell. */
  .stay-modal-card:has(.ask-modal-paper) {
    border-radius: 0;
  }
  .stay-modal-card--index-card::after {
    content: '';
    position: absolute;
    left: 32px; right: 32px;
    top: 44px;
    height: 1px;
    background: var(--arrive-ring);
    pointer-events: none;
  }

  /* ── Letter card variant ──
     Welcome-letter modal — warm paper with the same texture as the
     stationery preview, square edges so it reads as a sheet of paper
     pulled out of a folder rather than a rounded UI panel. */
  .stay-modal-card--letter {
    width: 760px;
    border-radius: 0;
    background-color: var(--paper-warm);
    background-image: var(--paper-texture);
    background-repeat: repeat;
    background-size: 480px auto;
  }

  /* ── Tone variants — paint the whole modal card. ── */
  .stay-modal-card--tone-arrive,
  .stay-modal-card--tone-depart {
    width: 560px;
    padding: 48px 44px 40px;
  }
  .stay-modal-card--tone-arrive {
    background: var(--arrive-paper);
  }
  .stay-modal-card--tone-arrive.stay-modal-card--index-card {
    width: 560px;
    padding: 48px 44px 40px;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.02) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.03) 100%),
      var(--arrive-paper);
  }
  .stay-modal-card--tone-arrive.stay-modal-card--index-card::after {
    display: none;
  }

  .stay-modal-card--tone-depart {
    background: var(--depart-paper);
  }
  .stay-modal-card--tone-depart.stay-modal-card--index-card {
    width: 560px;
    padding: 48px 44px 40px;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.02) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.03) 100%),
      var(--depart-paper);
  }
  .stay-modal-card--tone-depart.stay-modal-card--index-card::after {
    display: none;
  }

  /* Neutral tone — same card treatment, paper-warm ground. */
  .stay-modal-card--tone-neutral {
    width: 560px;
    padding: 48px 44px 40px;
    background: var(--paper-warm);
  }
  .stay-modal-card--tone-neutral.stay-modal-card--index-card {
    width: 560px;
    padding: 48px 44px 40px;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.02) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.03) 100%),
      var(--paper-warm);
  }
  .stay-modal-card--tone-neutral.stay-modal-card--index-card::after {
    display: none;
  }

  /* Lined-paper tone — for todo modals. Square corners, no inner
     frame; the lined paper carries the texture instead. */
  .stay-modal-card--tone-lined,
  .stay-modal-card--tone-lined.stay-modal-card--index-card {
    width: 560px;
    padding: 48px 44px 40px;
    border-radius: 0;
    background-color: #fbf6e7;
    background-image:
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 31px,
        rgba(74, 124, 78, 0.09) 31px,
        rgba(74, 124, 78, 0.09) 32px
      );
  }
  .stay-modal-card--tone-lined.stay-modal-card--index-card::after {
    display: none;
  }

  /* Inner printed-paper frame — a thin hairline drawn just inside the
     edges of any tone-treated modal card. The lined-paper tone opts
     out (its rule rhythm is the texture). */
  .stay-modal-card--tone-arrive::before,
  .stay-modal-card--tone-depart::before,
  .stay-modal-card--tone-neutral::before {
    content: '';
    position: absolute;
    top: 14px; right: 14px; bottom: 14px; left: 14px;
    border: 1px solid currentColor;
    pointer-events: none;
    border-radius: 4px;
  }
  .stay-modal-card--tone-arrive::before  { color: var(--arrive-line); }
  .stay-modal-card--tone-depart::before  { color: var(--depart-line); }
  .stay-modal-card--tone-neutral::before { color: rgba(0,0,0,0.14); }

  /* ── Mobile (≤ 768px) ── must come AFTER all base rules to override. */
  @media (max-width: 768px) {
    .stay-shell { padding: 84px 4px 32px; }
    .stay-nav { padding: 0 70px 0 16px; height: 64px; gap: 14px; }
    .stay-nav-brand { font-size: 17px; }
    .stay-nav-link { font-size: 14px; }
    .stay-nav-avatar { width: 40px; height: 40px; font-size: 12px; }
    .stay-nav-avatar-wrap { top: 12px; right: 16px; }
    .stay-board-tray { padding: 16px 10px 10px; }
    .stay-board { padding: 0 14px 48px; }
    .stay-board-clip {
      width: 292px;
      max-width: calc(100% - 24px);
      height: 62px;
      top: -34px;
      margin: -40px auto -40px;
    }

    .stay-modal-card,
    .stay-modal-card--short-form,
    .stay-modal-card--index-card,
    .stay-modal-card--tone-arrive,
    .stay-modal-card--tone-arrive.stay-modal-card--index-card,
    .stay-modal-card--tone-depart,
    .stay-modal-card--tone-depart.stay-modal-card--index-card,
    .stay-modal-card--tone-neutral,
    .stay-modal-card--tone-neutral.stay-modal-card--index-card,
    .stay-modal-card--tone-lined,
    .stay-modal-card--tone-lined.stay-modal-card--index-card {
      width: calc(100% - 16px);
      max-width: calc(100% - 16px);
      /* Top padding is bigger so the sticky clip doesn't overlap the
         direction title or date stamp at the top of the card. */
      padding: 64px 22px 28px;
    }
    .stay-modal-card--tone-arrive::before,
    .stay-modal-card--tone-depart::before,
    .stay-modal-card--tone-neutral::before {
      top: 8px; right: 8px; bottom: 8px; left: 8px;
    }
    .stay-modal-close { top: 12px; right: 14px; }
  }
}