/* =============================================================
   Altera Digital Health — AD FS Custom Theme  v2.1
   Colors: exact CSS variables from alterahealth.com
   Font: Montserrat (matches site)
   WCAG 2.2 AA compliant | No external CDN dependencies
   ============================================================= */

/* ── 1. Altera Brand Tokens (exact from site) ─────────────── */
:root {
  /* Backgrounds */
  --as-bg-primary:   #393392;   /* Deep purple — nav, card accents */
  --as-bg-secondary: #F0F0F0;   /* Light gray — subtle backgrounds */
  --as-bg-tertiary:  #151744;   /* Dark navy — footer, deep bg */
  --as-bg-page:      #FFFFFF;   /* White page */

  /* Accents */
  --as-accent-primary:   #F56E7B;   /* Coral-pink — primary CTAs */
  --as-accent-secondary: #E6E6E6;   /* Light gray accent */

  /* Borders */
  --as-border-primary: #808080;

  /* Typography */
  --as-font-family:       "Montserrat", "Segoe UI", Arial, sans-serif;
  --as-font-weight-light:   300;
  --as-font-weight-regular: 400;
  --as-font-weight-bold:    500;
  --as-font-weight-xbold:   700;
  --as-text-color:    #000000;
  --as-link-color:    #F56E7B;
  --as-link-color-hover: #393392;
  --as-heading-color: #393392;
  --as-heading-alt:   #707CF1;
  --as-text-light:    #151744;

  /* Global nav */
  --as-gn-link-color:       #FFFFFF;
  --as-gn-link-hover:       #F56E7B;
  --as-gn-sub-link-color:   #393392;
  --as-gn-sub-link-hover:   #F56E7B;
  --as-gn-sub-border-color: #E6E6E6;
  --as-gn-sub-background:   #F0F0F0;

  /* Footer */
  --as-fn-link-color: #FFFFFF;
  --as-fn-link-hover: #F56E7B;
  --as-fn-copy:       #707CF1;

  /* Banner */
  --as-banner-copy-color: #FFFFFF;

  /* Buttons — primary (coral-pink) */
  --as-btn-font-size:    14px;
  --as-btn-padding:      8px 14px;
  --as-btn-bg:           #F56E7B;
  --as-btn-bg-hover:     #B24646;
  --as-btn-color:        #FFFFFF;
  --as-btn-color-hover:  #FFFFFF;
  --as-btn-border-width: 1px;
  --as-btn-border-style: solid;
  --as-btn-border-radius: 8px;
  --as-btn-border:       #F56E7B;
  --as-btn-border-hover: #B24646;

  /* Buttons — alternate (periwinkle) */
  --as-btn-alternate-color:       #FFFFFF;
  --as-btn-alternate-color-hover: #FFFFFF;
  --as-btn-alternate-border:      #8da0ff;
  --as-btn-alternate-border-hover: #FFFFFF;
  --as-btn-alternate-bg:          #8da0ff;
  --as-btn-alternate-bg-hover:    transparent;

  /* Buttons — reverse (ghost on dark) */
  --as-btn-reverse-color:       #FFFFFF;
  --as-btn-reverse-color-hover: #F56E7B;
  --as-btn-reverse-border:      #FFFFFF;
  --as-btn-reverse-border-hover: #F56E7B;
  --as-btn-reverse-bg:          transparent;
  --as-btn-reverse-bg-hover:    transparent;

  /* ── Component layout ── */
  --card-radius: 12px;
  --card-shadow: 0 20px 60px rgba(21, 23, 68, 0.40), 0 4px 16px rgba(21, 23, 68, 0.20);
  --card-max-width: 440px;   /* scaled up on large monitors (see §18) */
  --card-pad: 2.5rem;        /* horizontal/top card padding; shrinks on small screens */
  --input-height: 48px;
  --input-radius: 8px;
  --focus-ring:   0 0 0 3px rgba(245, 110, 123, 0.32);
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 200ms;

  /* Semantic */
  --color-error:        #C53030;
  --color-error-bg:     #FFF5F5;
  --color-error-border: #FEB2B2;

  /* Tell the browser this page already handles both schemes itself, so
     Chrome/Edge's own auto-darkening pass doesn't additionally re-color
     elements on top of the palette we already swap below. */
  color-scheme: light dark;
}

