/*
 * app.css — inside the native app (html.app, set by app.js) the store
 * does not exist. Static cover for the asks app.js also retires, so
 * nothing priced ever paints, even before scripts settle.
 */
/* inside the app there is no daylight: the profile and login pages,
   built on the cream stylesheet's tokens, wear the night's values */
html.app.day-page {
  color-scheme: dark;
  --bg: #06080f;
  --fg: #f0eadc;
  --muted: rgba(240, 234, 220, 0.55);
  --accent: #e0b96a;
  --accent-hover: #e8c77e;
  --border: rgba(240, 234, 220, 0.16);
  --card-bg: rgba(10, 13, 26, 0.55);
  --nav-bg: rgba(6, 8, 15, 0.8);
  --error: #e08a7a;
}

html.app.day-page body {
  background:
    radial-gradient(70% 50% at 80% 10%, rgba(120, 90, 200, 0.10), transparent 60%),
    radial-gradient(60% 40% at 15% 85%, rgba(60, 140, 180, 0.08), transparent 60%),
    linear-gradient(180deg, #06080f, #0b0e1c 55%, #0d1020) !important;
  color: var(--fg);
}

html.app.day-page nav img,
html.app.day-page .logo img {
  filter: invert(1) brightness(1.7);
  opacity: 0.8;
}

/* The app's WebView runs edge to edge under the notch and the home
   indicator; the site never needed safe areas before. app.js adds
   viewport-fit=cover, and these keep every piece of fixed chrome clear. */
/* the insets live in tokens: standalone they come from env(); framed
   inside the app's shell (/pulse is the floor) env() reads zero, so
   app.js overrides these with the floor's measured values */
html.app {
  --clf-sat: max(env(safe-area-inset-top, 0px), var(--sat-floor, 0px));
  --clf-sab: env(safe-area-inset-bottom, 0px);
  --clf-sal: env(safe-area-inset-left, 0px);
  --clf-sar: env(safe-area-inset-right, 0px);
}
html.app nav { padding-top: calc(1rem + var(--clf-sat)) !important; }
html.app .topbar { top: calc(16px + var(--clf-sat)) !important; }
html.app .hud-title { top: calc(1.15rem + var(--clf-sat)) !important; }
html.app .whyp { top: calc(60px + var(--clf-sat)) !important; }
html.app .top { padding-top: var(--clf-sat) !important; }
html.app .sndbtn { bottom: calc(16px + var(--clf-sab)) !important; }
html.app .snd-hint { bottom: calc(1.6rem + var(--clf-sab)) !important; }
/* the sides, each on its own: a folding phone's inner screen carries
   its island as a vertical column, so the insets are asymmetric and no
   side may be inferred from the other. Zero on every flat phone today. */
html.app body { margin-left: var(--clf-sal); margin-right: var(--clf-sar); }
html.app nav { left: var(--clf-sal) !important; right: var(--clf-sar) !important; }
html.app .topbar { right: calc(16px + var(--clf-sar)) !important; }
html.app .whyp { right: calc(16px + var(--clf-sar)) !important; }
html.app .hud-title { left: calc(1.3rem + var(--clf-sal)) !important; }
html.app .hud-line { padding-left: calc(2rem + var(--clf-sal)) !important;
                     padding-right: calc(2rem + var(--clf-sar)) !important; }
html.app .hud-z { right: calc(4.4rem + var(--clf-sar)) !important; }
html.app.no-fs .hud-z { right: calc(1.25rem + var(--clf-sar)) !important; }
html.app .sndbtn { left: calc(16px + var(--clf-sal)) !important; }
html.app #fs2 { left: auto !important; right: calc(16px + var(--clf-sar)) !important; }
html.app .snd-hint { left: calc(4.2rem + var(--clf-sal)) !important; }
/* iOS zooms into any focused field whose text is under 16px; inside
   the app every field reads at 16px, so focus never moves the page */
html.app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html.app select,
html.app textarea { font-size: 16px !important; }
/* the nav grew by the notch; every page's content steps down with it */
html.app main { margin-top: var(--clf-sat); }

/* one room breathes into the next: cross-document view transitions.
   The pill carries its own name, so the browser treats it as the same
   object across pages — it never blinks — while the room itself passes
   through a short glass blur. Older engines simply load pages plainly. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

html.app .app-tabs { view-transition-name: app-tabs; }

/* the lens under the active tab keeps its own name across documents:
   navigating between rooms, the browser slides the highlight from the
   old tab to the new one instead of blinking it */
html.app .app-tabs a.on { view-transition-name: tab-lens; }

::view-transition-old(root) { animation: clf-vt-leave 0.26s ease both; }
::view-transition-new(root) { animation: clf-vt-enter 0.26s ease both; }

@keyframes clf-vt-leave { to { opacity: 0; filter: blur(9px); } }
@keyframes clf-vt-enter { from { opacity: 0; filter: blur(9px); } }

/* the floor of the app: a glass pill floating over the night.
   Centering by auto margins, never by transform, and the pill owns its
   compositing layer — fixed + backdrop-filter repaints are what jitter. */
html.app .app-tabs {
  position: fixed;
  left: var(--clf-sal); right: var(--clf-sar);
  bottom: calc(0.75rem + var(--clf-sab));
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100vw - 2rem - var(--clf-sal) - var(--clf-sar));
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 13, 26, 0.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(240, 234, 220, 0.14);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(240, 234, 220, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transform: translateZ(0);
  will-change: transform;
  -webkit-user-select: none;
}

html.app .app-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.16rem;
  min-width: 66px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(240, 234, 220, 0.55);
  font: 600 0.54rem 'Figtree', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

html.app .app-tabs a.on {
  color: #e0b96a;
  background: rgba(224, 185, 106, 0.12);
  box-shadow: inset 0 1px 0 rgba(240, 234, 220, 0.08);
}

html.app .app-tabs svg { width: 20px; height: 20px; }

html.app.has-tabs main { padding-bottom: 7.5rem !important; }
html.app.has-tabs .buy,
html.app.has-tabs footer { margin-bottom: 4.5rem; }

html.app .xp-buy,                /* experience: price, checkout door, Stripe note */
html.app .g-card--soon,          /* library: the "get the full library" tease card */
html.app #buy,                   /* library: the €36 block */
html.app .upsell,                /* library: the course upsell line */
html.app .trial-cta,             /* practice gates: "Get the library · €36" */
html.app .trial-dd-menu a,       /* practice gates: "Unlimited · with the library" */
html.app .door-cta[href*="pay"], /* shared-visit doors: the priced button */
html.app #course-start {         /* field: the course sales door */
  display: none !important;
}