/* SCANDAL sign-in. GENOME's login layout (one translucent card, copyright bar) over SCANDAL's own ground, with the scan signature promoted from a corner figure to the
   full-page background: sheets of a document under review, crossed by the
   scanner's sweep, with the card sitting on top of it.

   Colours are the dashboard's :root tokens. Gold fails as text on white
   (STYLEGUIDE.md), so on the navy ground it stays the detection accent, and
   on the white card the flagged half of the wordmark takes sienna instead.

   Type: the brand face is trial-cut only (STYLEGUIDE.md restricts it to
   non-commercial use), so the sans falls through to the documented fallback. */
@import url("/assets/fonts.css");
:root{
  --bg:#ffffff;
  --muted:#F4F5F7;
  --fg:#0e2038;
  --fg-2:#3c4a5e;
  --fg-3:#6D6F77;
  --border:#c9ccd4;
  --border-2:#e3e5ea;

  --navy:#0e2038;
  --navy-deep:#0a1a2f;
  --on-navy:#eaf0f7;
  --on-navy-2:#9fb0c4;
  --on-navy-3:#5f728a;

  --hcss-blue:#065190;
  --hcss-blue-hover:#054477;
  --hcss-gold:#DBAD50;
  --hcss-sienna:#BC632E;

  --font-sans:'Neue Haas Grotesk Display','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--navy); color:var(--fg);
  font-family:var(--font-sans); font-size:17px; line-height:1.5; font-weight:400;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ---- The page ---------------------------------------------------------- */
.login-page{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex;
  flex-direction:column; padding:0;
  background:
    radial-gradient(120% 90% at 12% 0%, #16304f 0%, rgba(22,48,79,0) 55%),
    linear-gradient(var(--navy), var(--navy-deep));
}
/* The veil between the field and the card: the sheets are already dim, but the
   card only reads as a sheet of its own if the ground around it settles. */
.login-page::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 50%,
    rgba(10,26,47,.86) 0%, rgba(10,26,47,.5) 55%, rgba(10,26,47,0) 100%);
}

/* ---- The scan field (decorative) --------------------------------------- */
.scan-field{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}

/* One page under review. Same construction as the corner figure it replaces,
   sized up and scattered; several bleed off an edge so the field does not read
   as a framed illustration. */
.sheet{
  position:absolute;
  padding:22px 22px 24px;
  background:rgba(234,240,247,.05);
  border:1px solid rgba(159,176,196,.16);
  display:flex; flex-direction:column; gap:12px;
}
.s1{width:290px; top:7%;  left:-46px}
.s2{width:250px; top:-42px; left:20%;  opacity:.6}
.s3{width:310px; top:11%; right:-54px}
.s4{width:264px; bottom:58px; left:7%; opacity:.72}
.s5{width:286px; bottom:-44px; right:5%}
.s6{width:230px; bottom:26%; left:16%; opacity:.42}

.ln{height:7px; background:rgba(159,176,196,.26)}
.ln.w1{width:100%}
.ln.w2{width:82%}
.ln.w3{width:64%}
/* The flagged line: highlighted the gold of a marker, with a sienna tick in
   the margin - the tool's "I can't stand behind this citation". */
.ln.flag{
  width:92%; height:12px;
  background:linear-gradient(90deg, rgba(219,173,80,.4), rgba(219,173,80,.12));
  box-shadow:-9px 0 0 0 var(--hcss-sienna);
  margin-left:9px;
}

/* The sweep, now crossing the whole viewport rather than one small page. */
.scan-sweep{
  position:absolute; left:0; right:0; top:0; height:130px;
  background:linear-gradient(180deg,
    rgba(219,173,80,0) 0%, rgba(219,173,80,.07) 62%, rgba(219,173,80,.2) 100%);
  border-bottom:1px solid rgba(219,173,80,.4);
  animation:scan 7.5s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes scan{
  0%   {transform:translateY(-150px); opacity:0}
  10%  {opacity:1}
  72%  {opacity:1}
  100% {transform:translateY(100vh); opacity:0}
}

/* The forensic readout, keeping the corner the signature used to occupy. The
   sheets are placed to leave this corner clear rather than overprint it. */
.scan-readout{
  position:absolute; left:28px; bottom:64px; margin:0;
  font-size:11.5px; letter-spacing:.04em; color:var(--on-navy-3);
}

@media (prefers-reduced-motion:reduce){
  .scan-sweep{animation:none; top:auto; bottom:38%; opacity:1}
}

/* ---- Footer (as GENOME's login) ---------------------------------------- */
.login-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px 16px; text-align:center;
  font-size:10px; line-height:1.45; letter-spacing:.02em;
  color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.1);
}

