@charset "utf-8";
/* ===========================================================================
   PT PAL — SIGN IN, "SKY" PALETTE
   Ported from design-samples/4-taste-skill.html?palette=sky on 2026-08-05.

   Loaded by login.php and forgotpassword.php, via the $sky_design flag in
   includes/header-login.php. Those are the only two pages that include that header.
   dist/css/login.css is still left untouched: it is the fallback branch of the same
   flag, and other screens reuse its class vocabulary (.wrap, .content, .user,
   .form-wrap, .button, .forgot, .btext), which would break if those rules changed.

   COLOUR. Every value below is the sky variant from the sample, and the contrast
   figures are measured against --bg / --surface, not asserted:
     --fg    #0D2B44  13.6:1     --fg-2 #2B5474  7.2:1     --fg-3 #4E6E8A  4.6:1
     --accent #17567F with white  5.9:1   (production's #0E98D8 measures 3.23:1,
     under the 4.5:1 AA floor for a 14px control, which is why it is not used)

   NO WEBFONTS. System stack only. A login page for a HIPAA product should not
   hand a referrer and client IP to fonts.googleapis.com on every sign-in, and
   the previous Raleway @import was downloaded and never actually applied.
   =========================================================================== */

:root {
  color-scheme: light;

  --bg:        #E4F1FA;   /* production's rgba(14,152,216,.2) over white */
  --surface:   #FFFFFF;
  --line:      #B6DAF0;
  --line-soft: #D6EAF7;

  --fg:        #0D2B44;
  --fg-2:      #2B5474;
  --fg-3:      #4E6E8A;

  --accent:    #17567F;
  --accent-h:  #10405F;
  --on-accent: #FFFFFF;

  --bad:       #A0271D;
  --bad-bg:    #FBEDEB;
  --bad-line:  #E4B9B3;

  /* Success. Needed by forgotpassword.php, whose AJAX reply can be a positive
     result ("Please check your inbox"). #1B6B4A on --ok-bg measures 5.3:1. */
  --ok:        #1B6B4A;
  --ok-bg:     #E9F5EF;
  --ok-line:   #B7DCC9;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;

  --s1: 4px; --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px;   --s7: 44px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t: 180ms cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: auto; }

body.sky {
  margin: 0;
  min-height: 100dvh;          /* never 100vh: iOS toolbar makes it jump */
  display: grid;
  place-items: center;
  padding: var(--s6) var(--s4);
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sky-skip {
  position: fixed; left: var(--s4); top: -64px; z-index: 20;
  padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top var(--t);
}
.sky-skip:focus { top: var(--s4); color: var(--on-accent); }

.sky-shell { width: 100%; max-width: 432px; min-width: 0; }   /* min-width:0 so this grid item can shrink to its track instead of being forced wide by non-wrapping content (e.g. the gate's long CTA) */

/* Brand: the real local asset, not an illustration. */
.sky-brand { display: flex; justify-content: center; margin-bottom: var(--s5); }
.sky-brand img { width: 96px; height: 96px; display: block; }
.sky-brand a { display: inline-block; border-radius: var(--r-sm); }

.sky-shell h1 {
  margin: 0; text-align: center;
  font-size: 24px; line-height: 1.25; letter-spacing: -.021em; font-weight: 650;
  color: var(--fg);
}
.sky-lede { margin: var(--s2) 0 0; text-align: center; font-size: 15px; color: var(--fg-3); }

/* Grouping by surface + hairline, not by elevation theatre. */
.sky-card {
  margin-top: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
@media (min-width: 480px) { .sky-card { padding: var(--s6); } }

/* ---- Error -------------------------------------------------------------
   Inline, above the fields it describes. The server sets display:block via
   $login_class, so the base state here is display:none. Kept as #RedMsg /
   #displayRedMsg because js/therapists.js writes to those ids. */
#RedMsg {
  display: none;
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--bad-bg);
  border: 1px solid var(--bad-line);
  border-left: 3px solid var(--bad);
  border-radius: var(--r-md);
}
#RedMsg[style*="block"] { display: block; }
#displayRedMsg {
  margin: 0;
  font-size: 14px; line-height: 1.5; font-weight: 500;
  color: var(--bad);          /* 6.1:1 on --bad-bg */
  text-align: left;
}
#displayRedMsg i, #displayRedMsg .fas { margin-right: var(--s2); }
#displayRedMsg a { color: var(--bad); font-weight: 600; text-underline-offset: 2px; }

