/* GENERATED FILE - DO NOT EDIT.
   Source: shared/getting-started.css - run `npm run sync:shared` after editing. */

/* Getting started — shared/getting-started.js (web + app): the hub, the "Show me" pointer card,
   the sample-trip badge / banner. Same family as shared/onboarding.css: cream cards with their own
   colours (they read the same in light and dark mode), Playfair / DM Sans, green #1f3d30. */

.gs-hub {
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1rem 1.25rem;
  border-radius: 1.3rem;
  /* Its own paper, so the hub reads the same on a light or dark screen. */
  background: #fbf6ec;
  color: #1b2a23;
  font-family: "DM Sans", "Outfit", system-ui, sans-serif;
}
.gs-head { display: flex; align-items: center; gap: 0.75rem; }
.gs-face { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #f3ead6; }
.gs-head > div { min-width: 0; }
.gs-title {
  margin: 0;
  font-family: "Playfair Display", "Fraunces", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1f3d30;
  letter-spacing: 0;
  text-transform: none;
}
.gs-sub { margin: 0.15rem 0 0; font-size: 0.88rem; color: #5d6b63; }
.gs-bar { height: 6px; border-radius: 6px; background: #eadfca; overflow: hidden; }
.gs-bar span { display: block; height: 100%; border-radius: 6px; background: #1f3d30; }
.gs-done,
.gs-sample,
.gs-area {
  padding: 0.85rem 1rem;
  border: 1px solid #eadfca;
  border-radius: 1.1rem;
  background: #fffaf0;
}
.gs-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; background: #f1f5ef; border-color: #d5e1d3; }
.gs-done p { margin: 0; font-weight: 700; color: #1f3d30; }
.gs-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.gs-sample p { flex: 1 1 14rem; margin: 0; font-size: 0.9rem; line-height: 1.4; color: #44544a; }
.gs-sample p strong { display: block; color: #1f3d30; }
.gs-sample .lb-cf-btn,
.gs-done .lb-cf-btn { flex: 0 0 auto; width: auto; padding: 0 1.1rem; }
.gs-area h3 {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  font-family: "Playfair Display", "Fraunces", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: #1f3d30;
  letter-spacing: 0;
  text-transform: none;
}
.gs-area h3 small { margin-left: auto; font-family: "DM Sans", system-ui, sans-serif; font-size: 0.78rem; font-weight: 700; color: #8a5a2b; }
.gs-list { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.gs-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; border-top: 1px solid #f0e7d6; }
.gs-item:first-child { border-top: 0; }
.gs-check {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #c9b994;
  border-radius: 50%;
  color: #fbf6ec;
  font-size: 0.78rem;
  line-height: 1;
}
.gs-item.is-done .gs-check { border-color: #1f3d30; background: #1f3d30; }
.gs-copy { flex: 1; min-width: 0; }
.gs-copy strong { display: block; font-size: 0.95rem; color: #1f3d30; }
.gs-copy p { margin: 0.1rem 0 0; font-size: 0.84rem; line-height: 1.4; color: #5d6b63; }
.gs-item.is-done .gs-copy strong { color: #5d6b63; }
/* Show me = the primary (dark) button; "Got it" next to it = the outlined secondary (owner 2026-10-04).
   44px tall: a comfortable tap target on a phone. */
.gs-show {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid #1f3d30;
  border-radius: 999px;
  background: #1f3d30;
  color: #fbf6ec;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.gs-show:hover { background: #2b5141; }
/* Already done: Show me steps back (outlined), the next thing to try stands out. */
.gs-item.is-done .gs-show { border-color: #d8cfbd; background: #fff; color: #1f3d30; }
.gs-item.is-done .gs-show:hover { border-color: #1f3d30; }
/* Show me + "Got it" (real-trip items on the account hub — owner 2026-10-04). */
.gs-btns { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.4rem; }
.gs-got.onb-tip-close {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid #d8cfbd;
  background: #fff;
  color: #1f3d30;
  white-space: nowrap;
}
.gs-got.onb-tip-close:hover { border-color: #1f3d30; }
.gs-hub.is-complete { gap: 0.4rem; }
/* The account hub (owner 2026-10-04): one "Explore the demo trip" item, then the real-trip areas. */
.gs-area-demo { background: #f4f8f1; border-color: #d5e1d3; }
.gs-item-demo .gs-show { white-space: nowrap; }
.gs-real-intro { margin: 0.35rem 0.2rem 0; font-size: 0.88rem; line-height: 1.4; color: #5d6b63; }
.gs-real-intro strong { display: block; font-family: "Playfair Display", "Fraunces", Georgia, serif; font-size: 1.05rem; color: #1f3d30; }
.gs-foot { margin: 0; text-align: center; }
.gs-hide-link {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 0;
  background: transparent;
  color: #5d6b63;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.gs-show:focus-visible,
.gs-hide-link:focus-visible,
.gs-pointer .onb-tip-close:focus-visible,
.onb-ck-more:focus-visible,
.gs-sample-banner button:focus-visible { outline: 3px solid #e6c98e; outline-offset: 2px; }

/* "See everything you can do →" under the per-trip "Get your trip ready" card. */
.onb-ck-more {
  display: block;
  margin: 0.6rem 0 0 auto;
  min-height: 2.75rem;
  padding: 0 0.4rem;
  border: 0;
  background: transparent;
  color: #8a5a2b;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

/* ———— the "Show me" pointer: a LakBi card at the bottom, above the tab bar ———— */
.gs-pointer {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bot, env(safe-area-inset-bottom, 0px)) + var(--gs-pointer-bottom, 1.25rem));
  z-index: 12900;
  box-sizing: border-box;
  width: min(30rem, calc(100% - 32px));
  margin: 0;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px rgba(19, 37, 30, 0.22);
}
.gs-pointer p strong { display: block; color: #1f3d30; }
/* The app sets --gs-pointer-bottom on <html> so the card clears its tab bar. */

/* ———— sample trip: card badge, trip banner ———— */
.tc-sample,
.gs-sample-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #fff1d6;
  color: #8a5a2b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.gs-sample-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px dashed #d9b77a;
  border-radius: 0.9rem;
  background: #fff8ea;
  color: #44544a;
  font-family: "DM Sans", "Outfit", system-ui, sans-serif;
  font-size: 0.86rem;
  line-height: 1.4;
}
.gs-sample-banner p { flex: 1 1 14rem; min-width: 0; margin: 0; }
.gs-sample-banner strong { color: #8a5a2b; }
.gs-sample-banner button {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid #e3b4ae;
  border-radius: 999px;
  background: #fff;
  color: #b3261e;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.gs-publish-note { margin: 0.35rem 0 0; font-size: 0.82rem; font-weight: 700; color: #8a5a2b; }

/* The You row / account entry: a small dot until everything is done. */
.gs-dot {
  display: inline-block;
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: #d9534f;
  vertical-align: middle;
}

/* Phones: the buttons go under the words, side by side (two 44px rows stacked looked heavy). */
@media (max-width: 420px) {
  .gs-item { flex-wrap: wrap; align-items: flex-start; row-gap: 0.45rem; }
  .gs-item .gs-copy { flex: 1 1 calc(100% - 2.1rem); }
  .gs-item > .gs-show,
  .gs-btns { margin-left: 2rem; }
  .gs-btns { flex: 1 1 100%; justify-content: flex-start; }
}

/* Sample banner → the Getting started hub (green, not the red Delete style). */
.gs-sample-banner .gs-sample-hub {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid #1f3d30;
  border-radius: 999px;
  background: #1f3d30;
  color: #fbf6ec;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* ———— The demo trip (owner 2026-10-04, shared/demo-lakbi.js): a demo page, never a real trip ———— */

/* Banner: the 🧪 sat clipped at the sheet's left edge on the web — it now lives inside the sheet,
   boxed in, with room for the emoji. */
.gs-sample-banner {
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
}
.gs-sample-banner p strong { white-space: nowrap; }

/* "🧪 Demo answer" — a pill for a moment after each demo LakBi answer. */
.demo-pill {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bot, env(safe-area-inset-bottom, 0px)) + var(--gs-pointer-bottom, 1.25rem));
  z-index: 13000;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #1f3d30;
  color: #fbf6ec;
  font-family: "DM Sans", "Outfit", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(19, 37, 30, 0.25);
  pointer-events: none;
}
.demo-answer-tag {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #fff1d6;
  color: #8a5a2b;
  font-size: 0.72rem;
  font-weight: 800;
}

/* In place of a real-trip-only block. */
.demo-off-note {
  margin: 0.4rem 0 0.8rem;
  padding: 0.55rem 0.8rem;
  border: 1px dashed #d9b77a;
  border-radius: 0.8rem;
  background: #fff8ea;
  color: #44544a;
  font-size: 0.84rem;
  line-height: 1.4;
}
.demo-off-note strong { color: #8a5a2b; }

/* Real-trip-only controls on the demo (html.is-demo-trip, set by both hosts). Taps on anything still
   showing get the "Not on the demo" card (LakbayDemo GUARDS). */
html.is-demo-trip [data-export-pdf],
html.is-demo-trip [data-upload-booking],
html.is-demo-trip [data-hotel-upload],
html.is-demo-trip .settle-receipt-actions,
html.is-demo-trip .settle-receipt-empty,
html.is-demo-trip .exp-receipt-box .hotel-card-links,
html.is-demo-trip [data-pnd-photo-label],
html.is-demo-trip [data-pnd-photo-menu] {
  display: none !important;
}
html.is-demo-trip .settle-receipt::after,
html.is-demo-trip .exp-receipt-box::after {
  content: "🧪 Not on the demo — receipt photos work on your own trip.";
  display: block;
  margin-top: 0.35rem;
  color: #8a5a2b;
  font-size: 0.82rem;
  font-weight: 700;
}

/* The demo's own Getting started tab. */
.gs-start-panel { padding: 0.25rem 0 1.5rem; }
.gs-demo-note { border-style: dashed; }

/* "Demo complete! 🎉" (owner 2026-10-04): LakBi, a short burst of confetti (CSS only), then the
   demo is tidied away. Above the confirm sheets; its own cream paper in light and dark mode. */
.gs-celebrate {
  position: fixed;
  inset: 0;
  z-index: 13600;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(19, 37, 30, 0.55);
  animation: gs-cel-fade 0.25s ease-out both;
}
.gs-celebrate-card {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 24rem);
  padding: 1.5rem 1.25rem 1.25rem;
  overflow: hidden;
  border-radius: 1.4rem;
  background: #fbf6ec;
  color: #1b2a23;
  font-family: "DM Sans", "Outfit", system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 18px 48px rgba(19, 37, 30, 0.35);
  animation: gs-cel-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.gs-celebrate-lakbi {
  position: relative;
  z-index: 1;
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto 0.4rem;
  object-fit: contain;
  animation: gs-cel-hop 0.9s ease-out 0.2s 2 both;
}
.gs-celebrate-title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.4rem;
  font-family: "Playfair Display", "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1f3d30;
  letter-spacing: 0;
  text-transform: none;
}
.gs-celebrate-line { position: relative; z-index: 1; margin: 0 0 0.35rem; font-size: 0.98rem; line-height: 1.45; color: #2c3b33; }
.gs-celebrate-note { position: relative; z-index: 1; margin: 0 0 1rem; font-size: 0.84rem; color: #8a5a2b; font-weight: 700; }
.gs-celebrate-actions { position: relative; z-index: 1; display: grid; gap: 0.5rem; }
.gs-celebrate-actions .lb-cf-btn { width: 100%; }
.gs-celebrate.is-busy .gs-celebrate-actions { opacity: 0.6; }
.gs-confetti { position: absolute; inset: 0; pointer-events: none; }
.gs-confetti i {
  position: absolute;
  top: -12px;
  left: calc(4% + var(--i) * 6.8%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  transform: rotate(calc(var(--i) * 37deg));
  animation: gs-cel-fall 1.6s ease-in calc(var(--i) * 0.07s) 2 both;
}
.gs-confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
@keyframes gs-cel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-cel-pop { from { opacity: 0; transform: scale(0.85) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes gs-cel-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-10px) rotate(-4deg); } 70% { transform: translateY(0) rotate(3deg); } }
@keyframes gs-cel-fall {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(420px) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gs-celebrate,
  .gs-celebrate-card,
  .gs-celebrate-lakbi { animation: none; }
  .gs-confetti { display: none; }
}

/* App You row: the dot comes last, so app.css's ".set-nav-row span:last-child" (title over subtitle)
   misses the copy — stack it here like the Atlas row (owner 2026-10-04 screenshot). */
.gs-you-row > span:not(.set-panel-ico):not(.gs-dot) {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}
.gs-you-row > .gs-dot {
  align-self: center;
}

/* Small phones and a phone on its side (UI hunt 2026-10-12: the banner pushed the sheet title to y≈420 at 360×640):
   one line of words ("🧪 Demo trip: play with anything here."), the two buttons slimmer beside / under it. */
@media (max-width: 420px), (max-height: 500px) {
  .gs-sample-banner { gap: 0.4rem 0.5rem; margin-bottom: 0.6rem; padding: 0.45rem 0.6rem; font-size: 0.8rem; }
  .gs-sample-banner .gs-sample-more { display: none; }
  .gs-sample-banner p { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gs-sample-banner button,
  .gs-sample-banner .gs-sample-hub { min-height: 2.5rem; padding: 0 0.75rem; font-size: 0.78rem; }
}
@media (max-height: 500px) and (min-width: 560px) {
  .gs-sample-banner { flex-wrap: nowrap; }
  .gs-sample-banner p { flex: 1 1 auto; }
}