/* ============================================================================
   MY STAY — the redesign layer.
   guest.css still owns the entry screen (which reads well and stays as it is).
   Everything below re-skins and re-flows what a guest sees AFTER sign-in, which
   was the disconnected part: a navy workspace bolted onto a dark/gold brand, a
   hidden sidebar on phones, and six tabs that never felt like one stay.

   Three rules drive it:
     1. One surface. The stay is a single dark canvas with the same copper the
        entry screen uses, not a light app pasted into a dark site.
     2. One menu, always reachable. A sticky segmented rail replaces the sidebar
        that vanished on mobile, and it looks the same on phone and desktop.
     3. Nothing heavy. Motion is CSS transitions + one IntersectionObserver, so
        the premium feel costs no bundle. No animation framework is loaded.
   ========================================================================== */

/* 2026-10-24 — one light look. The tokens below were a dark canvas (#0E1116)
   with light inks, but cp-design-tokens.css paints the body porcelain with a
   more specific selector, so a signed-in guest got #F2F4F7 text on #EAE8E3
   (1.1:1). The canvas is now the Concept Plus light palette; graphite is kept
   for the "islands" (stay hero, club hero, member card, membership gate),
   which carry their own ink tokens further down. Ochre stays the fill of the
   one CTA; ochre TEXT uses --stay-gold-ink (#80582D, 5.0:1 on white). */
body.guest-authenticated {
  --stay-bg: #EAE8E3;
  --stay-surface: #FFFFFF;
  --stay-surface-2: #F4F2ED;
  --stay-line: #D3CFC7;
  --stay-gold: #AC7B43;
  --stay-gold-ink: #80582D;
  --stay-on-gold: #121719;
  --stay-gold-soft: rgba(172, 123, 67, .12);
  --stay-text: #353330;
  --stay-text-2: #625E56;
  --stay-text-3: #68625A;
  --stay-bubble: #ECE8E0;
  --stay-green: var(--cp-success-ink);
  --stay-radius: 18px;
  background: var(--stay-bg);
  color: var(--stay-text);
}
/* The header itself is the shared graphite platform header (platform.css), so
   the brand lockup keeps porcelain ink whatever the canvas below it is. */
body.guest-authenticated .guest-header {
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stay-line);
  position: sticky; top: 0;
}
body.guest-authenticated .guest-brand { color: #EAE8E3; }

/* ONE identity control in the top bar. The account menu (account-menu.js) mounts
   its own chip with the initials and name; the older initial bubble drawn beside
   it overlapped that chip (2026-10-24 audit), so it steps aside once the chip
   exists and remains the fallback when the menu script has not loaded. */
body.guest-authenticated .topbar-actions { gap: 12px; }
body.guest-authenticated .topbar-actions:has(.chacct-chip) .guest-avatar { display: none; }

/* Graphite islands: same token names, dark values, so every rule inside them
   that reads --stay-* stays correct without a second set of selectors.
   Porcelain on graphite is 7.1:1; the derived gold ink #E0C197 is 5.1:1. */
body.guest-authenticated .stay-hero,
body.guest-authenticated .club-hero,
body.guest-authenticated .member-card,
.club-gate-card {
  --stay-surface: rgba(255, 255, 255, .08);
  --stay-surface-2: rgba(255, 255, 255, .12);
  --stay-line: rgba(234, 232, 227, .26);
  --stay-text: #EAE8E3;
  --stay-text-2: #E2DFD8;
  --stay-text-3: #D9D5CD;
  --stay-gold-ink: #E0C197;
  --stay-gold-soft: rgba(224, 193, 151, .16);
  color: var(--stay-text);
}

/* The sidebar was the single biggest source of "disconnected": present on
   desktop, gone on phones, and duplicating the site header's branding. */
body.guest-authenticated .app-sidebar { display: none; }
body.guest-authenticated .app-workspace,
body.guest-authenticated [dir=rtl] .app-workspace {
  margin: 0;
  padding: 0 clamp(16px, 4vw, 44px) 120px;
  max-width: 1180px;
  margin-inline: auto;
}

/* ── Top bar: who you are, which stay, and the way out ─────────────────── */
body.guest-authenticated .app-topbar {
  padding: 22px 0 14px;
  margin: 0;
  align-items: center;
  gap: 12px;
}
body.guest-authenticated .app-topbar .eyebrow,
body.guest-authenticated .app-topbar .eyebrow.blue { color: var(--stay-gold-ink); }
body.guest-authenticated .app-topbar h1 {
  font: 500 clamp(26px, 4.4vw, 40px)/1.05 var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);
  letter-spacing: -.03em;
  color: var(--stay-text);
}
body.guest-authenticated .topbar-actions select {
  background: var(--stay-surface);
  border: 1px solid var(--stay-line);
  color: var(--stay-text-2);
  border-radius: 10px;
}
body.guest-authenticated .round-button {
  background: var(--stay-surface); border: 1px solid var(--stay-line); color: var(--stay-text-2);
}
body.guest-authenticated .guest-avatar { background: var(--stay-gold); }

/* ── The menu the stay was missing ─────────────────────────────────────────
   Same rail on every screen size, horizontally scrollable on a phone so six
   sections never collapse into a hamburger the guest has to hunt for. */
.stay-rail {
  position: sticky;
  top: 68px;
  z-index: 40;
  display: flex;
  gap: 6px;
  padding: 10px 0;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(180deg, var(--stay-bg) 72%, transparent);
}
.stay-rail::-webkit-scrollbar { display: none; }
.stay-rail button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--stay-line);
  background: var(--stay-surface);
  color: var(--stay-text-2);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.stay-rail button i { font-style: normal; font-size: 14px; }
.stay-rail button:hover { transform: translateY(-1px); border-color: var(--stay-gold); }
.stay-rail button.active {
  background: var(--stay-gold-soft);
  border-color: var(--stay-gold);
  color: var(--stay-text);
}
.stay-rail .rail-dot {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--stay-gold); color: var(--stay-on-gold);
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
}

