/* Website only. Keep desktop geometry and the Workshop stylesheet independent. */
@media (max-width: 760px) {
  :root { --site-mobile-header-height: 66px; }
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); scroll-padding-top: calc(var(--site-mobile-header-height) + env(safe-area-inset-top, 0px) + 12px); }

  .site-shell {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .site-shell.has-mobile-navigation { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* iOS can magnify small form fields on focus. Keep user zoom available. */
  body .site-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body .site-shell textarea,
  body .site-shell select,
  body .site-shell select.language-select,
  body .site-shell .account-shell .language-select {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  body .site-shell select.language-select,
  body .site-shell .account-shell select.language-select {
    appearance: none;
    height: 44px;
    min-height: 44px;
    max-width: 112px;
    padding: 8px 24px 8px 8px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
  }
  body .site-shell .account-shell select.language-select { max-width: 100%; }
  body .site-header { height: calc(var(--site-mobile-header-height) + env(safe-area-inset-top, 0px)); }
  body .site-header .nav-wrap { padding-top: env(safe-area-inset-top, 0px); gap: 10px; }
  body .site-header .brand { flex-shrink: 0; min-height: 44px; }
  body .site-header .nav-actions { gap: 8px; min-width: 0; margin-left: auto; }
  body .site-header .main-nav,
  body .site-header .nav-actions .nav-register,
  body .site-header .nav-actions .nav-workshop { display: none !important; }
  body .site-header .nav-actions .nav-login { display: inline-flex; min-width: 44px; }
  body .site-header .nav-actions select.language-select { max-width: 104px; }

  body .auth-section.auth-section-centered,
  body .site-header + main .auth-section {
    min-height: calc(100dvh - var(--site-mobile-header-height) - env(safe-area-inset-top, 0px));
  }
  body .auth-layout,
  body .auth-panel { min-width: 0; }
  body .auth-panel { overflow-wrap: anywhere; }
  body .auth-links { flex-wrap: wrap; align-items: center; }
  body .auth-switch a,
  body .auth-links a,
  body .auth-home a,
  body .auth-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  body .auth-resend,
  body .auth-back,
  body .site-shell .home-case-tabs button,
  body .site-shell .copy-toolbar button,
  body .account-shell .btn { min-height: 44px; }

  body .account-sidebar > * { flex-shrink: 0; }
  body .account-shell .account-locale-switcher select.language-select { min-height: 44px; flex-shrink: 0; }
  body .account-sidebar {
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
  }
  body .account-topbar {
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  body .account-menu-button,
  body .account-logout,
  body .key-copy,
  body .key-visibility { min-width: 44px; min-height: 44px; }
  body .account-primary-nav .account-submenu a { min-height: 44px; }

  body .case-dialog-backdrop,
  body .wechat-dialog-backdrop {
    z-index: 60;
    overflow-y: auto;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  body .case-dialog,
  body .wechat-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  body .wechat-dialog-close,
  body .modal-head button { min-width: 44px; min-height: 44px; }
}

/* Fit the brand, language and sign-in action on one row at 320 CSS pixels. */
@media (max-width: 360px) {
  body .site-header .nav-wrap { gap: 6px; }
  body .site-header .nav-actions { gap: 5px; }
  body .site-header .nav-actions select.language-select { max-width: 96px; padding-left: 6px; }
  body .site-header .nav-actions .nav-login { padding-inline: 8px !important; }
  body .site-header .lululab-logo { gap: 5px; }
  body .site-header .lululab-wordmark { width: 82px; }
  body .site-header .lululab-icon { width: 28px; }
}