/* ================================================================
   Girl Harmony — Layout / Device shell / Tab bar
   ================================================================ */

/* ---------- Device frame for desktop preview ----------
   Two layout modes:
   • Standalone (mobile / phone viewport): .app-stage is fixed-fullscreen
     and the device fills the screen.
   • Embedded inside .desktop-device-pane (desktop landing page): the rules
     below are overridden so the iPhone sits inline within the marketing
     layout. See `.desktop-shell .app-stage` overrides further down. */
.app-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2A1A12 0%, #4A2F22 100%);
  overflow: hidden;
}

/* ---------- Desktop shell mode (>= 900px viewport) ----------
   When the app is embedded inside the marketing landing, take the iPhone
   out of fixed positioning so it lives inside the right-side device pane,
   and drop the dark stage backdrop (the landing already has its own bg). */
.desktop-shell .app-stage {
  position: relative;
  inset: auto;
  width: var(--device-w);
  height: var(--device-h);
  max-height: calc(100vh - 80px);
  background: transparent;
  overflow: visible;
}
.desktop-shell .app-stage::before,
.desktop-shell .app-stage::after { display: none; }
.desktop-shell .device {
  max-height: calc(100vh - 80px);
}
.app-stage::before, .app-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
}
.app-stage::before {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--gh-plum-500), transparent 70%);
  top: -100px; right: -100px;
  animation: stage-drift 22s ease-in-out infinite;
}
.app-stage::after {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--gh-plum-300), transparent 70%);
  bottom: -150px; left: -100px;
  opacity: 0.30;
  animation: stage-drift 26s ease-in-out infinite reverse;
}
@keyframes stage-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, -30px); }
}

.device {
  position: relative;
  width: var(--device-w);
  height: var(--device-h);
  max-height: calc(100vh - 32px);
  background: var(--bg);
  border-radius: 56px;
  overflow: hidden;
  box-shadow:
    0 0 0 12px #1a0d07,
    0 0 0 14px #3a2418,
    0 60px 120px rgba(0,0,0,0.55),
    0 30px 60px rgba(0,0,0,0.4);
  z-index: 2;
}
/* iPhone notch */
.device::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 32px;
  background: #1a0d07;
  border-radius: var(--r-pill);
  z-index: 100;
  pointer-events: none;
}
/* Status bar */
.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--safe-top);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  z-index: 30;
  pointer-events: none;
  font-feature-settings: "tnum";
}
.status-bar-icons {
  display: flex; gap: 6px; align-items: center;
}

/* On phone-shaped viewports, hide the desktop landing entirely and drop
   the device frame so the app fills the screen. The breakpoint is wider
   than the old 480px because the desktop landing needs real horizontal
   room for the marketing copy + the embedded phone preview to coexist. */
@media (max-width: 899px), (max-height: 700px) {
  .desktop-shell { display: none !important; }
  body { overflow: hidden; }
  .app-stage { background: var(--bg); padding: 0; position: fixed; inset: 0; }
  .app-stage::before, .app-stage::after { display: none; }
  .device {
    width: 100%; height: 100%;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
  .device::before { display: none; }
}

/* On desktop (>= 900px), let the page scroll vertically (the desktop
   landing has marketing content beyond the fold). The stage no longer
   covers the viewport — it's embedded inside .desktop-device-pane. */
@media (min-width: 900px) {
  html, body { overflow: auto; height: auto; }
  body { background: #FBF7F2; }
}

/* ---------- Screen system ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.screen.is-active { display: flex; animation: screenIn var(--d-base) var(--ease-out); }
@keyframes screenIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Subtle staggered entrance for cards/sections inside the active scroll */
.screen.is-active .scroll > *:not(.top-bar):not(.status-bar) {
  animation: rise-in 520ms var(--ease-out) both;
}
.screen.is-active .scroll > *:nth-child(1)  { animation-delay:  20ms; }
.screen.is-active .scroll > *:nth-child(2)  { animation-delay:  60ms; }
.screen.is-active .scroll > *:nth-child(3)  { animation-delay: 100ms; }
.screen.is-active .scroll > *:nth-child(4)  { animation-delay: 140ms; }
.screen.is-active .scroll > *:nth-child(5)  { animation-delay: 180ms; }
.screen.is-active .scroll > *:nth-child(6)  { animation-delay: 220ms; }
.screen.is-active .scroll > *:nth-child(7)  { animation-delay: 250ms; }
.screen.is-active .scroll > *:nth-child(n+8){ animation-delay: 280ms; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .screen.is-active .scroll > * { animation: none !important; }
  .phase-ring, .phase-ring svg circle { animation: none !important; }
  .tab.is-fab .tab-icon { animation: none !important; }
}

/* ---------- Top bar ---------- */
.top-bar {
  height: 56px;
  padding: 0 var(--s-5);
  padding-top: var(--safe-top);
  height: calc(56px + var(--safe-top));
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
  justify-content: space-between;
  gap: var(--s-3);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.top-bar-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: var(--tracking-tight);
  flex: 1;
}
.top-bar-back {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gh-cream-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.top-bar-action {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: transparent;
  flex-shrink: 0;
}

/* ---------- Scroll body ---------- */
.scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-2) var(--s-5) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-5));
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.scroll::-webkit-scrollbar { width: 0; }