/* Dark mode — keep Altera brand, darken surfaces */
@media (prefers-color-scheme: dark) {
  :root {
    --as-bg-page:    #1A1A3A;
    --as-text-color: #F0F0F0;
    --color-error-bg:     #3D0B0B;
    --color-error-border: #822727;

    /* These three are near-black brand tones meant for a WHITE card
       (--as-bg-page: #FFFFFF). With the card now #1A1A3A they were landing
       almost exactly on top of the background — text was rendering but
       effectively invisible. Lighten them for the dark card. */
    --as-text-light:       #C7CCF0;   /* was #151744 — labels, subtext, sso-notice, loading text */
    --as-heading-color:    #9AA8FF;   /* was #393392 — sign-in heading, sign-out heading */
    --as-link-color-hover: #C2CBFF;   /* was #393392 — link hover state */
  }
  .sso-notice-icon,
  .sso-notice strong { color: #9AA8FF; }
}

/* ── 2. Reset ─────────────────────────────────────────────── */
/* Root font-size drives all rem units; it steps up/down per breakpoint (§18). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--as-font-family);
  font-weight: var(--as-font-weight-regular);
  line-height: 1.6;
  color: var(--as-text-color);
  /* Page bg: Altera deep purple-navy gradient */
  background: linear-gradient(150deg, var(--as-bg-tertiary) 0%, var(--as-bg-primary) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;   /* dvh tracks mobile browser chrome (address bar) */
  display: flex;
  flex-direction: column;
}

a {
  color: var(--as-link-color);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--as-link-color-hover); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--as-accent-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 3. Layout ────────────────────────────────────────────── */
#content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ── 4. Login card ────────────────────────────────────────── */
.login-card {
  background: var(--as-bg-page);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  /* Top accent bar in Altera coral-pink */
  border-top: 4px solid var(--as-accent-primary);
  width: 100%;
  max-width: var(--card-max-width);
  margin: 0 auto;
  padding: var(--card-pad) var(--card-pad) 2rem;
}

/* ── 5. Branding ──────────────────────────────────────────── */
#branding {
  text-align: center;
  margin-bottom: 1.75rem;
}
#branding img {
  max-height: 50px;
  width: auto;
  max-width: 240px;
}

/* Brand logo (Client-portal.png) has WHITE text on a transparent background,
   so it needs a dark brand backdrop to stay legible on the white card. */
.brand-logo-wrap {
  text-align: center;
  margin-bottom: 1.5rem;
  background: var(--as-bg-primary);     /* #393392 deep purple */
  border-radius: 10px;
  padding: 16px 18px;
}
.brand-logo { max-height: 48px; width: auto; max-width: 200px; vertical-align: middle; }

/* ── 6. Headings ──────────────────────────────────────────── */
.sign-in-heading {
  font-size: 1.2rem;
  font-weight: var(--as-font-weight-xbold);
  color: var(--as-heading-color);   /* #393392 purple */
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.sign-in-subtext {
  font-size: 0.875rem;
  color: var(--as-text-light);      /* #151744 dark navy */
  font-weight: var(--as-font-weight-regular);
  margin-bottom: 1.5rem;
}

/* ── 7. Form fields ───────────────────────────────────────── */
.form-group { margin-bottom: 1rem; position: relative; }

label.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--as-font-weight-bold);   /* 500 */
  color: var(--as-text-light);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.input-wrapper { position: relative; display: flex; align-items: center; }

.input-icon {
  position: absolute;
  left: 14px;
  width: 17px; height: 17px;
  color: var(--as-border-primary);
  pointer-events: none;
  flex-shrink: 0;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  height: var(--input-height);
  padding: 0 44px 0 44px;
  border: 1.5px solid var(--as-border-primary);
  border-radius: var(--input-radius);
  font-family: var(--as-font-family);
  font-size: 16px;   /* 16px avoids iOS/iPadOS zoom-on-focus; trimmed to 14px on fine-pointer screens in §18 */
  font-weight: var(--as-font-weight-regular);
  color: var(--as-text-color);
  background: var(--as-bg-page);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
input:hover { border-color: var(--as-bg-primary); }
input:focus {
  outline: none;
  border-color: var(--as-accent-primary);
  box-shadow: var(--focus-ring);
}
input.input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.20) !important;
}

/* Password toggle */
.pwd-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--as-border-primary);
  display: flex;
  align-items: center;
  border-radius: 5px;
  transition: color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}
.pwd-toggle:hover {
  color: var(--as-accent-primary);
  background: rgba(245, 110, 123, 0.08);
}
.pwd-toggle:focus-visible { outline: 2px solid var(--as-accent-primary); outline-offset: 1px; }
.pwd-toggle svg { width: 17px; height: 17px; }

