/* Reset / Login / Signup lightweight helpers */
.auth-form { max-width: 520px; margin: 0 auto; }
.auth-form .actions-under { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }

.auth-form .grid > div {
  margin-bottom: 0px; /* ↓ tighter than default spacing */
}

.auth-form {
  position: relative;
  z-index: 2;
}

.auth-form .btn {
  padding: 8px 14px;   /* ↓ smaller button */
  font-size: 0.9rem;
}

.auth-form label { display:block; margin: 10px 0 6px; color: var(--muted); }
.auth-form input { margin-bottom: 10px; }

/* Shared for login, signup, reset, admin_login */
.auth-form{ max-width: 560px; margin:0 auto; }
.auth-form .actions-under{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between; }

/* error styles used by signup */
.input-error{ border-color: color-mix(in oklab, crimson 40%, var(--line) 60%); box-shadow: none; }
.field-error{ color: color-mix(in oklab, crimson 70%, white 30%); }

/* agreements block (signup) */
.agreements .check{ display:flex; align-items:flex-start; gap:10px;}
.agreements .check input[type="checkbox"]{ width:18px; height:18px;}
.agreements .check.error span{ text-decoration: underline; }

.agreements-wrap,
.agreements.actions-under {
  grid-column: 1 / -1; /* span all columns */
}

.agreements.actions-under .check{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.grid.auto-260.gap-12 > .card-lite {
  grid-column: 1 / -1;
}

.agreements.actions-under .cta-btn{
  margin: 12px auto 0;
  white-space: nowrap;
}

/* password show/hide pill */
.input-wrap{ position:relative; }
.input-wrap input{ padding-right:2em; }
.pw-toggle{
  position:absolute; right:8px; top:43%; transform:translateY(-50%);
  width:1.8em; height:1.8em; cursor:pointer; user-select:none;
  border:1px solid var(--line); border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* HCN chunks (signup) */
.hcn-chunk{
  width:82px; max-width:100%;
  padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg);
  text-align:center; letter-spacing:.08em;
}
.hcn-chunk:focus{ outline:none; box-shadow:var(--focus); border-color:transparent; }






/* ===== Signup form: readable inputs on dark ===== */
html[data-theme="dark"] .auth-form input:not([type="checkbox"]),
html[data-theme="dark"] .auth-form .input-prefix {
  color: #fff;
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  caret-color: #fff;
}

html[data-theme="dark"] .auth-form input::placeholder {
  color: rgba(255,255,255,0.55);
}

/* HCN small boxes */
.auth-form .hcn-chunk {
  width: 100px;               /* adjust to your layout */
  text-align: center;
}

/* Focus ring that pops on dark */
html[data-theme="dark"] .auth-form input:focus {
  outline: none;
  border-color: rgba(112,162,255,0.9);
  box-shadow: 0 0 0 3px rgba(112,162,255,0.25);
}

/* Chrome/Edge autofill (kill yellow & keep white text) */
html[data-theme="dark"] .auth-form input:-webkit-autofill,
html[data-theme="dark"] .auth-form input:-webkit-autofill:hover,
html[data-theme="dark"] .auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset !important;
}

/* Date picker icon on dark */
html[data-theme="dark"] .auth-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.85);
}

/* Password-eye icon stays visible */
html[data-theme="dark"] .auth-form .pw-toggle {
  color: rgba(255,255,255,0.8);
}

/* Error state still visible on dark */
html[data-theme="dark"] .auth-form .input-error {
  border-color: #ff7a7a !important;
  box-shadow: 0 0 0 3px rgba(255, 86, 86, 0.18);
}

/* Disabled inputs still readable */
html[data-theme="dark"] .auth-form input:disabled {
  color: rgba(255,255,255,0.7);
  background-color: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}

