@layer components {
  /* ── LODGE ──────────────────────────────────────────────────────
     The member's front room. Lives in the same cork environment as
     Stay (same nav, same paper surfaces). Reads as a mini stay-
     clipboard for whatever you've said yes to, with an invitations
     drawer as a full-width band underneath.

     Visual reference: the Corkins printed PDFs — center-aligned,
     upright sans, generous tracking. NO italics on this surface.
  ─────────────────────────────────────────────────────────────── */
  .stay-shell.lodge-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 92px 0 0;
  }

  /* On the Lodge, the nav stays pinned as you scroll. The brand and
     avatar already have text-shadow / paper backgrounds so they read
     against whatever scrolls beneath. */
  .stay-shell.lodge-shell .stay-nav {
    position: fixed;
  }

  /* "+ New gathering" in the lodge nav uses the shared .btn-glass
     utility from buttons.css. The short label is hidden until mobile. */
  .lodge-nav-cta {
    white-space: nowrap;
    background: var(--ink);
    color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    text-shadow: none;
  }
  .lodge-nav-cta:hover { background: #000; color: #fff; }
  .lodge-nav-cta-short { display: none; }
  .lodge-nav-cta:focus { outline: none; }
  .lodge-nav-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
  }

  /* Mobile: tighten the glass pill in tight nav space. The full label
     ("+ New" / "+ Request a stay") stays visible at every width — it's
     short enough to fit alongside the wrapping brand wordmark, even
     down to 320px. */
  @media (max-width: 480px) {
    .btn-glass {
      padding: 0 10px;
      font-size: 11px;
    }
  }

  .lodge-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Greeting on cork — light type, centered. Upright (no italic).
     Generous padding-bottom keeps the title block roomy without
     widening the gap between the stay cards below it. */
  .lodge-greeting {
    text-align: center;
    padding: var(--space-9) var(--space-4) calc(var(--space-9) + var(--space-7));
  }
  .lodge-greeting h1 {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
    color: var(--ink);
  }
  .lodge-greeting-name { color: var(--pink); }
  .lodge-greeting .meta {
    color: var(--ink-faint);
    margin: 0;
    font-family: var(--display);
    font-style: normal;
  }

  /* ── SNAPSHOT CARD ─────────────────────────────────────────────
     A mini stay clipboard — solid beige, center-aligned content
     to echo the printed PDFs. Tappable as a single unit → /stay.
  ─────────────────────────────────────────────────────────────── */
  .lodge-snapshot-card {
    display: block;
    width: 100%;
    background: var(--paper);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.05),
      0 8px 24px rgba(0, 0, 0, 0.16),
      0 18px 40px rgba(0, 0, 0, 0.09);
    padding: var(--space-7) var(--space-6) var(--space-7);
    color: inherit;
    text-align: center;
  }

  /* Top-of-card eyebrow — small caps in tracked sans, like a section
     marker on the printed PDFs. */
  .lodge-snapshot-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-5);
  }

  /* Compact stay — for additional confirmed stays sitting under the
     primary snapshot. Body-text register, row layout (content left,
     button right). Hand-rolled markup; nothing inherited from prep. */
  .compact-stay {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: var(--paper);
    padding: var(--space-5) var(--space-6);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.04),
      0 4px 14px rgba(0, 0, 0, 0.13),
      0 10px 24px rgba(0, 0, 0, 0.07);
  }
  .compact-stay-body {
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .compact-stay-title {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 18px;
    color: var(--ink);
    line-height: 1.25;
    margin: 0 0 4px;
    letter-spacing: 0.005em;
  }
  .compact-stay-desc {
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 8px;
    max-width: 60ch;
  }
  .compact-stay-meta {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
  }
  .compact-stay-meta .dot { color: var(--ink-faint); }
  .compact-stay-countdown {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: var(--weight-semibold);
    border-radius: 999px;
    white-space: nowrap;
  }
  .compact-stay-action { flex-shrink: 0; display: flex; gap: 8px; }

  /* "View N more" — a glass disclosure for extra hosted gatherings beyond
     the first two. The <summary> is the glass button; the list opens below. */
  .lodge-more { text-align: center; }
  .lodge-more-toggle {
    margin: 0 auto;
    list-style: none;
    cursor: pointer;
  }
  .lodge-more-toggle::-webkit-details-marker { display: none; }
  .lodge-more-toggle::marker { content: ""; }
  /* Single chevron, baseline-aligned; flips on [open]. Lives outside the
     toggling labels so it doesn.t jump between states. */
  .lodge-more-chev {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.85em;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .lodge-more[open] .lodge-more-chev { transform: rotate(180deg); }
  .lodge-more-label-open { display: none; }
  .lodge-more[open] .lodge-more-label-closed { display: none; }
  .lodge-more[open] .lodge-more-label-open { display: inline; }
  .lodge-more-list { margin-top: var(--space-3); }
  .lodge-more-list .compact-stay { margin-top: var(--space-4); }
  .lodge-more-list .compact-stay:first-child { margin-top: 0; }

  /* Center the borrowed prep-identity internals. */
  .lodge-snapshot-card .prep-identity { margin-bottom: var(--space-5); }
  .lodge-snapshot-desc {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 auto var(--space-4);
  }
  .lodge-snapshot-card .prep-identity-title {
    font-size: 28px;
    font-style: normal;
    font-weight: var(--weight-medium);
  }
  .lodge-snapshot-card .prep-identity-meta { justify-content: center; }
  .lodge-snapshot-card .prep-dates { justify-content: center; }
  .lodge-snapshot-card .prep-hosts { justify-content: center; }
  .lodge-snapshot-card .prep-hosts-link { justify-content: center; }

  /* Override prep-todos italics — no italic on the Lodge. */
  .lodge-snapshot-todos { margin: 0 0 4px; text-align: left; }
  /* Compact checklist — the prep-page .chk-* list folded into the single
     stay card: borderless rows flush within the card, hairline dividers,
     tighter spacing. Progress bar + type tags carry over for consistency. */
  .chk--compact .chk-head { margin-bottom: 8px; }
  .chk--compact .chk-title { font-size: 16px; }
  .chk--compact .chk-progress { margin-bottom: 12px; }
  .chk--compact .chk-item {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
  }
  .chk--compact .chk-list li:last-child .chk-item { border-bottom: none; }
  .chk--compact .chk-item:hover { box-shadow: none; }
  .chk--compact .chk-item:hover .chk-item-title { color: var(--ink); }
  .chk--compact .chk-item-mark { width: 18px; height: 18px; }
  .chk--compact .chk-item-title { font-size: 14px; }
  /* Completed items collapse into a single quiet summary row. */
  .chk-completed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    color: var(--ink-faint);
    font-size: 13px;
  }
  .chk-completed-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--paid);
    color: #fff;
    font-size: 10px;
    flex-shrink: 0;
  }
  .chk-due-compact {
    flex-shrink: 0;
    font-size: 12px; font-weight: var(--weight-semibold);
    color: var(--due);
  }

  /* ── HOSTING VARIANT ───────────────────────────────────────────
     Used by /lodge/host. Same snapshot card, but with a full-width
     color band on top reading "YOU ARE HOSTING", and a paired pair
     of CTAs at the bottom: "View as guest" + "Manage gathering".
     The card itself loses its outer padding so the band can reach
     edge-to-edge — internal padding moves to .lodge-snapshot-card-body.
  ─────────────────────────────────────────────────────────────── */
  .lodge-snapshot-card.lodge-snapshot-card--hosting {
    padding: 0;
    overflow: hidden;
  }
  .lodge-hosting-band {
    background: var(--ink);
    color: #fff;
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    text-align: center;
    padding: 12px var(--space-6);
  }
  .lodge-snapshot-card--hosting .lodge-snapshot-card-body {
    padding: var(--space-7) var(--space-6) var(--space-7);
  }

  /* Two-button footer — equal-weight paired CTAs side by side. */
  .lodge-snapshot-foot--pair {
    gap: var(--space-3);
  }

  /* ── THIS-WEEK VARIANT ─────────────────────────────────────────
     Snapshot when arrival is <7 days out. Same body as the default
     snapshot, but capped with a full-width arrive-green band reading
     "THIS WEEK" — pulls the eye toward the imminent stay.
  ─────────────────────────────────────────────────────────────── */
  .lodge-snapshot-card.lodge-snapshot-card--this-week {
    padding: 0;
    overflow: hidden;
  }
  .lodge-this-week-band {
    /* Bands stay black. */
    background: var(--ink);
    color: #fff;
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    text-align: center;
    padding: 12px var(--space-6);
  }
  .lodge-snapshot-card--this-week .lodge-snapshot-card-body {
    padding: var(--space-7) var(--space-6) var(--space-7);
  }
  /* Countdown pill — pink, matching the band. */
  .lodge-snapshot-card--this-week .prep-dates-countdown {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink-soft);
  }

  /* ── EMPTY STATES ──────────────────────────────────────────────
     Used by /lodge/empty when there are no confirmed stays. The
     snapshot card slot becomes a roomy, centered "nothing yet" — a
     calm expanse rather than a cramped placeholder.
  ─────────────────────────────────────────────────────────────── */
  .lodge-snapshot-card.lodge-snapshot-card--empty {
    padding: var(--space-9) var(--space-7);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
  }
  .lodge-empty-inner { max-width: 52ch; }
  .lodge-empty-inner .lodge-snapshot-eyebrow { margin-bottom: var(--space-4); }
  .lodge-empty-headline {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 28px;
    color: var(--ink);
    margin: 0 0 var(--space-4);
    line-height: 1.2;
  }
  .lodge-empty-body {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 var(--space-6);
  }

  /* Drawer empty state — quiet text on the wood. */
  .lodge-empty-drawer {
    text-align: center;
    padding: var(--space-5) 0;
    color: rgba(255, 255, 255, 0.85);
  }
  .lodge-empty-drawer p {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 16px;
    margin: 0 0 6px;
  }
  .lodge-empty-drawer-soft {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6);
    font-weight: var(--weight-normal) !important;
  }

  /* Footer — single centered "View details" button. */
  .lodge-snapshot-foot {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
  }
  /* When the checklist sits right above the foot, drop the extra top margin —
     the checklist already carries its own bottom rhythm. */
  .lodge-snapshot-todos + .lodge-snapshot-foot { margin-top: var(--space-3); }

  /* ── SOLO STAY CARD ────────────────────────────────────────────
     A confirmed stay that belongs to no gathering. Same snapshot-card
     chrome as a gathering card, but always capped with a colored band
     ("Your stay" / "Your stay · this week") that subsumes the separate
     this-week band and eyebrow, and a LEFT-aligned body: the dates are
     the headline, the rest (countdown, who's with you, the cabin) is
     one quiet meta line. No checklist, no note.
  ─────────────────────────────────────────────────────────────── */
  .lodge-snapshot-card.lodge-snapshot-card--solo {
    padding: 0;
    overflow: hidden;
  }
  /* On desktop the body is a row: the dates + meta on the left, "View
     details" inline on the right of the cell — no divider, no own line.
     (Mobile stacks it back to a column with a full-width button.) */
  .lodge-snapshot-card--solo .lodge-snapshot-card-body {
    padding: var(--space-7) var(--space-6) var(--space-7);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
  }
  /* The flex gap owns the spacing now — drop .prep-identity's own bottom margin
     so the meta line and "View details" don't end up with a triple-stacked gap. */
  .lodge-snapshot-card--solo .prep-identity { text-align: left; flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
  .lodge-snapshot-card--solo .prep-identity-title + .lodge-solo-meta { margin-top: var(--space-3); }
  .lodge-snapshot-card--solo .lodge-snapshot-foot {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .lodge-solo-meta {
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    align-items: baseline;
  }
  .lodge-solo-meta .dot { color: var(--ink-faint); }
  .lodge-solo-meta-countdown {
    color: var(--arrive);
    font-weight: var(--weight-semibold);
  }

  /* ── INVITATIONS DRAWER ────────────────────────────────────────
     Full-width surface with rounded top edge — reads as a drawer
     that's slid up from below, even though it's static. Holds
     a stack of invitation letters.
  ─────────────────────────────────────────────────────────────── */
  .lodge-drawer {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Drawer fills the remaining vertical space so it always extends
       at least to the bottom of the viewport — even when there are
       no letters / few invitations. The shell is a column flexbox
       with min-height: 100vh, so flex: 1 takes whatever's left. */
    flex: 1 0 auto;
    margin-top: var(--space-9);
    background: var(--ink);
    border-radius: 0;
    padding: var(--space-8) 0 var(--space-9);
    overflow: hidden;
  }
  /* Soft top-edge sheen — light catching the rounded lip of the wood. */
  .lodge-drawer::before { display: none; }
  /* Inner edge darkening + faint vertical grain overlay so the
     wood feels deep and slightly hand-finished, not a flat photo. */
  .lodge-drawer::after { display: none; }
  .lodge-drawer > * { position: relative; }
  .lodge-drawer-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }

  /* Section tag — a plain white label on the black drawer. */
  .lodge-drawer-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto var(--space-6);
    padding: 7px 16px;
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    text-align: center;
    color: var(--ink);
    background: #fff;
  }

  /* ── LETTER CARD ───────────────────────────────────────────────
     An invitation rendered as a letter, not a tile. No pip
     stamps — unread state shows as a calmer left-edge accent.
  ─────────────────────────────────────────────────────────────── */
  .letter-card {
    display: block;
    position: relative;
    background: var(--paper);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.06),
      0 6px 14px rgba(20, 12, 4, 0.28),
      0 18px 32px rgba(20, 12, 4, 0.22);
    padding: var(--space-5) var(--space-6) var(--space-5);
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--space-6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    transform: rotate(var(--letter-tilt, -0.6deg));
  }
  /* Scatter — each letter takes a slightly different tilt so a stack
     reads as a casually-arranged set of envelopes, not a list. */
  .letter-card:nth-child(3n)   { --letter-tilt:  0.7deg; }
  .letter-card:nth-child(3n+1) { --letter-tilt: -0.9deg; }
  .letter-card:nth-child(3n+2) { --letter-tilt:  0.4deg; }
  .letter-card:last-child { margin-bottom: 0; }
  .letter-card:hover {
    text-decoration: none;
    transform: rotate(0deg) translateY(-2px);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.06),
      0 10px 22px rgba(20, 12, 4, 0.32),
      0 26px 44px rgba(20, 12, 4, 0.22);
  }

  .letter-eyebrow {
    margin-bottom: var(--space-2);
    color: var(--ink-soft);
  }
  .letter-card h3 {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-semibold);
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    color: var(--ink);
  }
  .letter-excerpt {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
    font-style: normal;
  }
  .letter-meta {
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-tight);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-medium);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    margin-bottom: var(--space-4);
  }
  .letter-meta .dot { color: var(--ink-faint); }

  .letter-action {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--slate);
    font-weight: var(--weight-semibold);
  }
  .letter-card:hover .letter-action { color: var(--slate-hover); }

  /* ── DRAWER REQUEST SLIP ───────────────────────────────────────
     A stay you've asked for, sitting in the drawer next to inbound
     invitation letters — but lighter than an envelope: a small
     carbon-copy slip, no big title, a "waiting on a steward" line.
  ─────────────────────────────────────────────────────────────── */
  .drawer-request {
    position: relative;
    background: var(--paper-warm);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.05),
      0 4px 10px rgba(20, 12, 4, 0.22);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    transform: rotate(var(--slip-tilt, 0.5deg));
  }
  .drawer-request:nth-child(2n) { --slip-tilt: -0.6deg; }
  .drawer-request:last-child { margin-bottom: 0; }
  .drawer-request-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }
  .drawer-request-eyebrow { color: var(--ink-faint); }
  .drawer-request-ago {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .drawer-request-dates {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 17px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: var(--space-2);
  }
  .drawer-request-note {
    font-family: var(--sans);
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 var(--space-3);
  }
  .drawer-request-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .drawer-request-status {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-faint);
  }
  .drawer-request-link {
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--slate);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }
  .drawer-request-link:hover { color: var(--slate-hover); }

  /* ── DECLINED INVITATIONS DISCLOSURE ───────────────────────────
     A <details> block under the active letter pile. The summary is
     a quiet cream-on-wood pill; expanding it reveals declined items
     as line-separated rows in light text with no paper background.
  ─────────────────────────────────────────────────────────────── */
  .lodge-declined { margin-top: var(--space-6); text-align: center; }

  /* The pill uses .btn-glass for the look (inline-flex). Centering the
     <summary> requires the parent <details> to text-align center, since
     `margin: 0 auto` alone can't center an inline-level element. */
  .lodge-declined-pill {
    list-style: none;
  }
  .lodge-declined-pill::-webkit-details-marker { display: none; }
  .lodge-declined-pill::marker { content: ''; }
  .lodge-declined-pill-label--open { display: none; }
  .lodge-declined[open] .lodge-declined-pill-label--closed { display: none; }
  .lodge-declined[open] .lodge-declined-pill-label--open { display: inline; }

  /* List of declined invitations — no paper, no fill. Just light
     text on wood with hairline separators. Reset text-align so the
     parent `.lodge-declined`'s centering doesn't leak into row copy. */
  .lodge-declined-list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 240, 215, 0.18);
    text-align: left;
  }
  .lodge-declined-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 240, 215, 0.18);
  }
  .lodge-declined-row-body {
    flex: 1;
    min-width: 0;
  }
  .lodge-declined-title {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 16px;
    color: rgba(255, 245, 220, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    line-height: 1.25;
    margin-bottom: 3px;
  }
  .lodge-declined-meta {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(255, 240, 215, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.02em;
  }
  .lodge-declined-revisit {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 245, 220, 0.78);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
    flex-shrink: 0;
    transition: color 0.15s ease;
  }
  .lodge-declined-revisit:hover {
    color: rgba(255, 250, 230, 1);
    text-decoration: none;
  }

  /* ── CREATE PROMPT ─────────────────────────────────────────────
     Sits at the foot of the drawer, below any letters/requests and
     the declined-disclosures. A single frosted-glass panel holding
     the lead-in line and the create actions (request a stay; host a
     gathering, for hosts/stewards). The inner buttons are solid cream
     pills so they read against the glass. */
  /* Sits on the black drawer — hairline box, white text, white pills. */
  .lodge-create-panel {
    margin-top: var(--space-7);
    padding: var(--space-5) var(--space-6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    text-align: center;
  }
  .lodge-create-panel-lead {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 15px;
    color: #fff;
    margin: 0 0 var(--space-4);
  }
  .lodge-create-panel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }
  .lodge-create-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 18px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: #fff;
    border: 1px solid #fff;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .lodge-create-btn:hover {
    background: transparent;
    color: #fff;
    text-decoration: none;
  }

  /* ── IDENTITY-ONLY WELCOME PAGE ────────────────────────────────
     Used by /welcome (home_controller#identity_only).
  ─────────────────────────────────────────────────────────────── */
  .home { padding: var(--space-7) 0 var(--space-9); }
  .home-greeting { margin-bottom: var(--space-7); }
  .home-greeting h1 {
    font-family: var(--display);
    font-style: normal;
    font-size: 32px;
    margin-bottom: var(--space-2);
    line-height: 1.15;
  }
  .home-greeting .meta { color: var(--ink-soft); }

  /* ── SOLO FLOW (planning a stay) ───────────────────────────────
     Used by solo/dates, solo/travel, solo/submit.
  ─────────────────────────────────────────────────────────────── */
  .flow-page {
    min-height: 100vh;
    background: var(--paper);
    background-image:
      radial-gradient(circle at 20% 30%, rgba(180, 160, 120, 0.06) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(180, 160, 120, 0.07) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
  }
  .flow-card {
    width: 100%;
    max-width: 540px;
    background: var(--paper);
    padding: 56px 60px 48px;
    box-shadow: var(--shadow-paper);
    position: relative;
  }
  .flow-card h1 {
    font-family: var(--display);
    font-style: normal;
    font-size: 26px;
    margin-bottom: var(--space-3);
    line-height: 1.2;
  }
  .flow-card p { color: var(--ink-soft); }
  .flow-actions {
    margin-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }

  /* ── NEW GATHERING FLOW (creating, not requesting) ─────────────
     Same card geometry as the solo flow, but laid over the colored
     landscape (stay-shell + landscape_bg). The card itself drops the
     paper grain — it's a clean cream rectangle floating on color, with
     a softer shadow so it reads as resting, not glued down. Top nav is
     the lodge's nav so the surface still feels like part of Corkins.
  ─────────────────────────────────────────────────────────────── */
  .stay-shell.new-gathering-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 92px 0 var(--space-9);
  }
  .stay-shell.new-gathering-shell .stay-nav { position: fixed; }

  .new-gathering-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-5) var(--space-9);
  }

  .new-gathering-card {
    width: 100%;
    max-width: 540px;
    background-color: var(--paper);
    background-image: var(--paper-texture);
    background-repeat: repeat;
    background-size: 480px auto;
    padding: 56px 60px 48px;
    /* Square corners — matches the modal card aesthetic. Used by the
       profile edit page, auth, invite welcome, new-gathering steps. */
    border-radius: 0;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.05),
      0 14px 40px rgba(20, 15, 5, 0.22),
      0 30px 80px rgba(20, 15, 5, 0.14);
    position: relative;
  }
  /* Profile edit page is denser — wider card so the two-column grids
     (name+pronouns, dietary+allergies) breathe and the bio textareas
     don't feel cramped. Scoped via :has so the auth, invite-welcome,
     and new-gathering step cards stay at their narrower 540px. */
  .new-gathering-card:has(.profile-form) {
    max-width: 720px;
  }
  .new-gathering-card h1 {
    font-family: var(--display);
    font-style: normal;
    font-size: 26px;
    margin-bottom: var(--space-3);
    line-height: 1.2;
  }
  .new-gathering-card p { color: var(--ink-soft); }
  .new-gathering-card .flow-actions {
    margin-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }

  .new-gathering-host-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 0;
  }
  .new-gathering-host-name {
    font-size: 15px;
    color: var(--ink);
  }

  /* ── Host picker (multi-select) ────────────────────────────────
     Selected co-hosts render as pill chips inline with the "Add a
     co-host" button. Tapping the button opens a popover list of
     remaining people. Same ink-on-paper register as the rest of the
     card — no shadow drama, hairline borders, paper interior. */
  .host-picker {
    position: relative;
    margin-top: var(--space-2);
  }
  .host-picker-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
  }
  .host-picker.open .host-picker-control,
  .host-picker-control:focus-within {
    border-color: var(--ink);
    background: #fff;
  }

  .host-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    background: var(--paper-edge);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink);
  }
  .host-chip-name { line-height: 1; }
  .host-chip-remove {
    appearance: none;
    border: none;
    background: transparent;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .host-chip-remove:hover {
    background: var(--hover-wash-strong);
    color: var(--ink);
  }

  .host-picker-trigger {
    appearance: none;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    background: transparent;
    border-radius: 999px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1.2;
  }
  .host-picker-trigger:hover {
    border-style: solid;
    color: var(--ink);
  }
  /* Text-input variant of the trigger — same pill shape but takes
     keystrokes so the menu filters as you type. Slightly wider so the
     placeholder + a few characters fit comfortably. */
  input.host-picker-search {
    cursor: text;
    min-width: 200px;
    outline: none;
  }
  input.host-picker-search:focus {
    border-style: solid;
    border-color: var(--ink);
    color: var(--ink);
  }
  input.host-picker-search::placeholder {
    color: var(--ink-faint);
  }

  .host-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(20, 15, 5, 0.18);
    padding: 6px;
    z-index: 5;
    display: none;
  }
  .host-picker.open .host-picker-menu { display: block; }

  .host-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
  }
  .host-picker-option:hover { background: var(--hover-wash); }
  .host-picker-option.hidden { display: none; }
  /* On the gathering basics modal the picker reuses the .folder-fold-hosts
     flex row, so the chips wrapper is transparent — chips + "+ Add" flow
     on one line, the same as before the picker was wired up. */
  .folder-fold-hosts .host-picker-chips { display: contents; }

  @media (max-width: 540px) {
    .new-gathering-stage { padding: var(--space-5) var(--space-3) var(--space-7); }
    .new-gathering-card  { padding: 36px 28px 32px; }
    .new-gathering-card h1 { font-size: 22px; }
  }

  /* ── MOBILE ────────────────────────────────────────────────────
     Tighten padding, drop the centered-PDF treatment for left-aligned
     reading flow, let meta rows wrap, stack the compact stay so the
     button sits below the content.
  ─────────────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    .lodge-content {
      padding: 0 var(--space-4);
      gap: var(--space-4);
    }

    /* Greeting — left, smaller type, but a lot of breathing room. */
    .lodge-greeting {
      text-align: left;
      padding: var(--space-8) 0 var(--space-9);
    }
    .lodge-greeting h1 { font-size: 34px; line-height: 1.1; }
    .lodge-greeting .meta { font-size: 14px; line-height: 1.5; }

    /* Snapshot — left aligned, smaller padding, smaller title. */
    .lodge-snapshot-card {
      padding: var(--space-5) var(--space-5);
      text-align: left;
    }
    .lodge-snapshot-eyebrow { margin-bottom: var(--space-3); }
    .lodge-snapshot-card .prep-identity-title { font-size: 22px; }
    .lodge-snapshot-card .prep-identity-meta,
    .lodge-snapshot-card .prep-dates,
    .lodge-snapshot-card .prep-hosts,
    .lodge-snapshot-card .prep-hosts-link {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .lodge-snapshot-desc {
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      font-size: 13.5px;
    }
    .lodge-snapshot-foot { padding-top: var(--space-4); }

    /* Compact stay — stack vertically; the button sizes to its label
       (left-aligned under the meta), not full width. */
    .compact-stay {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-4);
      padding: var(--space-4) var(--space-5);
    }
    .compact-stay-desc { font-size: 13px; }
    .compact-stay-meta {
      flex-wrap: wrap;
      row-gap: 4px;
    }
    .compact-stay-action { align-self: flex-start; }
    .compact-stay-action .btn { width: auto; }

    /* Drawer — tighter padding, letters left + smaller. */
    .lodge-drawer { padding: var(--space-6) 0 var(--space-7); }
    .lodge-drawer-inner { padding: 0 var(--space-4); }

    .letter-card {
      padding: var(--space-4) var(--space-5);
      margin-bottom: var(--space-5);
      /* Less tilt on small screens — looks awkward when narrow. */
      --letter-tilt: -0.3deg;
    }
    .letter-card:nth-child(3n)   { --letter-tilt:  0.3deg; }
    .letter-card:nth-child(3n+1) { --letter-tilt: -0.4deg; }
    .letter-card:nth-child(3n+2) { --letter-tilt:  0.2deg; }

    .letter-card h3 { font-size: 19px; }
    .letter-excerpt { font-size: 14px; }
    .letter-meta {
      flex-wrap: wrap;
      row-gap: 4px;
    }

    /* Banded variants — tighter body padding, and the color band reads
       left-aligned to match the left-aligned card content on mobile. */
    .lodge-snapshot-card--hosting .lodge-snapshot-card-body,
    .lodge-snapshot-card--this-week .lodge-snapshot-card-body,
    .lodge-snapshot-card--solo .lodge-snapshot-card-body {
      padding: var(--space-5);
    }
    .lodge-this-week-band,
    .lodge-hosting-band {
      text-align: left;
    }
    /* Solo card stacks back to a column; "View details" sizes to its
       label, left-aligned under the meta (the flex row-gap is the spacing). */
    .lodge-snapshot-card--solo .lodge-snapshot-card-body {
      flex-direction: column;
      align-items: stretch;
    }
    .lodge-snapshot-card--solo .lodge-snapshot-foot { align-self: flex-start; }
    .lodge-snapshot-card--solo .lodge-snapshot-foot .btn { width: auto; }
    /* Empty state — keep it centered but trim the desktop generosity. */
    .lodge-snapshot-card.lodge-snapshot-card--empty {
      padding: var(--space-7) var(--space-5);
      min-height: 0;
    }
    .lodge-empty-headline { font-size: 22px; }
    /* Hosting variant's paired buttons stay side-by-side on mobile —
       "View as guest" + "Manage gathering" both fit a phone width. The
       gap shrinks to keep them comfortable, and each sizes to its label. */
    .lodge-snapshot-foot--pair {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: var(--space-2);
    }
    .lodge-snapshot-foot--pair .btn { width: auto; }
  }
}