/* Demo shell for the prototype pages. Presentation only: it sizes and places
   what the export renders and never changes anything inside the phone screen.

   The export renders:  #dc-root > .sc-host > div        page wrapper
                          > aside                         concept, flows, test task
                          > div                           phone bezel, 410 x 864
                            > div                         screen, 390 x 844

   shell.js sets one class on <html> (lq-embed, lq-desk or lq-mobile) plus
   --lq-k, the scale factor, and --lq-top. */

/* Desktop: the exported layout, scaled down as one piece when the window is
   shorter than the phone. At full size it is the export, pixel for pixel. */
html.lq-embed, html.lq-desk,
html.lq-embed body, html.lq-desk body { overflow: hidden; }

html.lq-embed #dc-root > .sc-host > div,
html.lq-desk #dc-root > .sc-host > div {
  position: absolute;
  left: 50%;
  top: var(--lq-top, 0px);
  width: 834px;
  margin-left: -417px;
  min-height: 0 !important;
  flex-wrap: nowrap !important;
  padding: 8px 24px 56px !important;
  transform: scale(var(--lq-k, 1));
  transform-origin: 50% 0;
}

/* Mobile: the bezel goes, the screen fills the viewport. */
html.lq-mobile, html.lq-mobile body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0B0D14 !important;
  -webkit-tap-highlight-color: transparent;
}
html.lq-mobile #dc-root > .sc-host > div {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
}
html.lq-mobile #dc-root > .sc-host > div > div {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 390px !important;
  height: 844px !important;
  margin: -422px 0 0 -195px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: scale(var(--lq-k, 1));
}
html.lq-mobile #dc-root > .sc-host > div > div > div { border-radius: 0 !important; }

/* Mobile: the export's side panel becomes a sheet behind the menu button. */
html.lq-mobile #dc-root > .sc-host > div > aside {
  position: fixed;
  inset: 0;
  z-index: 900;
  width: auto !important;
  max-width: none !important;
  padding: 148px 20px calc(32px + env(safe-area-inset-bottom)) !important;
  background: #E7EAF2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s;
}
html.lq-mobile.lq-open #dc-root > .sc-host > div > aside {
  visibility: visible;
  transform: none;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

/* Menu button. It sits exactly on the status-bar pill the export draws, so
   nothing in the app is covered. */
#lq-island {
  all: unset;
  box-sizing: border-box;
  display: none;
  position: fixed;
  z-index: 800;
  left: calc(50% - 62px * var(--lq-k, 1));
  top: calc(50% - 411px * var(--lq-k, 1));
  width: calc(124px * var(--lq-k, 1));
  height: calc(36px * var(--lq-k, 1));
  border-radius: calc(20px * var(--lq-k, 1));
  background: #000;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#lq-island i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
#lq-island:focus-visible { outline: 2px solid #00C9FF; outline-offset: 2px; }
html.lq-mobile #lq-island { display: flex; }

#lq-hint {
  display: none;
  position: fixed;
  z-index: 800;
  left: 50%;
  top: calc(50% - 365px * var(--lq-k, 1));
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: #0B1033;
  color: #fff;
  font: 500 12px/1.3 Poppins, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px -8px rgba(11, 16, 51, .6);
  animation: lq-hint 5s ease both;
}
html.lq-mobile #lq-hint { display: block; }
@keyframes lq-hint {
  0% { opacity: 0; transform: translate(-50%, -6px); }
  8%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* Menu header: sits on top of the open sheet. */
#lq-menu {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 901;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  background: rgba(231, 234, 242, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  font-family: Poppins, sans-serif;
  color: #0B1033;
  visibility: hidden;
  transform: translateY(100vh);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s;
}
html.lq-mobile #lq-menu { display: block; }
html.lq-mobile.lq-open #lq-menu {
  visibility: visible;
  transform: none;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
#lq-menu .lq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#lq-menu a.lq-home { font-size: 14px; font-weight: 500; color: #0019AA; text-decoration: none; padding: 8px 0; }
#lq-menu button.lq-close {
  all: unset;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
#lq-menu nav { display: flex; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 14px; background: #fff; }
#lq-menu nav a {
  flex: 1;
  padding: 10px 4px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #0B1033;
}
#lq-menu nav a[aria-current] { background: #0B1033; color: #fff; }

/* Opened directly on a desktop: a way back to the overview. */
#lq-back {
  display: none;
  position: fixed;
  left: 20px;
  top: 12px;
  z-index: 800;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: #0B1033;
  font: 500 13px/1.4 Poppins, sans-serif;
  text-decoration: none;
}
#lq-back:hover { color: #0019AA; }
html.lq-desk #lq-back { display: block; }