@import url('/dashboard/tokens.css?v=20260929b');   /* design system — bump v= when tokens.css changes */
@import url('/dashboard/components.css?v=20260828e');   /* shared components — bump v= when it changes */
/* Circle Health — Login, signup, forgot- and reset-password pages.
   Cream ground, brand ink. Every value comes from tokens.css. */
:root {
  --brand-black: var(--color-font);   /* "circle black" */
  --orange: var(--color-orange);
  --orange-hover: var(--orange-500);
  --cream: var(--color-cream);
  --font: var(--color-font);
  --text-secondary: #6B6560;
  --text-dim: var(--cream-500);
  --surface: var(--color-surface);
  --border: var(--cream-300);
  --border-focus: rgba(255,136,76,0.5);
  --radius: 16px;
  --bg: var(--color-cream);
  --shadow-card: 0 1px 3px rgba(41,38,38,0.06);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--font);
  background: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Split: form left, clinic right ──────────────────────────────────────
   One column until there is room for two. The photo is decorative and is not
   rendered at all below 900px — a member on a phone came here to sign in, and
   a half-screen of image above the form is in the way. */
.login-split {
  /* Full-bleed inside the centred body, so the pages that do not use this
     wrapper keep the single centred column they have always had. */
  width: 100%;
  align-self: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}
.login-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.login-art { display: none; }
@media (min-width: 900px) {
  .login-split { grid-template-columns: 1fr 1fr; }
  .login-pane { padding: 40px 24px; }
  .login-art {
    display: block;
    background: var(--cream-200) url('/images/login-hero.jpg') center / cover no-repeat;
  }
}
/* Links take orange-600: the brand orange is ~2:1 on cream and unreadable. */
a { color: var(--orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Logo area ── */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 24px;
  padding-top: 0;
  padding-bottom: 32px;
  text-align: center;
}
.login-logo img {
  height: 40px;
  margin: 0 auto 8px;
  /* The asset already ships in #292626 — on cream it needs no filter at all. */
}
.login-tagline {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}

/* ── Layout: centered card ── */
#loginbox__ {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  margin-top: 0;
  padding: 0 24px;
}
#loginbox_ { padding: 0; }
#loginbox {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}

/* ── Error message ── */
#loginerror {
  line-height: 1.5;
  color: #ff6b35;
  font-weight: 500;
  font-size: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(255,107,53,0.12);
  border-radius: var(--radius);
  border: 1px solid rgba(255,107,53,0.2);
}
#loginerror:empty { display: none; }

/* ── Success message ── */
#loginmessage {
  line-height: 1.5;
  color: #5cb85c;
  font-weight: 500;
  font-size: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(92,184,92,0.12);
  border-radius: var(--radius);
  border: 1px solid rgba(92,184,92,0.2);
}

/* ── Form fields ── */
.lfinp, .lfsel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--font);
  background: var(--surface);
  outline: none;
  transition: border-color 150ms;
  width: 100%;
  height: 48px;
  line-height: 20px;
  -webkit-appearance: none;
}
.lfinp:focus, .lfsel:focus {
  border-color: var(--border-focus);
  background: var(--surface);
}
.lfinp::placeholder { color: var(--text-dim); }
label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* ── Password toggle ── */
.passtoggle {
  /* Centred on the field rather than a fixed offset from the wrapper's top.
     `top: 15px` assumed a 48px input with no label and nothing else in the
     wrapper; anywhere that changed — a visible label, a warning line, a
     different font size — the icon drifted out of the box. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  filter: brightness(0) invert(1) opacity(0.6);
  transition: filter 150ms;
}
.passtoggle:hover { filter: brightness(0) invert(1) opacity(0.9); }

/* ── 2FA sections ── */
#tfa_sms, #tfa_ga, #tfa_keyfile, #tfa_cert {
  padding-top: 8px;
}

/* ── Login button + yubikey row ── */
#loginbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
/* Fill, label colour and every interaction state come from the button
   component in components.css. What stays here is what makes this instance
   different: it fills the login bar, and it is set in caps. */
.loginbutton_, .loginbutton {
  flex: 1;
  padding: 14px 32px;
  border-radius: var(--radius);
  -webkit-appearance: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.loginbutton_:active { opacity: 0.8; }

/* ── Yubikey fingerprint button ── */
#fingerprint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  flex-shrink: 0;
  text-decoration: none;
}
#fingerprint:hover {
  border-color: var(--border-focus);
  background: var(--cream-200);
}
/* Circle black. The inversion here was tinting the glyph white for the old
   navy ground; on cream it just needs to be flattened to the brand near-black. */
#fingerprint img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(15%) opacity(0.7);
  transition: filter 150ms;
}
#fingerprint:hover img {
  filter: brightness(0) invert(15%);
}
#yubikeysetup {
  padding-top: 16px;
  text-align: center;
  font-size: 13px;
}
#yubikeysetup a { color: var(--orange-600); }
#yubikeysetup a:hover { text-decoration: underline; }

/* ── SSO buttons ── */
#sso_buttons {
  padding-top: 20px;
  text-align: center;
  margin-top: 20px;
}
#sso_buttons > div:first-child {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 10px;
}
#sso_buttons .sso_row {
  display: flex;
  gap: 12px;
}
.sso_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 12px 20px !important;
  margin: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--font) !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.sso_button:hover {
  background: var(--cream-200) !important;
  border-color: var(--text-secondary) !important;
}

/* ── Pass reset / new password fields ── */
#passwarn {
  font-weight: normal;
  color: #ff6b35;
  font-size: 13px;
}

