/*
 * Librarian app login screen (guide-mode rebuild Stage 3).
 * Ported from the MVP mockup's #loginView design (WyderNet_MVP_flow_32.html)
 * — same layout/classes, adapted from a JS-toggled full-viewport overlay
 * (position:fixed, meant to sit atop an SPA shell) to a normal in-flow page
 * layout (min-height:100vh), since this is now a real standalone WP page
 * with nothing to overlay.
 *
 * Uses the project's actual design tokens (--wy-teal etc., defined in
 * lti-pages.css's :root) rather than the mockup's own placeholder token
 * names (--green/--bg/...) — this file redeclares just the token VALUES
 * (not lti-pages.css's ~2600 lines of LTI-specific component rules) so it
 * stays self-contained while visually converging on one system project-wide,
 * per the same reconciliation assets/app-shell.css does (Stage 4).
 */
:root{
  /* Aug 2026: values updated to match lti-pages.css's MVP-aligned palette —
     see that file's :root comment and docs/mvp-flow55-alignment-spec.md §0. */
  --wy-teal:        #217a5c;
  --wy-teal-dark:   #1a6249;
  --wy-text:        #1a1a1a;
  --wy-text-muted:  #656c79; /* was #6b7280 — 4.28:1 on --wy-amber-bg (#fbf0dc), under AA 4.5:1. #656c79 clears 4.5:1 on white, --wy-bg and --wy-amber-bg. */
  --wy-text-hint:   #6b6b6b; /* was #9ca3af — 2.5:1 on white, far under AA 4.5:1; matches the token in lti-pages.css/app-shell.css */
  --wy-border:      #e5e7eb;
  /* Form-control borders only. --wy-border (#e5e7eb) is 1.24:1 on white,
     which is fine for a decorative divider and fails WCAG 1.4.11 for a
     control whose boundary is the only thing identifying it. 3.19:1 on
     white, 3.03:1 on --wy-bg. Mirrors the token in lti-pages.css. */
  --wy-border-control: #909090;
  --wy-bg:          #f9f9f8;
  --wy-card-bg:     #ffffff;
  --wy-font:        'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}
body.wy-app-body{margin:0;padding:0;background:var(--wy-bg);color:var(--wy-text);font-family:var(--wy-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;}

#wy-app-login{min-height:100vh;display:flex;background:var(--wy-bg);}

.lg-hero{position:relative;flex:1.12;overflow:hidden;background:linear-gradient(155deg,var(--wy-teal-dark) 0%,var(--wy-teal) 62%,#2a8a68 100%);color:#fff;padding:3.2rem 3.6rem;display:flex;flex-direction:column;}
.lg-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;position:relative;z-index:2;}
.lg-mark{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;}
.lg-mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.7;}
.lg-body{margin-top:auto;position:relative;z-index:2;max-width:30rem;}
.lg-body h1{font-size:2.5rem;line-height:1.08;letter-spacing:-.025em;margin:0 0 .9rem;font-weight:800;}
.lg-tag{font-size:1.15rem;font-weight:600;color:#eaf6ef;margin:0 0 1.1rem;letter-spacing:-.01em;}
.lg-lede{font-size:.98rem;line-height:1.6;color:#cfe6db;margin:0;max-width:28rem;}
.lg-foot{margin-top:2.4rem;display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:#eaf6ef;position:relative;z-index:2;}
.lg-foot svg{width:15px;height:15px;stroke:#bfdccf;fill:none;stroke-width:1.8;}
.lg-glow{position:absolute;top:-160px;right:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);z-index:0;}

.lg-panel{flex:.88;display:flex;align-items:center;justify-content:center;padding:2.5rem;}
.lg-card{width:100%;max-width:376px;}
.lg-card h2{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 .3rem;font-weight:800;}
.lg-sub{color:var(--wy-text-muted);font-size:.92rem;margin:0 0 1.5rem;}

.lg-error{background:#fdecec;border:1px solid #f3c6c6;color:#8a2323;border-radius:10px;padding:.7rem .9rem;font-size:.88rem;margin:0 0 1.2rem;}

.lg-field{margin-bottom:1.05rem;}
.lg-field label{display:block;font-size:.82rem;font-weight:600;color:var(--wy-text-muted);margin-bottom:.35rem;}
.lg-inp{position:relative;}
.lg-inp input{width:100%;border:1px solid var(--wy-border-control);border-radius:11px;padding:.72rem .9rem;font-size:.95rem;font-family:inherit;color:var(--wy-text);background:var(--wy-card-bg);transition:border-color .15s,box-shadow .15s;box-sizing:border-box;}
.lg-inp input::placeholder{color:var(--wy-text-hint);}
/* The email and password fields had NO VISIBLE FOCUS INDICATOR on the
   deployed site (WCAG 2.1 2.4.7, Level AA) — found by qa/a11y/focus-visibility.ts
   on 2026-09-07, on the first screen every librarian sees.

   The rule below was not wrong, it was OUTRANKED. Neve's stylesheet ships

       [tabindex="-1"]:focus, input:read-write:focus, select:focus, textarea:focus
           { outline: 0; box-shadow: 0 0 3px 0 var(--nv-secondary-accent); ... }

   `input:read-write:focus` is (0,2,1) — exactly the same specificity as
   `.lg-inp input:focus` — and the parent theme's sheet is enqueued AFTER this
   one, so the tie goes to Neve. `--nv-secondary-accent` is not defined on this
   page, so its box-shadow computed to `rgba(0,0,0,0) 0 0 0 0`: Neve removed the
   UA outline and drew nothing in its place. Measured focused vs resting, every
   channel was identical.

   Fixed by winning on specificity rather than !important: `.lg-card` is the
   form's own wrapper, taking these to (0,3,1). Two channels deliberately — an
   outline that survives a forced-colors/high-contrast mode, and the softer ring
   that matches the rest of the app. --wy-teal-dark is 6.90:1 on --wy-bg and
   7.27:1 on the card, over 1.4.11's 3:1 for a focus indicator. */
.lg-inp input:focus{outline:none;border-color:var(--wy-teal);box-shadow:0 0 0 3px rgba(58,125,110,.14);}
.lg-card .lg-inp input:focus-visible{outline:2px solid var(--wy-teal-dark);outline-offset:2px;border-color:var(--wy-teal);box-shadow:0 0 0 3px rgba(58,125,110,.18);}
.lg-pwt{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--wy-text-hint);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:7px;}
.lg-pwt:hover{background:var(--wy-bg);color:var(--wy-text-muted);}
.lg-pwt:focus-visible{outline:2px solid var(--wy-teal);outline-offset:1px;}
.lg-pwt svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;}

.lg-row{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 1.4rem;flex-wrap:wrap;gap:.5rem;}
.lg-remember{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--wy-text-muted);cursor:pointer;user-select:none;}
.lg-remember input{width:16px;height:16px;accent-color:var(--wy-teal);cursor:pointer;}
.lg-forgot{font-size:.86rem;color:var(--wy-teal);font-weight:600;text-decoration:none;}
.lg-forgot:hover{text-decoration:underline;}
.lg-forgot:focus-visible{outline:2px solid var(--wy-teal);outline-offset:2px;}

.lg-signin{width:100%;background:var(--wy-teal);color:#fff;border:0;border-radius:11px;padding:.8rem 1.25rem;font-size:.98rem;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .15s;}
.lg-signin:hover{background:var(--wy-teal-dark);}
.lg-signin:focus-visible{outline:2px solid var(--wy-teal-dark);outline-offset:2px;}

.lg-cardfoot{margin-top:1.6rem;text-align:center;font-size:.82rem;color:var(--wy-text-hint);}

@media(max-width:900px){
  #wy-app-login{flex-direction:column;}
  .lg-hero{flex:none;padding:2.2rem 1.8rem 2.6rem;}
  .lg-body{margin-top:1.8rem;}
  .lg-body h1{font-size:2rem;}
  .lg-tag{font-size:1.05rem;}
  .lg-lede,.lg-foot{display:none;}
  .lg-glow{display:none;}
  .lg-panel{flex:none;padding:2rem 1.6rem 3rem;}
}