/* Mobile home navigation and landing auth presentation. Desktop keeps its existing path. */
.mobile-actions,
.mobile-home-menu,
.home-auth-dialog { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-auth-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  max-height: min(85dvh, 680px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: #080808;
  color: #f5f5f7;
  --product-base: #080808;
  --product-elevated: #111;
  --product-hover: #181818;
  --product-text: #f5f5f7;
  --product-secondary: rgba(245,245,247,.62);
  --product-tertiary: rgba(245,245,247,.38);
  --product-line: rgba(255,255,255,.11);
  --product-line-strong: rgba(255,255,255,.2);
  --product-accent: #fff;
}
.home-auth-dialog[open] { display: block; }
.home-auth-dialog::backdrop { background: rgba(0,0,0,.74); }
.home-auth-dialog .auth-card { border: 0; border-radius: 0; background: transparent; }
.home-auth-dialog .auth-dialog-card-head { display: flex; align-items: center; justify-content: space-between; }
.home-auth-dialog .auth-dialog-kicker { color: var(--product-tertiary); font: 500 10px/1 "SF Mono", monospace; letter-spacing: .14em; }
.home-auth-dialog .auth-dialog-close { width: 44px; min-height: 44px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--product-secondary); font-size: 24px; font-weight: 300; }
.home-auth-dialog .auth-dialog-close:hover { color: #fff; }

@media (max-width: 760px) {
  .topbar {
    position: absolute;
    height: 64px;
    padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
  }
  .topbar-meta { display: none; }

  .mobile-actions { display: flex; align-items: center; gap: 4px; pointer-events: auto; }
  .mobile-auth-entry {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.74);
    font-size: 13px;
    text-decoration: none;
  }
  .mobile-auth-entry:hover { color: #fff; }
  .mobile-auth-entry:focus { outline: none; }
  .mobile-auth-entry:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255,255,255,.84);
  }
  .mobile-menu-toggle:hover { color: #fff; }
  .mobile-menu-toggle:active { opacity: .65; }
  .mobile-menu-toggle:focus { outline: none; }
  .mobile-menu-toggle:focus-visible,
  .mobile-home-menu-close:focus-visible,
  .auth-dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .mobile-menu-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

  .hero-action { z-index: 4; }

  .mobile-home-menu {
    position: fixed;
    inset: auto 0 0;
    width: min(480px, 100%);
    max-width: none;
    max-height: min(75svh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: #0a0a0a;
    color: var(--ink);
    display: none;
    transform: translateY(100%);
    transition: transform 180ms var(--motion), opacity 180ms var(--motion);
  }
  .mobile-home-menu[open] { display: block; transform: translateY(0); }
  .mobile-home-menu::backdrop { background: rgba(0,0,0,.68); }
  .mobile-home-menu-inner { padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); }
  .mobile-home-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
  .mobile-home-menu-head h2 { margin: 0; font-size: 16px; font-weight: 550; letter-spacing: .01em; }
  .mobile-home-menu-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 24px; font-weight: 300; }
  .mobile-home-menu-close:hover { color: #fff; }
  .mobile-home-menu-nav { display: grid; margin-top: 8px; }
  .mobile-home-menu-nav :is(a, button) { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; border: 0; background: transparent; color: rgba(255,255,255,.82); font: inherit; font-size: 14px; text-align: left; text-decoration: none; }
  .mobile-home-menu-nav :is(a, button):hover { color: #fff; }
  .mobile-home-menu-nav :is(a, button) > span:last-child { color: rgba(255,255,255,.38); }
  .mobile-home-menu-nav :is(a, button):focus { outline: none; }
  .mobile-home-menu-nav :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
  .mobile-home-menu-settings { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 0 8px; border: 0; }
  .mobile-home-menu-legal { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; padding-top: 0; border: 0; }
  .mobile-home-menu-legal a { color: rgba(255,255,255,.48); font-size: 12px; text-decoration: none; }
  .mobile-home-menu-legal a:hover { color: #fff; }

  .home-auth-dialog { position: fixed; inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-home-menu { transition: none; }
}

/* Native dialogs keep focus and form state; motion is presentation only. */
.home-auth-dialog {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease,
    display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.home-auth-dialog[open] { opacity: 1; transform: translateY(0); }
:is(.home-auth-dialog, .mobile-home-menu)::backdrop {
  opacity: 0;
  transition: opacity 180ms ease, display 180ms allow-discrete, overlay 180ms allow-discrete;
}
:is(.home-auth-dialog, .mobile-home-menu)[open]::backdrop { opacity: 1; }
.home-auth-dialog .auth-dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .mobile-home-menu {
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease,
      display 180ms allow-discrete, overlay 180ms allow-discrete;
  }
  .mobile-home-menu[open] { opacity: 1; }
  @starting-style {
    .mobile-home-menu[open] { opacity: 0; transform: translateY(100%); }
  }
}
@starting-style {
  .home-auth-dialog[open] { opacity: 0; transform: translateY(6px); }
  :is(.home-auth-dialog, .mobile-home-menu)[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.home-auth-dialog, .mobile-home-menu),
  :is(.home-auth-dialog, .mobile-home-menu)::backdrop { transition: none; }
}

/* The landing menu and its native auth dialog follow the shared appearance. */
html[data-theme="light"] .home-auth-dialog {
  background: #fff; color: #202020; border-color: #dddcd7;
  --product-base: #f1f1ee; --product-elevated: #fff; --product-hover: #e8e8e4;
  --product-text: #202020; --product-secondary: #646461; --product-tertiary: #71716c;
  --product-line: #dddcd7; --product-line-strong: #a7a7a2; --product-accent: #242424;
}
html[data-theme="light"] .home-auth-dialog .auth-dialog-close,
html[data-theme="light"] .home-auth-dialog .auth-dialog-close:hover { background: transparent; }
html[data-theme="light"] :is(.home-auth-dialog, .mobile-home-menu)::backdrop { background: rgba(32,32,32,.28); }
html[data-theme="light"] :is(.home-auth-dialog .auth-dialog-close:hover, .mobile-auth-entry:hover, .mobile-menu-toggle:hover, .mobile-home-menu-close:hover, .mobile-home-menu-nav :is(a, button):hover, .mobile-home-menu-legal a:hover) { color: var(--product-text); }
html[data-theme="light"] :is(.mobile-auth-entry, .mobile-menu-toggle, .mobile-home-menu-nav a, .mobile-home-menu-nav button) { color: var(--product-secondary); }
html[data-theme="light"] :is(.mobile-auth-entry, .mobile-menu-toggle, .mobile-home-menu-close, .auth-dialog-close, .mobile-home-menu-nav a, .mobile-home-menu-nav button):focus-visible { outline-color: var(--theme-focus); }
html[data-theme="light"] .mobile-home-menu { background: var(--product-elevated); border-color: var(--product-line); }
html[data-theme="light"] :is(.mobile-home-menu-nav :is(a, button) > span:last-child, .mobile-home-menu-legal a) { color: var(--product-tertiary); }