/* ── Signup / Forgot link ── */
.login-signup-link {
  text-align: center;
  padding: 8px 0 32px;
  color: var(--text-secondary);
  font-size: 14px;
}
.login-signup-link a {
  color: var(--orange-600);
  font-weight: 500;
  text-decoration: none;
}
.login-signup-link a:hover {
  text-decoration: underline;
}
.login-signup-link .sep {
  margin: 0 0.4em;
}
@media (max-width: 480px) {
  .login-signup-link { line-height: 1.8; }
  .login-signup-link .sep { display: none; }
  .login-signup-link a { display: block; }
}

/* ── Signup form ── */
.signup-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--cream);
  margin: 0 0 20px;
  padding: 0;
}
.signup-row {
  display: flex;
  gap: 12px;
}
.signup-field {
  padding-top: 4px;
  padding-bottom: 8px;
}
.signup-row .signup-field {
  flex: 1;
}
.signup-passwarn {
  font-size: 12px;
  margin-top: 4px;
  min-height: 0;
}
.signup-passwarn:empty {
  display: none;
}
.signup-passrules {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.signup-passrule {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}
.signup-passstrength {
  font-size: 12px;
  margin-top: 2px;
  min-height: 0;
}
.signup-passstrength:empty {
  display: none;
}
.signup-confirmwarn {
  font-size: 12px;
  margin-top: 4px;
  min-height: 0;
}
.signup-confirmwarn:empty {
  display: none;
}
/* Turnstile renders in a cross-origin iframe, so its colors are fixed —
   round to the field radius and paint a page-colored ring over the
   widget's own edge (no border look). pointer-events stay clickable. */
.cf-turnstile {
  position: relative;
  margin: 2px 0 8px;
  overflow: hidden;
  border-radius: var(--radius);
  line-height: 0;
}
.cf-turnstile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--bg);
  border-radius: var(--radius);
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  #loginbox { padding: 24px 0 0; }
  .loginbutton_ { width: 100%; }
  .signup-row { flex-direction: column; gap: 0; }
}
/* ── Field labels — present for screen readers and password managers, not painted.
      Mirrors .field-label in prereg.css; both pages use the same class. ── */
.field-label{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Autofill. Browsers repaint a filled field in their own colour, so the
      field's own colour is forced back over it. This used to be var(--surface), the
      navy theme's field flattened — which is why a field restored after a
      failed login came back dark blue on the cream page. ── */
.lfinp:-webkit-autofill,
.lfinp:-webkit-autofill:hover,
.lfinp:-webkit-autofill:focus,
.lfinp:-webkit-autofill:active {
  -webkit-text-fill-color: var(--font) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  background-color: var(--surface) !important;
  background-image: none !important;
  caret-color: var(--font);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.lfinp:-webkit-autofill:focus { border-color: var(--border-focus); }
.lfinp:autofill,
.lfinp:autofill:hover,
.lfinp:autofill:focus {
  -webkit-text-fill-color: var(--font) !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  background-color: var(--surface) !important;
  caret-color: var(--font);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.lfinp:-internal-autofill-selected {
  -webkit-text-fill-color: var(--font) !important;
  background-color: var(--surface) !important;
}

/* ── Consent rows on the signup form ──────────────────────────────────────
   The Terms row and the promotions row use the same object. prereg.css styles
   them for the gated layout; this is the same object for the standard layout,
   which loads login.css only. Second row sits under the first, not beside it. */
.signup-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 2px 0; font-size: 13px; line-height: 1.5;
  color: var(--text-secondary); cursor: pointer;
}
.signup-consent input {
  margin-top: 2px; flex: none; width: 16px; height: 16px;
  accent-color: var(--orange); cursor: pointer;
}
.signup-consent a { color: var(--font); text-decoration: underline; text-underline-offset: 2px; }
.signup-consent a:hover { color: var(--orange-hover); }
.signup-consent input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.signup-consent + .signup-consent,
.signup-consent-marketing { margin-top: 10px; }

/* ── iOS: stop the zoom-on-focus ──────────────────────────────────────────
   Mobile Safari zooms the page when a focused field's text is under 16px, and
   it does not zoom back out. On the two-up rows that pushes the right-hand
   field off screen (reported on /dashboard/signup, iPhone).

   16px on touch pointers only, so the desktop form keeps its 14px. The box
   does not change size: padding 14 + line-height 20 + padding 14 = the same
   48px, and only the glyphs grow. */
@media (pointer: coarse) {
  .lfinp, .lfsel, .action-card input, .action-card select, .action-card textarea {
    font-size: 16px;
  }
}

/* ── SSO terms notice (signup page only) ──────────────────────────────────
   Sits under the provider buttons, because that is where the agreement
   happens: the Terms checkbox lives inside the email/password form, which
   those buttons bypass. Centred to the buttons above it, and quiet — it is a
   notice, not a request. The link has to look like a link before it is pressed;
   the same treatment the consent row uses. */
.sso-terms-note {
  margin: 12px 2px 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sso-terms-note a {
  color: var(--font);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sso-terms-note a:hover { color: var(--orange-hover); }

/* Discount-code welcome — shown only when a /join/{code} link brought the
   visitor here (go_app/sponsor.go). Nothing else on the page mentions codes.
   Dark text on a sand tint so it reads on the cream form card and on the
   legacy single-column page alike. */
.signup-sponsor {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: rgba(220,182,136,0.22);
  border: 1px solid rgba(220,182,136,0.6);
  border-radius: var(--radius);
  line-height: 1.45;
  text-align: left;
}
.signup-sponsor-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-font);
}
.signup-sponsor-what {
  font-size: 13.5px;
  color: var(--color-font);
  opacity: 0.8;
}