/* ---- Recovery message (forgotpassword.php) ------------------------------
   A DIFFERENT container from #RedMsg above. js/therapists.js:360-382 targets
   `.displayRedMsg1` by CLASS and replaces its innerHTML with one of three
   fragments, so the wrapper cannot carry the semantic colour itself:
     status -1  <h5 class="red">   account inactive / does not exist
     status  0  <h5 class="red">   email could not be sent
     status  1  <h5 class="green" style="color: green"> check your inbox
   :has() picks the tint off the injected child. Browsers without :has() still
   get a legible neutral card plus coloured text, so this degrades safely. */
.displayRedMsg1 {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--fg-3);
  border-radius: var(--r-md);
  text-align: left;
}
.displayRedMsg1:has(.red)   { background: var(--bad-bg); border-color: var(--bad-line); border-left-color: var(--bad); }
.displayRedMsg1:has(.green) { background: var(--ok-bg);  border-color: var(--ok-line);  border-left-color: var(--ok); }

.displayRedMsg1 h3,
.displayRedMsg1 h4,
.displayRedMsg1 h5,
.displayRedMsg1 p {
  margin: 0;
  font-size: 14px; line-height: 1.5; font-weight: 500;
  text-align: left !important;   /* the injected h5 carries text-align:center inline */
}
.displayRedMsg1 .red { color: var(--bad); }
/* !important is required, not decorative: the success fragment ships
   style="color: green" inline, and CSS green (#008000) measures 4.53:1 here,
   which sits on the AA boundary. --ok measures 5.3:1. */
.displayRedMsg1 .green { color: var(--ok) !important; }

/* ---- Fields ------------------------------------------------------------- */
.sky-field { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.sky-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.sky-field label { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.sky-field-top a { font-size: 13px; font-weight: 500; color: var(--accent);
                   text-decoration: none; padding: 2px; border-radius: 4px; }
.sky-field-top a:hover { text-decoration: underline; color: var(--accent-h); }
.sky-hint { margin: 0; font-size: 13px; color: var(--fg-3); }

.sky-ctrl { position: relative; display: flex; }
/* Enumerated rather than a bare `.sky-field input` so checkboxes and radios added
   later are not swept in. email/tel are here because forgotpassword.php uses
   type=email to get the right mobile keyboard; omitting it silently dropped that
   field to its 31px UA default height instead of the 46px touch target. */
.sky-field input[type="text"],
.sky-field input[type="email"],
.sky-field input[type="tel"],
.sky-field input[type="password"] {
  width: 100%; min-height: 46px;
  padding: var(--s3) var(--s4);
  font: inherit; font-size: 16px; color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--t), background var(--t);
}
.sky-field input::placeholder { color: var(--fg-3); }   /* 4.6:1 on --surface */
.sky-field input:hover { border-color: var(--fg-3); }
.sky-field input:focus { border-color: var(--accent); }
/* .errorfield is what js/therapists.js:357 adds to #ftherapist_email on an empty
   submit, and what login.php's validator adds to the credential fields. */
.sky-field input.errorfield,
.sky-field input[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-bg); }
.sky-field.has-eye input { padding-right: 52px; }