/* ── Hero: the stay itself, with the countdown that makes it feel live ──── */
body.guest-authenticated .stay-hero {
  border-radius: var(--stay-radius);
  border: 1px solid var(--stay-line);
  background:
    radial-gradient(circle at 86% 8%, rgba(172, 123, 67, .22), transparent 42%),
    #4D4B4A;
  box-shadow: 0 18px 44px rgba(53, 51, 48, .16);
  padding: clamp(24px, 4.5vw, 44px);
  min-height: 0;
  overflow: hidden;
  position: relative;
}
body.guest-authenticated .stay-hero:after {
  content: "";
  position: absolute; inset: auto -40px -120px auto;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(176, 110, 62, .16);
  pointer-events: none;
}
body.guest-authenticated .stay-hero > div:first-child > span {
  color: var(--stay-gold-ink); letter-spacing: .16em; font-size: 11px;
}
body.guest-authenticated .stay-hero h2 {
  font: 500 clamp(28px, 5vw, 46px)/1.02 var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);
  letter-spacing: -.035em;
}
body.guest-authenticated .stay-hero p { color: var(--stay-text-2); font-size: 13px; line-height: 1.6; }
body.guest-authenticated .white-button { background: var(--stay-gold); color: var(--stay-on-gold); }
body.guest-authenticated .glass-button {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--stay-line); color: var(--stay-text);
}
body.guest-authenticated .stay-badge {
  background: var(--stay-surface-2); color: var(--stay-text); border: 1px solid var(--stay-line);
}