/* ---------- Tab bar ---------- */
.tab-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: calc(64px + var(--safe-bottom));
  padding: 6px 8px calc(var(--safe-bottom) - 14px);
  background:
    linear-gradient(180deg, rgba(251, 247, 242, 0) 0%, rgba(251, 247, 242, 0.94) 36%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(236, 224, 209, 0.6);
  display: flex;
  z-index: 20;
}
.tab-bar[hidden] { display: none !important; }
/* Sliding indicator that follows the active tab — sits behind the icon.
   The exact x/y is set by GH.moveTabIndicator so it stays centered on the
   icon (which itself shifts slightly on active state). */
.tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 36px;
  border-radius: 999px;
  background: var(--gh-plum-100);
  transition:
    transform 460ms cubic-bezier(0.34, 1.36, 0.64, 1),
    width 320ms var(--ease-out),
    height 320ms var(--ease-out),
    opacity var(--d-fast);
  pointer-events: none;
  z-index: 0;
  will-change: transform, width, height;
  opacity: 0;
}
.tab-bar[data-active] .tab-indicator { opacity: 1; }

/* ---------- Theme switcher (preview chrome — not part of the app) ---------- */
.theme-switcher {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 16px;
  background: rgba(248, 244, 238, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
  animation: switcher-in 480ms var(--ease-out) 200ms both;
}
@keyframes switcher-in {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.theme-switcher-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gh-cocoa-500);
  padding-right: 4px;
}
.theme-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    transform var(--d-fast) var(--ease-out);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--gh-cocoa-700);
  letter-spacing: 0.01em;
}
.theme-swatch:hover { background: rgba(255, 255, 255, 0.6); }
.theme-swatch:active { transform: scale(0.96); }
.theme-swatch-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
.theme-swatch.is-active {
  background: #fff;
  border-color: var(--gh-cocoa-700);
  box-shadow: 0 4px 12px rgba(60, 36, 23, 0.16);
}
.theme-swatch-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gh-cocoa-700);
}

/* On smaller phone-shaped viewports, hide the floating switcher chrome */
@media (max-width: 480px), (max-height: 700px) {
  .theme-switcher {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    transform: none;
    justify-content: center;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
  }
  @keyframes switcher-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .theme-switcher-label { display: none; }
  .theme-swatch-name { font-size: 11px; }
  .theme-swatch-dot { width: 18px; height: 18px; }
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--gh-cocoa-300);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color var(--d-fast) var(--ease-soft);
  letter-spacing: 0.02em;
  z-index: 1;
}
.tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  transition: transform var(--d-base) var(--ease-out), color var(--d-fast);
}
.tab-icon svg { display: block; }
.tab.is-active { color: var(--gh-plum-700); }
.tab.is-active .tab-icon {
  transform: scale(1.12) translateY(-1px);
  color: var(--gh-plum-500);
}
.tab.is-fab {
  position: relative;
}
.tab.is-fab .tab-icon {
  position: absolute;
  top: -24px;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--gh-plum-500), var(--gh-plum-700));
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 4px var(--bg),
    0 12px 32px rgba(107, 76, 154, 0.55),
    0 6px 16px rgba(107, 76, 154, 0.32);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast);
  animation: fab-pulse 3.6s ease-in-out infinite;
}
.tab.is-fab .tab-icon::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 50%);
  pointer-events: none;
}
.tab.is-fab:active .tab-icon { transform: scale(0.92); }
.tab.is-fab span:not(.tab-icon) { margin-top: 32px; color: var(--gh-plum-700); }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--bg), 0 12px 32px rgba(107, 76, 154, 0.55), 0 6px 16px rgba(107, 76, 154, 0.32); }
  50%      { box-shadow: 0 0 0 4px var(--bg), 0 14px 38px rgba(107, 76, 154, 0.65), 0 8px 22px rgba(107, 76, 154, 0.40); }
}

/* ---------- Containers / utility ---------- */
.stack { display: flex; flex-direction: column; }
.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }

.row-h { display: flex; align-items: center; }
.row-h-2 { display: flex; align-items: center; gap: var(--s-2); }
.row-h-3 { display: flex; align-items: center; gap: var(--s-3); }
.row-h-4 { display: flex; align-items: center; gap: var(--s-4); }
.row-h-between { display: flex; align-items: center; justify-content: space-between; }
.flex-1 { flex: 1; min-width: 0; }
.grow { flex-grow: 1; }

.grid { display: grid; gap: var(--s-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.section-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: var(--s-6) 0 var(--s-3);
  letter-spacing: var(--tracking-tight);
}
.section-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--s-6) 0 var(--s-3);
}
.section-title-row .section-title { margin: 0; }
.section-title-row .see-all {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}