/* Password reveal. 44x44 hit area on the WRAPPER, so the glyph does not grow. */
.sky-eye {
  position: absolute; right: 1px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--fg-3); cursor: pointer;
  transition: color var(--t), background var(--t);
}
.sky-eye:hover { color: var(--fg); background: var(--line-soft); }
.sky-eye i { font-size: 17px; line-height: 1; }

/* ---- Buttons ------------------------------------------------------------ */
.sky-btn {
  width: 100%; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  font: inherit; font-size: 16px; font-weight: 600;
  white-space: nowrap;                       /* the CTA never wraps */
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t), color var(--t);
}
.sky-btn:active { transform: translateY(1px); }
.sky-btn-go { background: var(--accent); color: var(--on-accent); }
.sky-btn-go:hover, .sky-btn-go:focus { background: var(--accent-h); color: var(--on-accent); }
.sky-btn-alt {
  margin-top: var(--s3);
  background: var(--surface); color: var(--fg); border-color: var(--line);
}
.sky-btn-alt:hover, .sky-btn-alt:focus { background: var(--line-soft); border-color: var(--fg-3); color: var(--fg); }

.sky-or {
  display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3);
}
.sky-or::before, .sky-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Scan-QR sign-in option HIDDEN per request (2026-08-31). To bring it back, set
   `display: inline-flex` (shows at every width), or use `display: none` only
   above 950px to match production's phone-camera breakpoint. */
.sky-qr { display: none; }

/* ---- Monitoring notice --------------------------------------------------
   A legal statement, so it gets its own block outside the form card rather than
   being demoted to fine print. Content is DB-driven (fill_settings_list). */
.sky-notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  margin-top: var(--s5); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--line-soft);
}
.sky-notice > i { flex: none; margin-top: 3.2px; color: var(--fg-3); font-size: 17px; }
.sky-notice-body { flex: 1; min-width: 0; }
.sky-notice-body > div { margin: 0; }
/* Stacked states (reduced-motion `.is-static`, pre-init, or no-JS): give every slide
   after the first clear space above its title (e.g. "Welcome!") so it is not flush
   against the notice above it. Excluded when `.is-rotating`, whose slides are
   position:absolute and cross-dissolve one at a time in place. */
.sky-notice-body:not(.is-rotating) > div + div { margin-top: var(--s4); }
.sky-notice h2 {
  margin: 0 0 2px; font-size: 13px; font-weight: 650; color: var(--fg);
  letter-spacing: .01em;
}
.sky-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-2); }

/* Rotating variant. Only one slide is visible at a time EXCEPT during the fade,
   when both overlap; absolute positioning makes them cross-dissolve in place
   instead of stacking vertically. min-height is set from JS to the tallest slide,
   because absolute children give the container no intrinsic height. */
.sky-notice-body.is-rotating { position: relative; }
.sky-notice-body.is-rotating > div { position: absolute; top: 0; left: 0; right: 0; }

/* ---- Footer ------------------------------------------------------------- */
.sky-foot {
  margin-top: var(--s5); display: flex; justify-content: center;
  gap: var(--s5); flex-wrap: wrap; font-size: 13px; color: var(--fg-3);
}
.sky-foot a { color: var(--fg-2); text-decoration: none; padding: 4px; border-radius: 4px; }
.sky-foot a:hover { color: var(--accent); text-decoration: underline; }

/* ---- REL "do not enter" state ------------------------------------------- */
#warning-container.sky-card { border-color: var(--bad-line); }
#warning-container h2 {
  margin: 0 0 var(--s2); font-size: 18px; font-weight: 650; color: var(--bad);
}
#warning-container p { margin: 0 0 var(--s5); font-size: 15px; color: var(--fg-2); }
#warning-container .sky-btn + .sky-btn { margin-top: var(--s3); }
/* These CTAs carry long labels ("Take me to the clinician site"). Unlike the short
   form buttons they must be allowed to WRAP on narrow screens — with the global
   `white-space: nowrap`, the button's min-content width forces .sky-shell (a grid
   item) wider than the body's side padding, so the gate loses the horizontal spacing
   the login form keeps. Wrapping lets the card shrink to the viewport like the form. */
