/* home2.css: black member/guest home (Paper "Home member v2 black") */

/* the black ground (same values as the flow B tokens in onboard.css) */
.home2 { --h2-ground: #0B0B0B; --h2-raised: #1C1B1A; --h2-photo-pos: 45% 40%; }
body[data-screen="home"] #app { background: #0B0B0B; } /* html/body + Safari edges: home2.js edges */
body[data-screen="home"] .screen { background: #0B0B0B; padding-bottom: 0; }

.home2 {
  position: relative; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh; padding-bottom: 0; overflow: clip;
  background: var(--h2-ground); color: var(--white);
}

/* ---------- photo + greeting ---------- */
.home2-hero {
  position: relative; flex: 1 0 auto; min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--safe-top) + 72px) var(--gutter) 56px;
}
/* the photo runs 28px under the panel, so the panel's rounded top sits on it */
.home2-photo {
  position: absolute; top: 0; left: 0; right: 0; bottom: -28px;
  background: var(--h2-ground) url(../images/attract/1.jpg) var(--h2-photo-pos) / cover no-repeat;
}
.home2-photo::before {
  /* the top edge melts into one flat sky colour (--h2-sky, set by home2.js), so Safari's
     status bar tint and the top edge strip continue the photo without a seam */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(max(12px, env(safe-area-inset-top)) + 40px);
  background: linear-gradient(180deg, var(--h2-sky) 0, var(--h2-sky) max(12px, env(safe-area-inset-top)), transparent 100%);
}
.home2-photo::after {
  /* eased fade (many stops) so there is no visible start line where it begins */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 380px;
  background: linear-gradient(180deg,
    rgb(11 11 11 / 0) 0%, rgb(11 11 11 / 0.03) 12%, rgb(11 11 11 / 0.08) 22%, rgb(11 11 11 / 0.16) 32%,
    rgb(11 11 11 / 0.28) 42%, rgb(11 11 11 / 0.43) 52%, rgb(11 11 11 / 0.6) 62%, rgb(11 11 11 / 0.76) 72%,
    rgb(11 11 11 / 0.89) 81%, rgb(11 11 11 / 0.97) 89%, var(--h2-ground) 95%);
}
.home2-disc {
  position: absolute; z-index: 1; top: calc(var(--safe-top) + 4px); left: 16px;
  width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.home2-disc img { width: 30px; height: 26px; object-fit: contain; }
.home2-top {
  position: absolute; z-index: 1; top: calc(var(--safe-top) + 6px); right: 16px;
  display: flex; align-items: center; gap: 8px;
}
.home2-title {
  position: relative; max-width: 100%;
  font-family: var(--f-stripes); font-weight: 900; text-transform: uppercase;
  font-size: 52px; line-height: 50px; color: var(--white); overflow-wrap: anywhere;
}

/* nav-filled header on the photo: dark points pill / guest Sign in pill, white avatar */
.home2 .nav-hero-pill {
  gap: 6px; padding: 0 16px 0 14px; background: var(--h2-raised); color: var(--white);
  font-size: 17px; line-height: 20px; transition: transform var(--dur-fast) var(--ease);
}
.home2 .nav-hero-pill:active { transform: scale(0.96); }
.home2 .nav-acct.is-member { background: var(--white); color: var(--h2-ground); }
.home2 .nav-acct-i { font-size: 17px; line-height: 20px; }
.home2 .nav-acct-dot { border-color: var(--h2-ground); }

/* ---------- black panel ---------- */
.home2-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 24px 16px calc(var(--safe-bottom) + var(--foot-gap));
  border-radius: var(--r-card) var(--r-card) 0 0; background: var(--h2-ground);
}
.home2-loc {
  display: flex; align-items: center; gap: 8px; padding: 0 4px 8px;
  font-size: 15px; line-height: 20px; color: var(--white);
}
.home2-loc-ico { flex-shrink: 0; }
.home2-loc-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home2-change {
  position: relative; flex-shrink: 0; color: var(--white); font-size: 15px; line-height: 20px; font-weight: 500;
  text-decoration: underline 1px; text-underline-offset: 3px;
}
.home2-change::after { content: ""; position: absolute; inset: -12px -8px; }

.home2-modes { display: flex; flex-direction: column; gap: 10px; }
.home2-row {
  display: flex; align-items: center; gap: 14px; width: 100%; height: 76px; flex-shrink: 0;
  padding: 0 18px 0 20px; border-radius: var(--r-tile); background: var(--h2-raised);
  color: var(--white); text-align: left;
  transition: transform var(--dur-fast) var(--ease);
}
.home2-row:active { transform: scale(0.98); }
.home2-row-ico { flex-shrink: 0; color: var(--red); }
.home2-row-name { flex: 1 1 0; min-width: 0; font-family: var(--f-sans); font-size: 22px; line-height: 24px; }
.home2-dot {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; background: var(--red); color: var(--white);
}

/* product owner flow switch: tiny, quiet, bottom right */
/* country and language row under the choices; the flow switch sits at its right edge, out of the flow */
.home2-locale { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; height: 44px; margin-top: 4px; font-size: 13px; line-height: 16px; color: #A39E97; }
.home2-country { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-size: 13px; line-height: 16px; }
.home2-country span { text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: #55524E; }
.home2-sep { width: 1px; height: 14px; background: #2A2928; }
.home2-lang { font-size: 13px; line-height: 16px; color: #A39E97; padding: 6px 0; }
.home2-lang.is-on { color: var(--white); font-weight: 600; }
.home2-flow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--white); }

/* no entrance of its own: the page change (core.js View Transition) already brings it in, and a
   CSS entrance replayed on every in-place redraw (sign in, log out, language) and made rows pop late */