@layer base {
  /* ── Support affordance ───────────────────────────────────────────
     Fixed bottom-left "? Support" popover. The trigger stays naked (no
     container) — a circled "?" glyph next to the word, both in one muted
     ink tone that darkens together on hover. Clicking opens a small paper
     card: one textarea, a Send pill, a whisper of where the note goes.
     Sits below modals/overlays (z-index 2000) so it tucks away while a
     modal is open. */
  /* IN THE FOOTER BAR, NOT FLOATING OVER THE PAGE.
     It used to sit 70px up, which put it in the content area on every
     page at every width — parked across "add your travel and this fills
     in" on the guest's own prep page, and across the sentence explaining
     the report's column switches. Two earlier passes treated the symptom:
     a background so it was legible on what it covered (Aug 5), and tail
     room so the last button could clear it. Both were right and neither
     moved it off the line it was sitting on.
     The footer bar is 56px of chrome that already exists, with the avatar
     at its left end and Chat at its right and 254px of nothing between
     them. Support belongs in that gap. Now it covers no words at all,
     and it reads as what it is: one of three persistent controls, in the
     bar where the persistent controls live. (Aug 11) */
  .support-pop {
    position: fixed;
    bottom: 17px;   /* centres a 23px control in the 56px bar */
    left: 72px;     /* clear of the 36px avatar at left: 24px */
    z-index: 90;
  }

  .support-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-faint);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    line-height: 1;
    transition: color 120ms ease;
    cursor: pointer;
    list-style: none;
  }
  .support-link::-webkit-details-marker { display: none; }
  .support-pop[open] .support-link { color: var(--ink); }
  /* It's fixed and it was transparent, so on a phone it painted straight
     over whatever sat at the bottom of the page — "Support" and "A quiet
     week at the lodge." rendered as two overlapping strings, and a tap on
     that line opened Support instead of the card underneath. A control
     that floats has to carry its own ground. (Aug 5) */
  @media (max-width: 600px) {
    .support-link {
      background: var(--paper);
      border: 1px solid var(--hover-edge);
      border-radius: 999px;
      padding: 8px 14px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    }
  }

  .support-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: var(--weight-bold);
  }

  .support-link:hover {
    color: var(--ink);
  }
  .support-link:hover .support-link__label {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* The card — paper above the trigger, soft corners, settles in fast. */
  .support-pop-card {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: min(320px, calc(100vw - 40px));
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-paper);
    padding: var(--space-5);
  }

  .support-pop-label {
    display: block;
    font-size: 14px;
    font-weight: var(--weight-semibold);
    color: var(--ink);
    margin-bottom: var(--space-2);
  }

  .support-pop-input {
    width: 100%;
    resize: vertical;
  }

  .support-pop-actions {
    margin-top: var(--space-3);
  }
  .support-pop-send {
    padding: 10px 24px;
    font-size: 13.5px;
  }

  .support-pop-whisper {
    margin: var(--space-3) 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-faint);
  }

  .support-pop-sent {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
  }

  /* The answer to a send that didn't go: an empty box, or too many in a
     minute. Sits above the form it hands back, quieter than the message
     itself but not so quiet it reads as decoration. */
  .support-pop-note {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  /* Tighten the inset a touch on small screens. */
  @media (max-width: 600px) {
    .support-pop {
      bottom: 9px;    /* centres the taller 38px phone control in the bar */
      left: 68px;     /* clear of the 40px avatar at left: 16px */
    }
    /* Tail room so the last thing on a page clears the footer bar. It
       used to be 112px because Support floated 62px above the bar; now
       that Support rides inside it, the bar's own 56px is the whole
       obstacle and the page stops carrying an empty half-screen. */
    body:has(.support-pop) { padding-bottom: 72px; }

    /* And it steps aside entirely while a stay modal is open — a help
       pill has no business sitting on top of a release form. */
    body:has([data-controller~="stay-modal"]) .support-pop { display: none; }
  }
}