#warning-container .sky-btn { white-space: normal; }

/* ---- Wide variant + Bootstrap form reconciliation ------------------------
   signup_registration_clerk.php is DUAL-MODE from one file: unauthenticated it is
   a public signup page, and for an org admin ($session_organization_id > 0) it is
   an in-app "Add Registration Staff" form inside a popup overlay. Only the public
   mode gets `body.sky`, so every rule here is scoped under it and the admin mode
   is untouched.

   It is also a 12-field form with facility/department selects, so it cannot use
   the 432px login shell. These rules give the existing Bootstrap markup
   (.form-group / .control-label / .form-control) the sky palette rather than
   rewriting twelve form groups into .sky-field. */
/* SCOPED TO .sky-shell--wide, NOT body.sky. An earlier revision of this block used
   `body.sky ...`, which leaked onto login.php and forgotpassword.php: `body.sky a`
   scores (0,1,2) and beat `.sky-foot a` at (0,1,1), repainting their footer links
   from --fg-2 to --accent, and `body.sky #btnLogin` outranked .sky-btn-go on
   login.php's own submit by virtue of the id. Confirmed live before rescoping:
   footer links measured rgb(23,86,127) instead of rgb(43,84,116). Everything here
   is now confined to the wide signup shell, which only this page uses. */
.sky-shell.sky-shell--wide { max-width: 720px; }

.sky-shell--wide .form-group { margin-bottom: var(--s4); }
.sky-shell--wide .control-label {
  font-size: 14px; font-weight: 600; color: var(--fg);
  padding-top: var(--s3); text-align: left;
}
.sky-shell--wide .red-txt { color: var(--bad); }
.sky-shell--wide .form-control,
.sky-shell--wide select.form-control {
  min-height: 46px;
  padding: var(--s3) var(--s4);
  font-size: 16px; color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--t), background var(--t);
}
.sky-shell--wide .form-control:hover { border-color: var(--fg-3); }
.sky-shell--wide .form-control:focus { border-color: var(--accent); box-shadow: none; }
.sky-shell--wide .form-control.errorfield { border-color: var(--bad); background: var(--bad-bg); }
.sky-shell--wide .form-control::placeholder { color: var(--fg-3); }

/* The signup submit is this page's one accent-filled control, matching login.php. */
.sky-shell--wide #btnLogin,
.sky-shell--wide .loginbtn {
  width: 100%; min-height: 46px;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.sky-shell--wide #btnLogin:hover, .sky-shell--wide .loginbtn:hover { background: var(--accent-h); }
.sky-shell--wide .btn-primary {
  background: var(--surface); color: var(--fg); border: 1px solid var(--line);
  border-radius: var(--r-md); font-weight: 600;
}
.sky-shell--wide .btn-primary:hover { background: var(--line-soft); border-color: var(--fg-3); color: var(--fg); }
.sky-shell--wide #RedMsg h3 { margin: 0; font-size: 14px; font-weight: 500; color: var(--bad); }
.sky-shell--wide .blue-color { color: var(--accent); }

/* ---- Focus -------------------------------------------------------------
   One visible ring for everything. The old sheet removed the vendor rings in
   four places and replaced them with nothing; 0 of 8 controls showed focus. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sky-btn:active { transform: none; }
}

/* ---- Bootstrap modal reconciliation -------------------------------------
   The cookie dialogs are Bootstrap markup and keep Bootstrap's behaviour; these
   only align their colours with the palette. */
.modal-content { border-radius: var(--r-lg); border: 1px solid var(--line); }
.modal-header, .modal-footer { border-color: var(--line-soft); }
.modal-title { color: var(--fg); font-weight: 650; }
.modal-body { color: var(--fg-2); }
.modal-body h2 { font-size: 16px; color: var(--fg); }