/* OOSEC Learning — authentication surfaces.
   Same token set as app.css (Course Studio dark theme). Square corners, flat
   fills, hairline rules. The left panel is a tiled capability readout rather
   than an illustration: every value on it is a fact about the programme. */

.login-shell {
  width: 100%; min-height: 100vh; display: grid; place-items: center;
  padding: 28px 20px; background: var(--bg);
}
.auth-card {
  width: min(980px, 100%);
  min-height: 458px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}

/* ----------------------------- visual panel ------------------------------ */
.auth-visual {
  background: var(--surface); padding: 26px;
  display: flex; flex-direction: column; gap: 20px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; min-height: 50px; }
.auth-logo-frame {
  display: grid; place-items: center; width: 29px; height: 50px; flex: none;
}
.auth-logo-frame img { width: auto; height: 46px; display: block; }
.auth-brand strong { display: block; font-size: var(--t-lg); font-weight: 700; line-height: 1.05; }
.auth-brand small { display: block; color: var(--tx-3); font-size: var(--t-xs); }

.auth-lede h2 { margin: 6px 0 0; font-size: var(--t-3xl); line-height: 1.18; letter-spacing: -.015em; }
.auth-lede p { margin-top: 9px; color: var(--tx-2); font-size: var(--t-sm); line-height: 1.6; max-width: 40ch; }

/* Tiled readout: hairline grid, square cells, flat fills. */
.auth-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: auto; }
.auth-fact { background: var(--surface-2); padding: 11px 12px; }
.auth-fact strong { display: block; font-size: var(--t-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.auth-fact strong.word { font-size: var(--t-lg); }
.auth-fact span { display: block; margin-top: 5px; color: var(--tx-3); font-size: var(--t-micro); letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; }
.auth-fact.a strong { color: var(--accent-hi); }
.auth-fact.b strong { color: var(--info); }
.auth-fact.c strong { color: var(--ok); }
.auth-fact.d strong { color: var(--warn); }
.auth-privacy { color: var(--tx-3); font-size: var(--t-xs); line-height: 1.55; }

/* ------------------------------ form panel ------------------------------- */
.login-panel { background: var(--surface); padding: 30px 30px 26px; display: flex; flex-direction: column; justify-content: center; }
.login-heading .eyebrow { color: var(--tx-3); font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.login-heading h1 { margin: 5px 0 6px; font-size: var(--t-3xl); line-height: 1.1; }
.login-panel > .muted { color: var(--tx-2); font-size: var(--t-sm); line-height: 1.55; }
.login-panel .stack { margin-top: 18px; }
.login-panel label { color: var(--tx-2); }
.otp-input { font-family: var(--mono); font-size: var(--t-2xl); letter-spacing: .34em; text-align: center; min-height: 52px; }
.security-note { margin-top: 12px; color: var(--tx-3); font-size: var(--t-xs); line-height: 1.55; }
.auth-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.auth-actions form { margin: 0; }
.auth-footer { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--tx-3); font-size: var(--t-sm); }
.auth-footer a { color: var(--accent-hi); text-decoration: none; font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 820px) {
  .login-shell { padding: 0; place-items: stretch; }
  .auth-card, .auth-card-register { grid-template-columns: 1fr; border: 0; gap: 0; background: var(--bg);
    align-content: start; min-height: 0; }   /* auto rows would otherwise stretch to fill the viewport */
  .auth-visual { border-bottom: 1px solid var(--line); gap: 16px; padding: 20px; }
  .auth-lede h2 { font-size: var(--t-2xl); }
  .auth-lede p, .auth-privacy { display: none; }
  .auth-facts { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .auth-fact strong { font-size: var(--t-xl); }
  .auth-fact strong.word { font-size: var(--t-sm); }
  .login-panel { padding: 24px 20px 28px; }
  .login-heading h1 { font-size: var(--t-2xl); }
  .auth-actions { flex-direction: column; align-items: stretch; }
  .auth-actions .button { width: 100%; }
}