/* ============================================================
   SIGN-IN  -  instrument face: brand plate | graduated scale | form
   ============================================================ */
#loginScreen{
  --ink:#061A21; --deep:#0B2E3A; --deep-2:#12495B;
  --cyan:#2FA9C6; --cyan-hi:#63CFE6; --blue:#1D5C93;
  --paper:#EFF3F4; --card:#FFFFFF; --muted:#617984;
  --hair:rgba(6,26,33,.10); --hair-dark:rgba(6,26,33,.18); --ok:#2FBF71;
  --sans:'Archivo','Archivo Expanded',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  position:fixed; inset:0; z-index:900;
  display:grid; grid-template-columns:minmax(0,40fr) 62px minmax(0,60fr);
  background:var(--paper); font-family:var(--sans); overflow:auto;
}
#loginScreen *{box-sizing:border-box}

/* ---------- left: brand plate ---------- */
.sp-brand{position:relative; overflow:hidden; background:
   radial-gradient(120% 90% at 8% 4%, rgba(47,169,198,.30) 0%, rgba(47,169,198,0) 58%),
   linear-gradient(152deg,var(--deep-2) 0%,var(--deep) 46%,var(--ink) 100%);}
/* 52 mm measurement grid, faded away from the light source */
.sp-brand::before{content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 88%);
          mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 88%);}
.sp-brand-inner{position:relative; height:100%; display:flex; flex-direction:column;
  justify-content:center; padding:64px 52px; max-width:620px;}

.sp-logo-tile{position:relative; display:inline-flex; align-self:flex-start;
  padding:13px 17px; border-radius:12px; background:var(--card); overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.55) inset;
  animation:sp-hover 7s ease-in-out infinite;}
.sp-logo{display:block; height:78px; width:auto}
/* a calibration pass sweeping the plate - the logo reads as live, not pasted on */
.sp-sheen{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(47,169,198,.42) 50%,transparent 62%);
  transform:translateX(-130%); animation:sp-sweep 6.5s cubic-bezier(.5,0,.2,1) infinite;}
@keyframes sp-sweep{0%,62%{transform:translateX(-130%)} 92%,100%{transform:translateX(130%)}}
@keyframes sp-hover{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}

.sp-eyebrow{margin:26px 0 0; font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-hi);}
.sp-name{margin:12px 0 0; font-size:clamp(30px,3.1vw,42px); line-height:1.06;
  font-weight:700; font-stretch:92%; letter-spacing:-.022em; color:#fff; text-wrap:balance;}
.sp-name-2{display:block; font-weight:400; color:rgba(255,255,255,.62);
  font-size:.58em; letter-spacing:-.01em; margin-top:6px;}
.sp-tagline{margin:14px 0 0; font-size:var(--fs-title); color:rgba(255,255,255,.60); max-width:34ch}

/* accreditation stub - a document, not a badge */
.sp-cert{margin-top:38px; max-width:430px; padding:18px 20px 16px;
  border:1px solid rgba(255,255,255,.13); border-left:2px solid var(--cyan);
  border-radius:0 4px 4px 0; background:rgba(255,255,255,.045);}
.sp-cert-lede{margin:0; font-size:var(--fs-body); line-height:1.5; color:rgba(255,255,255,.80)}
.sp-cert-lede b{color:#fff; font-weight:600}
.sp-cert-rows{margin:13px 0 0}
.sp-cert-row{display:flex; align-items:baseline; gap:7px; padding:3px 0;
  font-family:var(--mono); font-size:var(--fs-label);}
.sp-cert-row dt{color:rgba(255,255,255,.45); white-space:nowrap}
.sp-cert-row::after{content:''; flex:1; order:1; height:0;
  border-bottom:1px dotted rgba(255,255,255,.22); transform:translateY(-3px);}
.sp-cert-row dd{order:2; margin:0; color:rgba(255,255,255,.88); text-align:right}
.sp-cert-key{color:var(--cyan-hi) !important; font-weight:500; letter-spacing:.02em}
.sp-cert-fine{margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.10);
  font-size:var(--fs-label); line-height:1.55; color:rgba(255,255,255,.44);}

/* ---------- middle: the graduated scale ---------- */
.sp-scale{position:relative; background:var(--card); border-left:1px solid var(--hair);
  border-right:1px solid var(--hair); overflow:hidden;}
.sp-ticks{position:absolute; inset:0}
.sp-tick{position:absolute; left:0; height:1px; background:var(--hair-dark)}
.sp-tick.is-5{background:rgba(6,26,33,.30)}
.sp-tick.is-10{background:rgba(6,26,33,.45)}
.sp-num{position:absolute; right:8px; font-family:var(--mono); font-size:var(--fs-label);
  color:var(--muted); transform:translateY(-50%); letter-spacing:.04em;}
.sp-cursor{position:absolute; left:0; right:0; height:30px; top:0; opacity:0;
  background:linear-gradient(90deg,rgba(47,169,198,.26),rgba(47,169,198,.09));
  border-top:1px solid var(--cyan); border-bottom:1px solid var(--cyan);
  transition:top .5s cubic-bezier(.22,1,.36,1), opacity .25s ease; pointer-events:none;}
.sp-cursor.is-on{opacity:1}

/* ---------- right: the form ---------- */
.sp-access{display:flex; align-items:center; justify-content:center; padding:56px 40px}
.sp-form{width:100%; max-width:392px}
.sp-h2{margin:0; font-size:var(--fs-figure); font-weight:700; font-stretch:92%;
  letter-spacing:-.022em; color:var(--ink);}
.sp-sub{margin:8px 0 30px; font-size:var(--fs-body); line-height:1.55; color:var(--muted)}
.sp-field{margin-bottom:17px}
.sp-label{display:block; margin-bottom:7px; font-family:var(--mono); font-size:var(--fs-label);
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
#loginScreen input[type=email],#loginScreen input[type=password],#loginScreen input[type=text]{
  width:100%; height:44px; padding:0 13px; border:1px solid var(--hair-dark);
  border-radius:3px; background:var(--card); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-title); transition:border-color .15s,box-shadow .15s;}
