/* juntos-signin.css — the premium look for the signed-out pages (2026-10-23, the owner's chosen design).
 *
 * GENERATED INTO EACH VANILLA APP by scripts/generate-ui-css.js; edit it here, never in an app.
 * OPT-IN: nothing changes until a page puts `ju-signin` on its <body> (and, for an app's own colour, one of
 * `ju-app-care` / `ju-app-groups` / `ju-app-serving` / `ju-app-kids`). Link it AFTER /juntos-tokens.css.
 *
 * What it gives every sign-in, reset and "find your church" page:
 *   - the cream ground with faint teal / peach / lavender washes, and the app's glow behind the top;
 *   - the card: white, 24px corners, a soft deep shadow;
 *   - an app's logo row (`.card > .logo`) becomes a NAVY BAND across the top of the card with the app's glow, its
 *     words white / --on-dark-muted, and a language button on it turns frosted (the page swaps in the white mark);
 *   - the main button is a pill: the church's own colour where the page sets --tenant-primary (Juntos Portal's
 *     sign-in is themed per church), otherwise Juntos teal as a gradient;
 *   - fields with 12px corners and a 48px height.
 * Selectors are the classes these pages already share (.card, .logo, .juntos-signin, .juntos-btn, button.primary,
 * .go, .lang-toggle, .lang-btn, .lang). `body.ju-signin` outranks a page's own one-class rules, so it wins whatever
 * order the sheets load in. Contrast: white on --teal-2 5.2:1; --on-dark-muted on navy past 10:1. */

body.ju-signin.ju-app-care    { --ju-glow: var(--glow-coral); }
body.ju-signin.ju-app-groups  { --ju-glow: var(--glow-sage); }
body.ju-signin.ju-app-serving { --ju-glow: var(--glow-amber); }
body.ju-signin.ju-app-kids    { --ju-glow: var(--glow-purple); }

/* Plain cream ground: no glows, no washes (visual rule 8). */
body.ju-signin {
  background: var(--bg, #f7f5f0);
  min-height: 100vh;
  /* Keeps the card off the screen's edges on a phone (some pages set no side padding of their own). */
  padding-left: 16px; padding-right: 16px;
}

/* The card. */
body.ju-signin .card {
  background: var(--surface, #fff);
  border: 1px solid rgba(6, 29, 45, .06);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(6,29,45,.05), 0 24px 60px rgba(6,29,45,.12);
}
body.ju-signin .card h1 {
  color: var(--navy, #061d2d); font-weight: 800; letter-spacing: -.3px;
}
body.ju-signin .card .sub { color: var(--slate, #4c6f77); }

/* An app's logo row is a navy band across the top of the card. The card's padding is set here so the band can
   reach its edges exactly (28px; 22px on a phone). */
body.ju-signin .card:has(> .logo) { padding: 0 28px 28px; overflow: hidden; }
body.ju-signin .card > .logo {
  position: relative;
  margin: 0 -28px 26px; padding: 22px 28px;
  background-color: var(--navy, #061d2d);
  background-image: linear-gradient(160deg, var(--navy-2, #0b2638) 0%, var(--navy, #061d2d) 80%);
  border-bottom: 0;
  --focus-ring: #ffffff; /* a dark band: focus inside it is a white ring (rule 13) */
}
body.ju-signin .card > .logo img { filter: none; }
body.ju-signin .card > .logo .logo-text { color: #ffffff; }
body.ju-signin .card > .logo .logo-sub { color: var(--on-dark-muted, #c7dde0); }
body.ju-signin .card > .logo .lang-toggle,
body.ju-signin .card > .logo .lang-btn {
  color: #ffffff;
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-end));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine);
}
body.ju-signin .card > .logo .lang-toggle:focus-visible,
body.ju-signin .card > .logo .lang-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* The main button: a pill. The church's colour on Portal's sign-in, Juntos teal everywhere else. */
body.ju-signin .juntos-signin,
body.ju-signin .juntos-btn,
body.ju-signin button.primary,
body.ju-signin .card button[type=submit],
body.ju-signin .go:not(.secondary) {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border: 0; border-radius: 999px;
  color: var(--tenant-primary-ink, #ffffff);
  background: var(--tenant-primary, linear-gradient(135deg, var(--teal-2, #00797a) 0%, var(--teal, #066164) 100%));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tenant-primary, var(--teal-2, #00797a)) 35%, transparent),
              inset 0 1px 0 var(--glass-shine);
  font-weight: 700; text-decoration: none;
}
body.ju-signin .juntos-signin:hover,
body.ju-signin .juntos-btn:hover,
body.ju-signin button.primary:hover:not(:disabled),
body.ju-signin .card button[type=submit]:hover:not(:disabled),
body.ju-signin .go:not(.secondary):hover {
  color: var(--tenant-accent-ink, #ffffff);
  background: var(--tenant-accent, var(--teal, #066164));
}
body.ju-signin button.primary:disabled,
body.ju-signin .card button[type=submit]:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; filter: none; }
body.ju-signin .go.secondary { border-radius: 999px; min-height: 48px; }

/* Fields. */
body.ju-signin .card input[type=email],
body.ju-signin .card input[type=password],
body.ju-signin .card input[type=text] {
  min-height: 48px; border-radius: 12px; border: 1px solid var(--line-strong, #7f8789); background: #fff;
}
body.ju-signin .card .addr { border-radius: 12px; }

/* A language button that is not on the band: a white pill. */
body.ju-signin .lang-toggle:not(.card .lang-toggle),
body.ju-signin .card .lang:not(.logo .lang) {
  border-radius: 999px; background: #ffffff; border: 1px solid var(--line-strong, #7f8789);
  box-shadow: 0 4px 12px rgba(6,29,45,.08);
}

@media (max-width: 480px) {
  body.ju-signin .card { border-radius: 22px; }
  body.ju-signin .card:has(> .logo) { padding: 0 22px 24px; }
  body.ju-signin .card > .logo { margin: 0 -22px 22px; padding: 20px 22px; }
}