/* Soji Duo — embedded-context adjustments (NOT part of the approved source package).
 * Loaded after styles.css by embed.html and active only inside an iframe
 * (html.is-embedded is set by embed.js). The approved design is otherwise unchanged.
 */

/* The parent sizes the frame to the content, so the frame itself never scrolls. */
html.is-embedded,
html.is-embedded body {
  overflow: hidden;
}
html.is-embedded {
  scroll-behavior: auto;
}

/* Dialogs, toast and skip link sit inside the part of the frame the visitor can see
   (the parent sends --embed-vis-top / --embed-vis-h), not the middle of a tall frame. */
html.is-embedded .dialog[open] {
  position: fixed;
  inset: auto 0;
  top: calc(var(--embed-vis-top, 0px) + var(--embed-vis-h, 100dvh) / 2);
  transform: translateY(-50%);
  margin: 0 auto;
  max-height: calc(var(--embed-vis-h, 100dvh) - 32px);
}
html.is-embedded .toast {
  bottom: auto;
  top: calc(var(--embed-vis-top, 0px) + var(--embed-vis-h, 100dvh) - 25px);
  transform: translate(-50%, calc(-100% + 20px));
}
html.is-embedded .toast.visible {
  transform: translate(-50%, -100%);
}
html.is-embedded .skip:focus {
  top: calc(var(--embed-vis-top, 0px) + 16px);
}

/* Auto-fold while scrolling away over the top (embed.js): a quicker fold so the phone is
   closed before the browser's open-leaf drawing fault zone. Manual folds keep 1.25 s. */
html.is-embedded.duo-autofold .device,
html.is-embedded.duo-autofold .leaf {
  transition-duration: .5s;
}

/* Home-page embed only: the site header already carries the name, so the preview's
   own wordmark and the "listening experience / interactive preview" labels are hidden.
   The motion switch, playback guide and local-media buttons stay. */
html[data-embed="home"].is-embedded .brand,
html[data-embed="home"].is-embedded .study-label,
html[data-embed="home"].is-embedded .footer > span {
  display: none;
}
html[data-embed="home"].is-embedded .masthead {
  justify-content: flex-end;
}
html[data-embed="home"].is-embedded .footer {
  justify-content: flex-end;
}

/* Touch size: on phones the seek and volume sliders get a 44 px tall hit area.
   Negative margins keep the visible layout exactly where the approved design puts it. */
@media (max-width: 760px) {
  /* Original: inline 34 px input. As a 44 px block, -5 px top and +1.25 px bottom
     reproduce the original line box exactly (measured against index.html at 320 and 390 px). */
  html.is-embedded .mobile-console .mobile-seek {
    display: block;
    height: 44px;
    margin: -5px 0 1.25px;
  }
  html.is-embedded .mobile-console .volume-row input[type="range"] {
    height: 44px;
    margin-block: -8px;
  }
}