/* ------------------------------------------------------------------ sign-in page

   A two-sided card: the brand on the left, drawn with the same violet-to-sky
   gradient as the doctor's screen, and the form on the right. On a phone the
   brand side steps aside and the form carries a small logo of its own. */

.signin-page {
  min-height: 100vh;
  display: flex;
}

.auth {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 20px;
}

.auth-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  width: 100%;
  max-width: 900px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 32px;
  box-shadow: var(--surface-shadow), 0 40px 90px -40px rgba(60, 40, 140, 0.35);
  overflow: hidden;
}

/* ------------------------------------------------------------------ brand side */

.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 36px 40px;
  color: #ffffff;
  background:
    var(--grain),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(124, 198, 254, 0.55), transparent 70%),
    linear-gradient(150deg, #5b3de8 0%, #7a63ff 55%, #8f7bff 100%);
}
.logo.onbrand { color: #ffffff; }
.logo.onbrand .logo-mark {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* A small doctor's screen, as glass on the gradient. */
.auth-now {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 20px 40px -24px rgba(20, 10, 80, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.auth-now-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.85;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.auth-now-dot { width: 7px; height: 7px; border-radius: 50%; background: #5ef2c2; box-shadow: 0 0 8px #5ef2c2; }
.auth-now-label { font-size: 13px; font-weight: 800; opacity: 0.85; }
.auth-now strong { font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.auth-now-meta { font-size: 14px; font-weight: 700; opacity: 0.85; margin-top: 4px; }

/* ------------------------------------------------------------------ sign-up: the trial

   The brand side on the sign-up page is how the trial runs, drawn as the
   timeline it is. Three groups (name, timeline, reassurance) spread down the
   panel, so it is full at any height instead of leaving a hole under the logo.
   "Today" wears the coral pill the doctor's screen uses for the time now. */

.trial-side, .spread-side { justify-content: space-between; gap: 36px; }
.trial-title {
  margin: 44px 0 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.trial-steps { list-style: none; margin: 0; padding: 0; }
.trial-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 26px 38px;
}
.trial-steps li:last-child { padding-bottom: 0; }
/* The thread joining one step to the next. */
.trial-steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 26px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
.step-mark {
  position: absolute;
  left: 3px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.step-when { font-size: 13px; font-weight: 800; opacity: 0.78; line-height: 1.9; }
.trial-steps strong { font-size: 19px; font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; }
.step-what { font-size: 15px; font-weight: 600; opacity: 0.85; max-width: 32ch; margin-top: 2px; }

.trial-steps .is-now .step-mark {
  background: var(--now);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 125, 85, 0.3), 0 0 16px var(--now);
}
.trial-steps .is-now .step-when {
  align-self: flex-start;
  opacity: 1;
  line-height: 1;
  padding: 5px 11px;
  margin-bottom: 5px;
  border-radius: 999px;
  background: var(--now);
  color: #ffffff;
  box-shadow: 0 0 16px -2px var(--now);
}

.trial-foot {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 14px;
  font-weight: 700;
  opacity: 0.88;
  /* Two even lines rather than one long one and a lone "phone." */
  text-wrap: balance;
}

/* ------------------------------------------------------------------ form side */

.auth-form {
  display: flex;
  flex-direction: column;
  padding: 38px 40px 30px;
  background: var(--page);
}
.auth-form-logo { display: none; margin-bottom: 26px; }
.auth-form h1 { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; margin: 0; }
.auth-sub { margin: 6px 0 22px; font-size: 16px; font-weight: 600; color: var(--ink-soft); }

.auth-form label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
  margin: 0 0 7px 4px;
}
.auth-form input {
  width: 100%;
  font-size: 17px;
  padding: 12px 18px;
  min-height: 48px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--inset);
  border: 1.5px solid transparent;
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.auth-form input::placeholder { color: var(--ink-ghost); font-weight: 600; }
.auth-form input:hover { border-color: var(--rule-hour); }
.auth-form input:focus {
  outline: none;
  background: var(--page);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
/* A field the last attempt was refused for. The message says what is wrong;
   this shows where. */
.auth-form input[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--s-noshow-bg);
}
.auth-form input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--s-noshow-bg); }

/* A label with its way out beside it: "Forgot password?" sits on the
   Password label's line, where people look for it, without a row of its own. */
.pw-block { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
.pw-block label { grid-row: 1; grid-column: 1; }
.pw-block .auth-forgot { grid-row: 1; grid-column: 2; }
.pw-block input { grid-row: 2; grid-column: 1 / -1; }
.auth-form .auth-forgot {
  margin: 0 4px 7px 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-text);
  text-decoration: none;
}
.auth-form .auth-forgot:hover { text-decoration: underline; }

/* Something that worked, in the green of a finished appointment, as in the
   app's Settings. */
.auth-done {
  margin: -8px 0 20px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--s-done-bg);
  color: var(--s-done-fg);
  font-size: 15px;
  font-weight: 700;
}
.auth-done[hidden] { display: none; }
.auth-form[hidden], .auth-signup[hidden] { display: none; }

/* The quieter second line on "Check your email". */
.auth-note { margin: 0 0 22px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--ink-soft); }
.auth-sub strong { color: var(--ink); overflow-wrap: anywhere; }
/* The only way on from a dead link: as big as the form's own button, and in
   its colour, since there is nothing else to do on that page. */
.auth-form a.btnlink {
  justify-content: center;
  min-height: 50px;
  margin-top: 6px;
  font-size: 17px;
}
.auth-form a.btnlink.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--accent-glow);
}
/* Headings get focus only so a screen reader announces the new step; the
   ring is for things that can be clicked. */
