/* Cyber Defence Center: the sign-in page (7.12.0).
   One skeleton for every product of the Eagle SecOps Suite: a field drawn in code, the product's
   name and mark on the left, the sign-in card on the right. It was first written for Eagle DNS
   Secure. Here it takes its colours from the installation's colour scheme, dark or light: the
   script sets the variables below from the scheme the administrator chose under Branding, and the
   values written here are the "dark" scheme, so the page is right before the script has run.
   No rule here depends on the application's own stylesheet; an outsider is served neither. */
:root {
  --bg: #0b1220; --panel: #121b2e; --panel2: #19243b; --line: #26344f;
  --text: #e8eef8; --muted: #8b98b4; --accent: #6d90d6; --accent2: #3f5a86;
  /* The same colours as numbers, for the places that need them see-through. */
  --bg-rgb: 11, 18, 32; --panel-rgb: 18, 27, 46; --accent-rgb: 109, 144, 214; --text-rgb: 232, 238, 248;
  --on-accent: #0a1220; --err: #ff8f7d; --shadow: rgba(0, 0, 0, 0.5);
}
html.light { --err: #b42318; --shadow: rgba(24, 36, 48, 0.18); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font: 16px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }

#field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.veil {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 50%, rgba(var(--bg-rgb), 0.72), transparent 70%),
    radial-gradient(1100px 600px at 12% 8%, rgba(var(--accent-rgb), 0.16), transparent 62%),
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.25), rgba(var(--bg-rgb), 0.78));
}

.stage {
  position: relative; min-height: 100%; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 420px);
  align-items: center; gap: clamp(28px, 6vw, 96px);
  max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px) 96px;
}

.brand img { display: block; max-width: 210px; max-height: 84px; margin: 0 0 30px; }
/* The built-in mark is white; on a light scheme it is drawn dark. An uploaded logo is shown as it is. */
html.light .brand img.builtin { filter: invert(1) hue-rotate(180deg); }
.brand h1 {
  margin: 0; font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 650;
  background: linear-gradient(96deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { margin: 16px 0 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--muted); max-width: 30ch; }
.family {
  display: inline-flex; align-items: center; gap: 10px; margin: 34px 0 0;
  font: 500 0.7rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.32); background: rgba(var(--accent-rgb), 0.07);
  padding: 9px 14px; border-radius: 100px;
}
.family .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }

.card {
  background: rgba(var(--panel-rgb), 0.78); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 28px 28px;
  box-shadow: 0 30px 80px var(--shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.06) inset;
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
}
.card h2 { margin: 0 0 22px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }

.field { margin: 0 0 16px; }
.field label {
  display: block; margin: 0 0 7px;
  font: 500 0.66rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.field input {
  width: 100%; padding: 13px 14px; font: inherit; color: var(--text);
  background: rgba(var(--bg-rgb), 0.6); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.field input::placeholder { color: var(--muted); opacity: 0.6; }
.field input:focus {
  outline: 0; border-color: var(--accent); background: rgba(var(--bg-rgb), 0.85);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
}
#code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }

.step { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.note { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.note.key { text-align: center; word-break: break-all; }
.note.key b { color: var(--text); font-weight: 600; }
.qr { display: flex; justify-content: center; margin: 4px 0 12px; }
.qr img, .qr canvas { background: #fff; padding: 8px; border-radius: 8px; }

.error { min-height: 1.3em; margin: 2px 0 12px; font-size: 0.88rem; color: var(--err); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 14px 16px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--on-accent);
  background: var(--accent);
  transition: filter 0.16s, transform 0.08s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.btn[disabled] { filter: saturate(0.4) brightness(0.8); cursor: progress; }
/* The second way in: the organisation's own Microsoft directory. Shown only where it is configured. */
.btn.alt { color: var(--text); background: rgba(var(--bg-rgb), 0.35); border: 1px solid var(--line); }
.btn.alt:hover { filter: none; border-color: var(--accent); }
.btn.alt svg { width: 16px; height: 16px; flex: none; }
.or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  font: 500 0.66rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

footer {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 18px clamp(20px, 5vw, 56px);
  font: 500 0.66rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); opacity: 0.7; pointer-events: none;
}
.noscript, .preview { position: fixed; left: 0; right: 0; top: 0; margin: 0; padding: 12px; text-align: center; color: #fff; z-index: 2; }
.noscript { background: #7a2a1e; }
.preview { background: rgba(var(--accent-rgb), 0.92); color: var(--on-accent); font-weight: 600; font-size: 0.86rem; }
/* In a preview the bar takes the top of the page, so the page starts under it. */
.preview:not([hidden]) ~ .stage { padding-top: 84px; }

@media (max-width: 860px) {
  .stage { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 30px; padding-bottom: 72px; }
  .brand { text-align: center; }
  .brand img { margin: 0 auto 20px; max-height: 60px; }
  .tagline { margin-left: auto; margin-right: auto; }
  .family { margin-top: 20px; }
  .card { width: 100%; max-width: 440px; margin: 0 auto; }
  .veil { background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.45), rgba(var(--bg-rgb), 0.86)); }
}
@media (max-height: 620px) and (min-width: 861px) { .brand img { margin-bottom: 16px; } .family { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }