/*
  Lurei mobile premium layer
  Purpose: final responsive polish loaded after the legacy stylesheet.
  Keep this file small, token-driven, and focused on spacing, hierarchy, and tap comfort.
*/

:root {
  --lurei-mobile-gutter: clamp(18px, 5vw, 24px);
  --lurei-mobile-card-pad: clamp(16px, 4.5vw, 22px);
  --lurei-mobile-section-gap: clamp(18px, 5vw, 26px);
  --lurei-desktop-frame: 1120px;
  --lurei-focus-glow: 0 22px 70px rgba(200, 115, 107, 0.18);
}

html,
body {
  overflow-x: hidden;
}

.screen-inner,
.entry-scene,
.privacy-page,
.terms-page {
  box-sizing: border-box;
}

@media (min-width: 980px) {
  .app-shell {
    max-width: min(100%, 1280px);
    margin-inline: auto;
  }

  .screen.is-active {
    justify-content: flex-start;
  }

  .screen.is-active > .screen-inner {
    width: min(100%, var(--lurei-desktop-frame));
    margin-inline: auto;
  }

  .today-screen .screen-inner,
  .cycle-screen .screen-inner,
  .discover-screen .screen-inner,
  .shelf-screen .screen-inner,
  .profile-screen .screen-inner {
    padding-inline: clamp(28px, 4vw, 56px);
  }

  .today-screen .screen-inner {
    max-width: 980px;
  }
}

