/* RIPA brand (Bjorn 2026-10-27): the launch splash and the sign-in screen are a winter sky with
   the ptarmigan ridge (assets/ripa-scene.svg) at the bottom, and the dark "rıpa" wordmark with
   the red comb as the i-dot. Loaded last so it wins over the older photo backgrounds. */
:root { --ripa-sky-top:#b3cde8; --ripa-sky-bottom:#e8f0f8; --ripa-ink:#16181c; --ripa-ink-soft:#2d3b4a; }

html body .app-splash,
html body .auth-gate,
html body.vertex-v3 .auth-gate {
  background:
    url('/assets/ripa-scene.svg') center bottom / auto min(40dvh, 96vw) no-repeat,
    linear-gradient(180deg, var(--ripa-sky-top) 0%, var(--ripa-sky-bottom) 100%) !important;
  color:var(--ripa-ink);
}
html body .app-splash { place-items:start center; padding-top:max(22dvh, env(safe-area-inset-top)); }
html body .app-splash img,
html body .app-splash-brand img { width:min(52vw, 210px); filter:none; }
html body .app-splash-slogan { margin-top:14px; padding-top:0; color:var(--ripa-ink-soft); opacity:1; text-shadow:none;
  font:600 17px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing:.01em; text-transform:none; }
html body .app-splash-slogan::before { display:none; }

/* Sign-in: the wordmark sits in the sky above the card; the bird stays visible under it. */
html body .auth-gate { place-items:start center; }
html body .auth-gate-shell { margin:max(8dvh, 12px) auto auto; }
html body .auth-gate-brand,
html body.vertex-v3 .auth-gate-brand { filter:none; }
html body .auth-gate-brand img,
html body.vertex-v3 .auth-gate-brand img { width:min(44vw, 170px) !important; }
html body .auth-gate-brand p { margin-top:4px; color:var(--ripa-ink-soft); font:600 15px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing:.01em; text-transform:none; }

/* Start page and desktop menu marks. */
.landing-logo img { display:block; height:26px; width:auto; }
@media (min-width:900px) {
  html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-brand { width:40px; height:40px; border-radius:10px;
    background:url('/vertex-icon.svg') center / cover no-repeat; }
}
/* Short phones: a smaller ridge so the card does not hide the bird's face. */
@media (max-height:720px) {
  html body .auth-gate, html body.vertex-v3 .auth-gate { background-size:auto 24dvh, auto !important; }
}

/* Start screen (Bjorn 2026-10-28, from his mockup): cream page, the RIPA mark up top, the mountain landscape at full
   width with its sky running up behind the slogan, and the activity choice under the hill. Ski is open; Bike and Hike
   are shown as coming. */
html body .app-splash.ripa-start { display:flex!important; flex-direction:column; align-items:center; overflow:hidden; padding:0!important;
  background:#fcf9f3!important; color:#1b2a40; font-family:"Avenir Next","Avenir",system-ui,-apple-system,"Segoe UI",sans-serif; }
html body .app-splash.ripa-start .app-splash-brand { position:relative; z-index:1; flex:none; margin-top:calc(env(safe-area-inset-top,0px) + 4.5dvh); }
html body .app-splash.ripa-start img.ripa-start-logo { display:block; width:min(46vw,230px,24dvh); height:auto; filter:none; }
html body .app-splash.ripa-start .ripa-start-land { flex:0 1 auto; width:100%; max-width:640px; aspect-ratio:1173/1385; min-height:0; margin-top:-15vw;
  background:linear-gradient(180deg,#fcf9f3 0%,#fcf9f300 16%) top / 100% 100% no-repeat, url('/assets/ripa-start-land.webp') center bottom / cover no-repeat; }
html body .app-splash.ripa-start .ripa-start-choice { flex:none; display:grid; justify-items:center; gap:14px; width:100%; max-width:460px; box-sizing:border-box; margin-top:auto;
  padding:6px max(20px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px)); }
html body .app-splash.ripa-start .ripa-start-choice[hidden] { display:none; }
html body .app-splash.ripa-start .ripa-start-choice h2 { margin:0; font:650 20px/1.25 inherit; font-family:inherit; color:#2b3a4e; letter-spacing:.005em; }
html body .app-splash.ripa-start .ripa-start-acts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; }
html body .app-splash.ripa-start .ripa-start-acts button { display:grid; justify-items:center; align-content:center; gap:4px; min-height:94px; padding:12px 4px; border:1px solid #cdd4de; border-radius:20px;
  background:#fffdfa; color:#1b2a40; font-family:inherit; cursor:pointer; box-shadow:0 1px 2px #1b2a400d; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, background .12s ease; }
html body .app-splash.ripa-start .ripa-start-acts button:active:not(:disabled) { transform:scale(.97); background:#f1f4f8; }
html body .app-splash.ripa-start .ripa-start-acts svg { width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
html body .app-splash.ripa-start .ripa-start-acts b { font:700 17px/1.15 inherit; font-family:inherit; }
html body .app-splash.ripa-start .ripa-start-acts button:disabled { cursor:default; color:#9aa4b2; border-color:#e3e7ec; background:#fbf9f5; box-shadow:none; }
html body .app-splash.ripa-start .ripa-start-acts small { font:600 11px/1.2 inherit; font-family:inherit; color:#a2abb7; }
html body .app-splash.ripa-start .ripa-start-choice p { margin:2px 0 0; font:500 15px/1.3 inherit; font-family:inherit; color:#5d6a7a; }
html body .app-splash.ripa-start:not(.choosing) .ripa-start-land { margin-bottom:auto; }
@media (max-height:720px) {
  html body .app-splash.ripa-start .app-splash-brand { margin-top:calc(env(safe-area-inset-top,0px) + 2.5dvh); }
  html body .app-splash.ripa-start img.ripa-start-logo { width:min(38vw,150px); }
  html body .app-splash.ripa-start .ripa-start-land { margin-top:-2vw; }
  html body .app-splash.ripa-start .ripa-start-choice { gap:10px; }
  html body .app-splash.ripa-start .ripa-start-choice h2 { font-size:18px; }
  html body .app-splash.ripa-start .ripa-start-acts button { min-height:80px; padding:8px 4px; }
  html body .app-splash.ripa-start .ripa-start-acts svg { width:36px; height:36px; }
}