/* ── 8. Errors ────────────────────────────────────────────── */
.field-error {
  display: none;
  font-size: 0.8125rem;
  color: var(--color-error);
  margin-top: 5px;
  align-items: center;
  gap: 5px;
  font-family: var(--as-font-family);
}
.field-error.visible { display: flex; }
.field-error svg { width: 13px; height: 13px; flex-shrink: 0; }

#error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--color-error);
  margin-bottom: 1rem;
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--as-font-family);
}
#error.show { display: flex; }

/* ── 9. KMSI ──────────────────────────────────────────────── */
.kmsi-row { display: flex; align-items: center; gap: 10px; margin: .25rem 0 1.25rem; }

.kmsi-row input[type="checkbox"] {
  width: 17px; height: 17px;
  border: 1.5px solid var(--as-border-primary);
  border-radius: 4px;
  background: var(--as-bg-page);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast), border-color var(--duration-fast);
  position: relative;
}
.kmsi-row input[type="checkbox"]:checked {
  /* Checked state uses Altera coral-pink */
  background: var(--as-accent-primary);
  border-color: var(--as-accent-primary);
}
.kmsi-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px; left: 5px;
  width: 5px; height: 8px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.kmsi-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--as-accent-primary);
  outline-offset: 2px;
}
.kmsi-label {
  font-size: 0.875rem;
  color: var(--as-text-light);
  font-weight: var(--as-font-weight-regular);
  cursor: pointer;
  user-select: none;
}

/* ── 10. Primary button — coral-pink, as-btn-* variables ─── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--input-height);
  background: var(--as-btn-bg);           /* #F56E7B */
  color: var(--as-btn-color);             /* #FFFFFF */
  border: var(--as-btn-border-width) var(--as-btn-border-style) var(--as-btn-border); /* #F56E7B */
  border-radius: var(--as-btn-border-radius);   /* 8px */
  font-family: var(--as-font-family);
  font-size: var(--as-btn-font-size);     /* 14px */
  font-weight: var(--as-font-weight-xbold);     /* 700 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  padding: var(--as-btn-padding);
}
.btn-primary:hover {
  background: var(--as-btn-bg-hover);       /* #B24646 */
  border-color: var(--as-btn-border-hover); /* #B24646 */
  color: var(--as-btn-color-hover);
  box-shadow: 0 4px 14px rgba(245, 110, 123, 0.40);
}
.btn-primary:active { transform: scale(0.985); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 4px 14px rgba(245, 110, 123, 0.30);
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Alternate button — periwinkle #8da0ff */
.btn-alternate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--input-height);
  background: var(--as-btn-alternate-bg);         /* #8da0ff */
  color: var(--as-btn-alternate-color);           /* #FFFFFF */
  border: var(--as-btn-border-width) var(--as-btn-border-style) var(--as-btn-alternate-border);
  border-radius: var(--as-btn-border-radius);
  font-family: var(--as-font-family);
  font-size: var(--as-btn-font-size);
  font-weight: var(--as-font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 10px;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}
.btn-alternate:hover {
  background: var(--as-btn-alternate-bg-hover);   /* transparent */
  border-color: var(--as-btn-alternate-border-hover); /* #FFFFFF */
  color: var(--as-btn-alternate-color-hover);
  box-shadow: 0 4px 14px rgba(141, 160, 255, 0.35);
}
.btn-alternate:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(141, 160, 255, 0.40); }

/* ── 11. Loading ──────────────────────────────────────────── */
#loadingarea {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 1rem 0;
  color: var(--as-text-light);
  font-size: 0.875rem;
  font-family: var(--as-font-family);
}
#loadingarea.show { display: flex; }

.spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--as-bg-secondary);
  border-top-color: var(--as-accent-primary);   /* Coral spinner */
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}

/* ── 12. Corporate SSO notice ─────────────────────────────── */
.sso-notice {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(57, 51, 146, 0.07);      /* as-bg-primary tint */
  border: 1px solid rgba(57, 51, 146, 0.25);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.875rem;
  color: var(--as-text-light);
  margin-bottom: 1rem;
  animation: fadeSlideIn var(--duration-base) var(--ease);
  font-family: var(--as-font-family);
}
.sso-notice.show { display: flex; }
.sso-notice-icon { color: var(--as-bg-primary); flex-shrink: 0; }
.sso-notice strong { color: var(--as-heading-color); }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 13. Divider ──────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 1.25rem 0;
  color: var(--as-border-primary);
  font-size: 0.8125rem;
  font-family: var(--as-font-family);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--as-accent-secondary);
}

