/* ============================================================
   GEM — DEMO-MODE auth pages (login-patient.html +
   login-professional.html ONLY; loaded after styles.css).
   Everything here dresses a FRONT-END DEMO: no real auth, no
   storage, no email. Compat rules as everywhere: no :has(),
   no inset shorthand, no flex gap.
   ============================================================ */

/* Subtle honesty marker shown on the login/register/member views. */
.demo-pill {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple-deep);
  background: var(--white);
  border: 1px dashed var(--gold);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

/* The shared form recipe covers text/email but not password (same gap the
   portal URL fields had) — mirror it so the password box matches. */
.form-wrap input[type="password"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 2px solid var(--text-muted);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.form-wrap input[type="password"]:focus { border-color: var(--purple); }

/* Login <-> register toggle controls: professional, quiet, 44px targets. */
.auth-alt {
  margin: 1.4rem 0 0;
  font-size: 0.98rem;
  color: var(--text);
}
.auth-toggle,
.auth-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.2rem 0.15rem;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-toggle:hover, .auth-back:hover { color: var(--purple-bright); }
.auth-toggle:focus-visible, .auth-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.auth-back { margin-bottom: 0.4rem; }

/* Simulated "account ready" state. */
.auth-welcome {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--lavender-light);
  border: 1px solid rgba(58, 42, 102, 0.14);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}
.auth-welcome h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  color: var(--purple-deep);
}
.auth-welcome p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; color: var(--text); }

/* Quiet "preview the destination" arrow-link row under the card. */
.auth-preview { margin: 1.75rem 0 0; }
.auth-preview__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.2rem 0.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--purple);
  text-decoration: none;                /* .arrowlink-text carries the continuous border-underline */
  transition: color 0.18s ease;
}
.auth-preview__link:hover { color: var(--purple-bright); }
.auth-preview__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }


/* ============ SPLIT-SCREEN LAYOUT (2026-08 redesign) ============
   Deep-purple brand panel (~45%) beside the form panel (~55%); stacks
   brand-banner-above-form on narrow screens. All panel text measured AA on
   the purple (white ~14.7:1, champagne kicker ~8.5:1, lavender-white line
   ~13:1). The botanical flourish is decorative (aria-hidden, low opacity,
   static - nothing animates). */
.auth-split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .auth-split { grid-template-columns: 45fr 55fr; align-items: stretch; min-height: 72vh; }
}
.auth-split__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;               /* content block vertically CENTERED - shares the axis with the centered form card */
  padding: clamp(2.5rem, 10%, 6.5rem);   /* 2026-08 composition fix: ~10% of the panel width - content sits INSIDE the panel, never hugging the edge */
  /* 2026-08 alignment: the text's LEFT edge sits on the site's standard content
     container (.container: 1120px cap, 1.25rem side padding) - the same line the
     footer content starts on - while the purple field itself stays full-bleed.
     Padding %% resolves against this grid ITEM's area = the 45fr column =
     45%% of the layout width, so 111.111%% of it = half the full layout width;
     minus (1120/2 - 20px) = the container's left edge EXACTLY - and unlike
     50vw this is immune to the scrollbar (vw includes it, layout does not).
     TIED to the 45fr/55fr split above - recompute if that ratio changes.
     max() floors it at the container's own 1.25rem padding on narrower
     viewports (no special-case indent); the <=899.98px stacked block below
     overrides with its own flat 1.25rem. */
  padding-left: max(1.25rem, calc(111.111% - 540px));
  /* 2026-08 lightened (client direction): the old #2E2150->#3A2A66 gradient read
     as a third unrelated depth between header and footer; now the canonical
     brand purple #3A2A66 flat — one palette family with the footer.
     DEPTH (2026-08, same client direction): a soft warm radial glow, upper-right,
     so light falls across the panel toward the lower left and catches the sprigs
     — champagne #ECD6AE at max 0.10 alpha fading to nothing by 62%; depth in the
     material, never a visible circle. Contrast is measured against the glow's
     LIGHTEST point (#3A2A66 + 0.10 champagne = rgb(76,59,109)): white promise
     9.75:1, champagne kicker 6.87:1, cream line 9.34:1 — all AA. */
  /* 2026-08 lightened again (client direction): #3A2A66 -> #463378, with the
     champagne glow STRENGTHENED (0.10 -> 0.16 max, reach 62% -> 65%) so the
     panel reads as a lit surface, not a flat fill. NOT drifted toward #9E7AC8
     (client-rejected); no backdrop-filter. Contrast re-measured at the glow's
     LIGHTEST point (#463378 + 0.16 champagne = rgb(97,77,129)): white promise
     7.27:1, champagne kicker 5.12:1, cream line 6.91:1 — all AA. */
  background:
    radial-gradient(120% 95% at 82% 10%,
      rgba(236, 214, 174, 0.16) 0%,
      rgba(236, 214, 174, 0.08) 32%,
      rgba(236, 214, 174, 0) 65%),
    #463378;
  color: #FFFFFF;
}
.auth-split__flourish {
  /* 2026-08: three lavender sprigs clustered LOW-RIGHT, away from the text block.
     Stems end exactly at the SVG's bottom edge and the box sits ON the panel's
     bottom (bottom:0, no negative offsets) so nothing crops mid-stem — the
     cluster reads as growing from the panel edge. Single tone from the palette:
     --lavender, at 0.45 — deliberately more present than the old 0.14 watermark
     leaf because it no longer sits near the text. Static, decorative only. */
  position: absolute;
  right: 10px;
  bottom: 0;
  width: clamp(160px, 17vw, 220px);
  height: auto;
  color: var(--lavender);
  opacity: 0.45;
  pointer-events: none;
}
/* Lavender-silhouette flourish (2026-08, replaces the sprigs): a photographic
   single-tone cluster in the site's lavender, LOWER-RIGHT, bleeding off the
   panel's right and bottom edges (overflow:hidden crops it - reads as
   intentional). Low opacity so it recedes behind the heading. */
