/* =========================================================================
   Guest reservation-link — "Direction C" (Live status).
   Ported from the design handoff (src/guest.css). Built on the SuiteAmerica
   design system; tokens (--sa-*, --font-*, --dur-*, --ease) + Cabinet Grotesk
   + Bootstrap Icons are already global. Everything scoped under `.gl`.
   Slate accent (#3d6b9e). Mobile-first; reflows to a desktop dashboard >=900px.
   ========================================================================= */

.gl, .gl * { box-sizing: border-box; }
.gl {
  --gl-accent: #3d6b9e;            /* slate */
  --gl-accent-tint: #e3ecf5;
  font-family: var(--font-body);
  color: var(--sa-ink);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--sa-paper);
  min-height: 100vh;
}
.gl h1, .gl h2, .gl h3, .gl h4 { font-family: var(--font-display); margin: 0; line-height: 1.12; text-wrap: balance; }
.gl p { margin: 0; }
.gl button { font-family: inherit; }
.gl a { color: inherit; }
.gl .mono { font-family: var(--font-mono); }

/* ---------------- Mobile screen (fluid; was a fixed 390px canvas) -------- */
.gl-screen { width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh;
  background: var(--sa-white); display: flex; flex-direction: column; position: relative; }
.gl-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 30px; }

/* Eyebrow / micro caps */
.gl-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sa-graphite); }
.gl-muted { color: var(--sa-graphite); }
.gl-num { font-variant-numeric: tabular-nums; }

/* ---------------- Top bar (mobile C) ---------------- */
.gl-topC { display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: var(--sa-white);
  border-bottom: 1px solid var(--sa-mist); flex-shrink: 0; position: sticky; top: 0; z-index: 20; }
.gl-topC .gl-icon { height: 26px; }
.gl-topC .gl-resv { line-height: 1.2; }
.gl-topC .gl-resv .gl-eyebrow { font-size: 9px; letter-spacing: 0.1em; }
.gl-topC .gl-resv b { font-size: 14px; font-weight: 800; }
.gl-topC .gl-help { margin-left: auto; width: 38px; height: 38px; border: 2px solid var(--sa-black);
  background: var(--sa-white); color: var(--sa-ink); font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---------------- Progress · segmented fill bar (mobile) ---------------- */
.gl-trackC { padding: 14px 16px 12px; background: var(--sa-white); border-bottom: 1px solid var(--sa-mist); }
.gl-trackC .gl-track-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.gl-trackC .gl-track-now { font-size: 14px; font-weight: 800; white-space: nowrap; }
.gl-trackC .gl-track-of { font-size: 11px; font-weight: 700; color: var(--sa-graphite); letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; }
.gl-trackC .gl-segs { display: flex; gap: 4px; }
.gl-trackC .gl-seg { flex: 1; height: 5px; background: var(--sa-fence); border-radius: 999px; }
.gl-trackC .gl-seg--on { background: var(--gl-accent); }

/* ---------------- Tiles ---------------- */
.gl-tile { background: var(--sa-white); border: 1px solid var(--sa-mist); padding: 15px; }
.gl-tile--accent { border: 0; background: var(--sa-black); color: var(--sa-white); }
.gl-tile--accent .gl-eyebrow { color: rgba(255,255,255,0.7); }
.gl-tilehead { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sa-graphite); margin-bottom: 12px; white-space: nowrap; }
.gl-tilehead i { font-size: 14px; color: var(--sa-ink); }
.gl-tilehead .r { margin-left: auto; font-size: 11px; color: var(--sa-link); letter-spacing: 0; text-transform: none; font-weight: 700; cursor: pointer; }
.gl-tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-mist); border: 1px solid var(--sa-mist); }
.gl-tilegrid > div { background: var(--sa-white); padding: 12px 13px; }
.gl-tilegrid .k { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-graphite); margin-bottom: 3px; white-space: nowrap; }
.gl-tilegrid .v { font-size: 14px; font-weight: 700; white-space: nowrap; }
.gl-tilegrid--3 { grid-template-columns: repeat(3, 1fr); }

