@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/govcraft/fonts/sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/govcraft/fonts/sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/govcraft/fonts/sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/govcraft/fonts/sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/govcraft/fonts/mono-500.woff2') format('woff2');
}

:root {
  --gc-ink: #0A0A0A;
  --gc-graphite: #3A3A3A;
  --gc-steel: #6B6B6B;
  --gc-hairline: #E4E1DA;
  --gc-rule: #CFCAC0;
  --gc-paper: #F5F2EC;
  --gc-paper-2: #EEEAE1;
  --gc-paper-3: #E7E2D6;
  --gc-white: #FFFFFF;
  --gc-signal: #D9590B;
  --gc-signal-hover: #A8430A;
  --gc-navy: #1F3350;
  --gc-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gc-focus: 0 0 0 2px var(--gc-paper), 0 0 0 4px var(--gc-ink);
}

body:has(.login),
body:has(.reset_password),
body:has(.signup),
body:has(.request_admin_password_auth) {
  background: var(--gc-paper);
}

.login.fullscreen,
.reset_password.fullscreen,
.signup.fullscreen,
.request_admin_password_auth.fullscreen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 14%, rgba(217, 89, 11, 0.10) 0 18%, transparent 32%),
    linear-gradient(90deg, rgba(10,10,10,0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10,10,10,0.04) 1px, transparent 1px),
    var(--gc-paper);
  background-size: auto, 42px 42px, 42px 42px, auto;
  color: var(--gc-ink);
  font-family: var(--gc-font-sans);
}

.login.fullscreen::before,
.reset_password.fullscreen::before,
.signup.fullscreen::before,
.request_admin_password_auth.fullscreen::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 10px;
  background:
    linear-gradient(90deg,
      transparent 0 4px,
      rgba(10,10,10,0.16) 4px 8px,
      transparent 8px 16px,
      rgba(217,89,11,0.82) 16px 20px,
      transparent 20px 32px);
  background-size: 32px 10px;
  pointer-events: none;
}

.login .fullscreen-body,
.reset_password .fullscreen-body,
.signup .fullscreen-body,
.request_admin_password_auth .fullscreen-body {
  width: min(100%, 540px);
}

.login .fullscreen-body > p:first-child {
  color: var(--gc-signal);
  font-family: var(--gc-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.login .fullscreen-body > p:first-child::after {
  content: 'Govcraft support access';
  display: block;
  color: var(--gc-ink);
  font-family: var(--gc-font-sans);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 8px auto 0;
  max-width: 480px;
  text-transform: none;
}

.login .hero-unit,
.reset_password .hero-unit,
.signup .hero-unit,
.request_admin_password_auth .hero-unit {
  background: rgba(255,253,248,0.92);
  border: 1px solid var(--gc-ink);
  border-radius: 6px;
  box-shadow: 0 18px 40px -24px rgba(10,10,10,0.46), 0 0 0 1px rgba(10,10,10,0.05);
  color: var(--gc-ink);
  font-family: var(--gc-font-sans);
  margin-bottom: 14px;
  padding: 20px 24px;
}

.login .company-logo {
  display: block;
  filter: none;
  margin: 0 auto 18px;
  max-height: 54px;
  max-width: 220px;
}

.login .formGroup-label label,
.reset_password .formGroup-label label,
.signup .formGroup-label label,
.request_admin_password_auth .formGroup-label label {
  color: var(--gc-graphite);
  font-family: var(--gc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.login .form-control,
.reset_password .form-control,
.signup .form-control,
.request_admin_password_auth .form-control {
  background: var(--gc-white);
  border: 1px solid var(--gc-rule);
  border-radius: 4px;
  box-shadow: none;
  color: var(--gc-ink);
  font-family: var(--gc-font-sans);
}

.login .form-control:focus,
.reset_password .form-control:focus,
.signup .form-control:focus,
.request_admin_password_auth .form-control:focus {
  border-color: var(--gc-ink);
  box-shadow: var(--gc-focus);
}

.login .checkbox-replacement,
.login .checkbox-replacement .label-text {
  color: var(--gc-graphite);
}

.login .checkbox-replacement .icon-checked,
.login .checkbox-replacement input:checked ~ .icon-checked {
  color: var(--gc-signal);
}

.login .btn--primary,
.reset_password .btn--primary,
.signup .btn--primary,
.request_admin_password_auth .btn--primary {
  background: var(--gc-signal);
  border: 1px solid var(--gc-signal);
  border-radius: 4px;
  box-shadow: none;
  color: var(--gc-white);
  font-family: var(--gc-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login .btn--primary:hover,
.login .btn--primary:focus,
.reset_password .btn--primary:hover,
.reset_password .btn--primary:focus,
.signup .btn--primary:hover,
.signup .btn--primary:focus,
.request_admin_password_auth .btn--primary:hover,
.request_admin_password_auth .btn--primary:focus {
  background: var(--gc-signal-hover);
  border-color: var(--gc-signal-hover);
  color: var(--gc-white);
}

.login .btn--text,
.login .btn--secondary,
.login p a,
.reset_password p a,
.signup p a,
.request_admin_password_auth p a {
  color: var(--gc-navy);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.login .btn--text:hover,
.login .btn--secondary:hover,
.login p a:hover,
.reset_password p a:hover,
.signup p a:hover,
.request_admin_password_auth p a:hover {
  color: var(--gc-ink);
}

.login .js-footer,
.reset_password .js-footer,
.signup .js-footer,
.request_admin_password_auth .js-footer {
  color: var(--gc-graphite);
  font-family: var(--gc-font-sans);
}

.login .js-footer p,
.reset_password .js-footer p,
.signup .js-footer p,
.request_admin_password_auth .js-footer p {
  color: var(--gc-graphite);
  line-height: 1.55;
}

.login hr,
.reset_password hr,
.signup hr,
.request_admin_password_auth hr {
  border-color: var(--gc-hairline);
}

.poweredBy {
  color: var(--gc-steel);
  font-family: var(--gc-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.poweredBy a {
  color: var(--gc-steel);
}

@media (max-width: 520px) {
  .login,
  .reset_password,
  .signup,
  .request_admin_password_auth {
    padding: 18px;
  }

  .login .hero-unit,
  .reset_password .hero-unit,
  .signup .hero-unit,
  .request_admin_password_auth .hero-unit {
    padding: 22px;
  }
}

@media (max-height: 720px) {
  .login,
  .reset_password,
  .signup,
  .request_admin_password_auth {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .login .fullscreen-body > p:first-child::after {
    font-size: clamp(22px, 4vw, 32px);
  }

  .login .company-logo {
    margin-bottom: 18px;
    max-height: 58px;
  }

  .login .hero-unit,
  .reset_password .hero-unit,
  .signup .hero-unit,
  .request_admin_password_auth .hero-unit {
    padding: 20px 24px;
  }
}

.login .form-group,
.reset_password .form-group,
.signup .form-group,
.request_admin_password_auth .form-group {
  margin-bottom: 14px;
}

.login .form-controls {
  gap: 8px;
}

.login.fullscreen,
.reset_password.fullscreen,
.signup.fullscreen,
.request_admin_password_auth.fullscreen {
  overflow-y: auto;
}