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

/* Demo tour videos (shared/tour-player.js, owner 2026-10-12): the demo checklist's card + ▶ Watch, and the player.
   App + website, every size: full screen on a phone, a phone-shaped window on a wide screen. */
.tvp-card,
.tvp-back {
  --tvp-forest: #12673d;
  --tvp-deep: #1f3d30;
  --tvp-night: #13251e;
  --tvp-gold: #f9ce7a;
  --tvp-amber: #f7bb50;
  --tvp-card: #fffdf8;
  --tvp-ground: #fbf6ec;
  --tvp-ink: #1b2a23;
  --tvp-muted: #5d6b63;
  --tvp-line: #e3d8c2;
}
.tvp-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0.25rem 0 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: 16px;
  background: var(--tvp-deep);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tvp-card:hover { background: var(--tvp-night); }
.tvp-card-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--tvp-gold);
  color: var(--tvp-night);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.tvp-card-copy { min-width: 0; }
.tvp-card-copy b { display: block; font-size: 0.98rem; }
.tvp-card-copy small { display: block; margin-top: 0.15rem; color: #cfe0d4; font-size: 0.8rem; line-height: 1.35; }
.tvp-watch {
  margin-left: auto;
  flex: none;
  min-height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid #c9bfa8;
  border-radius: 999px;
  background: transparent;
  color: #1b2a23;
  font: 700 0.75rem/1 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}
.tvp-card:focus-visible,
.tvp-watch:focus-visible,
.tvp-back button:focus-visible { outline: 3px solid var(--tvp-amber, #f7bb50); outline-offset: 2px; }

html.tvp-open,
html.tvp-open body { overflow: hidden; }
.tvp-back {
  position: fixed;
  inset: 0;
  z-index: 2147482600;
  display: grid;
  place-items: center;
  background: rgba(12, 24, 19, 0.72);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: tvpIn 0.2s ease-out both;
}
.tvp {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--tvp-night);
}
/* Wide (a computer, a tablet across): one window, the video on the left, the tours on the right (the mock).
   Phones and short screens (a phone in landscape) keep the full-screen player. */
.tvp-side { display: none; }
@media (min-width: 60rem) and (min-height: 38rem) {
  .tvp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(64rem, 94vw);
    height: min(44rem, 92vh);
    border-radius: 24px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  }
  .tvp-top { grid-column: 1 / -1; }
  .tvp-stage { grid-column: 1; grid-row: 2; }
  .tvp-bot { grid-column: 1; grid-row: 3; }
  .tvp-side {
    grid-column: 2;
    grid-row: 2 / 4;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 0.9rem;
    border-left: 1px solid var(--tvp-line);
    background: var(--tvp-card);
    color: var(--tvp-ink);
  }
  .tvp-side h3 { margin: 0 0 0.25rem; font: 600 1.15rem/1.2 "Playfair Display", Georgia, serif; }
  .tvp-side ol { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
  .tvp-side-item {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--tvp-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .tvp-side-item:hover { background: var(--tvp-ground); }
  .tvp-side-item.is-on { background: var(--tvp-ground); border-color: var(--tvp-line); }
  .tvp-side-n { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #ebe3d1; font-size: 0.72rem; font-weight: 800; }
  .tvp-side-item.is-on .tvp-side-n { background: var(--tvp-forest); color: #fff; }
  .tvp-side-copy { min-width: 0; }
  .tvp-side-copy b { display: block; font-size: 0.9rem; }
  .tvp-side-copy small { display: block; margin-top: 0.1rem; color: var(--tvp-muted); font-size: 0.74rem; line-height: 1.3; }
  .tvp-side-t { color: var(--tvp-muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
  .tvp.is-ended .tvp-bot { display: none; }
}
/* A tablet-sized window between a phone and a computer: the phone-shaped window. */
@media (min-width: 48rem) and (max-width: 59.99rem) and (min-height: 38rem) {
  .tvp { width: min(27rem, 92vw); height: min(54rem, 94vh); border-radius: 24px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6); }
}
.tvp-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 0.8rem 0.6rem;
  background: var(--tvp-card);
  color: var(--tvp-ink);
}
.tvp-top img { flex: none; border-radius: 50%; background: var(--tvp-deep); }
.tvp-head { flex: 1; min-width: 0; }
.tvp-head small { display: block; color: var(--tvp-forest); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.tvp-head b { display: block; font-size: 1rem; }
.tvp-x {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--tvp-line);
  border-radius: 50%;
  background: var(--tvp-ground);
  color: var(--tvp-ink);
  font: 700 1.25rem/1 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}
.tvp-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0c1913; }
/* Out of the flow: the video fits the room between the bars, never pushes the bottom bar off screen. */
.tvp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0c1913; cursor: pointer; }
.tvp-msg {
  position: absolute;
  inset: auto 1rem 1rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: var(--tvp-card);
  color: var(--tvp-ink);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}
.tvp-bot { display: grid; gap: 0.6rem; padding: 0.7rem 0.8rem calc(0.8rem + var(--safe-bot, env(safe-area-inset-bottom, 0px))); background: var(--tvp-card); }
.tvp-prog { height: 4px; border-radius: 9px; background: #ebe3d1; overflow: hidden; }
.tvp-prog span { display: block; width: 0; height: 100%; background: var(--tvp-forest); transition: width 0.25s linear; }
.tvp-actions { display: flex; gap: 0.6rem; }
.tvp-btn {
  flex: 1;
  min-height: 2.75rem;
  border: 1.5px solid #c9bfa8;
  border-radius: 999px;
  background: transparent;
  color: var(--tvp-ink);
  font: 700 0.9rem "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}
.tvp-btn.is-solid { border-color: var(--tvp-deep); background: var(--tvp-deep); color: #fff; }
.tvp-end {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--tvp-ground);
  color: var(--tvp-ink);
  text-align: center;
}
.tvp-end[hidden] { display: none; }
.tvp-end img { border-radius: 50%; background: var(--tvp-deep); }
.tvp-end h3 { margin: 0; font: 600 1.6rem/1.2 "Playfair Display", Georgia, serif; }
.tvp-end p { margin: 0; max-width: 19rem; color: var(--tvp-muted); font-size: 0.92rem; line-height: 1.45; }
.tvp-end .tvp-btn { flex: none; width: 100%; max-width: 16rem; }
.tvp-next {
  width: 100%;
  max-width: 16rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--tvp-line);
  border-radius: 14px;
  background: var(--tvp-card);
  color: var(--tvp-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tvp-next small { display: block; color: var(--tvp-muted); font-size: 0.75rem; }
.tvp-next b { font-size: 0.95rem; }
@keyframes tvpIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tvp-back { animation: none; }
  .tvp-prog span { transition: none; }
}

/* In a demo checklist area heading: the count stays on the right, ▶ Watch just after it. */
.gs-area h3 .tvp-watch { margin-left: 0.6rem; }

/* The end card sits in the video's place, under the header (✕ stays tappable), and scrolls on short screens. */
.tvp-stage .tvp-end { overflow-y: auto; align-content: safe center; z-index: 1; }
.tvp.is-ended .tvp-bot { display: none; }
@media (max-height: 30rem) {
  .tvp-end { gap: 0.45rem; padding: 0.8rem 1rem; }
  .tvp-end img { width: 48px; height: 48px; }
  .tvp-end h3 { font-size: 1.25rem; }
}