/* detail row */
.gl-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--sa-mist); }
.gl-row:first-child { border-top: 0; }
.gl-row__ic { width: 38px; height: 38px; border: 2px solid var(--sa-black); border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.gl-row__t { flex: 1; min-width: 0; }
.gl-row__t .k { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-graphite); white-space: nowrap; }
.gl-row__t .v { font-size: 14.5px; font-weight: 700; }
.gl-row__t .v.mono { font-weight: 600; letter-spacing: 0.04em; }

/* chips / amenity pills */
.gl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gl-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  background: var(--sa-paper); color: var(--sa-ink); padding: 6px 12px; border-radius: 999px; }
.gl-chip--line { background: transparent; border: 1.5px solid var(--sa-fence); }
.gl-chip i { font-size: 11px; }

/* photo (real img or striped placeholder) */
.gl-photo { aspect-ratio: 16/10; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-linear-gradient(135deg, #ececec, #ececec 11px, #e3e3e3 11px, #e3e3e3 22px);
  color: var(--sa-graphite); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.gl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* coordinator card */
.gl-coord { display: flex; align-items: center; gap: 12px; }
.gl-coord__av { width: 46px; height: 46px; border-radius: 50%; background: var(--sa-black); color: var(--sa-white);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.gl-coord__t { flex: 1; min-width: 0; }
.gl-coord__t .r { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-graphite); }
.gl-coord__t .n { font-size: 15px; font-weight: 800; }
.gl-coord__t .e { font-size: 12px; color: var(--sa-link); word-break: break-all; }

/* banners / notes */
.gl-banner { display: flex; gap: 11px; padding: 14px 15px; font-size: 13px; line-height: 1.4; font-weight: 500; }
.gl-banner i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gl-banner b { font-weight: 800; display: block; margin-bottom: 2px; font-size: 13.5px; }
.gl-banner--info { background: var(--sa-link-tint); color: var(--sa-ink); }
.gl-banner--info i { color: var(--sa-link); }
.gl-banner--ok { background: var(--sa-success-tint); color: var(--sa-ink); }
.gl-banner--ok i { color: var(--sa-success); }
.gl-banner--warn { background: var(--sa-warn-tint); color: var(--sa-ink); }
.gl-banner--warn i { color: var(--sa-warn); }
.gl-banner--error { background: var(--sa-error-tint); color: var(--sa-ink); }
.gl-banner--error i { color: var(--sa-error); }

/* buttons */
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.1; padding: 13px 18px;
  border: 2px solid var(--sa-black); background: var(--sa-white); color: var(--sa-ink); border-radius: 0;
  transition: all var(--dur-base) var(--ease); text-decoration: none; white-space: nowrap; width: 100%; }
.gl-btn:hover { background: var(--sa-ink); color: var(--sa-white); }
.gl-btn--black { background: var(--sa-black); color: var(--sa-white); }
.gl-btn--black:hover { background: var(--sa-white); color: var(--sa-ink); }
/* Primary action buttons are black (brand primary); slate stays a status accent
   for the progress bar / "Best match" ribbon / countdown. */
.gl-btn--accent { background: var(--sa-black); border-color: var(--sa-black); color: var(--sa-white); }
.gl-btn--accent:hover { background: var(--sa-white); color: var(--sa-ink); }
.gl-btn--sm { padding: 9px 14px; font-size: 12.5px; width: auto; }
.gl-btn--ghost { border-color: var(--sa-fence); }
.gl-btn:disabled { opacity: 0.5; cursor: default; }
.gl-btnrow { display: flex; gap: 9px; }
.gl-btnrow .gl-btn { width: auto; flex: 1; }

/* sticky bottom action bar (mobile) */
.gl-bottombar { position: sticky; bottom: 0; margin-top: auto; padding: 13px 16px 16px; background: var(--sa-white);
  border-top: 1px solid var(--sa-mist); display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.gl-bottombar .gl-bb-hint { font-size: 11px; font-weight: 600; color: var(--sa-graphite); text-align: center; }

/* countdown pill */
.gl-count { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--gl-accent-tint); color: var(--sa-ink); font-weight: 700; font-size: 12.5px; }
.gl-count b { font-size: 16px; font-weight: 800; }

/* price line (options) */
.gl-price { display: flex; align-items: baseline; gap: 3px; }
.gl-price b { font-size: 21px; font-weight: 800; }
.gl-price span { font-size: 11.5px; color: var(--sa-graphite); font-weight: 700; }

/* rating stars */
.gl-stars { display: flex; gap: 6px; font-size: 26px; color: var(--gl-accent); justify-content: center; }
.gl-stars i { cursor: pointer; }

/* "best match" ribbon */
.gl-best { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; background: var(--gl-accent); color: var(--sa-white); padding: 4px 9px; }

/* loading / empty */
.gl-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 80px 24px; color: var(--sa-graphite); text-align: center; }
.gl-loading i { font-size: 32px; }
@keyframes gl-spin { to { transform: rotate(360deg); } }
.gl-spin { display: inline-block; animation: gl-spin 0.9s linear infinite; }

