/* ===========================================================================
   Login screen - Onward SHARS Medicaid
   ---------------------------------------------------------------------------
   Loaded ONLY by Forms/Login/index.php (and the register/esig pages that share
   its shell). Kept in its own file rather than added to tsbs_styl.css because
   that stylesheet is shared by every screen in the app: the selectors below
   deliberately restyle generic elements (.button, input[type=password], h1),
   and doing that globally would change every other page.

   Everything is scoped under .onward-login so it cannot leak.

   Brand palette:
     #0B3D77  deep navy   - headings, primary button, footer band
     #1665A8  mid blue    - links, icons, focus ring
     #F5A623  amber       - accent rules, primary CTA
     #F7F9FC  page tint   - canvas behind the card
   =========================================================================== */

/* These are ALIASES, not a second palette. The real values live in the :root
   block at the top of tsbs_styl.css, which is the single source of colour truth
   for the app; the short local names just keep these rules readable. Editing a
   brand colour means editing :root there -- never here.

   --tint is the one value that is local to this canvas and has no app-wide
   counterpart. */
.onward-login {
  --navy: var(--brand-navy);
  --navy-dark: var(--brand-navy-dark);
  --blue: var(--brand-blue);
  --amber: var(--brand-amber);
  --amber-dark: var(--brand-amber-dark);
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --line: var(--brand-line);
  --tint: #f7f9fc;

  box-sizing: border-box;
  font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif;
}

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

/* --- canvas ---------------------------------------------------------------
   The mock shows a soft tinted field with two large diagonal chevrons. They
   are drawn with gradients rather than an image so there is no extra request
   and nothing to keep in sync with the logo asset. */
/* #content-frame (in tsbs_styl.css) pads 50px and tiles the legacy
   `epic-bkg-gray2.png` snowflake wallpaper, which showed as a grey patterned
   border framing this canvas on the left, right and bottom. The design wants a
   clean tint edge to edge.

   Rather than cancel the padding with negative margins -- which would have to
   track its value, and it changes to 25px under 1200px and 20px under 768px --
   the frame is unpadded and unpatterned for this page only. header.php stamps
   `.bare-frame` when $pagename is "Log In"; every other screen keeps the shared
   background untouched. A server-side class is used rather than :has() so this
   does not depend on selector support.

   !important is needed because the shared rule repeats #content-frame inside two
   media queries to reset its padding, and those would otherwise win on width. */
#content-frame.bare-frame {
  padding: 0 !important;
  background-image: none;
}

.onward-login-canvas {
  position: relative;
  padding: 34px 20px 60px;
  background-color: var(--tint);
  background-image: none;
  overflow: hidden;
}

.onward-login-canvas:before,
.onward-login-canvas:after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* The "A" from the ONWARD logo mark, cut in half against the right edge.
   The glyph is an OUTLINED chevron -- a hollow V with a notch in its base -- so it
   is drawn as an SVG stroke. See the note in the rule for why clip-path was
   abandoned. */