/* ── 14. Link row ─────────────────────────────────────────── */
.link-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  margin-top: 1.25rem;
  font-family: var(--as-font-family);
}
.link-row a {
  color: var(--as-link-color);        /* #F56E7B */
  font-weight: var(--as-font-weight-bold);
}
.link-row a:hover { color: var(--as-link-color-hover); }  /* #393392 */

/* ── 15. Sign-out page ────────────────────────────────────── */
#signoutArea {
  text-align: center;
  max-width: var(--card-max-width); width: 100%;
  background: var(--as-bg-page);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border-top: 4px solid var(--as-accent-primary);
  padding: 3rem 2.5rem;
}
#signoutArea .signout-icon {
  width: 56px; height: 56px;
  background: rgba(245, 110, 123, 0.10);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--as-accent-primary);
}
#signoutArea h3 {
  font-size: 1.2rem;
  font-weight: var(--as-font-weight-xbold);
  color: var(--as-heading-color);
  margin-bottom: .5rem;
}
#signoutArea p {
  font-size: .9rem;
  color: var(--as-text-light);
  margin-bottom: 1.75rem;
}

/* ── 16. Footer — as-bg-tertiary (#151744) with fn vars ───── */
/* <footer> in the preview, <div id="footer"> on the live AD FS page. */
footer,
#footer {
  background: var(--as-bg-tertiary);    /* #151744 dark navy */
  border-top: 3px solid var(--as-accent-primary);   /* coral-pink top line */
  padding: 22px 2rem;
}
.footer-inner {
  max-width: 980px; margin: 0 auto;
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 16px;
  justify-content: space-between;
}
.footer-logo img {
  height: 28px; width: auto;
  display: block;
}

.footer-links {
  display: flex; flex-wrap: wrap; align-items: center;
}
.footer-links a {
  color: var(--as-fn-link-color);      /* #FFFFFF */
  font-size: 0.8125rem;
  font-family: var(--as-font-family);
  font-weight: var(--as-font-weight-regular);
  text-decoration: none;
  padding: 0 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  transition: color var(--duration-fast) var(--ease);
}
.footer-links a:last-child { border-right: none; }
.footer-links a:hover { color: var(--as-fn-link-hover); text-decoration: underline; }  /* #F56E7B */
.footer-links a:focus-visible { outline: 2px solid var(--as-accent-primary); border-radius: 2px; }

.footer-copy {
  font-size: 0.72rem;
  color: var(--as-fn-copy);            /* #707CF1 periwinkle */
  font-family: var(--as-font-family);
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* ── 17. HRD / IDP ────────────────────────────────────────── */
.idp-list { display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }
.idp-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 16px;
  background: var(--as-bg-page);
  border: 1.5px solid var(--as-accent-secondary);
  border-radius: var(--as-btn-border-radius);
  font-family: var(--as-font-family); font-size: 0.875rem;
  font-weight: var(--as-font-weight-bold);
  color: var(--as-text-color); cursor: pointer; text-align: left;
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}
.idp-btn:hover {
  border-color: var(--as-accent-primary);
  background: rgba(245, 110, 123, 0.05);
}
.idp-btn:focus-visible { outline: 2px solid var(--as-accent-primary); outline-offset: 1px; }
.idp-btn img { width: 24px; height: 24px; object-fit: contain; }

/* ── 18. Responsive ───────────────────────────────────────────
   Breakpoint ladder (mobile → large monitor). The login card is a
   fixed-comfort width that stays centered; we scale the root font,
   card width, and padding rather than stretching the form.

     ≤ 360px   small phones        root 14px, tight padding
     ≤ 480px   phones              compact padding, stacked footer
     ≤ 768px   large phones/tablet portrait (iPad)  — touch sizing
     769–1439  laptop / desktop    base (root 15px, card 440px)
     ≥ 1440px  large monitor       root 16px, card 480px
     ≥ 1920px  QHD/4K              root 17px, card 520px
   Plus: fine-pointer type trim, and short/landscape height handling.
   ───────────────────────────────────────────────────────────── */

/* Mouse-driven screens: tighten input type back to the 14px brand spec.
   Touch devices stay at 16px to prevent focus-zoom (see §7). */
@media (min-width: 769px) and (pointer: fine) {
  input[type="text"],
  input[type="email"],
  input[type="password"] { font-size: 14px; }
}

/* Tablet portrait / large phones (iPad portrait = 768px) */
@media (max-width: 768px) {
  :root { --card-pad: 2.25rem; }
  #content-wrap { padding: 1.5rem 1rem; }
}

