/*
 * PROTEKT "Slate & Copper" sign-in — verbatim transplant of the canonical
 * sign-in .dc.html. Every color/size/spacing value below is traceable to the
 * transplant brief (quoting the .dc.html) or apps/web/styles/tokens.css;
 * spacing not named by the brief uses the tokens space scale (4/8/12/16/24/
 * 32/48). Error/feedback states are the one sanctioned extension (the mock
 * omits them): designed within the system, matte, no fills, no icons.
 *
 * Fonts: latin subsets, OFL (LICENSES.txt in ../fonts). Newsreader =
 * statements; Archivo = UI; JetBrains Mono = labels/telemetry; Michroma =
 * wordmark only.
 */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-var.woff2') format('woff2');
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Michroma';
  src: url('../fonts/michroma-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Slate & Copper — brand-verbatim (mirrors apps/web/styles/tokens.css) */
  --color-bg:             #10151D;
  --color-surface:        #151B25;
  --color-surface-raised: #1E2735;
  --color-border:         #26303F;
  --color-border-strong:  #2B3646;
  --color-border-subtle:  #222C3B;
  --color-text:           #EDE9E1;
  --color-text-body:      #94A5BE;
  --color-text-secondary: #8CA0BC;
  --color-text-muted:     #5D6C82;
  --color-accent:         #B87B4B;
  --color-accent-hover:   #C98D5C;
  --color-on-accent:      #10151D;
  --sev-critical:         #C9655A;   /* AA-fixed error voice: 4.79:1 on bg */
  --font-display:  'Newsreader', Georgia, serif;
  --font-ui:       'Archivo', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-wordmark: 'Michroma', sans-serif;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
  --dur-fast: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* selection: copper on slate (per the mock) */
::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* ------------------------------------------------ layout: fixed 42% split */
.pk-stage { display: flex; min-height: 100vh; }
.pk-auth {
  width: 42%;
  flex: 0 0 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border-subtle); /* the divider, #222C3B */
}
.pk-brand {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 48px;
  background: linear-gradient(180deg, #151B25 0%, #10151D 100%);
}

/* ------------------------------------------------ brand header */
.pk-brandhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 2;
}

/* wordmark: Michroma, mirrored R via the canonical markup; hover copper */
.pk-wordmark {
  font-family: var(--font-wordmark);
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.pk-wordmark:hover { color: var(--color-accent); }
.pk-wordmark .pk-rev { display: inline-block; transform: scaleX(-1); margin-left: -.12em; }

/* dual clock: labels steel, times bone 600; the pulse is the live signal */
.pk-vigil {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.pk-vigil b { color: var(--color-text-secondary); font-weight: 400; }
.pk-vigil .pk-jnb, .pk-vigil .pk-utc { color: var(--color-text); font-weight: 600; }
.pk-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pk-pulse 2.4s var(--ease) infinite;
}
@keyframes pk-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(184, 123, 75, 0.35); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(184, 123, 75, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-pulse { animation: none; }
}

/* ------------------------------------------------ brand statement */
.pk-pitch {
  /* mock flow: flex:1 + centered; the telemetry svg sits after it in-flow */
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pk-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.pk-statement {
  margin-top: 22px;           /* mock: margin-top:22px */
  max-width: 520px;           /* mock: max-width:520px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.14;
  color: var(--color-text);
  text-wrap: balance;
}
.pk-statement em { font-style: italic; color: var(--color-accent); }
.pk-support {
  margin-top: 20px;           /* mock: margin:20px 0 0 */
  max-width: 420px;           /* mock: max-width:420px */
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-body);
  text-wrap: pretty;
}

/* campus telemetry svg: transplanted verbatim (inline-styled in the
 * template, in-flow as the panel's last child — exactly the mock's layout) */

/* ------------------------------------------------ form */
.pk-card { width: 100%; max-width: 380px; }
#kc-page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.pk-sub {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body);
  margin-bottom: 32px;
}

form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 9px;              /* mock: label/input gap 9px */
}
input[type='text'],
input[type='email'],
input[type='password'] {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 0; /* square corners */
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 15.5px;
  padding: 14px 16px;
  outline: none;
  margin-bottom: 22px;             /* mock: field gap 22px */
  transition: border-color var(--dur-fast) var(--ease);
}
input::placeholder { color: var(--color-text-muted); }
input[type='text']:focus-visible,
input[type='email']:focus-visible,
input[type='password']:focus-visible { border-color: var(--color-accent); box-shadow: none; }
button:focus-visible,
a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* base renders a password-visibility toggle with icon classes this theme
 * doesn't define — the mock has no toggle; hide it */
[data-password-toggle] { display: none; }

input[type='submit'],
button[type='submit'] {
  width: 100%;
  margin-top: 6px;                 /* mock: margin-top 6px */
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: 0; /* square corners */
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 16px;              /* mock: 15px 16px */
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
input[type='submit']:hover,
button[type='submit']:hover { background: var(--color-accent-hover); }

/* secondary buttons (logout-confirm cancel) — designed within the system */
button:not([type='submit']):not([data-password-toggle]),
input[type='button'] {
  width: 100%;
  margin-top: 12px;
  background: transparent;
  color: var(--color-text-body);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
button:not([type='submit']):not([data-password-toggle]):hover { border-color: var(--color-text-muted); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------- error / feedback (sanctioned extension)
 * Matte, no fills, no icons: AA-fixed critical text + a 1px left keyline. */
#input-error,
.alert-error {
  display: block;
  border-left: 1px solid var(--sev-critical);
  color: var(--sev-critical);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 4px 0 4px 12px;
  margin-bottom: 24px;
}
input[aria-invalid='true'] { border-color: var(--sev-critical); margin-bottom: 10px; }
.alert-warning, .alert-info, .alert-success {
  display: block;
  border-left: 1px solid var(--color-text-secondary);
  color: var(--color-text-body);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 4px 0 4px 12px;
  margin-bottom: 24px;
}
#kc-error-message .instruction {
  color: var(--color-text-body);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.pk-fineprint {
  margin-top: 32px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* misc base furniture kept quiet */
#kc-info, .subtitle, #kc-registration { color: var(--color-text-muted); font-size: 13px; }
#kc-form-options { margin-top: 4px; font-size: 13px; }
.required { color: var(--color-accent); }
#kc-locale { display: none; }

/* grain overlay: transplanted verbatim (inline-styled div in the template) */

/* ------------------------------------------------ responsive: stack */
@media (max-width: 900px) {
  .pk-stage { flex-direction: column-reverse; }
  .pk-auth { width: 100%; flex: none; border-right: none; padding: 32px 24px; }
  .pk-brand { flex: none; border-bottom: 1px solid var(--color-border-subtle); padding: 32px 24px; }
  .pk-statement { font-size: 32px; }
  .pk-brandhead { flex-wrap: wrap; }
}