/* The public demo's own layer (docs/DEMO-MODE.md): the bar across the top, the "not saved" note, the guided tour
   and the phone frame. Everything is prefixed tlgd- so it never touches the apps' own styles. */
:root {
  --tlgd-ink: #0f2536;
  --tlgd-navy: #102f46;
  --tlgd-navy-2: #16415f;
  --tlgd-line: rgba(255, 255, 255, .16);
  --tlgd-paper: #ffffff;
  --tlgd-muted: #5b6d7a;
  --tlgd-bulb: #f2b441;
  --tlgd-shadow: 0 18px 50px rgba(9, 25, 38, .28), 0 2px 8px rgba(9, 25, 38, .16);
  --tlgd-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* It scrolls away with the page, so it never covers a page's own sticky header (the crew app pins it; see below). */
.tlgd-bar {
  position: relative; z-index: 2147483000;
  display: flex; align-items: center; gap: 14px;
  min-height: 40px; padding: 0 12px; padding-top: env(safe-area-inset-top, 0px);
  background: var(--tlgd-navy); color: #f4f8fa;
  font: 500 12.5px/1.2 var(--tlgd-font); letter-spacing: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  -webkit-font-smoothing: antialiased;
}
.tlgd-bar a { color: inherit; text-decoration: none; }
.tlgd-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.tlgd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tlgd-bulb); box-shadow: 0 0 8px var(--tlgd-bulb); }
.tlgd-sub { font-weight: 500; opacity: .72; }
.tlgd-links { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.tlgd-links::-webkit-scrollbar { display: none; }
.tlgd-links a { padding: 7px 9px; border-radius: 7px; opacity: .8; white-space: nowrap; }
.tlgd-links a:hover, .tlgd-links a:focus-visible { opacity: 1; background: rgba(255, 255, 255, .08); }
.tlgd-links a[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, .14); }
.tlgd-tour-btn {
  flex: none; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer;
  background: var(--tlgd-bulb); color: #1d1405; font: 700 12px/1 var(--tlgd-font);
}
.tlgd-tour-btn:focus-visible, .tlgd-links a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tlgd-short { display: none; }
@media (max-width: 720px) {
  .tlgd-sub { display: none; }
  .tlgd-bar { gap: 8px; padding: 0 8px; padding-top: env(safe-area-inset-top, 0px); }
  .tlgd-links a { padding: 7px 7px; font-size: 13px; }
  .tlgd-long { display: none; }
  .tlgd-short { display: inline; }
}
/* The crew app lays itself out from the top of the screen (its --sat inset): the bar is pinned there and the app moves
   down by the bar's height, so its own top bar sits right under it. */
html.tlgd-in-crew:not(.tlgd-framed) { --sat: calc(env(safe-area-inset-top, 0px) + 40px); }
html.tlgd-in-crew:not(.tlgd-framed) .tlgd-bar { position: fixed; left: 0; right: 0; top: 0; }
/* Inside the phone frame the page is the phone's screen: no bar, no tour (the frame page has them). */
html.tlgd-framed .tlgd-bar, html.tlgd-framed .tlgd-tour { display: none !important; }
/* Website chat isn't part of the demo. */
html.tlgd-site .tlgc-bubble, html.tlgd-site .tlgc-panel { display: none !important; }

/* The "not saved" note. */
.tlgd-note {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 2147483600;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 440px);
  padding: 11px 16px; border-radius: 12px;
  background: #0f2536; color: #fff; box-shadow: var(--tlgd-shadow);
  font: 500 13.5px/1.35 var(--tlgd-font);
  transition: opacity .18s ease, transform .18s ease;
}
.tlgd-note.is-on { opacity: 1; transform: translate(-50%, 0); }
.tlgd-note b { color: var(--tlgd-bulb); font-weight: 700; white-space: nowrap; }