.auth-split__flourish--img {
  right: -24px;
  bottom: -30px;
  width: clamp(150px, 15vw, 195px);      /* 210px put the cluster's top 8px into the paragraph's box at 1440 - 195px clears it */
  opacity: 0.22;
  display: block;
}
.auth-split__flourish--img img { display: block; width: 100%; height: auto; }
.auth-split__kicker {
  position: relative;
  margin: 0 0 1.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ECD6AE;                        /* champagne - documented ~8.5:1 on the deep purple */
}
.auth-split__promise {
  position: relative;
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);   /* 2026-08: real presence - the heading holds its panel */
  line-height: 1.28;
  color: #FFFFFF;                        /* ~14.7:1 */
}
.auth-split__line {
  position: relative;
  margin: 0;
  max-width: 34ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cream);                   /* 2026-08 warmth: site cream #FBF9F4 (was neutral #EFEAF6) — 9.34:1 at the glow's lightest point */
}
.auth-split__formcol {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  /* 2026-08 breathing room: vertical padding 56px -> 72px at 1440 so the card
     sits with more air; the clamp scales DOWN on phones (32px at 375) so extra
     padding never pushes the Log in button below the first screen. Horizontal
     padding and the card's own internals are unchanged. */
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem);
}
.auth-split__inner {
  width: 100%;
  max-width: 460px;
  /* 2026-08 card lift: a real card on the cream ground - white surface,
     hairline border, soft understated shadow. */
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.12);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 14px 34px -22px rgba(46, 33, 80, 0.35);
}
.auth-split__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--purple-deep);
}
.auth-split__sub {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-warm);
}
/* Narrow screens: the brand panel compresses to a slim banner so the form
   isn't pushed far down. */
@media (max-width: 899.98px) {
  .auth-split__brand { padding: 1.25rem; }   /* 2026-08 alignment: horizontal = the .container's own 1.25rem - same line as the rest of the page, no special indent */
  .auth-split__kicker { margin-bottom: 0.6rem; }
  .auth-split__promise { font-size: 1.25rem; margin-bottom: 0.4rem; }
  /* Slim banner: the paragraph's measure is capped so its lines can never run
     under the sprig cluster on the right (measured: uncapped, line 2 reached
     x=320 and crossed into the sprigs at 375px). ~92px stays reserved for the
     cluster + breathing room. */
  .auth-split__line { font-size: 0.92rem; max-width: min(34ch, calc(100% - 92px)); }
  .auth-split__flourish { width: 100px; right: 8px; bottom: 0; }   /* slim banner: smaller cluster, still bottom-anchored — no mid-stem crop */
  .auth-split__flourish--img { width: 88px; right: -10px; bottom: -16px; }   /* slim banner: reduced (not hidden) so the text keeps its reserved clearance */
}