@layer components {
  /* ── SOLO STAY PAGE ────────────────────────────────────────────
     A stay that belongs to no gathering gets a lighter surface than
     the clipboard: no masonite tray, no beige board — just a single
     paper card centered on the landscape, pinned by a paperclip.
     The .stay-board / .stay-board-content / .stay-board-clip hooks
     stay in the DOM so the stay-nav + stay-modal controllers (and the
     same Arrival/Departure modal) work unchanged; here we strip the
     wood and paper styling away and re-skin the clip as a paperclip.
  ─────────────────────────────────────────────────────────────── */
  .stay-shell.solo-stay-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 92px 0 var(--space-8);   /* breathing room under "Back to home page" */
  }
  .solo-stay-shell .stay-nav { position: fixed; }

  /* When the Arrival/Departure modal is up, the card behind it STAYS — its
     white paper + shadow hold solid, and only the card's content dims (the
     way the clipboard dims its prep content). So we override the shared
     .stay-board-content fade back to full and dim .solo-stay-card's children
     instead. The modal slides up under the clip; on dismiss the content
     fades back. */
  .solo-stay-shell.stay-shell--modal-open:not([data-stay-modal-pending]) .stay-board-content {
    opacity: 1;
  }
  .solo-stay-card > * { transition: opacity 320ms ease; }
  .solo-stay-shell.stay-shell--modal-open:not([data-stay-modal-pending]) .solo-stay-card > * {
    opacity: 0.22;
  }

  /* Tray + board: positioning contexts only — no wood, no paper. */
  .solo-tray {
    background: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
    margin: 0;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .solo-board {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    max-width: 660px;
    margin: 32px auto 0;
    /* position: relative inherited from .stay-board — the clip + modal
       anchor to this box. */
  }
  .solo-board .stay-board-content { padding: 0; }

  /* The paperclip — a real one, clipped over the top-left corner of the card,
     tilted the way it would actually sit. Clicking it scrolls to top. */
  .solo-clip {
    /* polish/ui-simplification: clip removed for a cleaner card. Reverse by removing this line. */
    display: none;
    position: absolute;
    top: -22px;
    left: 40px;
    width: 30px;
    height: 90px;
    margin: 0;
    padding: 0;
    z-index: 6;
    transform: rotate(-9deg);
    cursor: pointer;
    filter: drop-shadow(0 3px 4px rgba(20, 12, 4, 0.32));
  }
  .solo-clip img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .solo-clip:focus { outline: none; }
  .solo-clip:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* The card itself — paper, soft shadow, a touch of top padding so
     the clip overlaps the edge rather than the eyebrow. */
  .solo-stay-card {
    background: var(--paper);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.05),
      0 10px 28px rgba(40, 25, 5, 0.18),
      0 22px 48px rgba(40, 25, 5, 0.10);
    padding: var(--space-7) var(--space-7) var(--space-6);
    text-align: center;
  }

  /* Steward previewing someone else's stay — a yellow band breaking the card
     edge-to-edge at the top, the same marker an invitation preview wears. */
  .solo-stay-preview-banner {
    margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);
    padding: 12px 24px;
    background: #f4c14d;
    color: #2a1f00;
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    text-align: center;
    font-weight: var(--weight-semibold);
  }
  /* The name is styled like the rest of the banner — same caps + tracking,
     just a hair more weight. */
  .solo-stay-preview-banner strong { font-weight: var(--weight-bold); }
  /* Travel cards in preview mode aren't links — kill the hover lift + pointer. */
  .prep-travel-card--readonly { cursor: default; }
  .prep-travel-card--readonly:hover {
    transform: none;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.04),
      0 2px 5px rgba(40, 25, 5, 0.07);
  }

  .solo-stay-head { margin-bottom: var(--space-5); }
  .solo-stay-eyebrow {
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-3);
  }
  .solo-stay-dates {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 26px;
    line-height: 1.15;
    color: var(--ink);
  }
  .solo-stay-countdown {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--arrive);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-2);
  }

  .solo-stay-pending-banner {
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: rgba(79, 109, 122, 0.10);
    border: 1px solid rgba(79, 109, 122, 0.22);
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    text-align: left;
  }

  /* Travel — embedded form on the solo page (no modal). The form lives
     inside .solo-stay-travel; the heading sits above it like a section
     label rather than a card title. */
  .solo-stay-travel {
    text-align: left;
    margin-bottom: var(--space-5);
  }
  /* Section label, not a title — sits a notch below the hero date in the
     hierarchy, so it reads lighter than .solo-stay-dates (--weight-medium). */
  .solo-stay-travel-heading {
    font-family: var(--display);
    font-style: normal;
    font-size: 22px;
    font-weight: var(--weight-normal);
    margin: 0 0 14px;
    color: var(--ink);
  }
  /* On the solo page the travel Save sits centered (matching the centered
     "Cancel this stay" below), with room above it; the shared modal keeps it
     right-aligned and tight. */
  .solo-stay-travel .logistics-actions {
    justify-content: center;
    margin-top: var(--space-6);
  }

  /* Read-first editing: a "Travel details" disclosure whose summary carries the
     heading + an edit affordance. Opening it reveals the single edit form and
     drops the read view below — the same <details> reveal the inline note and
     party editors use. */
  .solo-stay-edit-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
    margin-bottom: 14px;
  }
  .solo-stay-edit-summary::-webkit-details-marker { display: none; }
  .solo-stay-edit-summary .solo-stay-travel-heading { margin: 0; }
  .solo-stay-edit-affordance {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-faint);
    white-space: nowrap;
  }
  /* "edit ✎" when closed, "close ✕" once the form's open. */
  .solo-stay-edit:not([open]) .solo-stay-edit-label-close { display: none; }
  .solo-stay-edit[open] .solo-stay-edit-label-open { display: none; }
  .solo-stay-edit[open] ~ .solo-stay-read { display: none; }
  /* Read mode reuses the form's tinted grey leg-block look (.logistics-leg-block)
     so it reads as the same form, just uneditable — and a touch more compact.
     The travel legs inside borrow the modal-trigger card's big-date treatment
     (.prep-travel-legs / .prep-travel-summary) for hierarchy. */
  .solo-stay-read {
    background: var(--paper-warm-2);
    border-radius: 4px;
    padding: var(--space-4) 18px;
  }
  .solo-stay-read-facts {
    display: grid;
    gap: 12px;
  }
  .solo-stay-read .solo-stay-fact dt { margin-bottom: 2px; }
  .solo-stay-read .solo-stay-fact dd { color: var(--ink); }
  /* Hairline splitting the travel legs from who's-coming + note. */
  .solo-stay-read-rule {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 14px 0;
  }

  .solo-stay-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    text-align: left;
    margin: 0 0 var(--space-5);
  }
  /* When the editable count's moved into the form above, only "Where you'll
     stay" is left here — let it span the full width instead of half. */
  .solo-stay-facts--single { grid-template-columns: 1fr; }
  .solo-stay-fact dt {
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    /* Neutral label — ties to the form's "Arrival / Departure" leg headings. */
    color: var(--ink-soft);
    font-weight: var(--weight-bold);
    margin-bottom: 3px;
  }
  .solo-stay-fact dd {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-soft);
  }

  .solo-stay-note {
    text-align: left;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .solo-stay-note-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }
  .solo-stay-note-label {
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-bold);
  }
  .solo-stay-note-editor summary { cursor: pointer; list-style: none; }
  .solo-stay-note-editor summary::-webkit-details-marker { display: none; }
  .solo-stay-note-edit {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-faint);
  }
  .solo-stay-note-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* Save sizes to its text, not the textarea */
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  .solo-stay-note-form .textarea { align-self: stretch; }
  /* Editing happens in place: the body text gives way to the textarea. */
  .solo-stay-note-editor[open] ~ .solo-stay-note-body { display: none; }
  .solo-stay-note-body {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
  }
  .solo-stay-note-body.muted { color: var(--ink-faint); font-style: normal; }

  /* Party-size editor — the same in-place "edit ✎" reveal as the note, sitting
     inside the "Who's coming" fact whenever the count's still editable; once a
     cabin locks it, the fact drops to a read-only line + an "email a steward" note. */
  .solo-stay-party-editor summary { cursor: pointer; list-style: none; }
  .solo-stay-party-editor summary::-webkit-details-marker { display: none; }
  .solo-stay-party-head {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
  }
  .solo-stay-party-edit {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-faint);
  }
  .solo-stay-party-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  .solo-stay-party-flabel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink-faint);
  }

  /* Cabin's set: the count is locked, with a line pointing at a steward. */
  .solo-stay-party-lock {
    margin: 6px 0 0;
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-faint);
  }
  .solo-stay-party-lock a { color: inherit; text-decoration: underline; }

  .solo-stay-foot {
    margin-top: var(--space-6);
    text-align: center;
  }

  @media (max-width: 600px) {
    .solo-stay-travel,
    .solo-stay-facts { grid-template-columns: 1fr; }
    .solo-board { margin-top: 20px; }
    .solo-clip { left: 28px; }
  }
}