/* Signup/Login panel padding (your wrapper is: <section class="card ... auth-form">) */
html[data-theme="dark"] section.card.auth-form {
  position: relative;
  padding: 24px 32px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  overflow: hidden;
  z-index: 12;
  isolation: isolate;
}
html[data-theme="dark"] section.card.auth-form::before{
  content:"";
  position:absolute;
  inset:8px;
  background: rgba(8,12,20,0.76);
  border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.55);
  z-index:0;
  pointer-events:none;
  filter:none;
}
html[data-theme="dark"] section.card.auth-form > *{
  position: relative;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .auth-form input:not([type="checkbox"]),
  html:not([data-theme]) .auth-form .input-prefix {
    color: #fff;
    background-color: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    caret-color: #fff;
  }

  html:not([data-theme]) .auth-form input::placeholder {
    color: rgba(255,255,255,0.55);
  }

  html:not([data-theme]) .auth-form input:focus {
    outline: none;
    border-color: rgba(112,162,255,0.9);
    box-shadow: 0 0 0 3px rgba(112,162,255,0.25);
  }

  html:not([data-theme]) .auth-form input:-webkit-autofill,
  html:not([data-theme]) .auth-form input:-webkit-autofill:hover,
  html:not([data-theme]) .auth-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    transition: background-color 9999s ease-out 0s;
    box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset !important;
  }

  html:not([data-theme]) .auth-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.85);
  }

  html:not([data-theme]) .auth-form .pw-toggle {
    color: rgba(255,255,255,0.8);
  }

  html:not([data-theme]) .auth-form .input-error {
    border-color: #ff7a7a !important;
    box-shadow: 0 0 0 3px rgba(255, 86, 86, 0.18);
  }

  html:not([data-theme]) .auth-form input:disabled {
    color: rgba(255,255,255,0.7);
    background-color: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.14);
  }

  html:not([data-theme]) section.card.auth-form {
    position: relative;
    padding: 24px 32px 32px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35);
    overflow: hidden;
    z-index: 12;
    isolation: isolate;
  }

  html:not([data-theme]) section.card.auth-form::before{
    content:"";
    position:absolute;
    inset:8px;
    background: rgba(8,12,20,0.76);
    border-radius: 10px;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.55);
    z-index:0;
    pointer-events:none;
    filter:none;
  }

  html:not([data-theme]) section.card.auth-form > *{
    position: relative;
    z-index: 1;
  }
}

/* Captcha + submit row spacing */
section.card.auth-form .actions-under {
  margin-top: 14px;
}

/* Ensure Turnstile doesn’t hug edges */
section.card.auth-form .cf-turnstile {
  margin-right: 6px;
  margin-bottom: 6px;
}

/* Prevent widget overflow on narrow widths */
section.card.auth-form .cf-turnstile,
section.card.auth-form .cf-turnstile iframe {
  max-width: 100%;
}

.turnstile-wrap{
  display:flex;
  justify-content:flex-end;
  margin: 18px 0 20px;
  padding-right: 12px;
}

@media (max-width: 560px){
  .turnstile-wrap{
    justify-content:center;
    padding-right: 0;
  }
}

.turnstile-wrap .cf-turnstile,
.turnstile-wrap .cf-turnstile iframe {
  max-width: 100%;
}
.turnstile-wrap .cf-turnstile{
  flex: 0 0 auto;
}

.turnstile-center{
  display:flex;
  justify-content:center;
  margin:14px 0 18px;
}
.turnstile-center .cf-turnstile,
.turnstile-center .cf-turnstile iframe{
  width: 320px;
  max-width: 100%;
  height: auto;
}

.btn.login-submit.pending{
  filter: blur(1px);
  opacity: 0.5;
  pointer-events: none;
  transition: filter .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.btn.login-submit:not(.pending):hover{
  box-shadow: 0 0 10px rgba(112,162,255,0.35);
}

.center-link{
  text-align:center;
    transform: translate(130px, -10px);
}

.actions-under{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.actions-under .check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:1 1 auto;
  min-width: 0;          /* important for flex text */
}

.actions-under .check span{
  flex: 1 1 auto;
  min-width: 260px;      /* prevents the “skinny column” */
  line-height: 1.4;
}

.actions-under .cta-btn{
  flex: 0 0 auto;        /* button does NOT steal layout */
  white-space: nowrap;
  margin-left:auto;
}

/* --- Fix HCN row overlap + keep Turnstile from covering fields --- */

/* allow the HCN input row to wrap instead of colliding */
.auth-form .flex.gap-6.ai-center {
  flex-wrap: wrap;
}

/* keep the 3 chunks together, and allow them to wrap nicely if needed */
.auth-form [aria-label="Health Care Number"]{
  flex-wrap: wrap;
  row-gap: 8px;
}

/* on small screens, center it so it never overlaps */
@media (max-width: 560px){
  .turnstile-wrap{
    justify-content:center;
    padding-right: 0;
  }
}

.turnstile-wrap{
  display:flex;
  justify-content:flex-end;  /* right align */
  margin: 18px 0 20px;
}

/* --- FORCE single-line for Phone + HCN --- */

/* Remove/override the rule that causes wrapping */
.auth-form .flex.gap-6.ai-center{
  flex-wrap: nowrap;   /* override your earlier flex-wrap: wrap */
}

/* Phone row: never wrap */
.auth-form .phone-row{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* Let the phone input shrink instead of pushing to a new line */
.auth-form .phone-row input#phone{
  flex: 1 1 auto;
  min-width: 0;        /* critical: allows shrinking in flex */
}

/* HCN row: keep all 3 chunks on one line */
.auth-form .hcn-row{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  overflow-x: auto;     /* if screen is too narrow, it scrolls instead of wrapping */
  -webkit-overflow-scrolling: touch;
}

/* Optional: make chunks slightly responsive while staying one-line */
.auth-form .hcn-chunk{
  width: clamp(72px, 18vw, 100px);
}

/* --- Turnstile positioning / overlap safety --- */
.turnstile-wrap{
  grid-column: 1 / -1;     /* belt + suspenders */
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;        /* space from HCN row */
  padding-right: 18px;     /* nudge to the right */
}


/* If you still want it centered on small screens */
@media (max-width: 560px){
  .turnstile-wrap{
    justify-content: center;
    padding-right: 0;
  }
}

/* ============================================================
   Signup Block Modal
   Surfaced when /register returns error 2204 (deleted) or
   2205 (blocked). Reuses the shared --c-modal-* variables in
   styles.css so light + dark themes both render correctly.
   No hardcoded colors — every surface routes through theme vars.
   ============================================================ */
.signup-block-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.signup-block-modal.open { display: flex; }
body.signup-block-modal-open { overflow: hidden; }

.signup-block-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-modal-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.signup-block-modal__card {
  position: relative;
  width: min(440px, 100%);
  padding: 22px 24px;
  border-radius: var(--c-radius);
  background: var(--c-modal-bg);
  color: var(--c-modal-text);
  border: 1px solid var(--c-modal-border);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.signup-block-modal__title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--c-modal-text);
}

