/* ==========================================================================
   PSALM PILATES — application styles
   Loaded only on the pages that need them: account, registration, profile,
   booking calendar, and the FAQ policy layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared page furniture
   -------------------------------------------------------------------------- */

/* Compact sky banner used at the top of the app pages */
.app-head {
  position: relative;
  isolation: isolate;
  padding: clamp(7.5rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.app-head__inner { position: relative; z-index: 2; max-width: 44rem; margin-inline: auto; }
.app-head__inner--wide { max-width: 56rem; }
.app-head h1 { color: var(--white); text-shadow: 0 2px 24px rgba(47, 79, 119, .2); }
.app-head p {
  margin-top: 1.15rem;
  color: rgba(255, 255, 255, .93);
  font-size: clamp(.98rem, 1.4vw, 1.1rem);
  line-height: 1.75;
}

.app-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.app-section-head h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }

/* A plain white surface for grouped controls */
.panel {
  padding: clamp(1.5rem, 3vw, 2.35rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel + .panel { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

.save-note {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--sky-07);
  align-self: center;
}

/* Standing notices */
.demo-banner {
  margin-bottom: 1.5rem;
  padding: .95rem 1.25rem;
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  background: var(--sand);
  color: var(--sand-ink);
  font-size: .83rem;
  line-height: 1.65;
}
.demo-banner strong { color: #7a6a50; }
.demo-banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: rgba(0, 0, 0, .05);
  padding: .1em .35em;
  border-radius: 3px;
}
.demo-banner--page { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }

.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius);
  font-size: .9rem;
}
.alert--warn { background: #fdf5ea; border: 1px solid #f0dcc0; color: #8a6a33; }
.alert strong { display: block; }
.alert span { color: inherit; opacity: .85; }

/* --------------------------------------------------------------------------
   2. Form additions
   -------------------------------------------------------------------------- */
.field__hint {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: -.15rem 0 .1rem;
}

/* Group label for radio and checkbox sets, matching .field > label */
.field__label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

.choices { display: grid; gap: .6rem; }
.choices--row { grid-auto-flow: column; grid-auto-columns: max-content; gap: .6rem; }
.choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 620px) {
  .choices--row { grid-auto-flow: row; grid-auto-columns: auto; }
  .choices--two { grid-template-columns: minmax(0, 1fr); }
}

.choice {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.choice:hover { border-color: var(--sky-04); }
.choice input {
  flex: none;
  width: 17px; height: 17px;
  accent-color: var(--sky-08);
  cursor: pointer;
}
.choice:has(input:checked) {
  border-color: var(--sky-06);
  background: var(--sky-01);
  box-shadow: inset 0 0 0 1px var(--sky-06);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--sky-07); outline-offset: 2px; }

/* Pain scale sliders */
.scale-grid { display: grid; gap: .85rem; }

.scale {
  display: grid;
  grid-template-columns: 7.5rem 1fr 2.25rem;
  align-items: center;
  gap: 1rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.scale.is-set { border-color: var(--sky-05); background: var(--sky-01); }
.scale label { font-size: .88rem; color: var(--ink); }

.scale input[type="range"] {
  width: 100%;
  accent-color: var(--sky-07);
  cursor: pointer;
  background: transparent;
}

.scale output {
  font-family: var(--serif);
  font-size: 1.15rem;
  text-align: center;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.scale.is-set output { color: var(--sky-08); }

@media (max-width: 560px) {
  .scale { grid-template-columns: 1fr 2.25rem; grid-template-areas: "label val" "range range"; row-gap: .5rem; }
  .scale label { grid-area: label; }
  .scale output { grid-area: val; }
  .scale input[type="range"] { grid-area: range; }
}

/* Fieldsets in the registration form */
.fset {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  display: grid;
  gap: 1.5rem;
}
.fset + .fset { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

.fset__legend {
  padding: 0 .65rem;
  margin-inline: -.65rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--sky-09);
}

.intake .form__row { gap: 1.35rem; }

.waiver {
  padding: 1.35rem 1.5rem;
  background: var(--sky-01);
  border: 1px solid var(--sky-03);
  border-radius: var(--radius);
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   3. Sign in and sign up
   -------------------------------------------------------------------------- */
.body--auth { min-height: 100%; }

.auth {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 7rem var(--gutter) 4rem;
}

.auth__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 30rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth__head { text-align: center; margin-bottom: 1.75rem; }
.auth__mark { font-size: 1.15rem; color: var(--sky-09); }
.auth__welcome { margin-top: .85rem; font-size: .92rem; color: var(--ink-soft); }

.tabs--full { display: flex; width: 100%; margin-bottom: 1.75rem; }
.tabs--full .tab { flex: 1; text-align: center; }

.btn--google {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: none;
}
.btn--google:hover { --btn-bd: var(--sky-04); box-shadow: var(--shadow-sm); }

.auth__or {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-mute);
}
.auth__or::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.auth__or span { position: relative; background: var(--white); padding: 0 .9rem; }

.auth__error {
  padding: .8rem 1rem;
  border-radius: var(--radius);
  background: #fbf0ef;
  border: 1px solid #eed6d4;
  color: #a55d59;
  font-size: .85rem;
  line-height: 1.6;
}

.auth__foot { margin-top: 1.75rem; text-align: center; }

/* --------------------------------------------------------------------------
   4. Profile: stats and credits
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat {
  padding: 1.35rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
  color: var(--sky-08);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: .5rem;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

.credit-list { display: grid; gap: 1rem; }

.credit {
  padding: 1.35rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.credit__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.credit__name { font-family: var(--serif); font-size: 1.2rem; letter-spacing: .03em; }
.credit__meta { font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; }
.credit__count { margin-top: .6rem; font-size: .78rem; color: var(--ink-mute); }

/* Progress bars, shared by credits and the journey */
.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--sky-02);
  overflow: hidden;
}
.bar--sm { height: 6px; }
.bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-06), var(--sky-08));
  transition: width .8s var(--ease);
}

