/*
 * Phone layout for the investor viewer (slides.html) and its gate (document/password.html, #share-gate).
 * Desktop keeps the Webflow design as is: every phone layout rule sits in a max-width: 767px block, and the
 * min-width block only hides the phone-only controls and places the slide list's hide tab. The gate's entrance
 * motion at the end of the file applies at every size.
 */

@media (min-width: 768px) {
  .viewer-pager,
  .viewer-tldr-bar {
    display: none;
  }

  /* The design's #view-nav-close sits outside the scrolling list so it can stick out of the list's top-right
     corner like the Summary drawer's tab. Closed, the list gives way to the "Slides" strip with the tab on top. */
  #view-nav-close {
    cursor: pointer;
    border-radius: 0 0 5px;
    align-self: flex-start;
    width: 31.5px;
    height: 31.5px;
    margin-right: -31.5px;
    position: sticky;
    inset: 0 auto auto;
  }

  #view-nav-close .drawericon {
    transition: transform .2s;
  }

  /* Same motion as the Summary drawer (Webflow "Close Drawer": 200ms ease-in move, 200ms icon turn). The list is
     in the page flow, so it slides out by its own width and the deck takes the room. */
  #view-nav {
    transition: margin-left .2s cubic-bezier(.11, 0, .5, 0), visibility 0s linear 0s;
  }

  html.viewer-nav-closed #view-nav {
    visibility: hidden;
    margin-left: -200px;
    transition: margin-left .2s cubic-bezier(.11, 0, .5, 0), visibility 0s linear .2s;
  }

  #view-nav-open {
    transition: width .2s cubic-bezier(.11, 0, .5, 0), margin-left .2s cubic-bezier(.11, 0, .5, 0), color .2s;
  }

  html.viewer-nav-closed #view-nav-open {
    width: 33px;
    margin-left: 0;
  }

  html.viewer-nav-closed #view-nav-close .drawericon {
    transform: none;
  }

  /* Hovering a side's strip lights that side's tab like hovering the tab itself. The Slides tab comes before
     its strip in the markup, so it needs :has(). */
  #view-nav-close:has(+ #view-nav-open:hover),
  #view-tldr-open:hover + #view-tldr .drawecloser {
    color: #1a1a1a;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  #view-nav,
  html.viewer-nav-closed #view-nav,
  #view-nav-open,
  #view-nav-close .drawericon {
    transition: none;
  }
}

@media (min-width: 768px) and (pointer: coarse) {
  #view-nav-close::after {
    content: "";
    position: absolute;
    inset: 0 -12.5px -12.5px 0;
  }
}