#loginScreen input::placeholder{color:#9BAAB2}
#loginScreen input:focus{outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(47,169,198,.16);}
.sp-pw{position:relative}
.sp-pw input{padding-right:62px}
.sp-reveal{position:absolute; right:5px; top:50%; transform:translateY(-50%);
  height:32px; padding:0 9px; border:0; border-radius:2px; background:transparent;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); cursor:pointer;}
.sp-reveal:hover{color:var(--blue); background:rgba(6,26,33,.05)}
.sp-forgot{margin-top:8px; text-align:right}
.sp-forgot a{font-size:var(--fs-body); color:var(--blue); text-decoration:none}
.sp-forgot a:hover{text-decoration:underline}

.sp-submit{width:100%; height:46px; margin-top:9px; display:flex; align-items:center;
  justify-content:center; gap:9px; border:0; border-radius:3px; cursor:pointer;
  background:linear-gradient(180deg,var(--deep-2),var(--deep)); color:#fff;
  font-family:var(--sans); font-size:var(--fs-title); font-weight:600; letter-spacing:.01em;
  transition:transform .15s,box-shadow .15s,filter .15s;}
.sp-submit:hover{filter:brightness(1.09); transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(11,46,58,.28);}
.sp-submit:active{transform:translateY(0)}
.sp-submit[disabled]{opacity:.6; cursor:default; transform:none}
.sp-arrow{width:16px; height:16px; transition:transform .18s ease}
.sp-submit:hover .sp-arrow{transform:translateX(3px)}

#loginScreen .login-error{display:none; margin-top:15px; padding:11px 13px; border-radius:3px;
  border:1px solid rgba(200,45,45,.28); border-left:2px solid #C82D2D;
  background:rgba(200,45,45,.06); color:#8E2020; font-size:var(--fs-body); line-height:1.5;}
#loginScreen .login-error:not(:empty){display:block}  /* handler only sets textContent - untouched */

.sp-foot{margin-top:34px; padding-top:15px; border-top:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.09em; color:var(--muted);}
.sp-api{display:inline-flex; align-items:center; gap:7px}
.sp-dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 3px rgba(47,191,113,.18);}

#loginScreen :focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* ---------- below 1000px: scale lies down, cursor retires ---------- */
@media (max-width:1000px){
  /* stacked: leave the fixed viewport box so rows keep their natural height */
  #loginScreen{position:static; height:auto; min-height:100vh;
    grid-template-columns:1fr; grid-template-rows:auto 40px auto;}
  /* stacked: the plate flows to its natural height - centring clipped it */
  .sp-brand-inner{padding:34px 26px; max-width:none; height:auto;
    justify-content:flex-start;}
  .sp-cert-row{flex-wrap:wrap}
  .sp-cert-row dd{text-align:left}
  .sp-logo{height:66px}
  .sp-name{font-size:var(--fs-figure)}
  .sp-cert{margin-top:26px}
  .sp-scale{border-left:0; border-right:0; border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);}
  .sp-cursor{display:none}
  .sp-tick{left:auto; top:auto; bottom:0; width:1px; height:auto}
  .sp-num{right:auto; bottom:auto; top:5px; transform:translateX(-50%)}
  .sp-access{padding:34px 26px 44px; align-items:flex-start}
  .sp-form{max-width:440px; margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  #loginScreen *{animation:none !important; transition:none !important}
  .sp-cursor{display:none}
}