.signup-block-modal__message {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--c-modal-muted);
}

.signup-block-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.signup-block-modal__actions .btn {
  min-width: 120px;
}

@media (max-width: 480px) {
  .signup-block-modal__card { padding: 18px; }
  .signup-block-modal__actions .btn { width: 100%; }
}

/* ============================================================
   Signup Success Modal
   Surfaced when /register returns {success:true} via the AJAX
   path. Reuses the .signup-block-modal__* skeleton (same layout
   as the error modal); the .signup-block-modal--success modifier
   adds a subtle accent so it reads as positive.

   Visual distinction follows the existing project convention
   (see styles.css line 862: .flash.success::before): emoji icon
   carries the positive signal, --success provides the chromatic
   accent. Both --success values (light and dark) come from
   styles.css; no hardcoded colours here.
   ============================================================ */
.signup-block-modal--success .signup-block-modal__card {
  border-color: var(--success);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45),
              0 0 0 1px var(--success);
}

.signup-block-modal--success .signup-block-modal__title::before {
  content: "✅ ";
}

/* ============================================================
   Phone input light mode fix
   ============================================================
   The inline <style> block in signup.html sets
   `.phone-one input { color: var(--c-text-inverted); }`, which
   resolves to a light/near-white value in light mode and
   disappears against the light .phone-one background (selection
   highlight reveals the text, confirming the value is present).
   Re-anchor the colour to --c-input-text — the canonical input
   text variable used by every other input in styles.css — under
   both light-mode selectors. Dark mode is left untouched, so the
   existing var(--c-text-inverted) still applies there.
   ============================================================ */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .phone-one input {
    color: var(--c-input-text);
  }
}
html[data-theme="light"] .phone-one input {
  color: var(--c-input-text);
}

/* --- .phone-one border in light mode ---
   The inline rule `.phone-one { border: 1px solid var(--c-passkey-border); }`
   resolves to a near-invisible value in light mode, so the field looks
   borderless. Re-anchor to --c-input-border — the canonical input-border
   variable used by every other input (see styles.css line 720). */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .phone-one {
    border-color: var(--c-input-border);
  }
}
html[data-theme="light"] .phone-one {
  border-color: var(--c-input-border);
}

/* --- "+1" prefix in light mode ---
   The "+1" is rendered as the `.phone-one::before` pseudo-element (NOT a
   `.input-prefix` <span> — that selector exists for an older two-input
   layout that isn't in the current signup DOM). Its inline rule sets
   `color: var(--c-text-inverted)`, which resolves to a light/white value
   in light mode and disappears. Re-anchor to --c-input-text so the "+1"
   matches the typed phone number colour and stays readable. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .phone-one::before {
    color: var(--c-input-text);
  }
}
html[data-theme="light"] .phone-one::before {
  color: var(--c-input-text);
}