/* First-screen viewport and phone/tablet layout. Load after component styles. */
html:has(> body[data-hashcod-entry-intro="1"]) {
  overflow-x: clip;
}

body[data-hashcod-entry-intro="1"] {
  max-width: 100%;
  /* Clip decorative overflow on this axis only. The page still scrolls down
     to reveal Files and the recommendation, including on short desktops. */
  overflow-x: clip;
}

@media (max-width: 1179px) {
  body[data-hashcod-entry-intro="1"] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  body[data-hashcod-entry-intro="1"] .access-stage {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    min-height: 0;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  }

  body[data-hashcod-entry-intro="1"] .entry-rotating-text-hero {
    position: static;
    order: 0;
    align-self: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    width: min(432px, calc(100% - 68px));
    max-width: none;
    min-height: 56px;
    margin-right: 68px;
    transform: none;
  }

  body[data-hashcod-entry-intro="1"] .entry-rotating-text-prefix,
  body[data-hashcod-entry-intro="1"] .entry-rotating-text-shell { font-size: 18px; }
  body[data-hashcod-entry-intro="1"] .entry-rotating-text-shell { max-width: 100%; }

  body[data-hashcod-entry-intro="1"] .access-layout {
    order: 1;
    display: block;
    width: min(500px, 100%);
    min-width: 0;
  }

  body[data-hashcod-entry-intro="1"] .access-left-stack,
  body[data-hashcod-entry-intro="1"] .entry-branched-menu-stage,
  body[data-hashcod-entry-intro="1"] .entry-branched-menu-mount,
  body[data-hashcod-entry-intro="1"] .first-screen-menu-stack,
  body[data-hashcod-entry-intro="1"] .v-calendar-example {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-hashcod-entry-intro="1"] .entry-branched-menu-stage {
    position: static;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  /* Modal source nodes are moved to body/the Documents portal when opened.
     Their empty desktop wrappers must not reserve space on the phone. */
  body[data-hashcod-entry-intro="1"] .access-left-stack { gap: 0; }
  body[data-hashcod-entry-intro="1"] #d5FaqStack { gap: 0; }
  body[data-hashcod-entry-intro="1"] #d5NavListDemo { display: none; }

  body[data-hashcod-entry-intro="1"] .first-screen-menu-stack { gap: 20px; }
  body[data-hashcod-entry-intro="1"] .branched-menu__head { min-height: 44px; }
  body[data-hashcod-entry-intro="1"] .v-calendar-example { gap: 12px; padding-block: 20px 0; }
  body[data-hashcod-entry-intro="1"] .v-calendar-example__intro h3 { font-size: 18px; }
  body[data-hashcod-entry-intro="1"] .v-calendar-example__intro p { font-size: 13px; line-height: 1.5; }
  body[data-hashcod-entry-intro="1"] .v-calendar-example__eyebrow { font-size: 10px; }
  body[data-hashcod-entry-intro="1"] .v-calendar { gap: 10px; padding: 10px; border-radius: 16px; }
  body[data-hashcod-entry-intro="1"] .v-calendar__header { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  body[data-hashcod-entry-intro="1"] .v-calendar__header strong { font-size: 14px; }
  body[data-hashcod-entry-intro="1"] .v-calendar__nav { width: 44px; height: 44px; }
  body[data-hashcod-entry-intro="1"] .v-calendar__weekdays span { height: 22px; font-size: 10px; }
  body[data-hashcod-entry-intro="1"] .v-calendar__day { min-height: 44px; font-size: 14px; }
  body[data-hashcod-entry-intro="1"] .v-calendar-example__clear { min-height: 44px; padding-inline: 12px; font-size: 12px; }
  body[data-hashcod-entry-intro="1"] .v-calendar-example__summary p { font-size: 12px; }

  body[data-hashcod-entry-intro="1"] .entry-empty-state-stage {
    position: static;
    order: 2;
    inset: auto;
    width: min(500px, 100%);
    margin: 0;
    transform: none;
  }

  body[data-hashcod-entry-intro="1"] .hashcod-workspace-files-content { gap: 16px; }
  body[data-hashcod-entry-intro="1"] .hashcod-files-empty-state {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  body[data-hashcod-entry-intro="1"] .center-empty-state-action-slot,
  body[data-hashcod-entry-intro="1"] .hashcod-workspace-files-content {
    min-width: 0;
    max-width: 100%;
  }
  body[data-hashcod-entry-intro="1"] .hashcod-empty-state-actions-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 12px;
    width: 100%;
  }
  body[data-hashcod-entry-intro="1"] .hashcod-empty-state-action {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 14px;
  }
  body[data-hashcod-entry-intro="1"] .hashcod-expanding-button-group { width: 100%; min-height: 52px; padding: 3px; }
  body[data-hashcod-entry-intro="1"] .hashcod-expanding-button-group__item {
    flex: 1 1 0;
    width: auto !important;
    min-width: 44px;
    height: 44px;
    justify-content: center;
    padding-inline: 8px;
    font-size: 12px;
  }
  body[data-hashcod-entry-intro="1"] .hashcod-file-vault-trigger { width: 48px; height: 48px; }
  body[data-hashcod-entry-intro="1"] .hfv-explorer { min-width: 0; max-width: 100%; max-height: 350px; }
  body[data-hashcod-entry-intro="1"] .hfv-explorer button { min-height: 44px; }

  body[data-hashcod-entry-intro="1"] .preview-policy-footer {
    position: static;
    width: min(500px, calc(100% - 32px));
    margin: auto auto 0;
    padding: 12px 0 max(20px, env(safe-area-inset-bottom));
    transform: none;
  }
  body[data-hashcod-entry-intro="1"] .preview-policy-copy { font-size: 12px; line-height: 1.6; }
  body[data-hashcod-entry-intro="1"] .preview-policy-mount { position: relative; }
  body[data-hashcod-entry-intro="1"] .preview-link-card { position: static; }
  body[data-hashcod-entry-intro="1"] .preview-link-card__trigger { display: inline-flex; align-items: center; min-height: 44px; }
  body[data-hashcod-entry-intro="1"] #hashcodPageMascotDock.hashcod-page-mascot-dock {
    --hashcod-mascot-size: 52px;
    position: absolute;
    top: max(24px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
  }

  body[data-hashcod-entry-intro="1"] #d5AnimateCursorLayer { display: none; }
  html.hashcod-animate-cursor-active body[data-hashcod-entry-intro="1"],
  html.hashcod-animate-cursor-active body[data-hashcod-entry-intro="1"] * { cursor: auto !important; }

  body[data-hashcod-entry-intro="1"] .hfv-preview button { width: 44px; height: 44px; }
  body[data-hashcod-entry-intro="1"] .hfv-totp-backdrop { overflow-y: auto; padding: 12px; }
  body[data-hashcod-entry-intro="1"] .hfv-totp-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
  body[data-hashcod-entry-intro="1"] .hfv-totp-secret-row input { min-height: 44px; font-size: 16px; }
  body[data-hashcod-entry-intro="1"] .hfv-totp-dialog button { min-height: 44px; }
}