/* ============================================================================
   NEXA SKIN - one wallpaper for every page, outside and inside.
   ----------------------------------------------------------------------------
   Loaded after each page's own <style>, so it wins on colour without touching
   any of the layout those pages already have.

     Soft Blush   #F8DDE7    Warm White  #FFF9F7    Black       #111111
     Lavender     #D9B8E4    Warm Beige  #E8D3C5    Deep Rose   #8F587D
     Mauve        #B985B5    Light Taupe #D8C4C8

   White text is only ever placed on Deep Rose or Mauve; everywhere else the
   text is black, because the pale tones cannot carry white.
   ============================================================================ */

:root {
  --nexa-blush: #F8DDE7;
  --nexa-lavender: #D9B8E4;
  --nexa-mauve: #B985B5;
  --nexa-white: #FFF9F7;
  --nexa-beige: #E8D3C5;
  --nexa-taupe: #D8C4C8;
  --nexa-ink: #111111;
  --nexa-rose: #8F587D;

  /* The names the older pages were written against, pointed at the palette. */
  --bg: #FFF9F7;
  --panel: #ffffff;
  --text: #111111;
  --muted: #8F587D;
  --pink: #8F587D;
  --purple: #B985B5;
  --coral: #8F587D;
  --line: #D8C4C8;
}

/* ---------- the wallpaper ---------- */
html { background: var(--nexa-white); }

body {
  min-height: 100vh;
  background-color: var(--nexa-white);
  background-image:
    radial-gradient(58% 44% at 84% -6%, var(--nexa-lavender) 0, rgba(217, 184, 228, 0) 62%),
    radial-gradient(52% 40% at 2% 4%, var(--nexa-blush) 0, rgba(248, 221, 231, 0) 60%),
    radial-gradient(50% 38% at 98% 88%, var(--nexa-beige) 0, rgba(232, 211, 197, 0) 58%),
    radial-gradient(46% 34% at 14% 102%, var(--nexa-blush) 0, rgba(248, 221, 231, 0) 58%),
    radial-gradient(70% 50% at 50% 50%, rgba(255, 249, 247, .55) 0, rgba(255, 249, 247, 0) 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--nexa-ink);
}

/* ---------- text ---------- */
h1 { color: var(--nexa-ink); }

/* Several pages paint h2 with a magenta gradient and a transparent fill. */
h2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--nexa-rose);
  -webkit-text-fill-color: var(--nexa-rose);
}

p, li, td, th, strong, b { color: var(--nexa-ink); }
.sub, .updated, .footer, .muted, small { color: var(--nexa-rose); }
.contact { color: var(--nexa-rose); }

a { color: var(--nexa-rose); }
a:hover { color: var(--nexa-mauve); }

/* ---------- surfaces ---------- */
.card, .panel, .box {
  background: #ffffff;
  border: 1px solid var(--nexa-taupe);
  border-radius: 20px;
  color: var(--nexa-ink);
  box-shadow: 0 12px 30px rgba(143, 88, 125, .10);
}

/* The Terms page is one white sheet rather than a stack of cards. */
.wrap { border-color: var(--nexa-taupe); }

.badge {
  background: #ffffff;
  border: 1px solid var(--nexa-taupe);
  color: var(--nexa-rose);
}

.notice {
  border-left: 4px solid var(--nexa-mauve);
  background: var(--nexa-blush);
  color: var(--nexa-ink);
}

.logo { box-shadow: 0 18px 46px rgba(143, 88, 125, .18); }

/* ---------- buttons ---------- */
.btn {
  background: linear-gradient(100deg, var(--nexa-rose), var(--nexa-mauve));
  border: 0;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(143, 88, 125, .22);
}
.btn:hover { filter: brightness(1.06); }

.btn.secondary, .btn.ghost {
  background: #ffffff;
  border: 1px solid var(--nexa-mauve);
  color: var(--nexa-rose);
  box-shadow: none;
}
.btn.secondary:hover, .btn.ghost:hover { background: var(--nexa-blush); }