.auth-form h1:focus { outline: none; }

/* A line under a field that explains it, pulled up against the field. */
.auth-hint {
  margin: -10px 4px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* The password with a Show / Hide switch sitting inside its right-hand end. */
.pw-field { position: relative; }
.pw-field input { padding-right: 84px; }
.auth-form .pw-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 4px 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-text);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.auth-form .pw-toggle:hover { background: var(--accent-soft); box-shadow: none; }

/* On a phone the brand side is hidden, so the one line worth keeping from it
   rides above the heading instead. */
.auth-kicker { display: none; }

.auth-form button {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  font-size: 17px;
}
.auth-form button:disabled { opacity: 0.6; cursor: default; }
.auth-form .gate-err { margin: 10px 4px 0; }

/* The way in for someone without an account yet. Small, below everything,
   separated from the form so it never competes with Sign in. */
.auth-signup {
  margin: 18px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}
.auth-signup a {
  color: var(--accent-text);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.auth-signup a:hover { text-decoration: underline; }

/* Agreeing to the terms at sign-up: a real checkbox in the brand violet, its
   sentence beside it, sized as a hint so it never outweighs the button. */
.auth-form .agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 4px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
}
.auth-form .agree input {
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.auth-form .agree input:focus { box-shadow: none; }
.auth-form .agree input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-form .agree input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.auth-form .agree a { color: var(--accent-text); font-weight: 800; }

/* The documents behind signing in, as quiet as a page footer. */
.auth-legal {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.auth-legal a { color: var(--ink-faint); text-decoration: none; }
.auth-legal a:hover { color: var(--accent-text); text-decoration: underline; }

/* ------------------------------------------------------------------ back to home

   One place at every size: the top of the form column, just above the
   heading, where the eye starts. On a phone it shares the row with the logo
   (the brand panel is hidden there); on a computer the logo lives in the panel,
   so the row holds the link alone. A quiet text link rather than a button,
   because it is a way out, not the thing to do. The logo in the panel links
   home as well. */

.auth-form-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -10px 0 18px;
}
.auth-form-top .logo { display: none; }

.auth-form .auth-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  margin-left: -6px;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.auth-form .auth-back svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.12s ease;
}
.auth-form .auth-back:hover { color: var(--accent-text); background: var(--accent-soft); }
.auth-form .auth-back:hover svg { transform: translateX(-2px); }
.auth-form .auth-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .auth-form .auth-back svg { transition: none; }
  .auth-form .auth-back:hover svg { transform: none; }
}

/* A card with only the form side, for pages with nothing to sell. */
.auth-card.single { grid-template-columns: 1fr; max-width: 520px; }
.auth-card.single .auth-form-logo { display: inline-flex; align-self: flex-start; }
.auth-actions { display: grid; gap: 10px; }
.auth-actions .btn { width: 100%; white-space: normal; text-align: center; }

/* ------------------------------------------------------------------ phone */

@media (max-width: 760px) {
  .auth { justify-content: flex-start; padding: 20px 14px 28px; gap: 14px; }
  .auth-card { grid-template-columns: 1fr; max-width: 460px; border-radius: 28px; }
  .auth-side { display: none; }
  .auth-form { padding: 30px 24px 26px; }
  .auth-form-logo { display: inline-flex; }
  .auth-form-top { margin: 0 0 26px; }
  .auth-form-top .logo { display: inline-flex; }
  .auth-form h1 { font-size: 28px; }
  .auth-kicker {
    display: inline-block;
    align-self: flex-start;
    margin: -8px 0 12px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-text);
    background: var(--accent-soft);
    padding: 5px 12px;
    border-radius: 999px;
  }
}

/* Laptop screens are often short. Pull everything in so the whole card and
   the link under it fit without scrolling. */
@media (min-width: 761px) and (max-height: 820px) {
  .auth { padding: 14px 20px; gap: 10px; }
  .auth-card { max-width: 860px; border-radius: 26px; }
  .auth-side { padding: 24px 28px 24px; }
  .auth-now { padding: 12px 14px 14px; border-radius: 18px; }
  .auth-now strong { font-size: 22px; }
  .trial-side, .spread-side { gap: 16px; }
  .trial-title { margin-top: 18px; font-size: 24px; }
  .trial-steps li { padding-bottom: 12px; padding-left: 34px; }
  .trial-steps li:not(:last-child)::before { top: 24px; }
  .trial-steps strong { font-size: 17px; }
  .step-what { font-size: 13.5px; margin-top: 0; }
  .step-when { font-size: 12px; line-height: 1.8; }
  .trial-steps .is-now .step-when { padding: 4px 9px; margin-bottom: 3px; }
  .trial-foot { padding-top: 12px; font-size: 13px; }
  .auth-form { padding: 22px 34px 18px; }
  .auth-form-top { margin: -4px 0 8px; }
  .auth-form h1 { font-size: 24px; }
  .auth-sub { margin: 4px 0 12px; font-size: 14.5px; }
  .auth-form label { font-size: 13px; margin-bottom: 4px; }
  .auth-form input { min-height: 42px; font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 10px; border-radius: 14px; }
  .auth-form .pw-toggle { top: 3px; min-height: 34px; }
  .auth-hint { margin: -4px 4px 10px; font-size: 12.5px; }
  .auth-form button { min-height: 44px; font-size: 16px; margin-top: 2px; }
  .auth-form .gate-err { margin-top: 6px; min-height: 18px; }
  .auth-signup { margin-top: 6px; padding-top: 10px; font-size: 14px; }
}
}