@media (max-width: 820px) {
  .gate-screen,
  .welcome-screen {
    padding: 0 !important;
    background:
      radial-gradient(circle at 50% 25%, rgba(255, 247, 238, 0.18), transparent 12%),
      radial-gradient(circle at 50% 31%, rgba(200, 115, 107, 0.16), transparent 42%),
      linear-gradient(180deg, #030307 0%, #07070d 46%, #100913 100%) !important;
  }

  .entry-scene {
    width: 100% !important;
    min-height: 100svh !important;
    padding: calc(78px + env(safe-area-inset-top, 0px)) 22px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    overflow: hidden !important;
  }

  .entry-scene::before {
    background:
      linear-gradient(180deg, transparent 0 40%, rgba(5, 5, 10, 0.78) 76%, rgba(5, 5, 10, 0.95)),
      radial-gradient(circle at 18% 82%, rgba(200, 115, 107, 0.14), transparent 34%) !important;
  }

  .entry-scene::after {
    width: 78vw !important;
    right: -30vw !important;
    bottom: -18vw !important;
    opacity: 0.82 !important;
  }

  .entry-moon {
    top: 10svh !important;
    width: min(72vw, 300px) !important;
    opacity: 0.78 !important;
    filter: blur(0.2px) !important;
  }

  .entry-brand {
    position: absolute !important;
    top: calc(18px + env(safe-area-inset-top, 0px)) !important;
    left: 22px !important;
  }

  .entry-logo {
    width: 40px !important;
    height: 40px !important;
  }

  .entry-copy,
  .entry-age-panel,
  .return-auth-sheet,
  .entry-preview {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .entry-copy {
    padding: 0 !important;
    margin-top: auto !important;
  }

  .entry-copy h1,
  .entry-age-panel h1,
  .return-auth-sheet h1 {
    max-width: 9.5ch !important;
    font-family: "Cormorant Garamond", serif !important;
    font-size: clamp(3rem, 14vw, 4.45rem) !important;
    font-weight: 700 !important;
    line-height: 0.88 !important;
  }

  .entry-age-panel h1 {
    max-width: 8ch !important;
    font-size: clamp(2.65rem, 12vw, 3.8rem) !important;
    text-align: left !important;
  }

  .entry-copy p,
  .entry-age-panel p,
  .return-auth-sheet p,
  .entry-preview p {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
  }

  .entry-actions {
    display: grid !important;
    gap: 10px !important;
    margin: 20px 0 12px !important;
  }

  .entry-actions .button,
  .entry-age-panel .button {
    width: 100% !important;
    min-height: 50px !important;
  }

  .entry-proof-list {
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .entry-proof-list span {
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 0.66rem !important;
  }

  .entry-preview {
    margin: 0 !important;
    padding: 13px 15px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255, 247, 238, 0.08), rgba(255, 247, 238, 0.025)),
      rgba(10, 8, 15, 0.46) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(10px) !important;
  }

  .entry-preview h2 {
    font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 6px !important;
  }

  .welcome-screen .entry-preview {
    max-height: 150px !important;
    overflow: hidden !important;
  }

  .entry-age-panel,
  .return-auth-sheet {
    padding: 22px !important;
    border-radius: 26px !important;
    background:
      linear-gradient(145deg, rgba(255, 247, 238, 0.09), rgba(255, 247, 238, 0.025)),
      rgba(10, 8, 15, 0.52) !important;
  }

  .entry-age-panel {
    text-align: left !important;
  }

  .screen {
    padding: 14px 18px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .screen.is-active {
    align-items: stretch;
  }

  .screen-inner,
  .today-screen .screen-inner,
  .cycle-screen .screen-inner,
  .discover-screen .screen-inner,
  .shelf-screen .screen-inner,
  .profile-screen .screen-inner {
    width: 100%;
    padding-inline: var(--lurei-mobile-gutter);
    padding-top: 14px !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .today-header,
  .section-header,
  .screen-hero,
  .profile-identity-card,
  .vanity-memory-hero,
  .oracle-card {
    margin-bottom: var(--lurei-mobile-section-gap);
  }

  .today-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .today-screen .screen-inner > * + *,
  .cycle-screen .screen-inner > * + *,
  .discover-screen .screen-inner > * + *,
  .shelf-screen .screen-inner > * + *,
  .profile-screen .screen-inner > * + * {
    margin-top: var(--lurei-mobile-section-gap);
  }

  .phase-card,
  .mirror-forecast-card,
  .today-impact-receipt,
  .today-look-card,
  .routine-card,
  .product-card,
  .owned-product-card,
  .vanity-section,
  .profile-panel,
  .beauty-studio-card,
  .oracle-card,
  .deeper-card,
  .bottom-sheet {
    border-radius: 24px;
  }

  .phase-card,
  .mirror-forecast-card,
  .today-impact-receipt,
  .today-look-card,
  .routine-card,
  .vanity-section,
  .profile-panel,
  .beauty-studio-card,
  .oracle-card {
    padding: var(--lurei-mobile-card-pad);
  }

  .today-screen .phase-card {
    min-height: auto !important;
    padding: 18px !important;
  }

  .today-screen .phase-card .phase-hero-grid {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .today-screen .phase-card .today-moon-reveal .phase-moon-art,
  .phase-moon-art {
    max-width: 88px !important;
    width: 88px !important;
  }

  .today-screen .phase-card h2 {
    font-size: clamp(1.55rem, 7.2vw, 2.12rem) !important;
    line-height: 0.98 !important;
  }

  .today-screen .phase-card,
  .today-screen .mirror-forecast-card,
  .today-impact-receipt {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
  }

  .mirror-hero-card {
    position: relative;
    display: grid;
    gap: 16px;
    border-color: rgba(255, 247, 238, 0.09);
    background:
      radial-gradient(circle at 18% 0%, rgba(200, 115, 107, 0.13), transparent 36%),
      linear-gradient(145deg, rgba(255, 247, 238, 0.075), rgba(255, 247, 238, 0.035));
  }

  .mirror-hero-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 247, 238, 0.1);
  }

  .mirror-advisor-prompt {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 247, 238, 0.09);
    border-radius: 18px;
    background: rgba(5, 5, 10, 0.18);
  }

  .mirror-advisor-prompt span,
  .mirror-memory-line span,
  .impact-memory-line span {
    color: rgba(255, 247, 238, 0.58);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mirror-advisor-prompt strong {
    color: var(--lurei-warm-cream, #fff7ee);
    font-size: 1rem;
  }

  .phase-card .phase-hero-grid,
  .today-screen .phase-card .phase-hero-grid {
    gap: 16px;
  }

  .phase-card h2,
  .mirror-forecast-card h2,
  .screen-title,
  .entry-copy h1 {
    line-height: 1.02;
    text-wrap: balance;
  }

  .mirror-forecast-card,
  .today-impact-receipt,
  .routine-card,
  .recommendation-stack,
  .product-grid,
  .saved-products-grid,
  .vanity-product-grid {
    margin-top: var(--lurei-mobile-section-gap);
  }

  .today-screen .mirror-forecast-card {
    margin-top: 16px !important;
  }

  .today-screen .mirror-forecast-card h2 {
    font-size: clamp(1.45rem, 6.4vw, 1.95rem) !important;
  }

  .diagnosis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .diagnosis-grid button {
    min-height: 56px !important;
    padding: 12px 10px !important;
    font-size: 0.92rem !important;
  }

  .mirror-memory-line,
  .impact-memory-line,
  .impact-tomorrow-line,
  .reminder-saved-note {
    line-height: 1.45;
  }

  .mirror-memory-line {
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 247, 238, 0.08);
  }

  .today-impact-receipt {
    display: grid;
    gap: 14px;
    box-shadow: var(--lurei-focus-glow);
  }

  .impact-card-grid {
    grid-template-columns: 1fr;
  }

  .today-impact-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .today-impact-steps em {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
  }

  .impact-card-grid,
  .reminder-moment-grid {
    gap: 12px;
  }

  .diagnosis-grid,
  .mirror-action-grid,
  .problem-tile-grid,
  .shelf-filter-row,
  .routine-mode-controls {
    gap: 10px;
  }

  .diagnosis-grid button,
  .mirror-action-grid button,
  .problem-tile-grid button,
  .shelf-filter-row button,
  .routine-mode-controls button,
  .phase-primary-action,
  .button,
  .bottom-nav button {
    min-height: 44px;
  }

  .product-card {
    padding: 0;
    overflow: hidden;
  }

  .product-card .product-preview {
    min-height: 154px;
    max-height: 190px;
  }

  .product-card-body {
    padding: 16px;
    gap: 10px;
  }

  .product-card h3 {
    line-height: 1.08;
  }

  .product-card .product-reason,
  .product-card .memory-note,
  .product-card .left-out-note {
    line-height: 1.45;
  }

  .routine-step,
  .routine-step-card {
    padding: 16px;
  }

  .discover-screen > .screen-inner > .screen-header.compact {
    display: none !important;
  }

  .discover-screen .troubleshoot-base-section {
    padding: 18px !important;
  }

  .discover-screen .troubleshoot-base-section .section-row {
    margin-bottom: 12px !important;
  }

  .discover-screen .troubleshoot-base-section h2 {
    font-size: clamp(1.95rem, 10vw, 2.65rem) !important;
    line-height: 0.98 !important;
    max-width: 9ch;
  }

  .troubleshoot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .troubleshoot-grid button {
    min-height: 96px !important;
    padding: 14px !important;
  }

  .troubleshoot-grid button span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .shelf-screen .screen-header.compact,
  .vanity-memory-hero {
    padding: 16px 18px !important;
  }

  .shelf-screen .screen-header.compact h1,
  .vanity-memory-hero h1,
  .vanity-memory-hero h2 {
    font-size: clamp(2rem, 10vw, 2.7rem) !important;
    line-height: 0.96 !important;
  }

  .shelf-screen .screen-header.compact p,
  .vanity-memory-hero p {
    font-size: 0.95rem !important;
    line-height: 1.42 !important;
  }

  .owned-product-card {
    padding: 16px 18px !important;
  }

  .owned-product-card h2 {
    font-size: clamp(1.86rem, 9vw, 2.45rem) !important;
    line-height: 0.98 !important;
  }

  .owned-product-card input,
  .owned-product-card .button {
    min-height: 48px !important;
  }

  .cycle-screen > .screen-inner > .screen-hero,
  .cycle-screen > .screen-inner > .oracle-header {
    display: none !important;
  }

  .cycle-rhythm-hero,
  .oracle-card {
    padding: 18px !important;
  }

  .cycle-rhythm-hero {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .cycle-rhythm-hero .oracle-moon-stage,
  .cycle-rhythm-hero .cinematic-oracle-moon {
    width: 90px !important;
  }

  .cycle-rhythm-hero h2 {
    font-size: clamp(1.55rem, 7.4vw, 2.05rem) !important;
    line-height: 1 !important;
  }

  .cycle-rhythm-hero .oracle-next-shift {
    padding: 12px !important;
  }

  .cycle-rhythm-hero .oracle-next-shift span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cycle-rhythm-hero .oracle-action,
  .phase-primary-action {
    min-height: 48px !important;
  }

  .reminder-product-card,
  .notification-connect-card {
    padding: var(--lurei-mobile-card-pad);
  }

  .reminder-card-header {
    align-items: flex-start;
    gap: 12px;
  }

  .reminder-status-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .reminder-card-header .reminder-status-pill {
    display: none;
  }

  .reminder-moment {
    min-height: 58px;
    padding: 13px 14px;
  }

  .reminder-moment input {
    flex: 0 0 auto;
  }

  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(360px, calc(100vw - 28px)) !important;
    padding: 5px !important;
    gap: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
  }

  .bottom-nav::before {
    top: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    width: calc((100% - 20px) / 5) !important;
    border-radius: 999px !important;
  }

  .bottom-nav button {
    min-height: 42px !important;
    padding: 6px 4px !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
    gap: 0 !important;
  }

  .bottom-nav button span,
  .bottom-nav button small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-screen.is-guest-profile .profile-hero {
    padding: 16px !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .profile-screen.is-guest-profile .profile-hero h1 {
    font-size: clamp(1.55rem, 7.4vw, 2rem) !important;
    line-height: 1 !important;
  }

  .profile-screen.is-guest-profile .profile-hero p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .profile-screen [data-auth-panel],
  .profile-screen .account-form,
  .profile-screen .auth-tabs,
  .profile-screen .oauth-actions {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .profile-screen [data-auth-panel] {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .profile-screen .auth-tabs {
    grid-template-columns: 1fr 1fr !important;
  }

  .profile-screen .auth-tabs button {
    min-width: 0 !important;
    white-space: normal !important;
  }

  .profile-screen .account-form {
    padding: 14px !important;
  }

  .profile-screen .account-form input {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .entry-scene {
    padding-inline: var(--lurei-mobile-gutter);
  }

  .today-screen .today-header {
    padding-top: 8px;
  }

  .today-screen .phase-card .today-moon-reveal .phase-moon-art,
  .phase-moon-art {
    max-width: 82px !important;
    width: 82px !important;
  }

  .phase-card h2 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .mirror-forecast-card h2,
  .today-impact-receipt h3 {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }

  .bottom-nav {
    width: min(354px, calc(100vw - 24px)) !important;
    padding: 5px !important;
  }

  .bottom-nav button {
    font-size: 0.64rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase-card,
  .mirror-forecast-card,
  .today-impact-receipt,
  .product-card,
  .bottom-sheet {
    transition-duration: 1ms;
    animation-duration: 1ms;
  }
}