/* --------------------------------------------------------------------------
   5. Profile: the journey bar
   -------------------------------------------------------------------------- */
.journey__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.journey__count { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .02em; }
.journey__count b { font-weight: 400; font-size: 1.9rem; color: var(--sky-08); font-variant-numeric: tabular-nums; }
.journey__note { margin-top: .3rem; font-size: .88rem; color: var(--ink-soft); max-width: 46ch; }
.journey__goal { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); }
.journey__goal b { font-weight: 400; color: var(--sky-08); }

.milestones {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.milestone { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.milestone__dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--sky-03);
  border: 1px solid var(--sky-04);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.milestone.is-hit .milestone__dot { background: var(--sky-07); border-color: var(--sky-07); transform: scale(1.25); }
.milestone__label { font-size: .68rem; letter-spacing: .1em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.milestone.is-hit .milestone__label { color: var(--sky-08); }

/* --------------------------------------------------------------------------
   6. Profile: photo comparison
   -------------------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 2vw, 1.5rem);
  margin-top: 1.5rem;
}

.compare__side { margin: 0; }

.compare__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(170deg, var(--sky-02), var(--sky-01));
  border: 1px dashed var(--sky-04);
  display: grid;
  place-items: center;
}
.compare__frame img { width: 100%; height: 100%; object-fit: cover; }

.compare__empty {
  padding: 1rem;
  text-align: center;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sky-07);
}

.compare figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

.upload { cursor: pointer; color: var(--sky-08); }
.upload:hover { color: var(--sky-06); }
.upload span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.upload:focus-within span { outline: 2px solid var(--sky-07); outline-offset: 3px; }

.photo-remove {
  position: absolute;
  top: .6rem; right: .6rem;
  padding: .35rem .75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 50, 63, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.compare__frame:hover .photo-remove,
.photo-remove:focus-visible { opacity: 1; }
.photo-remove:hover { background: rgba(34, 50, 63, .88); }

/* --------------------------------------------------------------------------
   7. Profile: measurements
   -------------------------------------------------------------------------- */
.measure-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 1rem;
  align-items: start;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.measure-form .btn { margin-top: 1.85rem; }

@media (max-width: 860px) {
  .measure-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measure-form .btn { grid-column: 1 / -1; margin-top: .5rem; justify-self: start; }
}
@media (max-width: 480px) {
  .measure-form { grid-template-columns: minmax(0, 1fr); }
}

.spark { margin-top: 1.5rem; color: var(--sky-07); }
.spark svg { width: 100%; height: 140px; display: block; overflow: visible; }
.spark__ends {
  display: flex;
  justify-content: space-between;
  margin-top: .6rem;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
}

.entry-list { margin-top: 1rem; }

.entry {
  display: grid;
  grid-template-columns: 8.5rem 10rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.entry:last-child { border-bottom: 0; }
.entry__date { color: var(--ink); font-variant-numeric: tabular-nums; }
.entry__vals { color: var(--sky-08); font-variant-numeric: tabular-nums; }
.entry__note { color: var(--ink-soft); font-size: .84rem; }

.entry__x {
  border: 0;
  background: none;
  color: var(--ink-mute);
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem .5rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.entry__x:hover { color: #b26b67; background: #fbf0ef; }

@media (max-width: 720px) {
  .entry { grid-template-columns: 1fr auto; grid-template-areas: "date x" "vals vals" "note note"; gap: .35rem 1rem; }
  .entry__date { grid-area: date; }
  .entry__vals { grid-area: vals; }
  .entry__note { grid-area: note; }
  .entry__x  { grid-area: x; }
}

/* --------------------------------------------------------------------------
   8. Booking page additions
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step {
  padding-top: 1.65rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.step::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--sky-05);
}
.step__num {
  display: block;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--sky-07);
  margin-bottom: .6rem;
}
.step h3 { margin-bottom: .6rem; }
.step .link-quiet { margin-top: 1rem; }

.calendar-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.calendar-embed.is-live { background: var(--sky-01); }
.calendar-embed__setup {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, var(--white), var(--sky-01));
}
.calendar-embed__setup code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--sky-02);
  padding: .12em .4em;
  border-radius: 3px;
  color: var(--sky-09);
}

/* --------------------------------------------------------------------------
   9. FAQ and policy page
   -------------------------------------------------------------------------- */
.jumps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
@media (max-width: 860px) { .jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jumps { grid-template-columns: minmax(0, 1fr); } }

.jump {
  display: block;
  padding: 1.15rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.jump:hover { transform: translateY(-3px); border-color: var(--sky-04); box-shadow: var(--shadow-sm); }
.jump__label {
  display: block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--sky-08);
}
.jump__note { display: block; margin-top: .35rem; font-size: .84rem; color: var(--ink-soft); }

.policy { display: grid; gap: 0; border-top: 1px solid var(--line); }
.policy li {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.policy strong {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--ink);
}

.rows--lg li { padding: 1.1rem 0; font-size: .98rem; }

/* Sign-out is a button but must match the sign-in link exactly */
button.nav__account {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* ---- preview shell only ---- */
.page[hidden] { display: none; }
.page--auth { min-height: 100svh; display: grid; place-items: center; position: relative; isolation: isolate; padding: 7rem var(--gutter) 4rem; }