/* Phones */
@media (max-width: 480px) {
  :root { --card-pad: 1.75rem; --card-radius: 10px; }
  #content-wrap { padding: 1.25rem 0.875rem; }
  .login-card { padding: var(--card-pad) var(--card-pad) 1.75rem; }
  #signoutArea { padding: 2.25rem 1.75rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-links { flex-wrap: wrap; }
  .footer-links a:first-child { padding-left: 0; }
  .footer-links a { padding: 2px 10px; }
  .link-row { flex-direction: column; gap: 8px; text-align: center; }
}

/* Small phones */
@media (max-width: 360px) {
  html { font-size: 14px; }
  :root { --card-pad: 1.25rem; }
}

/* Large monitors */
@media (min-width: 1440px) {
  html { font-size: 16px; }
  :root { --card-max-width: 480px; --card-pad: 2.75rem; }
}

/* QHD / 4K and ultrawide */
@media (min-width: 1920px) {
  html { font-size: 17px; }
  :root { --card-max-width: 520px; --card-pad: 3rem; }
}

/* Short viewports (landscape phones, split-screen): don't vertically
   center into a clipped card — align to top and shrink vertical rhythm. */
@media (max-height: 600px) and (orientation: landscape) {
  #content-wrap { justify-content: flex-start; padding-top: 1rem; padding-bottom: 1rem; }
  .login-card { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  #branding { margin-bottom: 1rem; }
}

/* ── 19. Utility ──────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

/* ── 20. AD FS host page adaptation ───────────────────────────
   On the live AD FS page this file is the ONLY stylesheet. These rules lay out
   AD FS's real container DOM (confirmed from idpinitiatedsignon source):
     #fullPage > #brandingWrapper(hidden) + #contentWrapper
                 > #content > #header(hidden) + <main> > #workArea
                 + footer#footer
   ascustom.js makes #workArea the card: it prepends our branding and, on the
   forms sign-in page ONLY, injects our login form. Native AD FS pages (IdP
   landing, sign-out, HRD) keep their own controls, styled at the end below.
   The standalone preview has none of these IDs, so it is unaffected.
   ───────────────────────────────────────────────────────────── */
#noScript,
#brandingWrapper,
#header,
#footerPlaceholder { display: none !important; }

#fullPage {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
#contentWrapper { flex: 1 0 auto; display: flex; flex-direction: column; }
#content {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
main { width: 100%; }

/* #workArea IS the login card */
#workArea {
  width: 100%;
  max-width: var(--card-max-width);
  margin: 0 auto;
  background: var(--as-bg-page);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border-top: 4px solid var(--as-accent-primary);
  padding: var(--card-pad) var(--card-pad) 2rem;
}

footer#footer { flex-shrink: 0; }

/* Native AD FS controls (IdP-initiated landing, sign-out, error pages) — these
   have no styling otherwise, since our stylesheet replaced the AD FS default. */
#workArea .submit,
#workArea input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--input-height);
  padding: 8px 20px;
  background: var(--as-btn-bg); color: var(--as-btn-color);
  border: 1px solid var(--as-btn-border); border-radius: var(--as-btn-border-radius);
  font-family: var(--as-font-family); font-size: var(--as-btn-font-size);
  font-weight: var(--as-font-weight-xbold);
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}
#workArea .submit:hover,
#workArea input[type="submit"]:hover {
  background: var(--as-btn-bg-hover); border-color: var(--as-btn-border-hover);
}
#workArea .groupMargin,
#workArea .sectionMargin { margin-bottom: 1rem; }
#workArea .fieldMargin { margin-bottom: .6rem; display: flex; align-items: center; gap: 8px; }
#workArea .submitMargin { margin-top: 1.25rem; }
#workArea label { color: var(--as-text-light); font-size: .9rem; cursor: pointer; }
#workArea input[type="radio"],
#workArea input[type="checkbox"] {
  accent-color: var(--as-accent-primary);
  width: 16px; height: 16px; flex-shrink: 0;
}
#workArea select.select {
  width: 100%; height: var(--input-height);
  border: 1.5px solid var(--as-border-primary); border-radius: var(--input-radius);
  padding: 0 10px; font-family: var(--as-font-family); font-size: 16px;
  background: var(--as-bg-page);
}
#workArea #idpSignonArea span { color: var(--as-text-light); }

@media (max-width: 768px) { #content { padding: 1.5rem 1rem; } }
@media (max-width: 480px) { #content { padding: 1.25rem 0.875rem; } }