/* Guest Portal — Atelier-inspired light editorial UI */

/*
 * Guest layout loads staff app.css for shared form/button tokens.
 * Staff shell locks body { overflow:hidden; height:100% } for the framed
 * panel — that must NOT apply here or the portal cannot scroll and content
 * is cut off. Scope overrides to body.gp-body / body.gp-auth-body only.
 */
html:has(body.gp-body),
html:has(body.gp-auth-body) {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
body.gp-body,
body.gp-auth-body {
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Kill staff framed-shell backdrop leaf on guest pages */
body.gp-body::before,
body.gp-auth-body::before {
  display: none !important;
  content: none !important;
}

.gp-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(198, 240, 50, 0.14), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(31, 77, 46, 0.08), transparent 50%),
    #F5F2F0 !important;
  color: var(--gc-ink, #14140F);
  font-family: var(--gc-font, system-ui, sans-serif);
}

.gp-shell {
  max-width: 920px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 18px max(28px, env(safe-area-inset-bottom, 0px));
  /* Allow natural document scroll; do not trap overflow */
  overflow: visible;
}

.gp-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(20, 20, 15, 0.08);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 242, 240, 0.96);
  backdrop-filter: blur(10px);
  /* iOS safe area under notch when sticky */
  padding-top: max(18px, env(safe-area-inset-top, 0px));
}

