/*
  THE SITE'S ROOM (30 Sep 2026): every page on fitforlove.app except the home
  page (home.css) wears the app's glow look, the one the invite page (i.html)
  was built in: the glow ground falling to near-black plum with a pink and a
  violet light drifting, Fraunces for the voice, Onest for everything read or
  pressed, one italic phrase in the pink-to-violet blend, dark glass for the
  things you operate, the pink metal button. It replaces styles.css, the old
  FitFriends teal (owner, 30 Sep: "they are the old fitfriends design").
  Rules: .claude/skills/ffl-design. No em dashes in the copy.
*/
:root {
  --plum-1: #5B1A55;
  --plum-2: #2E0F33;
  --plum-3: #160818;
  --pink: #FFB3E6;
  --violet: #DCC6FF;
  --metal-1: #F58BD6;
  --metal-2: #D93DB4;
  --metal-3: #B8279A;
  --text: #FFFFFF;
  --soft: rgba(255, 236, 246, 0.86);
  --faint: rgba(255, 236, 246, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.2);
  --error: #FF9AC8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Onest', system-ui, sans-serif;
  color: var(--text);
  background: var(--plum-3);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The glow ground: lit from above, falling to near-black plum, one pink light and one violet. */
.ground {
  position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 50% 0%, var(--plum-1) 0%, var(--plum-2) 50%, var(--plum-3) 100%);
}
.ground::before, .ground::after {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  filter: blur(70px); opacity: .5;
}
.ground::before { background: #FF4FC3; left: -110px; top: 60px; animation: glow-a 9s ease-in-out infinite alternate; }
.ground::after { background: #9B5CF0; right: -120px; top: 300px; animation: glow-b 11s ease-in-out infinite alternate; }
@keyframes glow-a { to { transform: translate(90px, 50px) scale(1.1); } }
@keyframes glow-b { to { transform: translate(-100px, -40px) scale(1.15); } }

main {
  max-width: 460px; margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 22px; min-height: 100vh;
}
main.read { max-width: 680px; gap: 0; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; align-self: flex-start;
  font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 100, 'WONK' 0; font-weight: 600; font-size: 19px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; background: #fff; padding: 3px; }

.eye { font-weight: 700; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); margin: 18px 0 0; }
h1 {
  font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 100, 'WONK' 0; font-weight: 600;
  font-size: clamp(36px, 10vw, 46px); line-height: 1.04; letter-spacing: -0.022em; margin: 8px 0 0;
}
h1 em, h2 em {
  font-style: italic;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.support { font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--soft); margin: 0; }
.small { font-size: 13px; line-height: 1.5; color: var(--faint); margin: 0; }
.small a, .support a { color: #fff; font-weight: 600; }
.spacer { flex: 1; }
.hidden { display: none !important; }

/* Dark glass, lifted by its edge catching light. */
.glass {
  border-radius: 26px; padding: 22px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.055));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

/* The pink metal: the one button that shines. */
button, .metal {
  font: inherit; font-weight: 800; font-size: 16px; color: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 28px; border-radius: 999px; width: 100%; text-decoration: none;
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 55%, var(--metal-3) 100%);
  box-shadow: 0 10px 24px -8px rgba(217,61,180,.65), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .11s ease, opacity .2s ease;
}
button:active, .metal:active { transform: scale(.97); }
button:disabled { opacity: .55; cursor: default; transform: none; }
button:focus-visible, .metal:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* Fields: part of the room, dark glass. */
form { display: grid; gap: 8px; }
label { font-weight: 700; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); margin-top: 10px; }
input {
  font: inherit; font-size: 17px; color: #fff; width: 100%; height: 52px; padding: 0 16px;
  border-radius: 16px; border: 1px solid var(--glass-edge); background: rgba(255,255,255,.07);
}
input:focus { border-color: rgba(255,179,230,.7); outline: none; box-shadow: 0 0 0 4px rgba(255,79,195,.18); }
form button { margin-top: 16px; }
.status { min-height: 20px; font-size: 14px; color: var(--soft); margin: 6px 0 0; text-align: center; }
.status--error { color: var(--error); }

/* Waiting: a ring in the blend, turning. */
.spinner {
  width: 34px; height: 34px; border-radius: 50%; margin-top: 18px;
  border: 3px solid rgba(255,255,255,.14); border-top-color: var(--pink); border-right-color: var(--violet);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

footer { display: flex; gap: 10px; justify-content: center; font-size: 13px; color: var(--faint); }
footer a { color: var(--faint); }

/* Long reading (privacy, terms): the same room, set for reading. */
.read h1 { margin-bottom: 6px; }
.read h2 {
  font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 100, 'WONK' 0; font-weight: 600;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; margin: 36px 0 10px;
}
.read h3 { font-size: 16px; font-weight: 700; margin: 22px 0 6px; }
.read p, .read li { font-size: 16px; line-height: 1.6; color: var(--soft); }
.read p { margin: 0 0 14px; }
.read ul, .read ol { margin: 0 0 14px; padding-left: 20px; }
.read li { margin: 0 0 8px; }
.read li::marker { color: var(--pink); }
.read strong { color: #fff; }
.read a { color: #fff; text-decoration-color: rgba(255,179,230,.6); text-underline-offset: 3px; }
.read table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.read th, .read td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--soft); vertical-align: top; }
.read th { color: #fff; font-weight: 700; }
.read footer { margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .ground::before, .ground::after, .spinner { animation: none; }
}