/**
 * Login
 * ----------------------------------------------------------------------
 * Page-specific styles for the login page. Relies on core.css being
 * loaded first for design tokens (--bg, --accent, --cyan, etc.), fonts,
 * the body grid background, and the .panel / .panel-header / .panel-body
 * classes.
 * ----------------------------------------------------------------------
 */
@font-face {
  font-family: 'sefa';
  src: url('../assets/sefa.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79%{
     color: #333;
  }
  80% {
    
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

body.login-body {
  min-height: 100vh;
  padding-bottom: 0; /* override the sheet's footer spacing */
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrap {
  width: 100%;
  max-width: 380px;
  padding: 24px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 22px;
  text-align: center;
}

.login-brand .logo {
  font-family: Sefa;
  /* 100px on normal screens; on narrow ones it shrinks to fit the width. The word is
     about 6.4 times its font size wide (rotation included), and the 64px leaves room for
     the page padding. Everything else is in em so the whole effect scales with it. */
  font-size: min(100px, calc((100vw - 64px) / 6.4));
  color: var(--accent);
  transform: rotate(-7deg);
  margin-bottom: 0.3em;
  text-shadow: 0 -0.4em 1em, 0 0 0.01em, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 0.1em 0.03em #000;
}

.login-brand .logo .logo-blink {
    animation: blink linear infinite 2s;
}

.login-brand .logo .logo-blink:nth-of-type(2){
  animation: blink linear infinite 3s;
}

.login-brand .mark {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-shadow: 0 0 18px var(--accent-glow);
}

.login-brand .sub {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.login-panel {
  width: 100%;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.login-input {
  width: 100%;
  font-family: var(--font-data);
  font-size: 14px;
  color: var(--text);
  background: var(--panel-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
}

.login-btn {
  margin-top: 4px;
  width: 100%;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 11px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.login-btn:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 16px var(--accent-glow);
}

.login-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.login-footnote {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-faint);
}

/* Message above the form, e.g. "Your session has expired." */
.login-notice {
  margin: 0 0 16px;
  padding: 8px 10px;
  font-family: var(--font-data);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cyan);
  background: rgba(56, 230, 207, 0.06);
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
}