/* ============================================================================
   system.css — Aurora page styles for Login / Home / 403 / 404 / 500
   Loaded via {% block head %} in each template. aurora.css (loaded globally
   after app.css) already provides the --au-* tokens and foundation classes;
   this file only adds page-specific composition.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   LOGIN — full-bleed split screen (dark brand left · form right)
   --------------------------------------------------------------------------- */
.sys-auth{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:100vh;
}

/* Brand panel — fills the full left edge-to-edge */
.sys-auth__brand{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:56px clamp(40px,6vw,92px);
  color:var(--au-d-ink);
  background:
    radial-gradient(1100px 620px at 88% -12%,rgba(167,224,198,.30),transparent 60%),
    radial-gradient(760px 520px at -10% 115%,rgba(60,154,113,.20),transparent 55%),
    linear-gradient(150deg,#123023,#19412F 62%,#1E4E38);
}
/* faint concentric ring for depth (AI-presence, not looping) */
.sys-auth__brand::after{
  content:"";position:absolute;inset-inline-end:-140px;bottom:-160px;
  width:440px;height:440px;border-radius:50%;
  border:1px solid rgba(167,224,198,.16);
  box-shadow:0 0 0 64px rgba(167,224,198,.05);
  pointer-events:none;
}
.sys-auth__brandinner{position:relative;z-index:1;max-width:480px;display:flex;flex-direction:column;gap:18px;}
.sys-auth__mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--au-d-ink);}
.sys-auth__mark img{height:30px;width:auto;}
.sys-auth__brand .au-micro{color:var(--au-mint);}
.sys-auth__title{
  font-family:var(--au-font-ui);
  font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:600;line-height:1.08;letter-spacing:-.02em;
  color:var(--au-d-ink);
}
.sys-auth__sub{font-size:1rem;line-height:1.6;color:rgba(234,246,239,.76);max-width:42ch;}
.sys-auth__meta{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:12.5px;color:rgba(234,246,239,.72);}

/* Form panel — form centered on the right */
.sys-auth__panel{
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;background:var(--au-app-bg);
}
.sys-auth__form{width:100%;max-width:400px;}
.sys-auth__logo{height:44px;width:auto;display:block;margin-bottom:28px;}
.sys-auth__heading{font-family:var(--au-font-ui);font-size:1.55rem;font-weight:600;color:var(--au-ink);letter-spacing:-.01em;}
.sys-auth__welcome{font-size:.95rem;color:var(--au-muted);margin:4px 0 24px;}
.sys-auth__form .field{margin-bottom:16px;}
.sys-auth__form .notification{margin-bottom:20px;}

/* Password eye toggle — make the dead slash actually appear on reveal */
.control.has-icons-right .icon.au-eye{cursor:pointer;pointer-events:auto;}
#eyeIcon .au-eye__slash{display:none;}
#eyeIcon.is-revealed .au-eye__slash{display:inline;}
#eyeIcon.is-revealed{stroke:var(--au-emerald);}

@media (max-width:820px){
  /* Single column on small screens — brand collapses to a slim top banner */
  .sys-auth{grid-template-columns:1fr;}
  .sys-auth__brand{
    padding:28px 24px;min-height:auto;align-items:flex-start;
  }
  .sys-auth__brand::after{display:none;}
  .sys-auth__title{font-size:1.6rem;}
  .sys-auth__sub,.sys-auth__meta{display:none;}
  .sys-auth__panel{padding:32px 20px;}
  .sys-auth__logo{display:none;}       /* brand already shown above */
}

/* ---------------------------------------------------------------------------
   HOME — retint landing to Aurora green
   --------------------------------------------------------------------------- */
.landing .landing-eyebrow{
  display:inline-block;
  margin-bottom:14px;
}
.landing .landing-title{
  background:linear-gradient(120deg,var(--au-forest),var(--au-emerald) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--au-forest); /* fallback */
}
.landing .landing-subtitle{
  color:var(--au-muted);
}
.landing .landing-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

/* ---------------------------------------------------------------------------
   ERROR PAGES — 403 / 404 / 500 empty-state
   --------------------------------------------------------------------------- */
.error-hero .au-empty{
  max-width:440px;
  margin:0 auto;
  gap:14px;
  padding:40px 32px;
  background:var(--au-card);
  box-shadow:var(--au-e2);
}
.sys-error__code{
  font-family:var(--au-font-mono);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-size:clamp(64px,12vw,104px);
  line-height:1;
  letter-spacing:.02em;
  color:var(--au-forest);
}
.sys-error__code.is-danger{color:var(--au-danger);}
.sys-error__title{
  font-family:var(--au-font-ui);
  font-size:1.35rem;
  font-weight:600;
  color:var(--au-ink);
}
.sys-error__body{
  font-size:.95rem;
  color:var(--au-muted);
  line-height:1.55;
  max-width:38ch;
}
.sys-error__actions{margin-top:8px;}