/* CPM Explorer 1.9.0: welcome screen. Shared by the front end and the builder preview.
   Colours come from the active mode's interface palette (info card colours), fonts from
   the Typography settings. */
.cpmx-welcome{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  font-family:var(--cpmx-font-body,inherit);color:var(--cpmx-card-text,#fff);opacity:1;transition:opacity .35s ease}
.cpmx-welcome.is-closing{opacity:0;pointer-events:none}
.cpmx-welcome *{box-sizing:border-box}
.cpmx-welcome-backdrop{position:absolute;inset:0;background:rgba(5,8,10,.55)}
.cpmx-welcome-panel{position:relative;width:min(560px,calc(100% - 40px));max-height:calc(100% - 40px);overflow:auto;
  background:var(--cpmx-card-bg,#0c0f12);border:1px solid var(--cpmx-ui-line,rgba(255,255,255,.14));border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);scrollbar-width:thin}
.cpmx-welcome-media{aspect-ratio:16/8;overflow:hidden;border-radius:15px 15px 0 0;background:rgba(127,127,127,.15)}
.cpmx-welcome-media img{width:100%;height:100%;object-fit:cover;display:block}
.cpmx-welcome-body{padding:24px 26px 22px}
.cpmx-welcome-logo{display:block;max-height:42px;max-width:180px;margin:0 0 14px;object-fit:contain}
.cpmx-welcome-kicker{color:var(--cpmx-card-accent,#ff6a00);font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;font-family:var(--cpmx-font-heading,inherit)}
.cpmx-welcome-title{margin:0;font-family:var(--cpmx-font-heading,inherit);font-weight:var(--cpmx-fw-heading,800);font-size:28px;line-height:1.1;color:inherit;letter-spacing:-.01em}
.cpmx-welcome-address{margin-top:6px;font-size:13px;color:var(--cpmx-ui-muted,rgba(255,255,255,.65))}
.cpmx-welcome-intro{margin-top:14px;font-size:14px;line-height:1.6;color:var(--cpmx-card-text,#fff);opacity:.9}
.cpmx-welcome-intro p{margin:0 0 .7em}
.cpmx-welcome-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;margin:16px 0 0;border-top:1px solid var(--cpmx-ui-line,rgba(255,255,255,.14))}
.cpmx-welcome-facts div{padding:10px 12px 10px 0;border-bottom:1px solid var(--cpmx-ui-line,rgba(255,255,255,.14))}
.cpmx-welcome-facts dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cpmx-ui-muted,rgba(255,255,255,.6))}
.cpmx-welcome-facts dd{margin:3px 0 0;font-size:16px;font-weight:800;color:var(--cpmx-card-accent,#ff6a00)}
.cpmx-welcome-travel{margin-top:16px}
.cpmx-welcome-sub{font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:4px;font-family:var(--cpmx-font-heading,inherit)}
.cpmx-welcome .cpmx-welcome-row{display:flex !important;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 0 !important;margin:0;background:transparent !important;border:0 !important;border-bottom:1px solid var(--cpmx-ui-line,rgba(255,255,255,.1)) !important;
  color:inherit !important;cursor:pointer;text-align:left;font:inherit;border-radius:0}
.cpmx-welcome .cpmx-welcome-row span{display:flex;align-items:baseline;gap:8px;min-width:0}
.cpmx-welcome .cpmx-welcome-row strong{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpmx-welcome .cpmx-welcome-row small{font-size:12px !important;color:var(--cpmx-ui-muted,rgba(255,255,255,.6));opacity:1 !important;display:inline !important}
.cpmx-welcome .cpmx-welcome-row>b{font-size:15px;font-weight:800;color:var(--cpmx-travel-time,var(--cpmx-card-accent,#ff6a00)) !important}
.cpmx-welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cpmx-welcome-primary,.cpmx-welcome-cta{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 20px;border-radius:10px;
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;border:1px solid transparent}
.cpmx-welcome-primary{background:var(--cpmx-btn-active-bg,var(--cpmx-accent,#ff6a00)) !important;color:var(--cpmx-btn-active-text,#fff) !important;flex:1 1 auto}
.cpmx-welcome-cta{background:transparent;color:var(--cpmx-card-text,#fff) !important;border-color:var(--cpmx-ui-line,rgba(255,255,255,.25))}
.cpmx-welcome-primary:focus-visible,.cpmx-welcome-cta:focus-visible,.cpmx-welcome-row:focus-visible{outline:2px solid var(--cpmx-card-accent,#ff6a00);outline-offset:2px}

/* Side panel layout */
.cpmx-welcome.is-side{justify-content:flex-start;align-items:stretch}
.cpmx-welcome.is-side .cpmx-welcome-backdrop{background:linear-gradient(90deg,rgba(5,8,10,.45),rgba(5,8,10,.1))}
.cpmx-welcome.is-side .cpmx-welcome-panel{width:min(440px,92%);max-height:none;height:100%;border-radius:0;border-width:0 1px 0 0}
.cpmx-welcome.is-side .cpmx-welcome-media{border-radius:0}

/* Full screen with the render as background */
.cpmx-welcome.is-full .cpmx-welcome-backdrop{background:var(--w-bg-layer,rgba(5,8,10,.7))}
.cpmx-welcome.is-full .cpmx-welcome-panel{width:100%;max-height:none;height:100%;border-radius:0;border:0;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.78) 85%),var(--w-bg,none) center/cover no-repeat,var(--cpmx-card-bg,#0c0f12);color:#fff}
.cpmx-welcome.is-full .cpmx-welcome-body{max-width:640px;padding:40px 44px}
.cpmx-welcome.is-full .cpmx-welcome-title{font-size:40px}
.cpmx-welcome.is-full .cpmx-welcome-intro,.cpmx-welcome.is-full .cpmx-welcome-row,.cpmx-welcome.is-full .cpmx-welcome-cta{color:#fff !important}
.cpmx-welcome.is-full .cpmx-welcome-address,.cpmx-welcome.is-full .cpmx-welcome-facts dt,.cpmx-welcome.is-full .cpmx-welcome-row small{color:rgba(255,255,255,.72) !important}

/* Phones (phone layout or a narrow builder preview): full-height scrollable sheet with a
   large dismiss button kept in view. */
.cpmx-explorer.cpmx-compact .cpmx-welcome .cpmx-welcome-panel,.cpmx-welcome.is-compact .cpmx-welcome-panel{
  width:100%;height:100%;max-height:none;border-radius:0;border:0;display:flex;flex-direction:column}
.cpmx-explorer.cpmx-compact .cpmx-welcome .cpmx-welcome-media,.cpmx-welcome.is-compact .cpmx-welcome-media{border-radius:0;flex:none;aspect-ratio:16/9}
.cpmx-explorer.cpmx-compact .cpmx-welcome .cpmx-welcome-body,.cpmx-welcome.is-compact .cpmx-welcome-body{padding:20px 18px 0;flex:1 0 auto;display:flex;flex-direction:column}
.cpmx-explorer.cpmx-compact .cpmx-welcome .cpmx-welcome-title{font-size:26px}
.cpmx-explorer.cpmx-compact .cpmx-welcome .cpmx-welcome-actions,.cpmx-welcome.is-compact .cpmx-welcome-actions{
  position:sticky;bottom:0;margin:auto -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--cpmx-card-bg,#0c0f12);border-top:1px solid var(--cpmx-ui-line,rgba(255,255,255,.12))}
.cpmx-explorer.cpmx-compact .cpmx-welcome-primary{min-height:52px;font-size:16px;width:100%}
.cpmx-explorer.cpmx-compact .cpmx-welcome.is-full .cpmx-welcome-panel{display:block;overflow:auto}
.cpmx-explorer.cpmx-compact .cpmx-welcome.is-full .cpmx-welcome-body{min-height:100%;padding-top:40vh;justify-content:flex-end}
.cpmx-explorer.cpmx-compact .cpmx-welcome.is-full .cpmx-welcome-actions{background:rgba(0,0,0,.85)}

/* "About this project" button that reopens it */
.cpmx-explorer .cpmx-about-btn{pointer-events:auto;appearance:none;flex:none;width:40px;height:40px;padding:0 !important;margin:0;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--cpmx-ui-line) !important;cursor:pointer;
  background-color:color-mix(in srgb,var(--cpmx-btn-bg) 95%,transparent) !important;color:var(--cpmx-btn-text) !important;box-shadow:0 8px 26px rgba(0,0,0,.18)}
.cpmx-explorer .cpmx-about-btn svg{width:18px;height:18px}
.cpmx-explorer.cpmx-compact .cpmx-about-btn{width:44px;height:44px}
/* Nothing animates behind an open welcome screen. */
.cpmx-explorer.is-welcome-open .cpmx-map *,.cpmx-explorer.is-welcome-open .cpmx-sm *{animation-play-state:paused !important}