/* The countdown chip — "1 night to go" is the single most-read line in the app. */
.stay-countdown {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 14px;
  border-radius: 999px;
  background: var(--stay-gold-soft);
  border: 1px solid rgba(176, 110, 62, .38);
  font-size: 12px; font-weight: 700; color: var(--stay-gold-ink);
}
.stay-countdown i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--stay-green);
  animation: stayPulse 2.4s ease-in-out infinite;
}
@keyframes stayPulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ── Every panel below the hero shares one card language ────────────────── */
body.guest-authenticated .journey-progress,
body.guest-authenticated .requests-preview,
body.guest-authenticated .upsell-preview,
body.guest-authenticated .upsell-catalog,
body.guest-authenticated .form-card,
body.guest-authenticated .request-form,
body.guest-authenticated .request-history,
body.guest-authenticated .checkout-card,
body.guest-authenticated .quick-card,
body.guest-authenticated .service-picker button {
  background: var(--stay-surface);
  border: 1px solid var(--stay-line);
  border-radius: var(--stay-radius);
  color: var(--stay-text);
  box-shadow: none;
}
body.guest-authenticated .journey-progress h3,
body.guest-authenticated .requests-preview h3,
body.guest-authenticated .upsell-preview h3,
body.guest-authenticated .upsell-catalog h3,
body.guest-authenticated .form-card h3,
body.guest-authenticated .checkout-card h3,
body.guest-authenticated .view-heading h2 { color: var(--stay-text); font-family: var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); }
body.guest-authenticated .view-heading > p:last-child,
body.guest-authenticated .form-card > p,
body.guest-authenticated .quick-card > small,
body.guest-authenticated .request-mini small,
body.guest-authenticated .empty { color: var(--stay-text-2); }
body.guest-authenticated .journey-progress header span,
body.guest-authenticated .requests-preview header span,
body.guest-authenticated .upsell-preview > header span,
body.guest-authenticated .upsell-catalog > header span,
body.guest-authenticated .form-card > span,
body.guest-authenticated .checkout-card > span,
body.guest-authenticated .eyebrow.blue,
body.guest-authenticated .request-history header > span { color: var(--stay-gold-ink); }
body.guest-authenticated .progress-track { background: var(--stay-surface-2); }
body.guest-authenticated .progress-steps i { background: var(--stay-surface-2); color: var(--stay-text-3); }
body.guest-authenticated .progress-steps i.done { background: var(--stay-green); color: #FFFFFF; }
body.guest-authenticated .progress-steps b { color: var(--stay-text); font-size: 11px; }
body.guest-authenticated .progress-steps small { color: var(--stay-text-3); font-size: 11px; }
body.guest-authenticated .quick-card > i { color: var(--stay-gold-ink); }
body.guest-authenticated .quick-card > b { font-size: 12px; }
body.guest-authenticated .quick-card:hover { border-color: var(--stay-gold); box-shadow: 0 10px 26px rgba(53, 51, 48, .10); }
body.guest-authenticated .key-card {
  background: linear-gradient(150deg, rgba(176, 110, 62, .22), var(--stay-surface));
  border-color: rgba(176, 110, 62, .42);
}
body.guest-authenticated .key-card > i, body.guest-authenticated .key-card > b { color: var(--stay-text); }
body.guest-authenticated .service-picker button.active {
  border: 1px solid var(--stay-gold); background: var(--stay-gold-soft); padding: 16px;
}
body.guest-authenticated .service-picker i, body.guest-authenticated .file-drop i { color: var(--stay-gold); }
body.guest-authenticated .primary { background: var(--stay-gold); color: var(--stay-on-gold); }
body.guest-authenticated .primary:hover { background: #B98A55; }
body.guest-authenticated .secondary { background: var(--stay-surface-2); color: var(--stay-text); border: 1px solid var(--stay-line); }
body.guest-authenticated input, body.guest-authenticated textarea, body.guest-authenticated select {
  background: var(--stay-surface-2) !important;
  border-color: var(--stay-line) !important;
  color: var(--stay-text) !important;
  border-radius: 10px !important;
  color-scheme: light;
}
body.guest-authenticated input:focus, body.guest-authenticated textarea:focus, body.guest-authenticated select:focus {
  border-color: var(--stay-gold) !important;
  box-shadow: 0 0 0 3px rgba(172, 123, 67, .22) !important;
}
body.guest-authenticated .request-mini, body.guest-authenticated .request-row { border-top-color: var(--stay-line); }
body.guest-authenticated .request-mini b, body.guest-authenticated .request-row h4 { color: var(--stay-text); font-size: 12px; }

/* Status pills carry meaning, so they are colour-coded rather than all green. */
body.guest-authenticated .status-pill { background: rgba(74, 222, 128, .13); color: var(--stay-green); }
body.guest-authenticated .status-pill.is-waiting { background: var(--stay-gold-soft); color: var(--stay-gold-ink); }
body.guest-authenticated .status-pill.is-declined { background: rgba(248, 113, 113, .14); color: var(--cp-danger-ink); }
body.guest-authenticated .status-pill.is-live { background: rgba(96, 165, 250, .14); color: var(--cp-info-ink); }

/* ── Access card: only real during the stay window ─────────────────────── */
.access-card {
  margin-top: 16px;
  border-radius: var(--stay-radius);
  border: 1px solid rgba(176, 110, 62, .42);
  background: linear-gradient(150deg, rgba(176, 110, 62, .18), var(--stay-surface) 65%);
  padding: 20px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.access-card .access-item > span {
  display: block; font-size: 11px; letter-spacing: .16em; font-weight: 850; color: var(--stay-gold-ink);
}
.access-card .access-item > b {
  display: block; margin-top: 8px; font: 600 22px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; color: var(--stay-text);
}
.access-card .access-item > small { display: block; margin-top: 5px; font-size: 11px; color: var(--stay-text-2); line-height: 1.5; }
.access-card.is-locked { border-color: var(--stay-line); background: var(--stay-surface); }
.access-card.is-locked .access-item > b { font-size: 14px; font-family: inherit; letter-spacing: 0; color: var(--stay-text-2); }
/* Only a real code earns the big monospace treatment — a sentence set in it
   reads as broken, which is exactly how the first pass looked. */
.access-card .access-item > b.is-text {
  font: 500 14px/1.45 var(--ui-font-text,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);
  letter-spacing: 0; color: var(--stay-text-2);
}

/* ── Offers: a swipeable rail on a phone, a grid on a desk ─────────────── */
body.guest-authenticated .upsell-card {
  background: linear-gradient(155deg, var(--stay-surface-2), var(--stay-surface));
  border-color: var(--stay-line);
  color: var(--stay-text);
}
body.guest-authenticated .upsell-card.featured {
  background: linear-gradient(150deg, rgba(172, 123, 67, .14), var(--stay-surface) 62%);
  border-color: rgba(172, 123, 67, .45);
}
body.guest-authenticated .upsell-card h4 { color: var(--stay-text); }
body.guest-authenticated .upsell-card > p { color: var(--stay-text-2); font-size: 12px; }
body.guest-authenticated .upsell-card-top > span { color: var(--stay-gold-ink); }
body.guest-authenticated .upsell-value b { color: var(--stay-text); }
body.guest-authenticated .upsell-value span, body.guest-authenticated .upsell-terms { color: var(--stay-text-3); }
body.guest-authenticated .upsell-assurance { color: var(--stay-green); }
body.guest-authenticated .upsell-action { background: var(--stay-gold); color: var(--stay-on-gold); border-radius: 10px; }
body.guest-authenticated .upsell-card.featured .upsell-action { background: var(--stay-gold); color: var(--stay-on-gold); }
body.guest-authenticated .upsell-tag { background: #E3EFE8; color: var(--stay-green) !important; font-size: 10px !important; }
/* guest.css (the entry screen's sheet) sets the offer card's small print at
   7-8px and gives the featured card pale-on-dark inks; inside the stay every
   card is light, so both are reset here to readable sizes and the stay inks. */
body.guest-authenticated .upsell-card .upsell-card-top > span,
body.guest-authenticated .upsell-card.featured .upsell-card-top > span { color: var(--stay-gold-ink); font-size: 10px; }
body.guest-authenticated .upsell-card .upsell-value span,
body.guest-authenticated .upsell-card.featured .upsell-value span { color: var(--stay-text-3); font-size: 11px; }
body.guest-authenticated .upsell-card .upsell-assurance,
body.guest-authenticated .upsell-card.featured .upsell-assurance { color: var(--stay-green); font-size: 11px; }
body.guest-authenticated .upsell-card .upsell-terms,
body.guest-authenticated .upsell-card.featured .upsell-terms { color: var(--stay-text-3); font-size: 11px; }
body.guest-authenticated .upsell-card .upsell-action { font-size: 13px; min-height: 44px; }
body.guest-authenticated .app-topbar .eyebrow { font-size: 11px; }
body.guest-authenticated .stay-rail button { min-height: 44px; }

@media (max-width: 780px) {
  body.guest-authenticated .upsell-grid,
  body.guest-authenticated .upsell-grid.compact {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  body.guest-authenticated .upsell-grid::-webkit-scrollbar { display: none; }
  body.guest-authenticated .upsell-card { scroll-snap-align: start; }
  /* The old rule hid every card past the second on a phone; a swipe rail shows
     them all, so the guest is no longer sold two things out of six. */
  body.guest-authenticated .upsell-grid.compact .upsell-card:nth-child(n+3) { display: flex; }
}

/* ── Club: inside the stay, not a separate product ─────────────────────── */
body.guest-authenticated .club-hero {
  background: radial-gradient(circle at 86% 14%, rgba(172, 123, 67, .22), transparent 40%), #4D4B4A;
  border: 1px solid rgba(172, 123, 67, .34);
  border-radius: var(--stay-radius);
  min-height: 0;
}
body.guest-authenticated .club-hero h2 { font-size: clamp(30px, 5vw, 50px); }
body.guest-authenticated .member-card {
  background: linear-gradient(145deg, #5A5857, #4D4B4A);
  color: var(--stay-text);
  border: 1px solid rgba(172, 123, 67, .4);
}
body.guest-authenticated .member-card:after { color: rgba(176, 110, 62, .10); }
body.guest-authenticated .club-join, body.guest-authenticated .club-dashboard > article,
body.guest-authenticated .club-benefits > * {
  background: var(--stay-surface); border: 1px solid var(--stay-line); border-radius: var(--stay-radius); color: var(--stay-text);
}

/* ── Support and checkout keep the same canvas ─────────────────────────── */
body.guest-authenticated .support-layout { background: var(--stay-surface); border: 1px solid var(--stay-line); border-radius: var(--stay-radius); min-height: 0; }
body.guest-authenticated .support-chat { background: var(--stay-surface-2); border: 1px solid var(--stay-line); }
body.guest-authenticated .support-chat header { border-bottom-color: var(--stay-line); }
body.guest-authenticated .support-chat header b { color: var(--stay-text); }
body.guest-authenticated .bot-message { background: var(--stay-bubble); color: var(--stay-text); }
body.guest-authenticated .user-message { background: var(--stay-gold); color: var(--stay-on-gold); }
/* MESSAGES. Every bubble in the real thread carries who said it, on which
   channel, and when — a guest looking at "we have refunded that" needs to know
   whether it arrived by email three days ago or in the app just now. An unread
   one is marked, and stays marked until it is actually read. */
.bot-message small, .user-message small { display: block; margin-top: 6px; font-size: 11px; opacity: .9; letter-spacing: .04em; }
.bot-message.is-unread { box-shadow: inset 3px 0 0 var(--stay-gold, #b08d57); }
#messagesNotice { margin: 0 12px 10px; font-size: 11px; }
body.guest-authenticated .support-chat form { border-top-color: var(--stay-line); }
body.guest-authenticated .support-chat button { background: var(--stay-gold); color: var(--stay-on-gold); }
body.guest-authenticated .support-chat input { background: transparent !important; border: 0 !important; }
body.guest-authenticated .checkout-layout { min-height: 0; }
body.guest-authenticated .checkout-copy ol { color: var(--stay-text-2); }
body.guest-authenticated .rating button { color: #9E978A; }
body.guest-authenticated .rating button.selected { color: var(--stay-gold); }

/* ── Motion: cheap, and off for anyone who asked for less ──────────────── */
.stay-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.stay-reveal.is-in { opacity: 1; transform: none; }
body.guest-authenticated .app-view.active > * { animation: stayIn .38s ease both; }
@keyframes stayIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Skeletons: the shape of the answer arrives before the answer does. */
.stay-skeleton { display: grid; gap: 10px; }
.stay-skeleton > i {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, #E4E0D8 25%, #F4F2ED 50%, #E4E0D8 75%);
  background-size: 200% 100%;
  animation: staySheen 1.4s linear infinite;
}
.stay-skeleton > i:nth-child(2) { width: 70% }
.stay-skeleton > i:nth-child(3) { width: 45% }
@keyframes staySheen { from { background-position: 200% 0 } to { background-position: -200% 0 } }

@media (prefers-reduced-motion: reduce) {
  .stay-reveal, body.guest-authenticated .app-view.active > * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .stay-countdown i, .stay-skeleton > i { animation: none !important; }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .stay-rail { top: 60px; }
  body.guest-authenticated .app-workspace { padding: 0 14px 150px; }
  body.guest-authenticated .stay-hero { padding: 22px 18px; display: block; }
  body.guest-authenticated .stay-hero-actions { flex-direction: row; }
  body.guest-authenticated .stay-hero-actions > * { flex: 1; }
  /* The rail IS the menu now, so the old white bottom bar (which clashed with
     everything) is retired rather than restyled. */
  body.guest-authenticated .mobile-app-nav { display: none !important; }
  body.guest-authenticated .app-workspace { padding-bottom: 60px }
  body.guest-authenticated .form-card-grid, body.guest-authenticated .service-layout { grid-template-columns: 1fr; }
}

/* ── Home manual & concierge ───────────────────────────────────────────────
   The building facts and the assistant that answers about them, sharing one
   card language with the rest of the stay. */
body.guest-authenticated .home-block,
body.guest-authenticated .home-ask {
  background: var(--stay-surface);
  border: 1px solid var(--stay-line);
  border-radius: var(--stay-radius);
  padding: 20px;
  margin-bottom: 14px;
}
body.guest-authenticated .home-block h3,
body.guest-authenticated .home-ask h3 {
  font: 500 20px var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); margin: 0 0 12px; color: var(--stay-text);
}
body.guest-authenticated .home-ask header > span {
  font-size: 11px; letter-spacing: .16em; font-weight: 850; color: var(--stay-gold-ink);
}
.home-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.home-fact {
  background: var(--stay-surface-2); border: 1px solid var(--stay-line);
  border-radius: 12px; padding: 13px 14px;
}
.home-fact > span { display: block; font-size: 11px; letter-spacing: .14em; font-weight: 850; color: var(--stay-gold-ink); }
.home-fact > b { display: block; margin-top: 6px; font-size: 14px; color: var(--stay-text); line-height: 1.45; word-break: break-word; }
.home-fact > small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--stay-text-3); }
/* A locked fact is styled as absent, not as a value — the guest should never
   read "Available when your stay starts" as if it were the code. */
.home-fact.is-locked > b { color: var(--stay-text-3); font-size: 12.5px; font-weight: 500; }

.home-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.home-chips li {
  font-size: 11.5px; color: var(--stay-text-2);
  border: 1px solid var(--stay-line); border-radius: 999px; padding: 6px 12px;
  background: var(--stay-surface-2);
}
.home-rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.home-rules li { font-size: 12.5px; line-height: 1.6; color: var(--stay-text-2); }
.home-summary { font-size: 13px; line-height: 1.65; color: var(--stay-text-2); margin: 0 0 12px; }
.home-summary a { color: var(--stay-gold-ink); }
.home-nearby { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.home-nearby > div { border-left: 2px solid var(--stay-gold); padding-left: 11px; }
.home-nearby span { display: block; font-size: 11px; letter-spacing: .14em; font-weight: 850; color: var(--stay-gold-ink); }
.home-nearby b { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--stay-text-2); line-height: 1.5; }

body.guest-authenticated .home-ask { border-color: rgba(172, 123, 67, .45); }
body.guest-authenticated .home-ask > p { font-size: 12.5px; color: var(--stay-text-2); margin: 0 0 12px; }
.home-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.home-suggestions button {
  border: 1px solid var(--stay-line); background: var(--stay-surface-2); color: var(--stay-text-2);
  border-radius: 999px; padding: 8px 13px; font-size: 11.5px; cursor: pointer; transition: .18s;
}
.home-suggestions button:hover { border-color: var(--stay-gold); color: var(--stay-text); }
#homeAskForm { display: flex; gap: 8px; }
#homeAskForm input { flex: 1; }
#homeAskForm button {
  border: 0; border-radius: 10px; background: var(--stay-gold); color: var(--stay-on-gold);
  padding: 0 20px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.home-answer:empty { display: none; }
.home-answer { margin-top: 12px; }
.home-answer-text {
  background: var(--stay-surface-2); border: 1px solid var(--stay-line); border-radius: 12px;
  padding: 14px; font-size: 13px; line-height: 1.65; color: var(--stay-text); margin: 0;
}
.home-answer-text a { color: var(--stay-gold-ink); }

/* Arrival packs, add-ons and partner links. */
.home-offers { display: grid; gap: 10px; }
.home-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--stay-surface-2); border: 1px solid var(--stay-line); border-radius: 12px; padding: 14px 16px;
}
.home-offer b { display: block; font-size: 13.5px; color: var(--stay-text); }
.home-offer small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--stay-text-2); line-height: 1.5; }
.home-offer-buy { display: flex; align-items: center; gap: 12px; }
.home-offer-buy > span { font: 600 15px var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); color: var(--stay-gold-ink); white-space: nowrap; }
.home-offer-buy button {
  border: 0; border-radius: 9px; background: var(--stay-gold); color: var(--stay-on-gold);
  padding: 9px 16px; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.home-offer-buy button[disabled] { opacity: .6; cursor: default; }
/* Once an extra is reserved, its button becomes the way to pay for it. */
.home-offer-pay, .request-pay {
  display: inline-block; border-radius: 9px; text-decoration: none; white-space: nowrap;
  background: var(--stay-gold, #AC7B43); color: var(--stay-on-gold, #121719);
  padding: 9px 16px; font-size: 12px; font-weight: 800;
}
.home-offer-pay:hover, .request-pay:hover { filter: brightness(1.08); }
.request-pay { align-self: center; margin-left: 10px; }
.home-partners a { color: var(--stay-text-2); text-decoration: none; }
.home-partners li:hover { border-color: var(--stay-gold); }

/* PARTNER SERVICES — seven grey chips in a row read as a footnote. These are real
   things a guest wants at 11pm on a Thursday, so they are given a card each: a glyph
   to find it by, a line that says why, and a visible way in. */
.partner-grid {
  display: grid; gap: 10px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.partner-card {
  display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "icon body" "go go";
  gap: 12px; align-items: start; text-decoration: none;
  padding: 14px 15px; border-radius: 14px;
  border: 1px solid var(--stay-line, rgba(255,255,255,.10));
  background: var(--stay-surface-2, rgba(255,255,255,.03));
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.partner-card:hover, .partner-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--stay-gold, #C97B45);
  background: color-mix(in srgb, var(--stay-gold, #C97B45) 8%, transparent);
}
.partner-card.featured { border-color: color-mix(in srgb, var(--stay-gold, #C97B45) 55%, transparent); }
.partner-icon { grid-area: icon; font-size: 22px; line-height: 1.2; }
.partner-body { grid-area: body; min-width: 0; }
.partner-card b { display: block; font-size: 13.5px; color: var(--stay-text, #353330); }
.partner-card small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--stay-text-2, #625E56); }
.partner-club {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  margin-left: 6px; padding: 2px 6px; border-radius: 99px; vertical-align: middle;
  background: rgba(167,139,250,.16); color: var(--cp-accent-ink);
}
.partner-go {
  grid-area: go; justify-self: start; margin-top: 2px;
  font-size: 11.5px; font-weight: 800; color: var(--stay-gold-ink, #80582D);
}
.home-partners li:hover a { color: var(--stay-text); }

/* ── Density pass ──────────────────────────────────────────────────────────
   The first version kept the old page's box sizes and simply recoloured them.
   On a phone that produced a ~3,900px column of near-identical dark boxes: four
   158px-tall service tiles with a big empty gap inside each, two of which just
   repeated the access card above them. This pass is about density, not colour. */

/* Service tiles become rows: icon left, label right, no dead space. */
body.guest-authenticated .quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.guest-authenticated .quick-card {
  min-height: 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "icon kicker" "icon title" "icon sub";
  align-content: center;
  gap: 0 12px;
  padding: 14px;
}
body.guest-authenticated .quick-card > span { grid-area: kicker; font-size: 10px; }
body.guest-authenticated .quick-card > i { grid-area: icon; margin: 0; align-self: center; font-size: 22px; }
body.guest-authenticated .quick-card > b { grid-area: title; margin-top: 3px; }
body.guest-authenticated .quick-card > small { grid-area: sub; margin-top: 2px; font-size: 11px; }

/* An empty progress track read as a full bar, because the track itself was a
   pale block the width of the card. It now reads as empty until it isn't. */
body.guest-authenticated .progress-track {
  background: var(--stay-surface-2); border: 1px solid var(--stay-line); height: 7px; margin: 14px 0;
}
body.guest-authenticated .progress-track i { background: linear-gradient(90deg, var(--stay-gold), var(--stay-green)); }
body.guest-authenticated .journey-progress header > b { font-size: 12px; color: var(--stay-text-2); }
body.guest-authenticated .progress-steps { grid-template-columns: 1fr 1fr; gap: 8px; }

/* Panels sit closer together and carry less padding on a phone. */
body.guest-authenticated .journey-progress,
body.guest-authenticated .requests-preview,
body.guest-authenticated .upsell-preview,
body.guest-authenticated .upsell-catalog { margin-top: 12px; padding: 16px; }
body.guest-authenticated .access-card { margin-top: 12px; padding: 16px; gap: 12px; }

/* The essentials were six full-width boxes; two columns halves the scroll. */
.home-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
.home-fact { padding: 11px 12px; }
.home-fact > b { font-size: 13px; margin-top: 5px; }
/* The address is the one fact that needs the full width to stay readable. */
.home-fact:last-child { grid-column: 1 / -1; }
body.guest-authenticated .home-block, body.guest-authenticated .home-ask { padding: 16px; margin-bottom: 12px; }

.access-reveal {
  margin-top: 10px; border: 1px solid var(--stay-gold); background: transparent;
  color: var(--stay-gold-ink); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.access-reveal:hover { background: var(--stay-gold-soft); }
.access-reveal[disabled] { opacity: .6; cursor: default; }

@media (max-width: 420px) {
  body.guest-authenticated .quick-grid { grid-template-columns: 1fr; }
  .home-facts { grid-template-columns: 1fr; }
  .home-fact:last-child { grid-column: auto; }
}

/* The hero carried a 44px pad, a two-line address and a gap before the actions:
   339px before a phone showed anything else. */
@media (max-width: 780px) {
  body.guest-authenticated .stay-hero { padding: 20px 18px; }
  body.guest-authenticated .stay-hero h2 { font-size: clamp(24px, 6.5vw, 32px); margin: 8px 0 6px; }
  body.guest-authenticated .stay-hero p { font-size: 12px; }
  body.guest-authenticated .stay-countdown { margin-top: 12px; }
  body.guest-authenticated .stay-hero-actions { margin-top: 14px; gap: 8px; }
  body.guest-authenticated .stay-hero-actions > * { padding: 12px 14px; font-size: 11.5px; }
}

/* ── The Club is now the front door to services ────────────────────────────
   Membership used to open only after check-out, and services sat in a separate
   tab — so the membership and the thing it unlocks were never on the same
   screen. Both now live here, and a non-member sees the reason to join exactly
   where the service they wanted used to be. */
.club-locked {
  margin-top: 14px;
  border: 1px solid rgba(172, 123, 67, .45);
  border-radius: var(--stay-radius);
  background: linear-gradient(150deg, rgba(172, 123, 67, .12), var(--stay-surface) 70%);
  padding: 22px;
  text-align: center;
}
.club-locked b { display: block; font: 500 21px var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); color: var(--stay-text); }
.club-locked p { margin: 8px auto 16px; max-width: 460px; font-size: 13px; line-height: 1.65; color: var(--stay-text-2); }
.club-locked button {
  border: 0; border-radius: 10px; background: var(--stay-gold); color: var(--stay-on-gold);
  padding: 12px 22px; font-size: 12.5px; font-weight: 800; cursor: pointer;
}

body.guest-authenticated .club-services {
  background: var(--stay-surface); border: 1px solid var(--stay-line);
  border-radius: var(--stay-radius); padding: 18px; margin-top: 14px;
}
body.guest-authenticated .club-services > header > span {
  font-size: 11px; letter-spacing: .16em; font-weight: 850; color: var(--stay-gold-ink);
}
body.guest-authenticated .club-services > header h3 { font: 500 21px var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); margin: 5px 0 0; color: var(--stay-text); }
/* Inside the Club the request form and its history are already on a card, so
   they drop their own frame rather than nesting a box in a box. */
body.guest-authenticated .club-services .request-form,
body.guest-authenticated .club-services .request-history {
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
body.guest-authenticated .club-services .request-history { border-top: 1px solid var(--stay-line); padding-top: 14px; margin-top: 14px; }
body.guest-authenticated .club-services .service-layout { grid-template-columns: 1fr; gap: 14px; }

/* ── Trips: what the Club remembers after check-out ────────────────────── */
.trip-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px;
}
.trip-totals > div {
  background: var(--stay-surface); border: 1px solid var(--stay-line);
  border-radius: 12px; padding: 14px;
}
.trip-totals span { display: block; font-size: 11px; letter-spacing: .14em; font-weight: 850; color: var(--stay-gold-ink); }
.trip-totals b { display: block; margin-top: 6px; font: 500 22px var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); color: var(--stay-text); }
.trip-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--stay-surface); border: 1px solid var(--stay-line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
}
.trip-row.is-current { border-color: rgba(172, 123, 67, .5); background: linear-gradient(150deg, rgba(172, 123, 67, .12), var(--stay-surface) 70%); }
.trip-row b { display: block; font-size: 13.5px; color: var(--stay-text); }
.trip-row small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--stay-text-2); }
.trip-meta { display: flex; align-items: center; gap: 12px; }
.trip-meta b { font: 500 15px var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); color: var(--stay-gold-ink); }

/* ── The membership gate ───────────────────────────────────────────────────
   First screen after sign-in. It is a decision, not a nag, so it gets room and
   states plainly what joining connects. */
.club-gate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.club-gate-backdrop { position: absolute; inset: 0; background: rgba(53, 51, 48, .72); backdrop-filter: blur(6px); }
body.club-gate-open { overflow: hidden; }
.club-gate-card {
  position: relative;
  width: min(500px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #4D4B4A;
  border: 1px solid rgba(172, 123, 67, .45);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  color: #EAE8E3;
}
.club-gate-card .eyebrow { color: #E0C197; font-size: 11px; letter-spacing: .2em; font-weight: 850; margin: 0 0 10px; }
.club-gate-card h2 { font: 500 clamp(24px, 5vw, 31px)/1.1 var(--ui-font-display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif); margin: 0 0 10px; letter-spacing: -.02em; }
.club-gate-lead { font-size: 13px; line-height: 1.65; color: #E2DFD8; margin: 0 0 18px; }
.club-gate-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.club-gate-benefits li { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px; }
.club-gate-benefits i {
  font-style: normal; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: rgba(224, 193, 151, .14); color: #E0C197; border: 1px solid rgba(224, 193, 151, .38);
}
.club-gate-benefits b { display: block; font-size: 12.5px; color: #EAE8E3; }
.club-gate-benefits span { font-size: 12px; line-height: 1.5; color: #E2DFD8; }
.club-gate-card .check-line { display: flex !important; align-items: flex-start; gap: 10px; margin: 12px 0; }
.club-gate-card .check-line input { width: 20px !important; height: 20px; flex: none; margin-top: 0; accent-color: #AC7B43; color-scheme: light; }
.club-gate-card .check-line span { font-size: 12px; line-height: 1.55; color: #E2DFD8; }
.club-gate-card .primary { background: #AC7B43; color: #121719; border-radius: 11px; padding: 14px; margin-top: 6px; }
.club-gate-skip {
  display: block; width: 100%; margin-top: 14px; padding: 8px;
  border: 0; background: none; color: #D9D5CD; font-size: 12px; cursor: pointer; text-decoration: underline;
}
.club-gate-skip:hover { color: #EAE8E3; }

/* ── CONFIRMATION VIEW ──────────────────────────────────────────────────────
   Two columns on desktop with a sticky right rail; one column on mobile, where
   the confirmation box comes FIRST because reference and PIN are what a guest
   opens this page for at the door. */
.conf-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.conf-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.conf-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
@media (max-width:900px){
  .conf-grid{grid-template-columns:1fr}
  .conf-side{position:static;order:-1}
}
.conf-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px}
.conf-card h3{margin:0 0 12px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.conf-hero{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px}
.conf-check{margin:0;color:#1a7f4b;font-weight:700;font-size:14px}
html[data-theme="dark"] .conf-check{color:#4ade80}
.conf-hero h2{margin:6px 0 4px;font-size:22px;color:var(--ink)}
.conf-sent{margin:0 0 14px;color:var(--muted);font-size:13px}
.conf-actions{display:flex;gap:10px;flex-wrap:wrap}
.conf-actions .secondary,.conf-actions a.secondary{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
/* This band renders on a DARK surface in the guest shell in BOTH themes, so
   neither --ink nor a theme-conditional amber is safe: measured 2.66:1 against
   the composited background. It carries its own opaque chip instead, which
   makes the contrast deterministic rather than dependent on whatever ancestor
   happens to sit behind it. Measured 9.6:1. */
.conf-trust{margin:0;padding:11px 14px;border-radius:12px;font-size:12px;line-height:1.6;
  background:#F4ECE1;border:1px solid rgba(172,123,67,.45);color:#5C3F20}
.conf-saved{color:#1a7f4b;font-size:11px;font-weight:600}
html[data-theme="dark"] .conf-saved{color:#4ade80}
.conf-summary{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
.conf-summary img{width:120px;height:90px;object-fit:cover;border-radius:12px}
.conf-summary h4{margin:0 0 4px;font-size:15px;color:var(--ink)}
.conf-summary p{margin:2px 0;font-size:13px;color:var(--muted)}
.conf-total{font-size:17px!important;font-weight:800;color:var(--ink)!important;margin-top:8px!important}
@media (max-width:520px){.conf-summary{grid-template-columns:1fr}.conf-summary img{width:100%;height:150px}}
.conf-exp-ph{width:120px;height:90px;border-radius:12px;background:var(--line)}
.conf-upsells{display:flex;flex-direction:column;gap:12px}
.conf-upsell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:14px}
.conf-upsell h4{margin:0 0 4px;font-size:14px;color:var(--ink)}
.conf-upsell p{margin:2px 0;font-size:12.5px;color:var(--muted)}
.conf-upsell-buy{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.conf-price{margin:0!important;font-size:15px;color:var(--ink)!important}
.conf-price s{color:var(--muted);font-weight:400;margin-right:4px}
.conf-badge-member{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
  background:rgba(193,123,69,.16);color:#8E5226;border:1px solid rgba(193,123,69,.4)}
html[data-theme="dark"] .conf-badge-member{color:#E0A96D}
.conf-free-cancel{color:#1a7f4b!important;font-size:12px!important;margin-top:6px!important}
html[data-theme="dark"] .conf-free-cancel{color:#4ade80!important}
@media (max-width:520px){.conf-upsell{grid-template-columns:1fr}.conf-upsell-buy{align-items:flex-start;text-align:left}}
.conf-carousel{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.conf-carousel>*{flex:0 0 210px;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;padding:10px}
.conf-exp img{width:100%;height:110px;object-fit:cover;border-radius:10px}
.conf-exp h4{margin:8px 0 4px;font-size:13.5px;color:var(--ink)}
.conf-exp p{margin:2px 0;font-size:12px;color:var(--muted)}
.conf-stars{color:#80582D!important;font-weight:600}
.conf-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;font-size:13px;color:var(--muted)}
.conf-kv b{color:var(--ink);font-size:14px}
.conf-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.conf-copy{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;
  padding:4px 9px;font-size:11.5px;cursor:pointer}
/* The quiet zone is a real white box, not a theme colour: a QR rendered dark-on-dark
   does not scan, and this panel is dark for most of the day. */
.conf-qr{margin:12px auto 6px;width:172px;height:172px;background:#fff;border-radius:12px;
  padding:10px;display:flex;align-items:center;justify-content:center}
.conf-qr img{width:100%;height:100%;object-fit:contain;display:block}
.conf-ref small{display:block;text-align:center;color:var(--muted);font-size:11.5px}
.conf-settled{margin:8px 0 0;color:#1a7f4b;font-size:12.5px;font-weight:600}
html[data-theme="dark"] .conf-settled{color:#4ade80}
.conf-reward{background:linear-gradient(135deg,rgba(193,123,69,.16),rgba(142,82,38,.08));border-color:rgba(193,123,69,.45)}
.conf-reward p{margin:0;font-size:13px;color:var(--ink);line-height:1.6}
.conf-bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:8px 0 6px}
.conf-bar i{display:block;height:100%;background:linear-gradient(90deg,#C17B45,#E0A96D)}
.conf-access p{margin:6px 0;font-size:13.5px;color:var(--ink)}
.conf-empty{padding:40px;text-align:center;color:var(--muted)}
.conf-empty button{margin-top:12px}

/* stage-aware panel, offline notice, rewards modal */
.conf-offline{margin:6px 0 0;font-size:12px;color:#8E5226;background:rgba(224,169,109,.14);
  border:1px solid rgba(224,169,109,.4);border-radius:9px;padding:7px 10px}
html[data-theme="dark"] .conf-offline{color:#E8B888}
.conf-stage-grid{display:flex;flex-wrap:wrap;gap:8px}
.conf-stage-grid .secondary,.conf-stage-grid a.secondary{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 13px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer}
.conf-stage-grid .secondary[disabled]{opacity:.6;cursor:default}
.conf-stage-note{margin:10px 0 0;font-size:11.5px;color:var(--muted)}
.conf-comeback{background:linear-gradient(135deg,rgba(193,123,69,.14),rgba(142,82,38,.06));border-color:rgba(193,123,69,.4)}
.conf-modal-backdrop{position:fixed;inset:0;background:rgba(6,10,13,.62);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:9000}
.conf-modal{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;max-width:420px;width:100%}
.conf-modal-eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.16em;color:#80582D;font-weight:700}
.conf-modal h3{margin:0 0 8px;font-size:19px;color:var(--ink)}
.conf-modal p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.conf-modal-list{margin:0 0 16px;padding-left:18px;font-size:13px;color:var(--ink);line-height:1.9}
.conf-modal-list s{color:var(--muted);font-weight:400}
.conf-modal-off{display:block;text-align:center;margin-top:12px;font-size:12px;color:var(--muted);
  text-decoration:underline;cursor:pointer}

/* ── Type floor inside the stay (2026-10-24) ───────────────────────────────
   guest.css sizes much of the signed-in small print at 7-9px. Nothing a guest
   has to read is set below 10px here; labels and notes sit at 11-12px. */
body.guest-authenticated .stay-badge small { font-size: 10px; }
body.guest-authenticated .status-pill { font-size: 10px; }
body.guest-authenticated .request-mini small,
body.guest-authenticated .journey-progress header > b { font-size: 11px; }
body.guest-authenticated .request-mini b,
body.guest-authenticated .progress-steps b { font-size: 12px; }
body.guest-authenticated .empty { font-size: 12px; }
body.guest-authenticated .journey-progress header span,
body.guest-authenticated .requests-preview header span { font-size: 10px; }
body.guest-authenticated .requests-preview header button,
body.guest-authenticated .request-history header button { font-size: 11px; color: var(--stay-gold-ink); }
body.guest-authenticated .round-button { font-size: 11px; }
body.guest-authenticated .topbar-actions select { font-size: 12px; }

/* 2026-10-28: one task-based navigation; keep all nine stay sections. */
body.guest-authenticated .guest-app {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 28px;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding: 24px clamp(16px, 3vw, 40px) 48px;
  align-items: start;
}
body.guest-authenticated .app-sidebar {
  display: block;
  position: sticky;
  inset: auto;
  top: 88px;
  width: auto;
  height: auto;
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  border: 1px solid var(--stay-line);
  border-radius: 20px;
  padding: 20px 12px;
  background: var(--stay-surface);
  color: var(--stay-text);
}
body.guest-authenticated .app-sidebar .guest-brand { color: var(--stay-text); margin: 0 8px 24px; }
body.guest-authenticated .app-sidebar .cp-brand-lockup { font-size: 11px; gap: 4px; flex-wrap: wrap; }
body.guest-authenticated .app-sidebar .cp-brand-citi { width: 112px; min-width: 112px; }
body.guest-authenticated .app-sidebar .cp-brand-cp { width: 66px; min-width: 66px; }
body.guest-authenticated .stay-nav-group { margin-block: 0 22px; }
body.guest-authenticated .stay-nav-group h2 { color: var(--stay-text-3); font-size: 11px; font-weight: 650; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; padding-inline: 12px; margin: 0 0 8px; }
body.guest-authenticated #appNavigation button {
  min-height: 48px; width: 100%; display: flex; align-items: center; gap: 12px;
  border: 1px solid transparent; border-radius: 12px; padding: 12px;
  background: transparent; color: var(--stay-text-2); font-size: 14px;
  line-height: 1.4; text-align: start; cursor: pointer;
}
body.guest-authenticated #appNavigation button.active { background: var(--stay-gold-soft); border-color: var(--stay-line); color: var(--stay-text); font-weight: 650; }
body.guest-authenticated #appNavigation button i { width: 22px; text-align: center; font-size: 20px; font-style: normal; flex: none; }
body.guest-authenticated .app-sidebar .privacy-card { margin: 12px 8px; color: var(--stay-text-2); background: var(--stay-surface-2); border-color: var(--stay-line); }
body.guest-authenticated .app-sidebar .privacy-card small { color: var(--stay-text-3); font-size: 12px; line-height: 1.5; }
body.guest-authenticated .app-sidebar .sign-out { color: var(--stay-text); width: 100%; min-height: 44px; font-size: 14px; text-align: start; padding-inline: 12px; }
body.guest-authenticated .app-workspace { min-width: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
body.guest-authenticated .stay-rail { display: none !important; }
body.guest-authenticated .mobile-app-nav { display: none !important; }
body.guest-authenticated :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--stay-gold-ink); outline-offset: 3px; }
body.guest-authenticated .home-nearby a { color: inherit; text-underline-offset: 4px; }
body.guest-authenticated .home-todo { border-inline-start: 3px solid var(--stay-gold); padding-inline-start: 12px; }
.stay-more-sheet {
  width: min(540px, calc(100% - 24px)); max-height: min(80dvh, 680px); overflow-y: auto;
  margin: auto auto max(12px, env(safe-area-inset-bottom));
  border: 1px solid var(--stay-line, #D3CFC7); border-radius: 24px;
  padding: 20px; color: var(--stay-text, #353330); background: var(--stay-surface, #FFFFFF);
  box-shadow: 0 24px 80px rgba(53, 51, 48, .2);
}
.stay-more-sheet::backdrop { background: rgba(53, 51, 48, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stay-more-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.stay-more-sheet header h2 { font: 550 24px/1.2 var(--ui-font-display, system-ui); margin: 0; }
.stay-more-sheet header button { width: 44px; height: 44px; border: 1px solid var(--stay-line); border-radius: 50%; font-size: 26px; color: inherit; background: var(--stay-surface-2); cursor: pointer; flex: none; }
.stay-more-sheet nav { display: grid; gap: 8px; }
.stay-more-sheet nav button { min-height: 52px; display: flex; justify-content: space-between; gap: 16px; align-items: center; border: 1px solid var(--stay-line); border-radius: 14px; padding: 14px 16px; background: var(--stay-surface); color: inherit; font: 500 16px/1.4 var(--ui-font-body, system-ui); text-align: start; cursor: pointer; }
.stay-more-sheet nav button i { font-style: normal; }
.stay-more-sheet nav button.active { background: var(--stay-gold-soft); border-color: var(--stay-gold); }
@media (max-width: 980px) {
  body.guest-authenticated .guest-app { display: block; padding: 0 16px calc(106px + env(safe-area-inset-bottom)); }
  body.guest-authenticated .app-sidebar { display: none; }
  body.guest-authenticated .app-workspace { padding: 0; }
  body.guest-authenticated .app-topbar { padding-block: 24px 20px; flex-wrap: wrap; }
  body.guest-authenticated .topbar-actions { width: 100%; justify-content: space-between; }
  body.guest-authenticated .topbar-actions select { max-width: min(68vw, 380px); min-height: 48px; font-size: 16px; }
  body.guest-authenticated :is(input, textarea, select) { font-size: 16px; }
  body.guest-authenticated .mobile-app-nav {
    display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; inset: auto 0 0; z-index: 90; width: 100%;
    border-top: 1px solid var(--stay-line); background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    padding: 8px 8px max(10px, env(safe-area-inset-bottom));
  }
  body.guest-authenticated .mobile-app-nav button { min-width: 0; min-height: 52px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; color: var(--stay-text-2); border: 0; border-radius: 12px; background: transparent; }
  body.guest-authenticated .mobile-app-nav button.active { color: var(--stay-gold-ink); background: var(--stay-gold-soft); }
  body.guest-authenticated .mobile-app-nav i { font-style: normal; font-size: 22px; line-height: 1; }
  body.guest-authenticated .mobile-app-nav span { font-size: 11px; line-height: 1.3; margin: 0; }
  body.guest-authenticated .toast { bottom: calc(90px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
  body.guest-authenticated :is(.chs-tabbar,.cp-platform-dock) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.guest-authenticated *, .stay-more-sheet { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.stay-more-account { display: flex; gap: 12px; margin-top: 20px; }
.stay-more-account button { flex: 1; min-height: 48px; padding: 12px; border: 1px solid var(--stay-line); border-radius: 14px; color: var(--stay-text); background: var(--stay-surface-2); font: 500 15px/1.4 var(--ui-font-body, system-ui); cursor: pointer; }
/* Keep the existing graphite sidebar and its matching porcelain foreground. */
body.guest-authenticated .app-sidebar {
  --stay-text: #EAE8E3;
  --stay-text-2: #E2DFD8;
  --stay-text-3: #D9D5CD;
  --stay-surface: #4D4B4A;
  --stay-surface-2: rgba(255, 255, 255, .08);
  --stay-line: rgba(234, 232, 227, .26);
  --stay-gold-ink: #E0C197;
}
/* The shared light support cards must use light-surface ink, including headings. */
body.guest-authenticated .support-layout .support-intro { color: var(--stay-text); }
body.guest-authenticated .support-layout .support-intro :is(h2, a) { color: var(--stay-text); }
body.guest-authenticated .support-layout .support-intro .eyebrow { color: var(--stay-gold-ink); }
body.guest-authenticated .support-layout .support-intro > p:last-of-type,
body.guest-authenticated .checkout-copy > p:last-of-type { color: var(--stay-text-2); }
body.guest-authenticated .conf-empty > p { color: var(--stay-text-2); }