/* ---------- the mail picker on the deletion page ---------- */
.mail-picker-backdrop { background: rgba(17, 17, 17, .38); }
.mail-picker-panel {
  background: #ffffff;
  border: 1px solid var(--nexa-taupe);
  box-shadow: 0 30px 80px rgba(143, 88, 125, .28);
}
.mail-picker-panel h3 { color: var(--nexa-ink); }
.mail-picker-panel .mail-hint { color: var(--nexa-rose); }
.mail-option {
  background: var(--nexa-white);
  border: 1px solid var(--nexa-taupe);
  color: var(--nexa-ink);
}
.mail-option:hover, .mail-option:focus-visible {
  border-color: var(--nexa-mauve);
  background: var(--nexa-blush);
}
.mail-option small { color: var(--nexa-rose); }
.mail-picker-close { color: var(--nexa-rose); border-color: var(--nexa-taupe); }
.mail-picker-close:hover { background: var(--nexa-blush); color: var(--nexa-ink); }
.mail-copied { color: #3f7d5c; }

/* ---------- forms ---------- */
input, textarea, select {
  background: #ffffff;
  border: 1px solid var(--nexa-taupe);
  color: var(--nexa-ink);
}
input::placeholder, textarea::placeholder { color: #8a7480; }

/* Contact block on the home page, in the warm palette. */
.contact-band { background: linear-gradient(180deg, var(--nexa-warm-white, #FBF7F5), var(--nexa-blush)); border-top: 1px solid var(--nexa-taupe); }
.contact-card { background: #fff; border: 1px solid var(--nexa-taupe); box-shadow: 0 24px 70px rgba(143, 88, 125, .16); }
.contact-card .eyebrow { color: var(--nexa-rose); }
.contact-card h2 { color: var(--nexa-ink); -webkit-text-fill-color: var(--nexa-ink); }
.contact-mail { background: linear-gradient(100deg, var(--nexa-rose), var(--nexa-mauve)); color: #fff !important; box-shadow: 0 16px 40px rgba(143, 88, 125, .35), inset 0 1px 1px rgba(255,255,255,.45); }
.contact-mail:hover { box-shadow: 0 22px 50px rgba(143, 88, 125, .45), inset 0 1px 1px rgba(255,255,255,.45); }
.contact-mail .contact-ico { background: rgba(255,255,255,.28); }
.contact-card p { color: var(--nexa-rose); }
footer a { color: var(--nexa-rose); font-weight: 800; }

/* ---------- pre-launch "notify me" strip ---------- */
.notify { padding: 26px clamp(20px,7vw,110px) 54px; }
.notify-card { max-width: 760px; margin: auto; padding: 34px clamp(20px,4vw,44px); border: 1px solid var(--line); border-radius: 26px; background: #ffffffcc; backdrop-filter: blur(10px); box-shadow: 0 30px 70px rgba(143,88,125,.12); text-align: center; }
.notify-card h2 { font-size: clamp(30px,4vw,44px); margin: 10px 0 10px; }
.notify-card p { color: var(--nexa-rose); margin: 0 auto 22px; max-width: 520px; line-height: 1.55; }
#notify-form { display: flex; gap: 10px; max-width: 520px; margin: auto; }
#notify-form input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--nexa-ink); font-size: 15px; outline: none; }
#notify-form input:focus { border-color: var(--nexa-rose); }
#notify-msg { min-height: 22px; margin-top: 12px; font-size: 14px; color: var(--nexa-rose); font-weight: 700; }
#notify-msg.ok { color: #2f7d4f; }
@media (max-width: 600px) { #notify-form { flex-direction: column; } }

/* After launch: the Google Play button that replaces the notify form. */
.nexa-live-card .eyebrow { color: var(--nexa-rose); }
.nexa-play-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 16px; border-radius: 16px; background: #111111; color: #ffffff; text-decoration: none; box-shadow: 0 12px 30px rgba(17, 17, 17, .22); transition: transform .18s ease, box-shadow .18s ease; }
.nexa-play-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(17, 17, 17, .3); color: #ffffff; }
.nexa-play-btn span { display: grid; text-align: left; line-height: 1.05; }
.nexa-play-btn small { font-size: 10px; letter-spacing: .12em; opacity: .85; }
.nexa-play-btn b, .nexa-play-btn small { color: #ffffff; -webkit-text-fill-color: #ffffff; }
.nexa-play-btn b { font-size: 20px; font-weight: 800; }

/* ---------- launch fixes (2026-09-26) ---------- */
/* The call-to-action band is filled Deep Rose, so its text must be white (it was rose on rose). */
.cta h2, .cta p { color: #fff; -webkit-text-fill-color: #fff; }
.cta .android, .cta a.android { color: #fff; -webkit-text-fill-color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta .android:hover { color: var(--nexa-blush); -webkit-text-fill-color: var(--nexa-blush); }
/* The contact address must wrap cleanly on a 390px phone instead of breaking mid-word anywhere. */
.contact-mail { word-break: normal; overflow-wrap: anywhere; max-width: 100%; }
/* Footer links: a comfortable tap target (at least ~44px tall). */
footer a { display: inline-block; padding: 12px 6px; }
footer > div:last-child { gap: 4px 10px; }