/* DOUBLECHECK sign-in. GENOME's login layout (one translucent card, copyright bar) over DOUBLECHECK'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
   the wordmark on the card takes light tints (see .login-title below).

   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 wordmark on the dark card. The logo navy and the darkened gold both
   vanish on navy, so the card takes what the logo itself does on a dark
   ground: DOUBLE in white, as the white logo above it, and CHECK in the
   brand gold, which is what gold was made for on navy. */
.login-title .dbl{color:#fff}
.login-title .chk{color:var(--hcss-gold)}
.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}
}