/* ---- The card ---------------------------------------------------------- */
.login-content{
  position:relative; z-index:2; flex:1; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:32px 24px;
}
.login-card{
  width:100%; max-width:420px; padding:36px 40px 32px;
  background:rgba(13,38,67,.95);
  border:1px solid rgba(159,176,196,.2); border-top-color:rgba(159,176,196,.4);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--on-navy);
}
.login-head{display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-bottom:28px; text-align:center}
/* The mark ships only in its white cut, so it sits on a navy tile. */
.login-logo{display:block; width:64px; height:64px; background:var(--navy)}
.login-title{margin:0; font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.3}
/* The scandalous half. Sienna on the dark card, as on the flagged lines behind. */
.login-title .dal{color:var(--hcss-sienna)}
.login-sub{margin:4px 0 0; font-size:13px; color:rgba(234,240,247,.55)}

.login-form{display:flex; flex-direction:column; gap:16px}
.login-field{display:flex; flex-direction:column; gap:6px; text-align:left}
label{font-size:14px; font-weight:500; color:var(--on-navy)}
.label-row{display:flex; align-items:center; justify-content:space-between}

input{
  width:100%; height:40px; padding:0 12px;
  background:rgba(255,255,255,.04); color:var(--on-navy);
  border:1px solid rgba(159,176,196,.3);
  font-family:var(--font-sans); font-size:14px;
}
input:focus{outline:none; border-color:var(--hcss-blue);
  box-shadow:0 0 0 3px rgba(6,81,144,.45)}
input::placeholder{color:rgba(234,240,247,.35)}

.pw{position:relative}
.pw input{padding-right:40px}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:0; cursor:pointer;
  background:none; color:rgba(234,240,247,.55);
}
.pw-toggle:hover{background:rgba(255,255,255,.08)}

.actions{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.btn{
  width:100%; height:44px; cursor:pointer;
  font-family:var(--font-sans); font-size:14px; font-weight:500;
}
.btn:focus-visible{outline:2px solid var(--hcss-blue); outline-offset:3px}
.btn.primary{
  border:0; background:var(--hcss-blue); color:#fff;
  box-shadow:0 0 22px -4px rgba(6,81,144,.85);
}
.btn.primary:hover{background:var(--hcss-blue-hover)}
.btn.primary:disabled{opacity:.6; cursor:default}
.btn.outline{
  background:transparent; color:var(--on-navy);
  border:1px solid rgba(159,176,196,.3);
}
.btn.outline:hover{background:rgba(255,255,255,.06)}

a{color:var(--on-navy)}
.muted-link{font-size:12px; color:rgba(234,240,247,.55); text-decoration:none}
.muted-link:hover{color:var(--on-navy)}
.sso .muted-link{font-size:13px; text-underline-offset:4px}
.sso .muted-link:hover{text-decoration:underline}
.sso{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:20px}
.or{display:flex; align-items:center; gap:12px; width:100%;
  font-size:12px; color:rgba(234,240,247,.4)}
.or span{flex:1; height:1px; background:rgba(159,176,196,.2)}

.msg{
  margin:0 0 16px; padding:8px 12px; font-size:12.5px; text-align:left; color:#e9a06f;
  background:rgba(188,99,46,.12); border:1px solid rgba(188,99,46,.3);
}
.msg.ok{color:#e8c98a; background:rgba(219,173,80,.12); border-color:rgba(219,173,80,.3)}
.hidden{display:none}

/* ---- Narrow viewports --------------------------------------------------- */
@media (max-width:720px){
  /* The field crowds the card once the sheets have nowhere to sit; keep only
     the two that stay clear of it. */
  .s2,.s3,.s5,.s6{display:none}
  .s1{width:230px; top:4%; left:-60px}
  .s4{width:210px; bottom:-30px; left:auto; right:-46px}
  .scan-readout{display:none}
  .login-card{padding:32px 24px 26px}
}