.gp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.gp-brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #1F4D2E;
  color: #C6F032;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 8px 20px rgba(31, 77, 46, 0.22);
  overflow: hidden;
}
.gp-brand__mark--logo {
  width: 56px;
  height: 56px;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.gp-brand__mark--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
.gp-brand__text b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.gp-brand__text span {
  display: block;
  font-family: var(--gc-font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b60;
  margin-top: 2px;
}

.gp-nav {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.gp-nav__a {
  text-decoration: none;
  color: #5a5a50;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.gp-nav__a:hover { background: rgba(31, 77, 46, 0.06); color: #14140F; }
.gp-nav__a.is-active {
  background: #1F4D2E;
  color: #FCFCFA;
}

.gp-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.gp-user__name { font-weight: 600; color: #3a3a32; }
.gp-user__out {
  color: #6b6b60;
  text-decoration: none;
  font-weight: 500;
}
.gp-user__out:hover { color: #1F4D2E; }

.gp-main {
  flex: 1 1 auto;
  padding: 22px 0 8px;
  min-height: 0;
  overflow: visible;
}
.gp-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex: none;
  padding-top: 20px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgba(20, 20, 15, 0.06);
  font-size: 12px;
  color: #7a7a70;
}
.gp-foot__powered {
  color: #5a5a50;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gp-foot__powered:hover {
  color: #1F4D2E;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Timer hero ---- */
.gp-hero-wrap { margin-bottom: 28px; }

.gp-timer-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  color: #FCFCFA;
  padding: 30px 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  /* Solid base first: it matches the photograph's darkest tone, so the card never
     flashes light before the image decodes. */
  background-color: #0B1820;
  /* jpg first for anything without image-set(), webp for everything else */
  background-image:
    linear-gradient(180deg, rgba(7, 18, 25, 0.62) 0%, rgba(7, 18, 25, 0.30) 42%, rgba(7, 18, 25, 0.80) 100%),
    url('../img/gp-timer-bg.jpg');
  background-image:
    linear-gradient(180deg, rgba(7, 18, 25, 0.62) 0%, rgba(7, 18, 25, 0.30) 42%, rgba(7, 18, 25, 0.80) 100%),
    image-set(url('../img/gp-timer-bg-1536.webp') type('image/webp'),
              url('../img/gp-timer-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 34% 62%;
  background-repeat: no-repeat;
  box-shadow:
    0 28px 56px rgba(4, 12, 18, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Narrow cards crop toward the centre, so pull the framing back to keep the cart
   in shot instead of showing empty sky. */
@media (max-width: 560px) {
  .gp-timer-card {
    padding: 24px 18px 20px;
    background-position: 26% 66%;
    background-image:
      linear-gradient(180deg, rgba(7, 18, 25, 0.66) 0%, rgba(7, 18, 25, 0.38) 42%, rgba(7, 18, 25, 0.84) 100%),
      url('../img/gp-timer-bg.jpg');
    background-image:
      linear-gradient(180deg, rgba(7, 18, 25, 0.66) 0%, rgba(7, 18, 25, 0.38) 42%, rgba(7, 18, 25, 0.84) 100%),
      image-set(url('../img/gp-timer-bg-900.webp') type('image/webp'),
                url('../img/gp-timer-bg.jpg') type('image/jpeg'));
  }
}
/* Reused as the accent + vignette layer so no markup change is needed and both
   the dashboard and the booking detail page pick it up. */
.gp-timer-card__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(320px 260px at 88% -6%, rgba(198, 240, 50, 0.20), transparent 70%),
    radial-gradient(420px 320px at 12% 108%, rgba(31, 77, 46, 0.42), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(4, 11, 16, 0.46) 100%);
}
/* Everything above the photo. */
.gp-timer-card > *:not(.gp-timer-card__glow) { position: relative; z-index: 1; }
.gp-timer-card__top {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.gp-kicker {
  font-family: var(--gc-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(198, 240, 50, 0.92);
  margin-bottom: 8px;
}
.gp-timer-card__title {
  margin: 0;
  text-shadow: 0 1px 14px rgba(4, 12, 18, 0.55);
  font-size: 23px;
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.gp-timer-card__cart { font-weight: 500; opacity: 0.88; }
.gp-timer-card__meta {
  margin-top: 9px;
  text-shadow: 0 1px 10px rgba(4, 12, 18, 0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12.5px;
  color: rgba(252, 252, 250, 0.72);
}
.gp-phase {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gp-phase--active, .gp-phase--in_window { background: rgba(198, 240, 50, 0.22); color: #C6F032; }
.gp-phase--overdue { background: rgba(220, 38, 38, 0.28); color: #fecaca; }
.gp-phase--upcoming { background: rgba(255, 255, 255, 0.14); }

.gp-ring-wrap {
  position: relative;
  width: min(260px, 70vw);
  margin: 18px auto 8px;
}
.gp-ring-wrap--sm { width: min(220px, 64vw); }
.gp-ring { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.gp-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 10;
}
.gp-ring__prog {
  fill: none;
  stroke: url(#gpRingGrad);
  stroke-width: 10;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(198, 240, 50, 0.45));
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .gp-ring__prog { transition: none; }
}
.gp-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.gp-countdown {
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 7.4vw, 40px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(4, 12, 18, 0.6);
}
.gp-countdown__sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(252, 252, 250, 0.65);
}
.gp-timer-card__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.gp-timer-card .btn-primary {
  background: #C6F032;
  color: #14140F;
  border: none;
  font-weight: 700;
}
.gp-timer-card .btn-primary:hover { filter: brightness(1.05); }
.gp-timer-card .btn-light {
  background: rgba(255, 255, 255, 0.13);
  color: #FCFCFA;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.20);
}
.gp-timer-card .btn-light:hover { background: rgba(255, 255, 255, 0.18); }

/* ---- Sections / list ---- */
.gp-section { margin-bottom: 28px; }
.gp-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gp-section__head h2,
.gp-page-title {
  margin: 0;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
}
.gp-page-title { font-size: 22px; margin-bottom: 4px; }
.gp-lead {
  color: #5a5a50;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 52ch;
}

.gp-list { display: flex; flex-direction: column; gap: 8px; }
.gp-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: #FCFCFA;
  border: 1px solid rgba(20, 20, 15, 0.07);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.03);
  transition: transform 0.15s, box-shadow 0.15s;
}
.gp-list__item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 20, 15, 0.06);
}
.gp-list__swatch {
  width: 8px;
  align-self: stretch;
  border-radius: 99px;
  flex: none;
}
.gp-list__body { flex: 1; min-width: 0; }
.gp-list__title { font-weight: 680; font-size: 14.5px; }
.gp-list__meta { font-size: 12px; color: #7a7a70; margin-top: 3px; }
.gp-list__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gp-list__phase { font-size: 11px; max-width: 160px; text-align: right; line-height: 1.3; }
.gp-list__phase--upcoming { color: #1F4D2E; font-weight: 600; opacity: 0.9; }

.gp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.gp-pager__meta {
  font-size: 12.5px;
  color: #6b6b60;
  font-weight: 600;
  min-width: 7.5em;
  text-align: center;
}
.gp-pager .btn.is-disabled,
.gp-pager .btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.gp-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.gp-mini-card {
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(145deg, #2a3d30, #1F4D2E);
  color: #FCFCFA;
  min-height: 96px;
  position: relative;
}
.gp-mini-card.is-default { outline: 2px solid #C6F032; outline-offset: 1px; }
.gp-mini-card__brand { font-size: 11px; letter-spacing: 0.08em; opacity: 0.75; }
.gp-mini-card__num { font-size: 16px; font-weight: 700; margin-top: 10px; letter-spacing: 0.04em; }
.gp-mini-card__exp { font-size: 12px; opacity: 0.7; margin-top: 6px; }
.gp-mini-card__def {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #C6F032;
  color: #14140F;
  padding: 3px 6px;
  border-radius: 6px;
}

.gp-card-empty {
  padding: 22px;
  border-radius: 14px;
  background: #FCFCFA;
  border: 1px dashed rgba(20, 20, 15, 0.12);
  text-align: center;
  grid-column: 1 / -1;
}
.gp-card-empty p { margin: 0 0 12px; color: #5a5a50; }

.gp-empty { text-align: center; padding: 48px 16px; }
.gp-empty--hero {
  background: #FCFCFA;
  border-radius: 22px;
  border: 1px solid rgba(20, 20, 15, 0.07);
}
.gp-empty__illus { font-size: 40px; margin-bottom: 8px; }
.gp-empty__code {
  font-family: var(--gc-font-mono, monospace);
  font-size: 48px;
  font-weight: 700;
  color: #1F4D2E;
  opacity: 0.35;
}
.gp-empty h1 { font-size: 20px; margin: 8px 0 10px; }

/* ---- Detail ---- */
.gp-back-link, .gp-back {
  display: inline-block;
  margin-bottom: 14px;
  color: #5a5a50;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.gp-back-link:hover, .gp-back:hover { color: #1F4D2E; }
.gp-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.gp-panel {
  background: #FCFCFA;
  border: 1px solid rgba(20, 20, 15, 0.07);
  border-radius: 14px;
  padding: 16px;
}
.gp-panel h3 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7a70;
  font-weight: 700;
}
.gp-dl { margin: 0; }
.gp-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(20, 20, 15, 0.06);
  font-size: 13.5px;
}
.gp-dl dt { color: #7a7a70; }
.gp-dl dd { margin: 0; font-weight: 600; }
.gp-cart-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gp-cart-tags li {
  background: rgba(31, 77, 46, 0.08);
  color: #1F4D2E;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.gp-site-note { margin-top: 14px; font-size: 13.5px; color: #5a5a50; }

/* ---- Wallet cards page (ISO/IEC 7810 ID-1 plastic card) ---- */
.gp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
  align-items: start;
}
.gp-wallet-card {
  /* Credit card proportions: 85.60 × 53.98 mm → ~1.586 */
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1.586 / 1;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 14px;
  padding: 5.5% 6.2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FCFCFA;
  background:
    radial-gradient(120px 80px at 92% 8%, rgba(198, 240, 50, 0.16), transparent 62%),
    linear-gradient(145deg, #1a3324 0%, #1F4D2E 48%, #163022 100%);
  box-shadow:
    0 16px 36px rgba(20, 20, 15, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  isolation: isolate;
}
.gp-wallet-card[data-brand="visa"] {
  background:
    radial-gradient(110px 70px at 90% 10%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(145deg, #0f1a5c 0%, #1A1F71 50%, #0d1548 100%);
}
.gp-wallet-card[data-brand="mastercard"] {
  background:
    radial-gradient(110px 70px at 90% 10%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(145deg, #1c1c1c 0%, #2a2a2a 50%, #111 100%);
}
.gp-wallet-card[data-brand="amex"] {
  background:
    radial-gradient(110px 70px at 90% 10%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(145deg, #1a4a7a 0%, #2E77BC 50%, #163d66 100%);
}
.gp-wallet-card[data-brand="discover"] {
  background:
    radial-gradient(110px 70px at 90% 10%, rgba(255, 200, 120, 0.2), transparent 55%),
    linear-gradient(145deg, #3d2208 0%, #8B4513 45%, #F76F00 120%);
}
.gp-wallet-card.is-default {
  box-shadow:
    0 0 0 2px #C6F032,
    0 16px 36px rgba(20, 20, 15, 0.2),
    0 2px 0 rgba(255, 255, 255, 0.08) inset;
}
.gp-wallet-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.07) 48%,
    transparent 54%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
.gp-wallet-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.gp-wallet-card__chip {
  width: 12%;
  max-width: 42px;
  min-width: 32px;
  aspect-ratio: 1.4 / 1;
  border-radius: 5px;
  background:
    linear-gradient(135deg, #f3e2b0 0%, #c9a24a 40%, #f7e9c4 70%, #b8923e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.15);
  flex: none;
  /* subtle chip contacts */
  background-image:
    linear-gradient(90deg, transparent 46%, rgba(0,0,0,.08) 46%, rgba(0,0,0,.08) 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(0,0,0,.08) 46%, rgba(0,0,0,.08) 54%, transparent 54%),
    linear-gradient(135deg, #f3e2b0 0%, #c9a24a 40%, #f7e9c4 70%, #b8923e 100%);
}
.gp-wallet-card__logo {
  width: 16%;
  max-width: 56px;
  min-width: 44px;
  aspect-ratio: 1.5 / 1;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.06);
  flex: none;
}
.gp-wallet-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gp-wallet-card__badge {
  position: absolute;
  top: 5.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #C6F032;
  color: #14140F;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.gp-wallet-card__num {
  position: relative;
  z-index: 1;
  margin-top: auto;
  margin-bottom: 3%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em 0.7em;
  font-family: var(--gc-font-mono, ui-monospace, monospace);
  font-size: clamp(15px, 4.6vw, 19px);
  letter-spacing: 0.14em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gp-wallet-card__bot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex: none;
}
.gp-wallet-card__field { min-width: 0; }
.gp-wallet-card__field--exp { text-align: right; flex: none; }
.gp-wallet-card__k {
  display: block;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.68;
  margin-bottom: 3px;
  font-weight: 650;
}
.gp-wallet-card__v {
  display: block;
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-add-card { margin-top: 8px; }

/* ---- Modal ---- */
.gp-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: end center;
  padding: 0;
}
.gp-modal[hidden] { display: none !important; }
.gp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 15, 0.45);
  backdrop-filter: blur(3px);
}
.gp-modal__panel {
  position: relative;
  width: min(480px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  background: #FCFCFA;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  animation: gpSheet 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes gpSheet {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}
.gp-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 8px;
}
.gp-modal__head h3 { margin: 0; font-size: 17px; font-weight: 720; }
.gp-modal__x {
  border: 0;
  background: rgba(20, 20, 15, 0.06);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #5a5a50;
}
.gp-modal__body { padding: 8px 18px 12px; }
.gp-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 20px;
  border-top: 1px solid rgba(20, 20, 15, 0.06);
}
.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gp-chip {
  border: 1px solid rgba(20, 20, 15, 0.12);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  color: #3a3a32;
}
.gp-chip.is-active {
  background: #1F4D2E;
  border-color: #1F4D2E;
  color: #FCFCFA;
}
.gp-extend-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(31, 77, 46, 0.06);
  border: 1px solid rgba(31, 77, 46, 0.1);
  font-size: 13.5px;
  line-height: 1.45;
}
.gp-extend-result.is-warn {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.2);
}
.gp-extend-result.is-err {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.15);
}
.gp-alt-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-alt-list button {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(20, 20, 15, 0.1);
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13.5px;
  transition: border-color 0.15s, background 0.15s;
}
.gp-alt-list button:hover {
  border-color: #1F4D2E;
  background: rgba(31, 77, 46, 0.04);
}
.gp-alt-list button small {
  display: block;
  font-weight: 500;
  color: #6b6b60;
  margin-top: 2px;
}

/* ---- Auth ---- */
.gp-auth-body { margin: 0; background: #F5F2F0; min-height: 100vh; }
.gp-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}
.gp-auth--simple {
  display: grid;
  place-items: center;
  padding: 24px;
  grid-template-columns: 1fr;
}
.gp-auth__visual {
  position: relative;
  /* Photo set via inline style on login; solid fallback if missing */
  background-color: #15301e;
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.gp-auth__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 32, 21, 0.42) 0%, rgba(15, 32, 21, 0.12) 28%, rgba(15, 32, 21, 0.28) 58%, rgba(10, 22, 16, 0.88) 100%),
    linear-gradient(90deg, rgba(10, 22, 16, 0.35) 0%, rgba(10, 22, 16, 0) 45%);
  pointer-events: none;
  z-index: 0;
}
.gp-auth__visual > *:not(.gp-auth__scrim) {
  position: relative;
  z-index: 1;
}
.gp-auth__brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
}
.gp-auth__glyph {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
/* ~3× prior logo mark; no white plate — transparent PNG over the photo */
.gp-auth__glyph--logo {
  width: 156px;
  height: 156px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.gp-auth__glyph--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
.gp-auth__brand b {
  display: block;
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.gp-auth__brand span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0.92;
  margin-top: 4px;
  font-family: var(--gc-font-mono, monospace);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.gp-auth__hero { position: relative; z-index: 1; max-width: 420px; }
.gp-auth__eyebrow {
  font-family: var(--gc-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.gp-auth__eyebrow .tick { color: #C6F032; }
.gp-auth__hero h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 720;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.gp-auth__hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: #C6F032;
}
.gp-auth__points {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.gp-auth__points li::before {
  content: "→";
  color: #C6F032;
  margin-right: 10px;
  font-weight: 700;
}
.gp-auth__panel {
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: #FCFCFA;
}
.gp-auth__card {
  width: min(400px, 100%);
  background: #FCFCFA;
  border-radius: 18px;
  padding: 8px;
}
.gp-auth__card h2 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -0.03em;
  font-weight: 720;
}
.gp-auth__sub {
  margin: 0 0 18px;
  color: #6b6b60;
  font-size: 14px;
  line-height: 1.45;
}
.gp-auth__card .field { display: block; margin-bottom: 12px; }
.gp-auth__card .field > span {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 5px;
  color: #5a5a50;
}
.gp-auth__btn { width: 100%; margin-top: 6px; justify-content: center; }
.gp-auth__links {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
}
.gp-auth__links a { color: #1F4D2E; font-weight: 600; text-decoration: none; }

.gp-alert {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.4;
}
.gp-alert--err {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, 0.15);
}
.gp-alert--ok {
  background: rgba(31, 77, 46, 0.08);
  color: #14532d;
  border: 1px solid rgba(31, 77, 46, 0.14);
}

.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }

@media (max-width: 820px) {
  .gp-auth { grid-template-columns: 1fr; }
  .gp-auth__visual { min-height: 240px; padding: 28px 24px; }
  .gp-auth__glyph--logo { width: 110px; height: 110px; }
  .gp-auth__brand b { font-size: 18px; color: #fff; }
  .gp-auth__brand span { color: #fff; }
  .gp-auth__hero h1 { font-size: 28px; }
  .gp-detail-grid { grid-template-columns: 1fr; }
  .gp-user__name { display: none; }
  .gp-brand__text b { max-width: 110px; }
  .gp-nav { margin-left: 0; width: 100%; order: 3; }
  .gp-nav__a { padding: 8px 10px; font-size: 12.5px; }
  .gp-user { margin-left: auto; }
}
@media (min-width: 640px) {
  .gp-modal { place-items: center; padding: 24px; }
  .gp-modal__panel { border-radius: 18px; }
}

/* ==========================================================================
   DAY / NIGHT THEME LAYER
   --------------------------------------------------------------------------
   Appended deliberately as an ADDITIVE override layer rather than tokenising
   the 900 lines above, because this file has concurrent editors. Nothing above
   this comment is modified, so this whole block can be deleted to revert.

   `data-theme` is set on <html> before the stylesheets load (see the boot
   script in views/guests/layout.php), so there is no flash of the wrong theme.
   Value comes from the guest's own device clock, or their saved choice.
   ========================================================================== */

/* visually-hidden label for the toggle */
.gp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the toggle itself ---- */
.gp-theme {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 15, 0.12);
  background: rgba(255, 255, 255, 0.6);
  color: #3a3a32;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
}
.gp-theme:hover { background: #fff; border-color: rgba(20, 20, 15, 0.22); transform: translateY(-1px); }
.gp-theme:focus-visible { outline: 2px solid #1F4D2E; outline-offset: 2px; }
.gp-theme svg { grid-area: 1 / 1; display: block; transition: opacity 0.18s, transform 0.28s; }
/* day shows the moon (what you would switch TO), night shows the sun */
.gp-theme__moon { opacity: 1; transform: rotate(0deg) scale(1); }
.gp-theme__sun  { opacity: 0; transform: rotate(-70deg) scale(0.6); }
[data-theme="night"] .gp-theme__moon { opacity: 0; transform: rotate(70deg) scale(0.6); }
[data-theme="night"] .gp-theme__sun  { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .gp-theme, .gp-theme svg { transition: none; }
  .gp-theme:hover { transform: none; }
}

/* ==========================================================================
   DAY: the hero card flips to a LIGHT surface.
   Measured: the raw daytime photograph gives white text only 1.04:1 to 1.38:1,
   so white-on-photo is not an option. A 0.62 cream scrim with dark ink holds
   7:1 or better in every text zone, and the photo survives as daylight texture.
   ========================================================================== */
[data-theme="day"] .gp-timer-card {
  color: #14140F;
  border-color: rgba(20, 20, 15, 0.10);
  background-color: #F5F2F0;
  background-image:
    linear-gradient(180deg, rgba(245, 242, 240, 0.55) 0%, rgba(245, 242, 240, 0.62) 45%, rgba(245, 242, 240, 0.74) 100%),
    url('../img/gp-timer-bg-day.jpg');
  background-image:
    linear-gradient(180deg, rgba(245, 242, 240, 0.55) 0%, rgba(245, 242, 240, 0.62) 45%, rgba(245, 242, 240, 0.74) 100%),
    image-set(url('../img/gp-timer-bg-day-1536.webp') type('image/webp'),
              url('../img/gp-timer-bg-day.jpg') type('image/jpeg'));
  background-position: 30% 58%;
  box-shadow:
    0 22px 44px rgba(31, 77, 46, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (max-width: 560px) {
  [data-theme="day"] .gp-timer-card {
    background-position: 24% 62%;
    background-image:
      linear-gradient(180deg, rgba(245, 242, 240, 0.58) 0%, rgba(245, 242, 240, 0.66) 45%, rgba(245, 242, 240, 0.78) 100%),
      url('../img/gp-timer-bg-day.jpg');
    background-image:
      linear-gradient(180deg, rgba(245, 242, 240, 0.58) 0%, rgba(245, 242, 240, 0.66) 45%, rgba(245, 242, 240, 0.78) 100%),
      image-set(url('../img/gp-timer-bg-day-900.webp') type('image/webp'),
                url('../img/gp-timer-bg-day.jpg') type('image/jpeg'));
  }
}
[data-theme="day"] .gp-timer-card__glow {
  background:
    radial-gradient(320px 260px at 88% -6%, rgba(198, 240, 50, 0.30), transparent 70%),
    radial-gradient(420px 320px at 12% 108%, rgba(31, 77, 46, 0.14), transparent 72%);
}
[data-theme="day"] .gp-kicker { color: #2E6B3C; }
[data-theme="day"] .gp-timer-card__title,
[data-theme="day"] .gp-countdown { text-shadow: none; }
[data-theme="day"] .gp-timer-card__meta { color: rgba(20, 20, 15, 0.68); text-shadow: none; }
[data-theme="day"] .gp-countdown__sub { color: rgba(20, 20, 15, 0.62); }
[data-theme="day"] .gp-phase { background: rgba(20, 20, 15, 0.07); border-color: rgba(20, 20, 15, 0.12); color: #14140F; }
[data-theme="day"] .gp-phase--active,
[data-theme="day"] .gp-phase--in_window { background: rgba(31, 77, 46, 0.14); color: #1B4A2B; }
[data-theme="day"] .gp-phase--overdue { background: rgba(185, 28, 28, 0.12); color: #991B1B; }
[data-theme="day"] .gp-ring__track { stroke: rgba(20, 20, 15, 0.13); }
[data-theme="day"] .gp-ring__prog { filter: drop-shadow(0 0 8px rgba(31, 77, 46, 0.30)); }
[data-theme="day"] .gp-timer-card .btn-primary { background: #1F4D2E; color: #FCFCFA; }
[data-theme="day"] .gp-timer-card .btn-light {
  background: rgba(255, 255, 255, 0.7);
  color: #14140F;
  border-color: rgba(20, 20, 15, 0.14);
}

/* ==========================================================================
   NIGHT: the whole portal, not just the card.
   ========================================================================== */
[data-theme="night"] {
  --gpn-bg:      #0E1512;
  --gpn-surface: #161E1A;
  --gpn-raised:  #1D2823;
  --gpn-line:    rgba(255, 255, 255, 0.10);
  --gpn-line-2:  rgba(255, 255, 255, 0.06);
  --gpn-ink:     #E9ECE7;
  --gpn-muted:   #98A29B;
  --gpn-accent:  #C6F032;
  --gpn-green:   #3E9159;
  color-scheme: dark;
}

[data-theme="night"] body.gp-body,
[data-theme="night"] body.gp-auth-body {
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(198, 240, 50, 0.07), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(62, 145, 89, 0.08), transparent 50%),
    var(--gpn-bg) !important;
  color: var(--gpn-ink);
}

/* chrome */
[data-theme="night"] .gp-top {
  background: rgba(14, 21, 18, 0.94);
  border-bottom-color: var(--gpn-line);
}
[data-theme="night"] .gp-brand__text b { color: var(--gpn-ink); }
[data-theme="night"] .gp-brand__text span,
[data-theme="night"] .gp-foot,
[data-theme="night"] .faint { color: var(--gpn-muted); }
[data-theme="night"] .gp-foot { border-top-color: var(--gpn-line-2); }
[data-theme="night"] .gp-foot__powered { color: var(--gpn-muted); }
[data-theme="night"] .gp-foot__powered:hover { color: var(--gpn-accent); }
[data-theme="night"] .gp-nav__a { color: var(--gpn-muted); }
[data-theme="night"] .gp-nav__a:hover { background: rgba(255, 255, 255, 0.07); color: var(--gpn-ink); }
[data-theme="night"] .gp-nav__a.is-active { background: var(--gpn-green); color: #06120B; }
[data-theme="night"] .gp-user__name { color: var(--gpn-ink); }
[data-theme="night"] .gp-user__out { color: var(--gpn-muted); }
[data-theme="night"] .gp-user__out:hover { color: var(--gpn-accent); }
[data-theme="night"] .gp-theme {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gpn-line);
  color: var(--gpn-accent);
}
[data-theme="night"] .gp-theme:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.24); }
[data-theme="night"] .gp-theme:focus-visible { outline-color: var(--gpn-accent); }

/* typography + generic surfaces */
[data-theme="night"] .gp-page-title { color: var(--gpn-ink); }
[data-theme="night"] .gp-lead,
[data-theme="night"] .gp-section__head,
[data-theme="night"] .gp-site-note,
[data-theme="night"] .gp-empty,
[data-theme="night"] .gp-empty__code { color: var(--gpn-muted); }
[data-theme="night"] .gp-panel,
[data-theme="night"] .gp-section,
[data-theme="night"] .gp-list,
[data-theme="night"] .gp-mini-card,
[data-theme="night"] .gp-card-empty,
[data-theme="night"] .gp-add-card,
[data-theme="night"] .gp-extend-result,
[data-theme="night"] .gp-detail-grid > * {
  background: var(--gpn-surface);
  border-color: var(--gpn-line);
  color: var(--gpn-ink);
}
[data-theme="night"] .gp-list__item { border-color: var(--gpn-line-2); }
[data-theme="night"] .gp-list__item:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="night"] .gp-list__title { color: var(--gpn-ink); }
[data-theme="night"] .gp-list__meta,
[data-theme="night"] .gp-list__right,
[data-theme="night"] .gp-dl dt { color: var(--gpn-muted); }
[data-theme="night"] .gp-dl dd { color: var(--gpn-ink); }
[data-theme="night"] .gp-chip {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--gpn-line);
  color: var(--gpn-ink);
}
[data-theme="night"] .gp-back-link { color: var(--gpn-muted); }
[data-theme="night"] .gp-back-link:hover { color: var(--gpn-accent); }
[data-theme="night"] .gp-cart-tags { color: var(--gpn-muted); }

/* wallet / payment cards */
[data-theme="night"] .gp-wallet-card { border-color: var(--gpn-line); }
[data-theme="night"] .gp-mini-card__num,
[data-theme="night"] .gp-mini-card__brand { color: var(--gpn-ink); }
[data-theme="night"] .gp-mini-card__exp,
[data-theme="night"] .gp-mini-card__def { color: var(--gpn-muted); }

/* alerts */
[data-theme="night"] .gp-alert--ok {
  background: rgba(62, 145, 89, 0.16); border-color: rgba(62, 145, 89, 0.34); color: #C7EBD3;
}
[data-theme="night"] .gp-alert--err {
  background: rgba(185, 28, 28, 0.18); border-color: rgba(248, 113, 113, 0.34); color: #FECACA;
}

/* modal */
[data-theme="night"] .gp-modal__backdrop { background: rgba(3, 8, 6, 0.72); }
[data-theme="night"] .gp-modal__panel {
  background: var(--gpn-raised); color: var(--gpn-ink); border: 1px solid var(--gpn-line);
}
[data-theme="night"] .gp-modal__head,
[data-theme="night"] .gp-modal__foot { border-color: var(--gpn-line); }
[data-theme="night"] .gp-modal__x { color: var(--gpn-muted); }
[data-theme="night"] .gp-modal__x:hover { color: var(--gpn-ink); }

/* form controls + buttons inherited from the staff app.css */
[data-theme="night"] .gp-body input:not([type="checkbox"]):not([type="radio"]),
[data-theme="night"] .gp-body select,
[data-theme="night"] .gp-body textarea,
[data-theme="night"] .gp-auth-body input:not([type="checkbox"]):not([type="radio"]),
[data-theme="night"] .gp-auth-body select,
[data-theme="night"] .gp-auth-body textarea {
  background: var(--gpn-raised);
  border-color: var(--gpn-line);
  color: var(--gpn-ink);
}
[data-theme="night"] .gp-body input::placeholder,
[data-theme="night"] .gp-auth-body input::placeholder { color: rgba(152, 162, 155, 0.8); }
[data-theme="night"] .gp-body label,
[data-theme="night"] .gp-auth-body label { color: var(--gpn-muted); }
[data-theme="night"] .gp-body .btn-light,
[data-theme="night"] .gp-auth-body .btn-light {
  background: rgba(255, 255, 255, 0.09);
  color: var(--gpn-ink);
  border-color: var(--gpn-line);
}
[data-theme="night"] .gp-body .btn-light:hover { background: rgba(255, 255, 255, 0.16); }

/* auth pages */
[data-theme="night"] .gp-auth__card,
[data-theme="night"] .gp-auth__panel {
  background: var(--gpn-surface);
  border-color: var(--gpn-line);
  color: var(--gpn-ink);
}
[data-theme="night"] .gp-auth__sub,
[data-theme="night"] .gp-auth__links { color: var(--gpn-muted); }
[data-theme="night"] .gp-auth__links a { color: var(--gpn-accent); }

/* the hero card is already dark, so night only needs the glow warmed slightly */
[data-theme="night"] .gp-timer-card { border-color: rgba(255, 255, 255, 0.10); }

/* ==========================================================================
   DAY / NIGHT — FOLLOW-UP FIXES
   --------------------------------------------------------------------------
   The first night layer styled guest-portal classes but never remapped the
   STAFF design tokens the portal inherits from tokens.css. Everything driven by
   those tokens stayed light-theme dark ink on a dark background:
     app.css:18   h1,h2,h3,h4 { color: var(--gc-text) }   -> #14140F
     app.css:440  .muted { color: var(--gc-text-2) }      -> #3A3A33
   Remapping the tokens fixes every one of those at the source instead of
   chasing individual classes.
   ========================================================================== */

[data-theme="night"] {
  /* surfaces */
  --gc-paper:    #161E1A;
  --gc-paper-2:  #1D2823;
  --gc-border:   rgba(255, 255, 255, 0.12);
  --gc-border-2: rgba(255, 255, 255, 0.08);
  --gc-line:     rgba(255, 255, 255, 0.08);
  /* ink — measured on #161E1A: 14.3:1 / 9.2:1 / 6.5:1 */
  --gc-text:     #E9ECE7;
  --gc-text-2:   #B9C1BA;
  --gc-text-3:   #98A29B;
  --gc-ink:      #E9ECE7;
}

/* Headings inside the hero card must follow the CARD's colour, not the global
   token. app.css targets h1..h4 directly, which beats the card's inherited
   colour, so "2-Seater Electric · GC-05" rendered dark on the dark photo in
   BOTH themes. Structural fix, deliberately not scoped to a theme. */
.gp-timer-card h1,
.gp-timer-card h2,
.gp-timer-card h3,
.gp-timer-card__title { color: inherit; }

/* ---- list rows: were #FCFCFA white in night mode -------------------------
   guests.css:404 hardcodes background:#FCFCFA. The old night rule only set a
   hover of rgba(255,255,255,.04), which REPLACED the white and let the dark
   container show through — hence "white normally, dark on hover". */
[data-theme="night"] .gp-list__item {
  background: #1D2823;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
  color: var(--gc-text);
}
[data-theme="night"] .gp-list__item:hover {
  background: #26332C;            /* lifts, never lightens to white */
  border-color: rgba(198, 240, 50, 0.38);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}
[data-theme="night"] .gp-list__title { color: var(--gc-text); }
[data-theme="night"] .gp-list__meta  { color: var(--gc-text-3); }

/* #1F4D2E on a dark row measured 1.56:1 — unreadable. */
[data-theme="night"] .gp-list__phase--upcoming { color: #8FE0A8; opacity: 1; }
[data-theme="night"] .gp-list__phase { color: var(--gc-text-3); }

/* ---- requested: chartreuse highlight behind the text itself, on hover,
        night mode only. Ink on #C6F032 measures 14.0:1. ------------------- */
[data-theme="night"] .gp-list__item .gp-list__title {
  display: inline;
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: -6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: transparent;
  transition: background 0.16s ease, color 0.16s ease;
}
[data-theme="night"] .gp-list__item:hover .gp-list__title {
  background: #C6F032;
  color: #14140F;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="night"] .gp-list__item .gp-list__title { transition: none; }
}

/* ---- breathing room: page title, lead paragraph, panels and wallet cards -- */
.gp-page-title { padding-top: 2px; }
.gp-lead {
  padding-right: 12px;
  margin-bottom: 22px;
  line-height: 1.6;
}
.gp-panel { padding: 20px; }
.gp-panel h3 { margin-bottom: 14px; }
@media (min-width: 640px) {
  .gp-panel { padding: 24px; }
  .gp-lead { padding-right: 24px; }
}
.gp-add-card { margin-top: 14px; }
.gp-wallet-card { padding: 18px; }

/* the helper line under "Add a card" now rides the remapped token, but pin the
   spacing so it does not crowd the form */
.gp-add-card .muted { margin-bottom: 16px; }

/* ---- #7a7a70 fails AA on paper (4.22:1) and is invisible on dark ----------
   guests.css:533 (.gp-panel h3) and :423 (.gp-list__meta) both hardcode it.
   Light mode moves to #6E6E63 (5.02:1); night uses the remapped ink tokens. */
.gp-panel h3      { color: #6E6E63; }
.gp-list__meta    { color: #6E6E63; }
[data-theme="night"] .gp-panel h3   { color: var(--gc-text-3); }
[data-theme="night"] .gp-list__meta { color: var(--gc-text-3); }

/* ---- card number must stay on ONE line -----------------------------------
   guests.css:697 used flex-wrap:wrap with clamp(15px,4.6vw,19px) + 0.14em
   tracking, which overflows a 280px card (the grid's minmax floor) and wraps
   to two lines. Sized down and pinned to a single row; the groups spread to
   the card edges so it still reads like an embossed PAN. */
.gp-wallet-card__num {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0 0.4em;
  font-size: clamp(11.5px, 3.5vw, 15.5px);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.gp-wallet-card__num > span { white-space: nowrap; flex: none; }

/* ---- the cards area sat flush -------------------------------------------
   Measured: .gp-cards-grid had padding 0 on every side, so the wallet card's
   only left offset was .gp-shell's 18px gutter and it had just the lead's
   22px above it. Inset the grid so the cards are not welded to the copy above
   or the page edge. Right matches left so the block does not read lopsided;
   bottom stays 0 because the grid already carries margin-bottom: 22px. */
.gp-cards-grid {
  padding: 16px 16px 0;
}
@media (min-width: 640px) {
  .gp-cards-grid { padding: 20px 20px 0; }
}

/* ---- Staff preview banner ---- */
.gp-preview-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: #1F4D2E;
  color: #FCFCFA;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.gp-preview-bar .btn-light {
  background: rgba(255,255,255,.12);
  color: #FCFCFA;
  border-color: rgba(255,255,255,.2);
}
.gp-foot__help {
  color: #1F4D2E;
  font-weight: 700;
  text-decoration: none;
}
.gp-foot__help:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Guest chat (Airbnb-style host chat) ---- */
.gp-chat {
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 720px);
  margin: 0 auto;
  max-width: 720px;
}
.gp-chat__head { margin-bottom: 12px; }
.gp-chat__stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* --gp-stage-h is measured from the panel's real offset by guests.js so the
     composer lands on the fold instead of below it. */
  height: var(--gp-stage-h, auto);
  min-height: 360px;
  max-height: var(--gp-stage-h, calc(100vh - 190px));
  background: #FCFCFA;
  border: 1px solid rgba(20,20,15,.08);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(20,20,15,.05);
  overflow: hidden;
}
.gp-chat__msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(198,240,50,.08), transparent 55%),
    #FCFCFA;
}
.gp-chat__welcome {
  margin: auto;
  text-align: center;
  padding: 28px 16px;
  max-width: 320px;
}
.gp-chat__welcome-icon { font-size: 36px; margin-bottom: 8px; }
.gp-chat__welcome-title { font-size: 18px; font-weight: 720; letter-spacing: -.02em; }
.gp-chat__welcome-text { color: #6b6b60; font-size: 13.5px; line-height: 1.45; margin: 8px 0 0; }
.gp-chat__bubble {
  max-width: min(82%, 420px);
  padding: 10px 12px 11px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(20,20,15,.08);
  box-shadow: 0 2px 8px rgba(20,20,15,.04);
}
.gp-chat__bubble.is-mine {
  align-self: flex-end;
  background: #1F4D2E;
  color: #FCFCFA;
  border-color: transparent;
}
.gp-chat__bubble.is-theirs { align-self: flex-start; }
.gp-chat__bubble-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 650;
  opacity: .7;
  margin-bottom: 5px;
}
.gp-chat__bubble.is-mine .gp-chat__bubble-meta { color: rgba(252,252,250,.8); }
.gp-chat__bubble-body {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.gp-chat__compose {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(20,20,15,.07);
  background: #fff;
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.gp-chat__input {
  flex: 1;
  resize: none;
  height: 46px;
  min-height: 46px;
  max-height: 120px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  padding: 12px 14px;   /* centres the single line + placeholder */
  overflow-y: auto;
}
.gp-body--preview .gp-shell { padding-top: 0; }

/* ---- empty states were a WHITE panel in night mode -----------------------
   guests.css:492 hardcodes .gp-empty--hero { background:#FCFCFA }. The night
   layer remapped the text tokens but never this surface, so the heading went
   from readable dark-on-white to light-on-white: measured 1.16:1. Darkening
   the panel is the fix; the text tokens were already correct.
   .gp-alt-list button (guests.css:840, background:#fff) had no night rule
   either — currently unreferenced by any view, covered here pre-emptively. */
[data-theme="night"] .gp-empty--hero {
  background: var(--gc-paper);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="night"] .gp-empty h1 { color: var(--gc-text); }
[data-theme="night"] .gp-empty p  { color: var(--gc-text-3); }
[data-theme="night"] .gp-empty__code { color: #8FE0A8; opacity: 0.5; }
[data-theme="night"] .gp-alt-list button {
  background: var(--gc-paper-2);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--gc-text);
}
[data-theme="night"] .gp-alt-list button:hover {
  border-color: rgba(198, 240, 50, 0.4);
  background: #26332C;
}

.gp-chat__head > div { position: relative; }
.gp-chat__live {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(20,20,15,0.06);
  color: #7a7a70;
}
.gp-chat__live.is-on {
  background: rgba(31,77,46,0.12);
  color: #1F4D2E;
}