.onward-login-canvas:before {
  /* An inline SVG stroke, NOT clip-path.
     clip-path: polygon() cannot express a hollow shape -- `left foot -> apex ->
     right foot` closes a filled triangle and there is no even-odd rule, so extra
     inner points only extend the same solid region. Repeated attempts kept
     rendering solid from the apex down, and the workaround (stacking a second
     canvas-coloured element to punch the middle out) costs an extra DOM node per
     page and silently breaks if the canvas tint ever changes.

     `stroke` on an SVG path IS the direct expression of an outlined glyph: one
     declaration, no cut-out element, and stroke-linejoin:round reproduces the
     logo's rounded joins for free.

     Cut vertically. The path spans x 18..82 with its apex at x=50, and the viewBox
     WIDTH is the crop: it decides how much of the right-hand side survives. 50
     stops dead at the apex (too little -- reads as a bare diagonal); 62 shows most
     of the right leg (too much). 52 keeps the apex plus a sliver past it, so the
     mark reads as half an "A" running off the edge. Tuned visually -- adjust this
     one number to move the crop. */
  /* Anchored from the TOP, deliberately.
     With `bottom` set instead, the element is pinned to the canvas floor and extra
     height grows UPWARD -- the bottom edge never moves. That is why raising the
     height repeatedly made the mark taller without ever pushing it further down.
     Anchoring at `top` means height extends downward, past the card and toward the
     footer, which is the intent.

     The canvas is `overflow: hidden`, so whatever runs past its lower edge is
     cropped rather than spilling into the footer band. That also caps how much
     extra height achieves anything: the canvas is only ~686px tall, so past ~780px
     the added length is simply clipped -- it stretches the stroke (because
     preserveAspectRatio is `none`) without showing more of the shape. */
  top: -30px;
  right: 0;
  width: 380px;
  height: 780px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
  /* stroke-width is in USER units, so it does not scale with the element -- and
     because preserveAspectRatio is `none` the two axes stretch by different
     factors. Growing the box therefore needs stroke-width raised to match, or the
     mark gets bigger AND visually thinner. Taller box => thinner-looking stroke,
     so 7 -> 8 keeps the weight unchanged.

     stroke-opacity is the tone control: 0.30 -> 0.22 -> 0.13. Opacity rather than
     a lighter hex so the wash stays tied to the brand amber in :root. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 100' preserveAspectRatio='none'%3E%3Cpath d='M 18 85 L 50 15 L 82 85 L 50 65 Z' fill='none' stroke='%23eab327' stroke-opacity='0.13' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Dot grid, left. Larger dots on a wider pitch than a typical texture, and a
   tall narrow column rather than a square block -- that is what the design has.
   The radius is the first length in the radial-gradient; the second stop must sit
   just above it or the dots blur into rings.

   The mask is what makes it read as designed: the grid is densest in the
   bottom-left corner and dissolves both upward and rightward, instead of ending
   on hard edges. It has to be a mask rather than a gradient blended into the
   background, because the dots are themselves a gradient -- two backgrounds
   cannot fade each other.

   Two mask layers are supplied, one per axis. Mask layers COMPOSITE by
   multiplying their alpha, so a dot survives only where both gradients are
   opaque -- which is what produces the diagonal falloff away from the corner. A
   single `to top right` gradient would instead fade along one diagonal band and
   leave the far corners equally strong. -webkit- prefix for Safari. */
.onward-login-canvas:after {
  left: 0;
  bottom: 0;
  width: 340px;
  height: 300px;
  background-image: radial-gradient(rgba(22, 101, 168, 0.28) 3px, transparent 3.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%),
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%),
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  /* Required. Mask layers default to `add`, which UNIONS the two gradients --
     the grid would then stay opaque wherever EITHER axis is opaque, leaving the
     top-left and bottom-right strong. `intersect` multiplies them, so only the
     bottom-left corner survives at full strength. */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Pale diagonal wedges, upper left. Two overlapping clip-path triangles rather
   than one gradient, because the design has two distinct edges meeting at a
   slightly different angle -- a single linear-gradient cannot express that.
   z-index 0 keeps them behind the card (z-index 2) but above the flat tint. */
.onward-login .deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* ONE shape, not two. An earlier version stacked a second wedge on the same
   corner; overlapping them produced a visible tonal step where they crossed,
   which the design does not have -- it is a single clean diagonal. */
.onward-login .deco-wedge {
  top: 0;
  left: 0;
  width: 300px;
  height: 270px;
  background: rgba(22, 101, 168, 0.06);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* --- tutorial link ------------------------------------------------------- */
.onward-login .tutorial-bar {
  position: relative;
  z-index: 2;
  margin: 0 0 26px;
  text-align: center;
}

.onward-login .tutorial-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.onward-login .tutorial-link:hover {
  text-decoration: underline;
}

.onward-login .tutorial-link i {
  font-size: 26px;
  line-height: 1;
  color: var(--blue);
}

/* --- card ---------------------------------------------------------------- */
.onward-login .login-card {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: 940px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(11, 61, 119, 0.1);
  overflow: hidden;
}

.onward-login .card-pane {
  flex: 1 1 50%;
  padding: 46px 48px 52px;
  min-width: 0;
}

/* tsbs_styl.css floats and sizes these two ids for the OLD layout
   (`#login-form{float:left;width:37%}`, `#new-provider{float:left;width:60%;
   padding:20px;background:#f0f4f7}`) and repeats them again at line ~1727.
   Inside the flex card those rules make the fields ~37% of a half-pane and tint
   the right pane grey, so they are reset here rather than edited there -- other
   screens still rely on the originals. */
.onward-login #login-form,
.onward-login #new-provider {
  float: none;
  width: auto;
  margin: 0;
  background: none;
}

.onward-login #new-provider {
  padding: 46px 48px 52px;
}

/* The divider is a border on the second pane so it collapses cleanly when the
   panes stack on narrow screens. */
.onward-login .card-pane + .card-pane {
  border-left: 1px solid var(--line);
}

.onward-login .pane-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  /* tsbs_styl.css gives .content h1 a flex rule plus an :after divider rule;
     both are neutralised here. */
  display: block;
}

.onward-login .pane-title:after {
  content: none;
}

/* the short amber rule under each heading */
.onward-login .rule {
  width: 54px;
  height: 4px;
  margin: 14px 0 20px;
  background: var(--amber);
  border-radius: 2px;
}

.onward-login .pane-lede {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- fields -------------------------------------------------------------- */
.onward-login .field {
  position: relative;
  margin-bottom: 16px;
}

.onward-login .field > i {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--blue);
  pointer-events: none;
}

