/* Patient sign-in as a guided step flow
   (docs/superpowers/specs/2026-10-01-app-feel-redesign-design.md): one
   question a screen under the capsule progress bar, Dr Arya standing in his
   teal arch on the first screen, and a gently typing capsule while the page
   waits for the WhatsApp message. The shared parts (.steps, .step-card, .cap,
   --lift) come from app-feel.css through base.css. */

main.sign-in { padding-bottom: 2.5rem; }
.sign-in .steps { margin: .9rem 0 1rem; }

/* The welcome: the greeting on the left, Dr Arya in his arch window on the
   right, standing on the top edge of the first card (the card hides where
   the picture is cut). */
.sign-in .welcome {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(7.5rem, 36vw, 11rem);
  align-items: end; gap: .6rem; margin-bottom: -14px;
}
.sign-in .welcome h1 {
  margin: 0 0 calc(14px + 1.2rem);
  font-size: clamp(1.9rem, 8.4vw, 2.7rem); line-height: 1.04;
}
.sign-in .arch { position: relative; aspect-ratio: 432 / 640; margin-right: 1rem; isolation: isolate; }
.sign-in .arch::before {
  content: ""; position: absolute; z-index: -1; inset: 26% 0 0;
  border-radius: 999px 999px 0 0; background: var(--accent);
}
.sign-in .arch img {
  display: block; width: 100%; height: 100%;
  animation: doc-rise .9s var(--ease-out) .1s backwards;
}
.sign-in #phone-step { position: relative; z-index: 1; }
main.narrow.sign-in > .welcome + #phone-step { margin-top: 0; }
/* Google alone (the number door closed): no card to stand on, so he fades out. */
.sign-in .welcome:has(+ #phone-step[hidden]) { margin-bottom: .5rem; }
.sign-in .welcome:has(+ #phone-step[hidden]) h1 { margin-bottom: 1.2rem; }
.sign-in .welcome:has(+ #phone-step[hidden]) .arch {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

/* Each step: a paper card with one big statement, the key word in a capsule. */
main.narrow.sign-in > .step-card { margin: 1rem 0; padding: 1.4rem 1.25rem 1.45rem; }
.sign-in .step-card h2 {
  margin: 0 0 .8rem; font-size: clamp(1.6rem, 6.8vw, 2.05rem);
  line-height: 1.1; letter-spacing: -.03em;
}
.sign-in h2 > label { display: inline; margin: 0; font: inherit; }
.sign-in .whatsapp-line { font-size: .92rem; line-height: 1.45; margin-top: .8rem; }

/* Big boxes to type in. */
.sign-in #phone, .sign-in .pin-box {
  min-height: 62px; border-radius: 18px;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .04em;
}
.sign-in .pin-box { text-align: center; letter-spacing: .6em; padding-left: 1.6rem; font-size: 1.7rem; }

/* One full-width teal pill for the main action, with an arrow that nudges. */
.sign-in .step-card button[type="submit"], .sign-in #message-link, .sign-in .google-door .button {
  width: 100%; min-height: 58px; margin-top: 1.1rem; padding: 0 1.1rem; font-size: 1.05rem;
}
.sign-in .step-card button[type="submit"]::after {
  content: ""; width: .5rem; height: .5rem; margin-left: .4rem;
  border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; border-radius: 1px;
  transform: rotate(45deg); transition: transform .3s var(--spring);
}
.sign-in .step-card button[type="submit"]:hover::after { transform: translateX(3px) rotate(45deg); }
/* On its way: the arrow becomes a small turning ring. */
.sign-in .step-card button[type="submit"][aria-busy="true"]::after {
  width: 1rem; height: 1rem; border: 2.5px solid currentColor; border-right-color: transparent;
  border-radius: 50%; transform: none; animation: sign-turn .8s linear infinite;
}
@keyframes sign-turn { to { transform: rotate(360deg); } }
.sign-in .button svg {
  width: 1.4rem; height: 1.4rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sign-in .button svg path + path { stroke-width: 2.6; }

/* Google: the quiet second door under the first card. */
.sign-in .google-door { margin-top: 1.2rem; text-align: center; }
.sign-in .google-door .button { margin-top: .6rem; }
.sign-in .google-door p:last-child { margin-top: .7rem; font-size: .92rem; line-height: 1.45; }

/* The fees, on the first screen only, before anyone gives a number or signs in
   (his request, 9 October 2026). Kept in step with src/booking/rules.js by
   test/sign-in-fees.test.js. */
.sign-in .fees { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.sign-in .fees h2 { margin: 0 0 .6rem; }
.sign-in .fee-list { list-style: none; margin: 0; padding: 0; }
.sign-in .fee-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line); line-height: 1.35;
}
.sign-in .fee-list li > span { color: var(--soft-ink); font-size: .92rem; }
.sign-in .fee-list li > span b { display: block; color: var(--ink); font-size: 1rem; }
.sign-in .fee-list .fee { flex: none; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
.sign-in .fees > p { margin-top: .8rem; font-size: .92rem; line-height: 1.45; }
.sign-in .fee-peek { margin: .9rem 0 0; text-align: center; font-size: .92rem; color: var(--soft-ink); }
.sign-in .fee-peek b { color: var(--ink); }
.sign-in .or-line { display: flex; align-items: center; gap: .8rem; font-weight: 700; }
.sign-in .or-line::before, .sign-in .or-line::after { content: ""; flex: 1; height: 1.5px; border-radius: 999px; background: #cfc8bd; }
/* With the number door closed, Google is the one main action. */
.sign-in #phone-step[hidden] + .google-door .button.secondary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.sign-in #phone-step[hidden] + .google-door .button.secondary:hover { background: var(--accent-deep); }

/* Waiting for the WhatsApp message: a typing bubble in a teal capsule. */
.sign-in .waiting {
  display: flex; align-items: center; gap: .85rem; margin: 1.2rem 0 .6rem;
  padding: .75rem 1.1rem .75rem .75rem; border-radius: 24px;
  background: var(--teal-wash); color: var(--accent-deep); font-weight: 650; line-height: 1.35;
  animation: sign-wait 2.4s ease-out infinite;
}
.sign-in .typing {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: .75rem .85rem;
  border-radius: 999px 999px 999px 6px; background: var(--card); box-shadow: var(--lift);
}
.sign-in .typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: sign-typing 1.2s ease-in-out infinite; }
.sign-in .typing i:nth-child(2) { animation-delay: .15s; }
.sign-in .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sign-typing { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes sign-wait { 0% { box-shadow: 0 0 0 0 rgb(0 79 70 / .3); } 70%, 100% { box-shadow: 0 0 0 10px rgb(0 79 70 / 0); } }
.sign-in .fallback { font-size: .92rem; line-height: 1.6; }
.sign-in .fallback b { display: inline-block; padding: 0 .5em; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 800; white-space: nowrap; }
.sign-in #message-again { display: flex; min-height: 48px; margin: .4rem auto 0; }

/* The clinic-notices tick: a whole row to tap. */
.sign-in label.tick {
  align-items: center; min-height: 56px; margin: .4rem 0 0; padding: .9rem 1rem;
  border-radius: 22px; background: var(--paper); font-weight: 500; line-height: 1.4; cursor: pointer;
}
.sign-in label.tick input { flex: none; width: 26px; height: 26px; min-height: 0; margin: 0; accent-color: var(--accent); }
.sign-in label.tick:has(input:checked) { background: var(--teal-wash); }

/* Who is this for: each person a big pill with their initial. */
.sign-in .choices { display: grid; gap: .6rem; margin: .4rem 0 0; }
.sign-in .choices button.person {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) 1rem; align-items: center; gap: .85rem;
  width: 100%; min-height: 4.2rem; margin: 0; padding: .45rem 1.2rem .45rem .5rem;
  border: 1.5px solid #cfc8bd; background: var(--card); color: var(--ink); box-shadow: none;
  font-weight: 600; text-align: left;
}
.sign-in .choices button.person:hover { background: var(--teal-wash); border-color: var(--accent); }
.sign-in .person .initial {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--teal-wash); color: var(--accent-deep); font-weight: 800; font-size: 1.15rem;
}
.sign-in .person b { display: block; font-size: 1.08rem; line-height: 1.2; overflow-wrap: anywhere; }
.sign-in .person small { color: var(--soft-ink); font-size: .9rem; font-weight: 600; }
.sign-in .person::after {
  content: ""; width: .55rem; height: .55rem; justify-self: center;
  border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; border-radius: 1px;
  transform: rotate(45deg); opacity: .5; transition: transform .3s var(--spring);
}
.sign-in .person:hover::after { transform: translateX(3px) rotate(45deg); opacity: .85; }
.sign-in .choices li:not(:has(button)) { padding: .85rem 1rem; border-radius: 22px; background: var(--paper); line-height: 1.4; }
.sign-in #someone-new { width: 100%; min-height: 54px; margin-top: .4rem; }

/* Choices: the two ways a record opens stack; Female / Male / Other sit in a row. */
.sign-in fieldset.stack label { margin: 0 0 .5rem; padding: .7rem 1.2rem; line-height: 1.3; }
.sign-in fieldset:not(.stack) { display: flex; flex-wrap: wrap; gap: .5rem; }
.sign-in fieldset:not(.stack) label { flex: 1 1 auto; justify-content: center; margin: 0; }

/* His credentials, once, quietly at the foot. */
.sign-in .page-foot { margin-top: 2.4rem; text-align: center; }
.sign-in .page-foot .who { max-width: 26rem; margin: 0 auto; font-size: .9rem; line-height: 1.45; }

@media (min-width: 48rem) {
  main.sign-in { padding-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sign-in .arch img, .sign-in .waiting, .sign-in .typing i,
  .sign-in .step-card button[type="submit"]::after, .sign-in .person::after {
    animation: none !important; transition: none !important;
  }
  .sign-in .typing i { opacity: .8; }
}