/* The guided tour. */
.tlgd-tour {
  position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2147483500;
  width: min(360px, calc(100vw - 36px));
  background: var(--tlgd-paper); color: var(--tlgd-ink);
  border-radius: 16px; box-shadow: var(--tlgd-shadow);
  font: 400 14px/1.5 var(--tlgd-font);
  overflow: hidden;
}
.tlgd-tour[hidden] { display: none; }
.tlgd-tour-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.tlgd-step { font: 700 11px/1 var(--tlgd-font); letter-spacing: .08em; text-transform: uppercase; color: var(--tlgd-muted); }
.tlgd-progress { display: flex; gap: 4px; margin-left: auto; }
.tlgd-progress i { width: 7px; height: 7px; border-radius: 50%; background: #d6dee3; }
.tlgd-progress i.on { background: var(--tlgd-bulb); box-shadow: 0 0 6px rgba(242, 180, 65, .7); }
.tlgd-x { border: 0; background: none; color: var(--tlgd-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; margin-right: -4px; }
.tlgd-tour h2 { margin: 6px 14px 4px; font: 700 18px/1.25 var(--tlgd-font); letter-spacing: -.01em; }
.tlgd-tour p { margin: 0 14px; color: #33454f; }
.tlgd-choices { display: grid; gap: 6px; margin: 10px 14px 0; }
.tlgd-choices a { display: block; padding: 9px 11px; border: 1px solid #dfe6ea; border-radius: 10px; color: var(--tlgd-ink); text-decoration: none; font-weight: 600; }
.tlgd-choices a span { display: block; font-weight: 400; font-size: 12.5px; color: var(--tlgd-muted); }
.tlgd-choices a:hover, .tlgd-choices a:focus-visible { border-color: var(--tlgd-navy-2); }
.tlgd-actions { display: flex; align-items: center; gap: 8px; padding: 12px 14px 14px; }
.tlgd-actions .tlgd-back { border: 0; background: none; color: var(--tlgd-muted); font: 600 13px/1 var(--tlgd-font); cursor: pointer; padding: 8px 4px; }
.tlgd-actions .tlgd-next {
  margin-left: auto; border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; text-decoration: none;
  background: var(--tlgd-navy); color: #fff; font: 700 13.5px/1 var(--tlgd-font);
}
.tlgd-tour .tlgd-go { display: inline-block; margin: 10px 14px 0; font-weight: 700; color: var(--tlgd-navy-2); }
/* Folded: a slim bar with the step, its title and Next, out of the page's way. */
.tlgd-tour.is-small { width: min(420px, calc(100vw - 36px)); cursor: pointer; }
.tlgd-tour.is-small p, .tlgd-tour.is-small .tlgd-choices, .tlgd-tour.is-small .tlgd-go, .tlgd-tour.is-small .tlgd-progress, .tlgd-tour.is-small .tlgd-back { display: none; }
.tlgd-tour.is-small .tlgd-tour-top { padding: 8px 10px 0 14px; }
.tlgd-tour.is-small h2 { font-size: 14.5px; margin: 2px 14px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlgd-tour.is-small .tlgd-actions { padding: 6px 10px 10px 14px; }
.tlgd-tour.is-small .tlgd-next { padding: 8px 12px; font-size: 12.5px; }
@media (max-width: 720px) {
  /* On a phone the card sits under the demo bar, out of the way of the apps' bottom bars. */
  .tlgd-tour { left: 8px; right: 8px; width: auto; bottom: auto; top: calc(48px + env(safe-area-inset-top, 0px)); border-radius: 14px; }
  .tlgd-tour h2 { font-size: 16px; }
  .tlgd-tour p { font-size: 13.5px; }
}

/* The phone frame (a computer showing the Customer Portal or the Crew app). */
.tlgd-phone-page {
  min-height: calc(100vh - 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 32px; padding: 24px 28px;
  background: radial-gradient(1200px 600px at 50% 0%, #1b3c55 0%, #0c1e2c 60%, #08141d 100%);
  color: #e9f0f4; font: 400 15px/1.55 var(--tlgd-font);
}
.tlgd-phone-side { max-width: 320px; justify-self: end; }
.tlgd-phone-side.right { justify-self: start; }
.tlgd-phone-side h1 { margin: 0 0 8px; font: 700 26px/1.15 var(--tlgd-font); letter-spacing: -.02em; color: #fff; }
.tlgd-phone-side p { margin: 0 0 12px; color: #b9c8d1; }
.tlgd-phone-side a { color: var(--tlgd-bulb); font-weight: 700; text-decoration: none; }
.tlgd-phone-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #cfdbe2; font-size: 14px; }
.tlgd-phone-side li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--tlgd-bulb); vertical-align: 1px; }
.tlgd-device {
  position: relative; width: 402px; height: min(868px, calc(100vh - 88px)); aspect-ratio: 402 / 868;
  padding: 12px; border-radius: 58px; background: #05090d;
  box-shadow: 0 0 0 2px #2a3640, 0 40px 90px rgba(0, 0, 0, .55), inset 0 0 0 1px #151c22;
}
.tlgd-device::before {
  content: ""; position: absolute; top: 22px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%);
  border-radius: 20px; background: #05090d; z-index: 2; pointer-events: none;
}
.tlgd-device iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 46px; background: #fff; }
@media (max-width: 1100px) { .tlgd-phone-page { grid-template-columns: auto; justify-content: center; } .tlgd-phone-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .tlgd-note { transition: none; } }

/* The AI designer's sample homes (designer.js, demo only). */
.upload-actions.tlgd-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.upload-actions.tlgd-samples .tlgd-sample {
  display: grid; grid-template-rows: auto auto; gap: 8px; padding: 8px; text-align: left; cursor: pointer;
  border-radius: 14px; font: inherit; color: inherit;
}
.upload-actions.tlgd-samples .tlgd-sample img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; }
.upload-actions.tlgd-samples .tlgd-sample span { display: grid; gap: 2px; padding: 0 4px 4px; }
@media (max-width: 640px) { .upload-actions.tlgd-samples { grid-template-columns: 1fr; } }
/* The website's forms need no verification in the demo (form.js). */
html.tlgd-site [data-turnstile-action] { display: none !important; }