/* Muted navy: deep blue ground, cool greys, one red action */
body.login-bg {
  --lgn-bg: #071025;
  --lgn-ink-1: #f2f5fa;
  --lgn-ink-2: #c3cbd8;
  --lgn-ink-3: #8b97ab;
  --lgn-accent: #8fb3e8;
  --lgn-line: rgba(170, 195, 235, 0.18);
  --lgn-line-strong: rgba(170, 195, 235, 0.30);
  --lgn-error: #e5484d;
  /* Sizing follows the usual pattern: display type is fluid (clamp), reading text
     steps up only a little on big screens, and the sign-in column is capped. The column
     keeps to the right edge; the hero centres in the room left of it */
  --lgn-pad: clamp(1.5rem, 4vw, 5rem);
  --lgn-side-w: clamp(26rem, 16rem + 15vw, 38rem);

  background: radial-gradient(ellipse 85% 95% at 40% 45%, #12275c 0%, #0c1c40 45%, var(--lgn-bg) 100%);
  color: var(--lgn-ink-2);
  height: 100vh;
  /* The banner padding counts inside that height, not on top of it */
  box-sizing: border-box;
  /* Clear the banner, top and bottom */
  padding: var(--banner-h) 0;
}

/* Network behind everything, kept faint */
.lgn-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  /* Stops at the divider: the sign-in side stays clear. An explicit width, as a canvas
     given only left and right keeps its own drawing size in some browsers (Firefox) */
  /* The divider: the page padding plus the sign-in column, in from the right */
  width: calc(100% - var(--lgn-pad) - var(--lgn-side-w));
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.38;
  /* Thin out over the last stretch so it doesn't end on a cut */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 6rem);
  mask-image: linear-gradient(to left, transparent 0, #000 6rem);
}

/* Seal: pinned to the screen corner, one colour.
   The image has a white disc baked in: invert turns it black, screen drops black out,
   leaving light line work on the navy */
.lgn-seal {
  position: fixed;
  top: calc(var(--banner-h) + 1.75rem);
  left: 2.25rem;
  z-index: 2;
  height: 72px;
  opacity: 0.9;
}

.lgn-seal-synertex {
  filter: grayscale(1) invert(1) contrast(1.6);
  mix-blend-mode: screen;
}

/* Layout: brand column centred in the left, sign-in column to the right edge.
   Exactly the height between the banners: the page itself never scrolls */
.lgn {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 1rem var(--lgn-pad) 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lgn-side-w);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.lgn-hero {
  position: relative;
  justify-self: center;
  padding: 0 3rem;
}
/* Thin the network a little behind the hero: a soft navy pool, no edge.
   A plain gradient, painted once; no blur filter, which would redraw with the canvas */
.lgn-hero::before {
  content: "";
  position: absolute;
  inset: -5rem -4rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
              rgba(13, 28, 64, 0.6) 0%, rgba(13, 28, 64, 0.4) 55%, rgba(13, 28, 64, 0) 100%);
}

/* Left: brand */
.lgn-wordmark {
  display: block;
  height: clamp(36px, 1.5rem + 1vw, 54px);
  width: auto;
  margin-bottom: 2rem;
  /* A faint halo; drop-shadow reads only the image, so it's painted once */
  filter: drop-shadow(0 0 10px rgba(170, 200, 255, 0.28));
}
.lgn-title {
  margin: 0 0 0.33em;
  font-family: var(--font-sans);
  /* Display type: fluid between a floor and a cap */
  font-size: clamp(2.75rem, 1.25rem + 3vw, 5.5rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--lgn-ink-1);
}
/* Crosshair "o": circle sits on the baseline at the letter's height */
.lgn-title .lgn-o {
  width: 0.76em;
  height: 0.76em;
  margin: 0 -0.02em;
  vertical-align: -0.1em;
  color: var(--brand-red);
  filter: drop-shadow(0 0 0.06em rgba(var(--rgb-brand-red), 0.35));
}
.lgn-kicker {
  margin: 0 0 2rem;
  font-family: var(--font-mono);
  font-size: clamp(14px, 0.75rem + 0.3vw, 18px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* the accent blue, lighter, so the tagline reads clearly */
  color: #bcd3f4;
}
.lgn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(16px, 12px + 0.25vw, 18px);
  font-weight: 500;
  padding-bottom: 5px;
  color: var(--lgn-ink-1);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-red);
  transition: border-color 0.15s ease;
}
.lgn-link:hover { color: #fff; border-color: color-mix(in srgb, var(--brand-red) 70%, #fff); }
.lgn-link i { transition: transform 0.15s ease; }
.lgn-link:hover i { transform: translateX(3px); }

/* Right: sign in + notice, behind a hairline. Never taller than the room: on a short
   window the notice gives way and scrolls in its own box, so nothing shrinks */
.lgn-side {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  /* the divider runs a little past the content on tall windows (full screen): 8px above and below at
     900 high, about 24px at 1030, 30px at 1080, up to 64px */
  padding: clamp(0.5rem, 12vh - 100px, 4rem) 0 clamp(0.5rem, 12vh - 100px, 4rem) clamp(2rem, 3vw, 3.25rem);
  border-left: 1px solid var(--lgn-line-strong);
}
.lgn-side > * { flex-shrink: 0; }
.lgn-heading {
  margin: 0 0 1.75rem;
  font-size: clamp(2.25rem, 1.5rem + 1.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--lgn-ink-1);
}

/* Form */
.lgn-field { margin-bottom: 1rem; }
.lgn-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: clamp(12.5px, 5px + 0.39vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lgn-ink-2);
}
.lgn-field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 0.85rem;
  font: inherit;
  font-size: clamp(16px, 10px + 0.3125vw, 18px);
  color: var(--lgn-ink-1);
  background: rgba(8, 18, 42, 0.55);
  border: 1px solid var(--lgn-line-strong);
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lgn-field input:hover { border-color: rgba(170, 195, 235, 0.45); }
.lgn-field input:focus {
  outline: none;
  border-color: var(--lgn-accent);
  background: rgba(8, 18, 42, 0.8);
}
/* Autofill tint: only an inset shadow overrides it */
.lgn-field input:-webkit-autofill,
.lgn-field input:-webkit-autofill:hover,
.lgn-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0d1a36 inset;
  box-shadow: 0 0 0 1000px #0d1a36 inset;
  -webkit-text-fill-color: var(--lgn-ink-1);
  caret-color: var(--lgn-ink-1);
  transition: background-color 5000s ease-in-out 0s;
}
.lgn-form.has-error .lgn-field input { border-color: rgba(229, 72, 77, 0.7); }