/* The `.field >` child combinator is deliberate, not decorative.
   tsbs_styl.css declares `.log-in input[type="text"],select,textarea,
   input[type="password"] { width:100% }` -- an unscoped comma list whose last
   two selectors are bare element+attribute, i.e. specificity 0,1,1. A plain
   `.onward-login input[type=password]` is 0,2,1 and wins, but the same file also
   sets `#login-form{width:37%}` on the wrapper, so 100% of the wrapper was still
   only 37% of the pane. Both the wrapper reset above and this rule are needed. */
.onward-login .field > input[type='text'],
.onward-login .field > input[type='password'] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 46px 15px 46px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onward-login input[type='text']::placeholder,
.onward-login input[type='password']::placeholder {
  font-family: inherit;
  font-size: 14px;
  color: #9aa8b8;
  text-transform: none;
}

.onward-login input[type='text']:focus,
.onward-login input[type='password']:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(22, 101, 168, 0.16);
}

/* password reveal toggle */
.onward-login .toggle-pw {
  position: absolute;
  /* Centred like `.field > i` on the left. `margin: 0` is load-bearing: a generic
     button rule in tsbs_styl.css sets `margin-top: 8px`, and margin still applies
     to an absolutely positioned box AFTER `top`/`transform` resolve -- so the
     button sat exactly 8px below the input's centre while the left icon, which
     has no margin, was correct. Measured: centres now match to 0.1px. */
  top: 50%;
  right: 8px;
  margin: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  line-height: 1;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
}

/* Colour change only. A tinted background here rendered as a 34px square panel
   sitting inside the input's rounded border -- a visible box on hover, when the
   affordance only needs to say "this glyph is interactive". */
.onward-login .toggle-pw:hover {
  color: var(--blue);
  background: none;
}

.onward-login .toggle-pw:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* --- buttons ------------------------------------------------------------- */
/* `.button` in tsbs_styl.css is global and orange with a 12px font; these rules
   are scoped so only the login card changes. */
.onward-login .btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.onward-login .btn-primary,
.onward-login .btn-primary:hover {
  color: #ffffff;
}

.onward-login .btn-primary {
  margin-top: 6px;
  background-color: var(--navy);
}

.onward-login .btn-primary:hover {
  background-color: var(--navy-dark);
}

.onward-login .btn-accent {
  background-color: var(--amber);
  color: #ffffff;
}

.onward-login .btn-accent:hover {
  background-color: var(--amber-dark);
}

.onward-login .btn-outline {
  margin-top: 14px;
  background-color: #ffffff;
  border-color: var(--navy);
  color: var(--navy);
}

.onward-login .btn-outline:hover {
  background-color: var(--navy);
  color: #ffffff;
}

/* --- forgot password ----------------------------------------------------- */
.onward-login .forgot-row {
  margin-top: 18px;
  text-align: center;
}

.onward-login #forgot-password {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.onward-login #forgot-password:hover {
  text-decoration: underline;
}

/* --- messages ------------------------------------------------------------
   checklogin.php failures and the reset/registration responses all land here.
   Styled as an alert because several of these strings are long sentences. */
.onward-login .message,
.onward-login #message {
  display: none;
  width: 100%;
  margin-top: 18px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #8a2c1b;
  background: #fdf1ee;
  border: 1px solid #f4cfc6;
  border-left: 4px solid #e9482d;
  border-radius: 4px;
}

/* --- "New to ONWARD?" pane ---------------------------------------------- */
.onward-login .pane-new {
  text-align: center;
}

/* tsbs_styl.css `#new-provider h2` sets font-weight:500 / 18px / #00649d, which
   makes this heading noticeably lighter than "Welcome Back". Match the pair. */
.onward-login #new-provider h2.pane-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
}

.onward-login .pane-new .pane-title,
.onward-login .pane-new .pane-lede {
  text-align: center;
}

.onward-login .pane-new .rule {
  margin-left: auto;
  margin-right: auto;
}

.onward-login .new-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin: 4px auto 22px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  font-size: 34px;
  color: var(--blue);
}

/* --- password requirements list (Forms/Password/) ------------------------ */
.onward-login .rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.onward-login .rule-list li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.onward-login .rule-list li:before {
  content: '\2713'; /* check mark */
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--amber);
}

/* --- tutorial overlay ---------------------------------------------------- */
/* #overlay lives in tsbs_styl.css and has `background-color:#FFF`, so the close
   link MUST NOT be white -- white-on-white made it invisible and left no way out
   of the overlay but a page reload. Styled as a visible navy pill instead. */
.onward-login #close_o {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--navy);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}

.onward-login #close_o:hover {
  background-color: var(--navy-dark);
  color: #ffffff;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .onward-login .login-card {
    flex-direction: column;
  }
  .onward-login .card-pane {
    padding: 34px 28px 38px;
  }
  .onward-login .card-pane + .card-pane {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .onward-login .pane-title {
    font-size: 25px;
  }
  .onward-login-canvas:before,
  .onward-login-canvas:after {
    display: none;
  }
}