@media (max-width: 767px) {
  /* ---- Viewer: deck first, then pager, thumbnail strip and the Summary button. */

  .topnav {
    grid-column-gap: 8px;
    height: auto;
    min-height: 60px;
    padding: 8px 12px;
  }

  .topnav > .alignrow._10 {
    flex: 1;
    min-width: 0;
  }

  .topnav .companylogo {
    flex: none;
    width: 44px;
    height: 44px;
  }

  .topnav .deckinfo {
    min-width: 0;
  }

  .topnav .decktitle,
  .topnav .decksubtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topnav .decktitle {
    font-size: 16px;
  }

  .topnav .decksubtitle {
    font-size: 13px;
  }

  .topnav > .alignrow._5 {
    flex: none;
  }

  .topnav .ctabutton {
    height: 44px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }

  .topnav .ctabutton.alt {
    width: 44px;
    padding: 1px 0 0;
  }

  .sharecard {
    width: min(333px, calc(100vw - 24px));
  }

  .sharecard textarea,
  .sharecard input {
    font-size: 16px;
  }

  .pagecontent {
    flex-flow: column;
    flex: none;
    min-width: 0;
  }

  .pitchdeck {
    order: 1;
    flex: none;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    padding: 0 0 4px;
  }

  .pitchdeck #view-stage {
    width: 100%;
    max-height: none;
    border-radius: 0;
    touch-action: pan-y pinch-zoom;
  }

  .pitchdeck #view-message {
    align-self: center;
    margin: 12px 16px 0;
  }

  .viewer-pager {
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 4px;
    display: flex;
  }

  .viewer-pager-btn {
    color: #1a1a1a99;
    cursor: pointer;
    background-color: #fff;
    border: 1.5px solid #0000001a;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 44px;
    padding: 0;
    display: flex;
  }

  .viewer-pager-btn:disabled {
    opacity: .35;
    cursor: default;
  }

  .viewer-pager-btn svg {
    width: 22px;
    height: 22px;
  }

  .viewer-pager-count {
    color: #1a1a1a99;
    font-family: Figtree, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .slidenav {
    order: 2;
    grid-column-gap: 8px;
    border-right: 0;
    border-top: 1.5px solid #0000001a;
    border-bottom: 1.5px solid #0000001a;
    flex-flow: row;
    width: auto;
    height: auto;
    margin-top: 8px;
    padding: 10px 12px;
    position: relative;
    top: auto;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .slidenav .sliderow {
    grid-row-gap: 4px;
    flex-flow: column;
    flex: none;
    align-items: stretch;
    width: 116px;
    scroll-snap-align: center;
  }

  .slidenav .slidethumb {
    flex: none;
    width: 100%;
  }

  .slidenav .slidenumber {
    order: 2;
    width: auto;
    margin-left: 0;
  }

  #view-nav-close,
  #view-nav-open {
    display: none;
  }

  #view-tldr-open {
    order: 3;
    grid-column-gap: 10px;
    border: 1.5px solid #0000001a;
    border-radius: 7px;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 48px;
    margin: 12px;
    padding: 0 16px;
    position: static;
    overflow: hidden;
  }

  #view-tldr-open .tldr-text,
  .viewer-tldr-bar .tldr-text {
    transform: none;
  }

  /* The TLDR drawer becomes a full-screen sheet, closed until the Summary button opens it. */
  .tldrpanel {
    z-index: 900;
    grid-row-gap: 28px;
    border-left: 0;
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 0 16px 40px;
    display: none;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: none !important;
  }

  html.viewer-tldr-open .tldrpanel {
    display: flex;
  }

  html.viewer-tldr-open,
  html.viewer-tldr-open body {
    overflow: hidden;
  }

  .tldrpanel .drawecloser,
  .tldrpanel .draweclose {
    display: none;
  }

  .viewer-tldr-bar {
    z-index: 2;
    color: #1a1a1a66;
    text-transform: uppercase;
    background-color: #fff;
    border-bottom: 1.5px solid #0000001a;
    flex: none;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    margin: 0 -16px -8px;
    padding: 0 8px 0 16px;
    font-size: 12px;
    line-height: 1em;
    display: flex;
    position: sticky;
    top: 0;
  }

  .viewer-tldr-close {
    color: #1a1a1a99;
    cursor: pointer;
    background-color: #fff;
    border: 1.5px solid #0000001a;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
  }

  .viewer-tldr-close svg {
    width: 22px;
    height: 22px;
  }

  .tldrpanel .thumbnailside {
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0;
  }

  .tldrpanel .socialslink {
    min-width: 44px;
    min-height: 44px;
  }

  /* ---- Gate (the password page mock, also spliced into the viewer as #share-gate). */

  #share-gate .bgimage-wrapper {
    flex-flow: column;
    flex: 1;
    display: flex;
    position: relative;
    inset: auto;
  }

  #share-gate .fulloverlay {
    flex: 1;
    align-items: flex-start;
    padding: 16px 12px;
    position: relative;
    inset: auto;
  }

  #share-gate .logincard {
    grid-row-gap: 10px;
    flex-flow: column;
    width: 100%;
    max-width: 440px;
    margin: auto;
  }

  #share-gate .logincontent {
    grid-row-gap: 24px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 12px 10px 10px;
  }

  #share-gate .deckinfo {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #share-gate .companylogo.lg {
    flex: none;
    width: 48px;
    height: 48px;
  }

  #share-gate .decktitle {
    font-size: 17px;
  }

  #share-gate .loginheader {
    font-size: 17px;
  }

  #share-gate .textfield {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  #share-gate .formbutton {
    width: 100%;
    min-height: 50px;
    position: static;
  }

  #share-gate .loginimage {
    order: -1;
    aspect-ratio: 16 / 9;
    width: 100%;
    min-height: 0;
    display: none;
    box-shadow: none;
  }

  #share-gate .loginimage:has(canvas),
  #share-gate .loginimage:has(img) {
    display: block;
  }
}

/* Gate entrance, on every screen size. It lives here rather than in a script's style so it holds from the first
   paint. The card drops in, then the image and the form fade in together. Fill mode is backwards only, so no
   transform is left on the card once it lands. A hidden image just skips its part. */
@keyframes gate-card-in {
  from { opacity: 0; transform: translate3d(0, -20px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes gate-image-in {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes gate-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  #share-gate .logincard {
    animation: gate-card-in .3s cubic-bezier(.22, 1, .36, 1) backwards;
  }

  #share-gate .loginimage {
    animation: gate-image-in .24s cubic-bezier(.22, 1, .36, 1) .14s backwards;
  }

  #share-gate .logincontent {
    animation: gate-content-in .24s cubic-bezier(.22, 1, .36, 1) .14s backwards;
  }
}