/* =========================================================================
   DESKTOP (>=900px) — full-width bar + black status header card + dashboard
   (main tile column + sticky rail with the action card).
   ========================================================================= */
.gl-deskpage { background: var(--sa-paper); min-height: 100vh; }
.gl-topD { display: flex; align-items: center; justify-content: space-between; padding: 17px 44px; background: var(--sa-white); border-bottom: 2px solid var(--sa-black); position: sticky; top: 0; z-index: 20; }
.gl-topD .gl-logo { height: 23px; }
.gl-topD .gl-order { font-size: 11.5px; font-weight: 700; color: var(--sa-graphite); text-align: right; line-height: 1.3; display: flex; align-items: center; gap: 16px; }
.gl-topD .gl-order b { color: var(--sa-ink); font-size: 14px; font-weight: 800; margin-left: 7px; }
.gl-topD .gl-help { width: 40px; height: 40px; border: 2px solid var(--sa-black); background: var(--sa-white); color: var(--sa-ink); font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* status header card (aligned to the content width below) */
.gl-chead { max-width: 1120px; margin: 22px auto 0; padding: 0 44px; }
.gl-chead-card { background: var(--sa-black); color: var(--sa-white); padding: 22px 28px; display: flex; align-items: center; gap: 28px; }
.gl-chead-status { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.gl-chead-status > div { flex: 1; min-width: 0; }
.gl-chead-ic { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gl-accent); background: transparent; color: var(--sa-white);
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.gl-chead-status .gl-eyebrow { color: rgba(255,255,255,0.6); }
.gl-chead-status h2 { font-size: 29px; font-weight: 800; margin: 3px 0 2px; letter-spacing: -0.01em; white-space: nowrap; color: var(--sa-white); }
.gl-chead-status .sub { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.72); white-space: nowrap; }
.gl-chead-prog { width: 290px; flex-shrink: 0; }
.gl-chead-prog .gl-track-of { display: block; text-align: right; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; margin-bottom: 9px; }
.gl-chead-prog .gl-segs { display: flex; gap: 4px; }
.gl-chead-prog .gl-seg { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.25); }
.gl-chead-prog .gl-seg--on { background: var(--sa-white); }

/* dashboard */
.gl-cdash { max-width: 1120px; margin: 0 auto; padding: 22px 44px 52px; display: grid; grid-template-columns: 1fr 384px; gap: 26px; align-items: start; }
.gl-cmain { display: flex; flex-direction: column; gap: 14px; }
.gl-crail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; }
.gl-railcta { background: var(--sa-white); border: 1px solid var(--sa-mist); padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.gl-railcta .gl-bb-hint { font-size: 11.5px; font-weight: 600; color: var(--sa-graphite); text-align: center; }

/* options grid on desktop */
.gl-optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 560px) {
  .gl-cdash { grid-template-columns: 1fr; }
  .gl-optgrid { grid-template-columns: 1fr; }
}

/* ---------------- Layout toggle: one DOM, two chromes ----------------
   Mobile-first: the desktop dashboard is hidden until >=900px, where the
   mobile screen is hidden in turn. (Declared last so the single-class rules
   win the cascade over .gl-screen's display:flex.) */
.gl-desktop { display: none; }
@media (min-width: 900px) {
  .gl-mobile { display: none !important; }
  .gl-desktop { display: block; }
}

/* the mobile options grid is single-column (one card per row) */
.gl-mobile .gl-optgrid { grid-template-columns: 1fr; }