.lgn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin-top: 1.25rem;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  /* At rest a dark tint of the red with a thin border and corner ticks; on hover it
     fills solid and the ticks go */
  background: rgba(var(--rgb-brand-red), 0.22);
  border: 1px solid rgba(var(--rgb-brand-red), 0.55);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lgn-submit:hover { background: var(--brand-red); border-color: var(--brand-red); }
.lgn-submit:hover i { transform: translateX(3px); }
.lgn-submit i { transition: transform 0.15s ease; }
.lgn-submit:focus-visible { outline: 1px solid var(--lgn-ink-1); outline-offset: 3px; }
/* Corner ticks on the buttons (the targeting-frame look), drawn as eight short gradient
   strokes on one pseudo-element. At rest each button is a tint with a thin border and
   these ticks; on hover it fills solid and they go */
.lgn-submit, .lgn-catalog { position: relative; }
.lgn-submit::before,
.lgn-catalog::before {
  --c: var(--brand-red);
  --l: 7px;
  --w: 2px;
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat;
  transition: opacity 0.15s ease;
}
/* Browse is the outline beside Login's colour: the same recipe in off-white (the corners the full
   colour, the border it in part), and black on hover, where the light edge keeps it visible */
.lgn-catalog::before { --c: var(--lgn-ink-1); }
.lgn-submit:hover::before,
.lgn-catalog:hover::before { opacity: 0; }

/* Test environments' Login: a <details> summary in the button's look, gone once open */
.lgn-unpw > summary { list-style: none; user-select: none; }
.lgn-unpw > summary::-webkit-details-marker { display: none; }
.lgn-unpw[open] > summary { display: none; }

/* The OIDC link uses the same look */
a.lgn-submit { text-decoration: none; }
a.lgn-submit:hover { color: #fff; }
.lgn-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lgn-ink-1);
}
.lgn-or::before, .lgn-or::after { content: ""; flex: 1; border-top: 1px solid var(--lgn-line-strong); }

/* Catalog: an outlined second path, with the office seal */
.lgn-catalog {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  height: 56px;
  padding: 0 1rem;
  font: inherit;
  font-size: clamp(16px, 10px + 0.3125vw, 18px);
  font-weight: 600;
  color: var(--lgn-ink-1);
  /* the second path, quieter than Login: a black tint at rest, solid black on hover */
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(242, 245, 250, 0.28);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  /* a link in the button's look */
  box-sizing: border-box;
  text-decoration: none;
}
.lgn-catalog:hover { background: #000; border-color: rgba(242, 245, 250, 0.6); color: var(--lgn-ink-1); }
.lgn-catalog:hover i { transform: translateX(3px); }
.lgn-catalog i { transition: transform 0.15s ease; }
.lgn-catalog:focus-visible { outline: 1px solid var(--lgn-ink-1); outline-offset: 3px; }
/* Same one-colour treatment as the corner seal */
.lgn-catalog img {
  width: 34px;
  height: 34px;
  filter: grayscale(1) invert(1) contrast(1.6);
  mix-blend-mode: screen;
}

.lgn-error {
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.85rem;
  font-size: 15px;
  color: var(--lgn-ink-1);
  background: rgba(229, 72, 77, 0.10);
  border-left: 2px solid var(--lgn-error);
}

.lgn-rule {
  margin: 1.25rem 0 1rem;
  border: 0;
  border-top: 1px solid var(--lgn-line-strong);
  opacity: 1;
}

/* Warning heading over the notice */
.lgn-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: clamp(15px, 9px + 0.3125vw, 17px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e3b341;
}
.lgn-warning i { font-size: 1.05em; line-height: 1; }

/* Notice: the one part that gives way, scrolling in place when the window is short */
.lgn-side > .lgn-notice {
  flex-shrink: 1;
  min-height: 4.5rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) transparent;
}
.lgn-notice p {
  margin: 0 0 0.65em;
  font-size: clamp(15px, 9px + 0.3125vw, 17px);
  line-height: 1.55;
  color: var(--lgn-ink-2);
}
.lgn-notice p:last-child { margin-bottom: 0; }

/* Narrow viewports: stack, and the page scrolls as normal */
@media (max-width: 899.98px) {
  body.login-bg { height: auto; min-height: 100vh; }
  .lgn {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 3rem;
    padding: 7rem 1.5rem 3rem;
  }
  .lgn-hero { justify-self: start; padding: 0; }
  /* Stacked, there's no divider: the network fills the screen */
  .lgn-canvas { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .lgn-seal { position: absolute; left: 1.5rem; width: 60px; height: 60px; }
  .lgn-side {
    max-height: none;
    padding: 2.5rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--lgn-line-strong);
  }
  .lgn-side > .lgn-notice { overflow: visible; padding-right: 0; }
}