@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. */
  .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. */
  @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-7);
  }

  /* Greeting on cork — light type, centered. Upright (no italic). */
  .lodge-greeting {
    text-align: center;
    padding: var(--space-4) var(--space-4) 0;
  }
  .lodge-greeting h1 {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-bold);
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 var(--space-2);
    color: rgba(255, 250, 240, 0.96);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
  .lodge-greeting .meta {
    color: rgba(255, 250, 240, 0.72);
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
    margin: 0;
    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(40, 25, 5, 0.18),
      0 18px 40px rgba(40, 25, 5, 0.10);
    padding: var(--space-7) var(--space-8) 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);
    margin-top: calc(var(--space-7) * -1 + var(--space-4));
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.04),
      0 4px 14px rgba(40, 25, 5, 0.14),
      0 10px 24px rgba(40, 25, 5, 0.08);
  }
  .compact-stay-body {
    flex: 1;
    min-width: 0;
  }
  .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 {
    color: var(--arrive);
    font-weight: var(--weight-semibold);
  }
  .compact-stay-action { flex-shrink: 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-bottom: 0; text-align: left; }
  .lodge-snapshot-todos .prep-todos-head { justify-content: space-between; }
  .lodge-snapshot-todos .prep-todos-title { font-style: normal; }
  .lodge-snapshot-todos .prep-todo-due { font-style: normal; }

  /* ── 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(--pip-host-fg);
    color: var(--paper-warm);
    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-5);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  }
  .lodge-snapshot-card--hosting .lodge-snapshot-card-body {
    padding: var(--space-7) var(--space-8) 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 {
    /* Olive green — borrowed from the landscape SVG ground wedge so
       the band picks up the same color already on the page. */
    background: #74832A;
    color: var(--paper-warm);
    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-5);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  }
  .lodge-snapshot-card--this-week .lodge-snapshot-card-body {
    padding: var(--space-7) var(--space-8) var(--space-7);
  }
  /* Countdown pill — olive bg + paper text, matching the band. */
  .lodge-snapshot-card--this-week .prep-dates-countdown {
    background: #74832A;
    color: var(--paper-warm);
  }

  /* ── EMPTY STATES ──────────────────────────────────────────────
     Used by /lodge/empty when there are no confirmed stays.
  ─────────────────────────────────────────────────────────────── */
  .lodge-snapshot-card--empty {
    padding: var(--space-8) var(--space-7);
  }
  .lodge-empty-headline {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 var(--space-3);
    line-height: 1.2;
  }
  .lodge-empty-body {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 48ch;
    margin: 0 auto;
  }

  /* Drawer empty state — quiet text on the wood. */
  .lodge-empty-drawer {
    text-align: center;
    padding: var(--space-5) 0;
    color: rgba(255, 240, 215, 0.78);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
  }
  .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, 240, 215, 0.55);
    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;
  }

  /* ── 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-color: #3a2414;
    background-image: url("/assets/wood-drawer-6e423f3d.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    border-radius: 22px 22px 0 0;
    /* Thick beveled frame — reads as a real, hewn board with a
       routed edge: dark outer rim, warm inner highlight, deep drop. */
    box-shadow:
      inset 0 2px 0 rgba(255, 225, 185, 0.22),
      inset 0 0 0 2px rgba(0, 0, 0, 0.55),
      inset 0 0 0 6px rgba(60, 35, 18, 0.85),
      inset 0 0 0 7px rgba(255, 215, 170, 0.15),
      inset 0 0 0 9px rgba(0, 0, 0, 0.45),
      0 -2px 0 rgba(0, 0, 0, 0.18),
      0 -14px 36px rgba(20, 12, 4, 0.45);
    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 {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(to bottom,
        rgba(255, 220, 170, 0.18) 0,
        rgba(255, 220, 170, 0.05) 28px,
        transparent 80px),
      radial-gradient(ellipse at 50% 0%,
        rgba(255, 230, 190, 0.10) 0%,
        transparent 55%);
    pointer-events: none;
  }
  /* Inner edge darkening + faint vertical grain overlay so the
     wood feels deep and slightly hand-finished, not a flat photo. */
  .lodge-drawer::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(ellipse at 50% 50%,
        transparent 55%,
        rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
  }
  .lodge-drawer > * { position: relative; }
  .lodge-drawer-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }

  /* Brushed-steel nameplate, screwed into the wood. Same cool-steel
     palette as the .clip on the stay page, just darker midbands so
     engraved Filson Pro reads cleanly against the wood. */
  .lodge-drawer-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto var(--space-6);
    padding: 11px 36px 10px;
    font-family: var(--display);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    text-align: center;
    color: #15171a;
    text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.55),
      0 1px 0 rgba(255, 255, 255, 0.30);
    background: linear-gradient(180deg,
      #9ea2a8 0%,
      #b6babf 8%,
      #ced2d6 18%,
      #9ea2a8 38%,
      #74787e 60%,
      #61656a 82%,
      #82868b 100%);
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(0, 0, 0, 0.55),
      inset 0 0 0 1px rgba(0, 0, 0, 0.45),
      0 1px 0 rgba(255, 230, 190, 0.08),
      0 3px 5px rgba(0, 0, 0, 0.6),
      0 8px 14px rgba(0, 0, 0, 0.4);
    position: relative;
  }
  /* Two screws — one on each end of the plate. */
  .lodge-drawer-eyebrow::before,
  .lodge-drawer-eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(-50%);
    background:
      radial-gradient(circle at 35% 30%,
        #c8ccd1 0%,
        #6a6e73 45%,
        #2a2c2f 100%);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.6),
      0 1px 1px rgba(0, 0, 0, 0.55);
  }
  .lodge-drawer-eyebrow::before { left: 10px; }
  .lodge-drawer-eyebrow::after  { right: 10px; }

  /* ── 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); }

  /* ── 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); }

  /* The pill uses .btn-glass for the look. These rules only handle
     disclosure-specific concerns: hide native markers, center the
     pill, swap the inner labels by open state. */
  .lodge-declined-pill {
    margin: 0 auto;
    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. */
  .lodge-declined-list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 240, 215, 0.18);
  }
  .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;
  }

  /* ── HOST-A-GATHERING PROMPT ───────────────────────────────────
     Sits at the foot of the invitations drawer, below any letters
     and the declined-disclosure. Quiet lead-in line on wood, then
     a glass pill that opens the new-gathering flow. Only renders
     for hosts and stewards. */
  .lodge-host-prompt {
    text-align: center;
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 240, 215, 0.18);
  }
  .lodge-host-prompt-lead {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 14px;
    color: rgba(255, 240, 215, 0.78);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
    margin: 0 0 var(--space-3);
  }

  /* ── 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: italic;
    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: italic;
    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;
    border-radius: 4px;
    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: italic;
    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: rgba(0, 0, 0, 0.08);
    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: rgba(0, 0, 0, 0.05); }
  .host-picker-option.hidden { display: none; }

  @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-6);
    }

    /* Greeting — left, smaller, less margin. */
    .lodge-greeting {
      text-align: left;
      padding: var(--space-3) 0 0;
    }
    .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, button 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 .btn { width: 100%; }

    /* 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;
    }

    /* Hosting variant — stack the paired buttons full-width on mobile. */
    .lodge-snapshot-card--hosting .lodge-snapshot-card-body {
      padding: var(--space-5);
    }
    .lodge-snapshot-foot--pair {
      flex-direction: column;
      align-items: stretch;
    }
    .lodge-snapshot-foot--pair .btn { width: 100%; }
  }
}