/* Inovacc hosted sign-in screens. Identity from the brand repo (inovacc/brand: tokens/tokens.json, patterns/,
   fonts/sora). Every colour lives in the ONE tokens block below (governance G1); no rule uses a colour literal. */

/* ---- tokens ------------------------------------------------------------------------------------------------ */
:root {
  /* palette (tokens.json color.palette / derived) */
  --c-navy: #0b132b;
  --c-blue: #2563eb;
  --c-blue-hover: #1d4ed8;
  --c-blue-300: #60a5fa;
  --c-cyan: #00e5e9;
  --c-charcoal: #1e293b;
  --c-gray: #e5e7eb;
  --c-white: #ffffff;
  --c-page: #f2f7fb;
  --c-slate: #475569;
  --c-slate-light: #94a3b8;
  /* form controls: 4.76:1 on white, so the border and placeholder pass AA non-text and text contrast */
  --c-control: #64748b;
  --c-danger: #b91c1c;
  --c-danger-bg: #fef2f2;
  --c-success: #047857;
  --c-success-bg: #ecfdf5;
  --c-black: #000000;

  /* semantic */
  --bg: var(--c-white);
  --text: var(--c-navy);
  --muted: var(--c-slate);
  --line: var(--c-gray);
  --accent: var(--c-blue);
  --accent-hover: var(--c-blue-hover);
  --on-accent: var(--c-white);
  --focus: var(--c-blue);
  --focus-ring: rgb(37 99 235 / 0.25);
  --field-border: var(--c-control);
  --field-bg: var(--c-white);
  --disabled-bg: var(--c-gray);
  --disabled-text: var(--c-slate);
  --error: var(--c-danger);
  --error-bg: var(--c-danger-bg);
  --ok: var(--c-success);
  --ok-bg: var(--c-success-bg);

  /* the visual panel (always dark, as the brand's dark surface) */
  --panel-bg: var(--c-navy);
  --panel-text: var(--c-gray);
  --panel-muted: var(--c-slate-light);
  --panel-accent: var(--c-cyan);
  --panel-line: rgb(255 255 255 / 0.12);
  --glow-blue: rgb(37 99 235 / 0.55);
  --glow-cyan: rgb(0 229 233 / 0.22);
  /* the home page hero (inovacc.dev): its photo veils and its headline gradient */
  --veil-strong: rgb(11 19 43 / 0.96);
  --veil-mid: rgb(11 19 43 / 0.55);
  --veil-none: rgb(11 19 43 / 0);
  --grad-text: linear-gradient(90deg, var(--c-blue-300) 0%, var(--c-cyan) 100%);

  --shadow-card: 0 20px 60px rgb(29 78 216 / 0.07), 0 3px 14px rgb(15 23 42 / 0.04);

  /* shape, space (4 px unit), type */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- fonts (self-hosted Sora, OFL-1.1) ---------------------------------------------------------------------- */
@font-face {
  font-family: "Sora";
  src: url("/static/sora-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/sora-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- base --------------------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- split layout: form card left, visual panel right (>= 900px) -------------------------------------------- */
.split { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.card-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s5) var(--s4); background: var(--bg);
}
.card { width: 100%; max-width: 400px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s7); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.brand img { display: block; width: 28px; height: 35px; }
.lang {
  font: 600 12px/1 var(--font); letter-spacing: 0.12em; color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s2) var(--s3); cursor: pointer; min-height: 32px;
}
.lang:hover { color: var(--text); border-color: var(--field-border); }

h1 { margin: 0 0 var(--s2); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.lede { margin: 0 0 var(--s5); color: var(--muted); font-size: 14px; line-height: 1.5; }
.note { margin: var(--s5) 0 0; padding: var(--s3) var(--s4); background: var(--c-page); border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---- form --------------------------------------------------------------------------------------------------- */
.field { margin-bottom: var(--s4); }
.field label { display: block; margin-bottom: var(--s2); font-size: 14px; font-weight: 600; }
.field input, .field select {
  width: 100%; min-height: 48px; padding: var(--s3) var(--s4); font: inherit; color: var(--text); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
}
.field input::placeholder { color: var(--field-border); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field input.code { letter-spacing: 0.5em; text-align: center; font-size: 22px; font-weight: 600; }
/* the six code boxes: neutral while typing, green when all six are filled, red when the code is refused */
/* the six boxes span the field's full width, edge to edge with the inputs above and below */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); width: 100%; }
.otp-box {
  box-sizing: border-box; width: 100%; height: 56px; padding: 0; margin: 0; text-align: center;
  font: 600 24px/56px var(--font); color: var(--text); font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: var(--field-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.otp-box:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.otp.is-complete .otp-box { border-color: var(--ok); background: var(--ok-bg); }
.otp.is-invalid .otp-box { border-color: var(--error); background: var(--error-bg); animation: shake 0.35s ease; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .otp.is-invalid .otp-box { animation: none; } }
.hint { margin: var(--s1) 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.field-error { margin: var(--s2) 0 0; color: var(--error); font-size: 13px; line-height: 1.4; }
.alert { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; }
.alert.error { color: var(--error); background: var(--error-bg); }
.alert.ok { color: var(--ok); background: var(--ok-bg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); width: 100%; min-height: 48px;
  padding: var(--s3) var(--s5); font: 600 15px/1.2 var(--font); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-sm);
}
.btn.primary { color: var(--on-accent); background: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.secondary { color: var(--text); background: var(--bg); border-color: var(--field-border); }
.btn.secondary:hover { border-color: var(--accent); color: var(--text); }
.btn[disabled], .btn[aria-disabled="true"] { color: var(--disabled-text); background: var(--disabled-bg); border-color: transparent; cursor: not-allowed; }
.btn svg, .btn .provider-icon { width: 20px; height: 20px; flex: none; }
.btn .soon { font-size: 12px; font-weight: 400; }
.btn.link { width: auto; min-height: 0; padding: var(--s2) 0; color: var(--accent); background: transparent; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn.link[disabled] { color: var(--disabled-text); background: transparent; }
.stack { display: grid; gap: var(--s3); }
.divider { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); font-size: 14px; }
.links.center { justify-content: center; }

.spinner { display: none; width: 18px; height: 18px; border: 2px solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
.is-loading .spinner { display: inline-block; }
.is-loading { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- visual panel ------------------------------------------------------------------------------------------- */
.panel { display: none; position: relative; overflow: hidden; isolation: isolate; background: var(--panel-bg); color: var(--panel-text); }
.panel .glow {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(60% 50% at 72% 18%, var(--glow-blue), transparent 70%),
    radial-gradient(45% 40% at 18% 82%, var(--glow-cyan), transparent 70%);
}
/* two 35-degree patterns at different scales and drift speeds: depth by parallax */
.panel .grid, .panel .hex { position: absolute; inset: -30%; z-index: -2; }
.panel .grid {
  background-image: url("/static/grid-dark.svg"); background-size: 160px 112px;
  transform: perspective(900px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, var(--c-black) 20%, transparent 85%);
  mask-image: linear-gradient(to top, var(--c-black) 20%, transparent 85%);
  animation: drift 40s linear infinite;
}
.panel .hex {
  background-image: url("/static/hex-dark.svg"); background-size: 200px 372px; opacity: 0.7;
  -webkit-mask-image: radial-gradient(60% 60% at 70% 25%, var(--c-black), transparent 75%);
  mask-image: radial-gradient(60% 60% at 70% 25%, var(--c-black), transparent 75%);
}
@keyframes drift { to { background-position: 0 112px; } }
/* the home page hero photo under the same navy veils the site uses, so the headline and captions read on it */
.panel .photo {
  position: absolute; inset: 0; z-index: -4;
  background:
    linear-gradient(180deg, var(--veil-mid) 0%, var(--veil-none) 30%, var(--veil-none) 45%, var(--veil-strong) 82%),
    linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-mid) 38%, var(--veil-none) 70%),
    url("/static/hero-building.webp") center top / cover no-repeat;
}
.headline {
  position: absolute; top: var(--s7); left: var(--s7); right: var(--s7); margin: 0; max-width: 560px;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; color: var(--c-white);
}
.headline .hl { display: inline; color: var(--c-cyan); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .headline .hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.caption-area { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s7) var(--s7) var(--s6); }
.tagline { margin: 0 0 var(--s3); color: var(--panel-accent); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.captions { position: relative; min-height: 120px; }
.caption { position: absolute; inset: 0 0 auto 0; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.caption.is-active { opacity: 1; transform: none; }
.caption h2 { margin: 0 0 var(--s2); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.caption p { margin: 0; max-width: 440px; color: var(--panel-muted); font-size: 15px; line-height: 1.6; }
.dots { display: flex; gap: var(--s2); margin-top: var(--s4); }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-line); transition: width 0.3s ease, background 0.3s ease; }
.dots span.is-active { width: 24px; border-radius: 4px; background: var(--panel-accent); }

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(420px, 5fr) 6fr; }
  .card-side { padding: var(--s6) var(--s7); }
  .panel { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .panel .grid { animation: none; }
  .caption, .dots span { transition: none; }
}

/* the password rules: a live checklist, each rule turning green as it is met */
.rules { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s1); font-size: 13px; line-height: 1.4; color: var(--muted); }
.rules li { display: flex; align-items: center; gap: var(--s2); }
.rules li::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--field-border); box-sizing: border-box;
}
.rules li.ok { color: var(--ok); }
.rules li.ok::before { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 2px var(--field-bg); }

/* the code's expiry, counted down from the server's expires_at */
.timer { margin: var(--s2) 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timer.urgent { color: var(--error); }