/* LUNAA · Brand System
   ---------------------
   Editorial warmth meets clinical clarity. Soft coral palette, Instrument Serif
   display + Geist body. Phase-keyed accent system shifts the whole app's tone
   based on where you are in your cycle.
*/

/* Self-hosted fonts (SIL OFL) — no Google Fonts request, keeps the app fully
   local + offline. Geist is a variable font: one file per subset covers all
   weights. URLs are relative to build/app.css. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand neutrals */
  --ln-cream:        #FFF5F2;
  --ln-mist:         #FFE9E1;
  --ln-rose-bg:      #FFE4E1;
  --ln-blush:        #FFD4C5;
  --ln-ink:          #2D0F1A;
  --ln-ink-soft:     #5A3540;
  --ln-ink-muted:    #8A6B75;
  --ln-line:         rgba(45, 15, 26, 0.08);
  --ln-line-strong:  rgba(45, 15, 26, 0.16);

  /* Phase palette · drives the entire app feel */
  --ln-phase-menstrual:   #C73E5A;
  --ln-phase-follicular:  #FF8FA8;
  --ln-phase-ovulation:   #FFB07A;
  --ln-phase-luteal:      #B98EC4;

  /* Live tokens — get rewritten when phase changes (kept on root for demo) */
  --ln-accent:           var(--ln-phase-luteal);
  --ln-accent-soft:      #E8D4F0;
  --ln-accent-ink:       #6B4E8C;

  /* Type */
  --ln-serif:  'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --ln-sans:   'Geist', -apple-system, 'SF Pro Text', system-ui, sans-serif;

  /* Radii — soft and humane */
  --ln-r-sm: 10px;
  --ln-r-md: 18px;
  --ln-r-lg: 28px;
  --ln-r-xl: 36px;
  --ln-r-pill: 999px;

  /* Shadows */
  --ln-shadow-sm:  0 1px 2px rgba(45,15,26,0.04), 0 2px 8px rgba(45,15,26,0.04);
  --ln-shadow-md:  0 4px 12px rgba(45,15,26,0.06), 0 12px 32px rgba(45,15,26,0.08);
  --ln-shadow-lg:  0 12px 32px rgba(199,62,90,0.12), 0 32px 64px rgba(45,15,26,0.10);
  --ln-glow:       0 0 40px var(--ln-accent);

  --ln-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ln-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Safe-area aware padding — keeps content clear of dynamic island + home indicator.
     env() returns 0 in desktop preview, so the iPhone-frame mode still gets the
     hardcoded 54px gap below the simulated status bar. */
  --ln-pad-top:    max(54px, calc(env(safe-area-inset-top) + 12px));
  --ln-pad-bottom: calc(118px + env(safe-area-inset-bottom));
  --ln-tab-h:      calc(72px + env(safe-area-inset-bottom));
}

/* Phase-specific themes — added as className on root */
.phase-menstrual  { --ln-accent: var(--ln-phase-menstrual);  --ln-accent-soft: #FAD5DD; --ln-accent-ink: #8C2A3F; }
.phase-follicular { --ln-accent: var(--ln-phase-follicular); --ln-accent-soft: #FFE1E8; --ln-accent-ink: #B85F77; }
.phase-ovulation  { --ln-accent: var(--ln-phase-ovulation);  --ln-accent-soft: #FFE5D1; --ln-accent-ink: #B07347; }
.phase-luteal     { --ln-accent: var(--ln-phase-luteal);     --ln-accent-soft: #E8D4F0; --ln-accent-ink: #6B4E8C; }

/* App canvas — every screen mounts inside */
.lunaa-app {
  font-family: var(--ln-sans);
  color: var(--ln-ink);
  background: var(--ln-rose-bg);
  letter-spacing: -0.01em;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.lunaa-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.lunaa-scroll::-webkit-scrollbar { display: none; }

/* Typography utilities */
.ln-serif { font-family: var(--ln-serif); font-weight: 400; letter-spacing: -0.02em; }
.ln-serif-i { font-family: var(--ln-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Soft top status fade so iOS clock sits on warmer ground */
.ln-status-fade {
  position: absolute; top: 0; left: 0; right: 0; height: 88px;
  background: linear-gradient(to bottom, var(--ln-cream) 0%, transparent 100%);
  pointer-events: none; z-index: 5;
}

/* Reusable pill button */
.ln-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; min-height: 50px;
  font: 500 15px/1 var(--ln-sans); letter-spacing: -0.01em;
  border-radius: var(--ln-r-pill); border: 0; cursor: pointer;
  transition: transform .18s var(--ln-ease), box-shadow .18s var(--ln-ease), background .18s var(--ln-ease);
}
.ln-btn-primary { background: var(--ln-ink); color: var(--ln-cream); }
.ln-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--ln-shadow-md); }
.ln-btn-accent { background: var(--ln-accent); color: white; }
.ln-btn-ghost { background: transparent; color: var(--ln-ink); border: 1px solid var(--ln-line-strong); }

/* Card */
.ln-card {
  background: var(--ln-cream);
  border-radius: var(--ln-r-lg);
  padding: 20px;
  box-shadow: var(--ln-shadow-sm);
}

/* Chip */
.ln-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--ln-r-pill);
  background: var(--ln-cream); color: var(--ln-ink);
  font: 500 13px/1 var(--ln-sans); letter-spacing: -0.01em;
  border: 1px solid var(--ln-line);
  cursor: pointer; user-select: none;
  transition: all .15s var(--ln-ease);
}
.ln-chip.active {
  background: var(--ln-ink); color: var(--ln-cream); border-color: var(--ln-ink);
}
.ln-chip.accent.active {
  background: var(--ln-accent); border-color: var(--ln-accent); color: white;
}

/* Tiny eyebrow label */
.ln-eyebrow {
  font: 500 11px/1 var(--ln-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ln-ink-muted);
}

/* Section label */
.ln-section-title {
  font: 400 28px/1.05 var(--ln-serif);
  letter-spacing: -0.02em;
}

/* Number with serif italic — signature LUNAA flourish */
.ln-num {
  font-family: var(--ln-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
}

/* Animations */
@keyframes ln-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.04); opacity: 1; }
}
@keyframes ln-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ln-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes ln-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ln-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 var(--ln-accent); opacity: 1; }
  50%      { box-shadow: 0 0 0 16px transparent; opacity: 0.85; }
}

.ln-fade-in { animation: ln-fade-up .6s var(--ln-ease) both; }
.ln-breathe { animation: ln-breathe 4s ease-in-out infinite; }

/* Stagger helper */
.ln-fade-in.delay-1 { animation-delay: .08s; }
.ln-fade-in.delay-2 { animation-delay: .16s; }
.ln-fade-in.delay-3 { animation-delay: .24s; }
.ln-fade-in.delay-4 { animation-delay: .32s; }
.ln-fade-in.delay-5 { animation-delay: .40s; }
.ln-fade-in.delay-6 { animation-delay: .48s; }

/* Animation intensity toggle */
.anim-off .ln-fade-in,
.anim-off .ln-breathe,
.anim-off [data-anim] {
  animation: none !important;
}

/* iOS status bar text override inside app */
.lunaa-app .ios-status-text { color: var(--ln-ink); }

/* Frosted backdrop behind the iOS status bar / dynamic island. Pure blur —
   no color tint — so it inherits whatever the underlying screen is showing
   (cream on the welcome gradient, rose on the home, etc.) and just softens
   any content that scrolls under it. */
.ln-top-blur {
  position: absolute; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  /* Pure blur, NO saturate — saturate(170%) tinted the safe-area strip pinker
     than the content below it, making a visible seam under the island on device
     (invisible in web preview where safe-area-inset-top is 0). */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
  z-index: 25;
}

/* Tab switch transition */
@keyframes ln-tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ln-tab-fade { animation: ln-tab-in .28s var(--ln-ease-out) both; }

/* ── Doctor export · print isolation ──────────────────────────────────────
   The report is rendered into a body-level portal (.ln-print-area), hidden on
   screen. When the user prints (Share / Save PDF → window.print()), we hide
   the whole app and show only that clean document. Because it sits directly
   under <body>, it escapes the iOS device frame's transform/overflow. */
.ln-print-area { display: none; }

@media print {
  html, body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  /* Hide the app (and everything else at body level) — show only the report. */
  body > *:not(.ln-print-area) { display: none !important; }
  .ln-print-area {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    color: #000;
  }
  /* Flatten the on-paper card chrome for clean printing. */
  .ln-print-area .ln-doc {
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  @page { margin: 14mm; }
}