/* The 444CRM tour video: lightbox (shared/_tour_dialog), the home page How it works embed, the Dashboard
   "Take the tour" card and the top bar Help (?) menu. Loaded by the app (Propshaft :app) and by the home page. */

.tour-video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; background:#0b1626; border-radius:8px; }
.tour-frame { line-height:0; }
.tour-frame p { line-height:1.4; }

/* Lightbox */
.tour-dialog { width:min(1100px, calc(100vw - 2rem)); max-width:none; max-height:calc(100dvh - 2rem); padding:0; border:0; border-radius:12px;
  background:#0b1626; color:#fff; box-shadow:0 20px 60px rgba(0,0,0,.45); overflow:auto; }
.tour-dialog::backdrop { background:rgba(8,15,28,.78); }
.tour-dialog-box { padding:.6rem .9rem 1rem; }
.tour-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem; }
.tour-dialog-head h2 { margin:0; font-size:1.05rem; font-weight:600; color:#fff; }
.tour-dialog .tour-len { color:#9fb3c8; font-weight:400; }
.tour-dialog .tour-video { max-height:calc(100dvh - 7rem); border-radius:6px; }
.tour-close { flex:none; width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:transparent; color:#fff;
  font-size:1.6rem; line-height:1; cursor:pointer; }
.tour-close:hover { background:rgba(255,255,255,.12); }
.tour-close:focus-visible { outline:3px solid #8ab4f8; outline-offset:2px; }
html.tour-open { overflow:hidden; }
@media (max-width:600px) {
  .tour-dialog { width:100vw; max-height:100dvh; border-radius:0; }
  .tour-dialog-box { padding:.5rem .5rem .75rem; }
  .tour-dialog .tour-video { border-radius:0; }
}

/* Home page */
.mk .mk-btn-tour .tour-play { font-size:.85em; margin-right:.15rem; }
.mk-how-grid { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:2rem; align-items:start; margin-top:1.5rem; }
.mk-how-video .tour-video { box-shadow:0 10px 30px rgba(29,53,87,.18); }
.mk-steps { list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:1.1rem; }
.mk-steps li { counter-increment:step; position:relative; padding-left:2.6rem; }
.mk-steps li::before { content:counter(step); position:absolute; left:0; top:.1rem; width:1.8rem; height:1.8rem; border-radius:999px; background:#1d3557; color:#fff;
  font-weight:700; display:flex; align-items:center; justify-content:center; }
.mk-steps h3 { margin:0 0 .25rem; font-size:1.05rem; color:#1d3557; }
.mk-steps p { margin:0; }
@media (max-width:820px) { .mk-how-grid { grid-template-columns:1fr; gap:1.5rem; } }

/* Dashboard "Take the tour" card */
.tour-card { display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--line, #dfe3e8); border-left:4px solid var(--brand, #1d3557);
  border-radius:6px; padding:.6rem .8rem; margin-bottom:.8rem; }
.tour-card-thumb { position:relative; flex:none; padding:0; border:0; background:none; cursor:pointer; line-height:0; border-radius:4px; overflow:hidden; }
.tour-card-thumb img { display:block; width:144px; height:81px; object-fit:cover; }
.tour-card-play { position:absolute; inset:0; margin:auto; width:2.2rem; height:2.2rem; border-radius:999px; background:rgba(29,53,87,.88); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.95rem; line-height:1; padding-left:.15rem; }
.tour-card-len { position:absolute; right:.3rem; bottom:.3rem; background:rgba(0,0,0,.7); color:#fff; font-size:.72rem; line-height:1.3; padding:0 .3rem; border-radius:3px; }
.tour-card-body { flex:1; min-width:0; }
.tour-card-body h2 { margin:0 0 .15rem; font-size:1.05rem; }
.tour-card-body p { margin:0; color:var(--muted, #6b7280); font-size:.9rem; }
.tour-card-link { padding:0; border:0; background:none; color:var(--brand, #1d3557); font:inherit; font-weight:700; cursor:pointer; }
.tour-card-link:hover { text-decoration:underline; }
.tour-card-dismiss-form { margin:0; flex:none; align-self:flex-start; }
.tour-card-dismiss { background:none; border:1px solid var(--line, #dfe3e8); color:#374151; border-radius:4px; padding:.2rem .6rem; font-size:.82rem; cursor:pointer; }
.tour-card-dismiss:hover { background:#f1f5f9; }
@media (max-width:600px) {
  .tour-card { flex-wrap:wrap; gap:.6rem; }
  .tour-card-thumb img { width:112px; height:63px; }
  .tour-card-body { flex-basis:calc(100% - 130px); }
  .tour-card-dismiss-form { align-self:auto; margin-left:auto; }
}

/* Top bar Help (?) menu */
.help-menu { position:relative; background:none; border:0; border-radius:0; padding:0; margin:0; } /* marketing.css styles bare details */
.help-menu > summary { list-style:none; cursor:pointer; width:1.6rem; height:1.6rem; border-radius:999px; border:1.5px solid rgba(255,255,255,.75); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; line-height:1; }
.help-menu > summary::-webkit-details-marker { display:none; }
.help-menu > summary:hover, .help-menu[open] > summary { background:rgba(255,255,255,.16); }
.help-menu > summary:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.topbar .help-menu .help-menu-list.nav-dropdown-menu { position:absolute; right:0; left:auto; top:calc(100% + .45rem); z-index:60; min-width:11rem; max-height:none;
  border-width:1px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.18); padding:.2rem 0; }
.topbar .help-menu .help-menu-list a { display:block; padding:.45rem .9rem; color:#1f2937; font-size:.9rem; font-weight:500; white-space:nowrap; }
.topbar .help-menu .help-menu-list a:hover, .topbar .help-menu .help-menu-list a:focus-visible { background:#f1f5f9; color:var(--brand, #1d3557); }
@media (max-width:700px) { .topbar .help-menu .help-menu-list.nav-dropdown-menu { left:0; right:auto; } } /* the ? sits left on small screens: open rightward */