/* Login screen. Same tokens as dash.css — this is the client's first
   impression of the dashboard, so it carries the brand harder than the app
   does: the rail colour fills the whole viewport with brand-tinted glows. */

:root{
  --ics-brand:#1a6fa0; --ics-brand-2:#c9a84c; --ics-ink:#14181f;
  --ics-canvas:#f5f6f8; --ics-surface:#ffffff; --ics-rail:#0a1628;
  --ics-brand-ink:#ffffff; --ics-brand-fill:#1a6fa0; --ics-brand-strong:#155b85; --ics-brand-line:#b9d5e7;
  --ics-rail-ink:#e4e9f0; --ics-rail-ink-dim:#8b97a8; --ics-rail-line:#1e2b42;
  --ics-danger:#b3261e;
  --ics-font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ics-r:12px; --ics-r-lg:20px;
  --ics-ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:var(--ics-font);
  min-height:100vh;min-height:100dvh;
  display:grid;place-items:center;
  padding:24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  color:var(--ics-rail-ink);
  background:var(--ics-rail);
  -webkit-font-smoothing:antialiased;
}
/* two soft brand glows — the only decoration, and it re-tints per client */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(72% 52% at 76% -8%,color-mix(in srgb,var(--ics-brand) 46%,transparent),transparent 62%),
    radial-gradient(58% 46% at 6% 108%,color-mix(in srgb,var(--ics-brand-2) 26%,transparent),transparent 58%);
}

.ics-login{
  position:relative;z-index:1;
  width:100%;max-width:400px;
  background:color-mix(in srgb,var(--ics-surface) 8%,transparent);
  border:1px solid var(--ics-rail-line);
  border-radius:var(--ics-r-lg);
  padding:38px 32px 30px;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
  animation:ics-in .5s var(--ics-ease) both;
}
@keyframes ics-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ics-login__mark{
  display:grid;place-items:center;margin:0 auto 16px;
  max-width:190px;border-radius:14px;
}
.ics-login__mark[style]{width:76px;height:76px;padding:12px}
.ics-login__mark img{max-width:100%;max-height:56px;width:auto;height:auto;display:block}
.ics-login__word{
  display:block;text-align:center;margin:0 0 16px;
  font-size:1.3rem;font-weight:700;line-height:1.2;
  color:var(--ics-rail-ink);letter-spacing:-.028em;
}
/* This page loads login.css ONLY — dash.css isn't here, so the screen-reader
   helper has to be redefined rather than inherited. */
.ics-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.ics-login label{display:block;font-size:.8125rem;font-weight:600;margin:0 0 8px;color:var(--ics-rail-ink)}
/* The heading and subtitle used to hold the logo off the form; they're gone, so
   the first label carries that gap now. */
.ics-login label:first-of-type{margin-top:10px}
.ics-login__field{position:relative;display:flex}
.ics-login input{
  width:100%;min-height:48px;padding:13px 50px 13px 15px;
  border-radius:var(--ics-r);
  border:1px solid var(--ics-rail-line);
  background:color-mix(in srgb,var(--ics-rail) 60%,transparent);
  color:var(--ics-rail-ink);
  font:inherit;font-size:1rem;  /* 16px — stops iOS zooming */
  transition:border-color .18s var(--ics-ease),box-shadow .18s var(--ics-ease);
}
.ics-login input:focus{
  outline:none;border-color:var(--ics-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ics-brand) 32%,transparent);
}
.ics-login__eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:grid;place-items:center;
  border:0;background:none;color:var(--ics-rail-ink-dim);cursor:pointer;border-radius:8px;
}
.ics-login__eye:hover{color:var(--ics-rail-ink);background:color-mix(in srgb,var(--ics-surface) 10%,transparent)}

.ics-login button[type=submit]{
  width:100%;min-height:48px;margin-top:20px;padding:14px;
  border:0;border-radius:var(--ics-r);cursor:pointer;
  background:var(--ics-brand-fill);color:var(--ics-brand-ink);
  font:inherit;font-weight:700;font-size:1rem;
  transition:background .18s var(--ics-ease),transform .1s var(--ics-ease),opacity .18s;
}
.ics-login button[type=submit]:hover{background:var(--ics-brand-strong)}
.ics-login button[type=submit]:active{transform:translateY(1px)}
.ics-login button[type=submit][disabled]{opacity:.6;cursor:default;transform:none}

.ics-login__err{
  display:none;margin-top:16px;padding:11px 14px;border-radius:10px;
  font-size:.8438rem;line-height:1.45;
  background:color-mix(in srgb,var(--ics-danger) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--ics-danger) 46%,transparent);
  color:#ffd9d5;
}
.ics-login__err.is-on{display:block}

.ics-login__foot{margin:26px 0 0;display:flex;justify-content:center}
/* The mark renders at full strength — a dimmed logo reads as a rendering
   fault, not restraint. Hierarchy comes from the "Powered by" label being
   a dim COLOUR, which leaves the artwork itself solid. */
.ics-login__foot .ics-by{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-decoration:none;
}
.ics-login__foot .ics-by__label{
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--ics-rail-ink-dim);
}
.ics-login__foot .ics-by img{width:120px;height:auto;display:block}

:focus-visible{outline:2px solid var(--ics-brand);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}