/* MoneyStream local-auth pages.
 *
 * Hand-written rather than Tailwind-from-a-CDN (which is what the marketing site and the extract
 * customer portal use): every local_auth page is served with
 *   Content-Security-Policy: default-src 'self'; img-src 'self' data:
 * (app/local_auth/router.py :: render). With no script-src and no style-src, a CDN <script>, a
 * CDN stylesheet, an inline <style> block and even a style="" attribute are all blocked. A
 * same-origin stylesheet served off /svc/auth/static is the one styling channel 'self' allows,
 * so the portal's look (blue-600 primary, gray-50 ground, white rounded cards) is reproduced
 * here as plain CSS. Palette values are lifted from the marketing site's tailwind.config
 * (ms.blue #2563eb, ms.accent #3b82f6, ms.cyan #06b6d4) and Tailwind's default gray ramp so the
 * three surfaces stay visually identical.
 */

:root {
  --ms-blue: #2563eb;
  --ms-blue-dark: #1d4ed8;
  --ms-blue-darker: #1e40af;
  --ms-blue-50: #eff6ff;
  --ms-blue-100: #dbeafe;
  --ms-cyan: #06b6d4;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-900: #0f172a;
  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-700: #b91c1c;
  --green-50: #f0fdf4;
  --green-200: #bbf7d0;
  --green-700: #15803d;
  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-800: #92400e;
  --radius: 0.5rem;      /* rounded-lg */
  --radius-sm: 0.375rem;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.la-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
  color: var(--gray-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- shell ------------------------------------------------------------------------------- */

.la-shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: 28rem;            /* max-w-md */
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
}

.la-shell.la-shell-wide { max-width: 44rem; }

.la-brand {
  display: block;
  text-align: center;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.la-wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ms-blue-darker);
}

.la-brand:hover .la-wordmark { color: var(--ms-blue); }

.la-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.la-shell > main > h1 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

.la-card h1 {
  margin: 0 0 .375rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

.la-lede {
  margin: 0 0 1.5rem;
  color: var(--gray-600);
  font-size: .9375rem;
}

.la-card h1 + form,
.la-card h1 + .la-alert,
.la-lede + form { margin-top: 1.25rem; }

/* ---- alerts ------------------------------------------------------------------------------ */

.la-alert {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
}

.la-alert-error   { background: var(--red-50);   border-color: var(--red-200);   color: var(--red-700); }
.la-alert-success { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); }
.la-alert-info    { background: var(--ms-blue-50); border-color: var(--ms-blue-100); color: var(--ms-blue-darker); }
.la-alert-warn    { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-800); }

/* Legacy hook: .la-error was the pre-restyle error paragraph class. */
.la-error { color: var(--red-700); }

/* ---- fields ------------------------------------------------------------------------------ */

.la-field { display: block; margin: 0 0 1rem; }

.la-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-700);
}

.la-input {
  display: block;
  width: 100%;
  padding: .625rem .75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--gray-900);
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.la-input::placeholder { color: var(--gray-400); }

.la-input:focus,
.la-input:focus-visible {
  outline: none;
  border-color: var(--ms-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

/* One-time codes: wide tracking, centred, comfortable tap target on mobile. */
.la-input-code {
  letter-spacing: .35em;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  padding: .75rem;
}

.la-choice {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 0 0 .75rem;
  padding: .75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.la-choice:hover { border-color: var(--gray-300); background: var(--gray-50); }
.la-choice input[type="radio"] { margin-top: .3rem; accent-color: var(--ms-blue); }
.la-choice-body { flex: 1; min-width: 0; }
.la-choice-title { font-weight: 600; font-size: .9375rem; color: var(--gray-900); }
.la-choice .la-input { margin-top: .5rem; }

.la-select {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  color: var(--gray-900);
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
}

/* ---- buttons ----------------------------------------------------------------------------- */

.la-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .625rem 1.25rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.la-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); }

.la-btn-primary { background: var(--ms-blue); color: #fff; }
.la-btn-primary:hover { background: var(--ms-blue-dark); }
.la-btn-primary:active { background: var(--ms-blue-darker); }

.la-btn-secondary {
  background: #fff;
  color: var(--gray-700);
  border-color: var(--gray-300);
}
.la-btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-400); }

.la-btn-danger { background: #fff; color: var(--red-700); border-color: var(--red-200); }
.la-btn-danger:hover { background: var(--red-50); }

.la-btn-auto { width: auto; }
.la-btn-sm { padding: .375rem .75rem; font-size: .875rem; }

/* A submit control that should read as a link (account page row actions). */
.la-link,
button.la-link {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .875rem;
  color: var(--ms-blue);
  text-decoration: none;
  cursor: pointer;
}

.la-link:hover { text-decoration: underline; }
a { color: var(--ms-blue); }

/* ---- misc -------------------------------------------------------------------------------- */

.la-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--gray-400);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.la-or::before, .la-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.la-google { /* legacy hook -- see .la-btn-secondary usage on login.html */ }

.la-hint {
  margin: .375rem 0 0;
  color: var(--gray-500);
  font-size: .8125rem;
}

.la-alt {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
  text-align: center;
  font-size: .875rem;
  color: var(--gray-600);
}

.la-alt-plain { border-top: 0; padding-top: 0; }

.la-code {
  display: block;
  margin: .375rem 0 1rem;
  padding: .75rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--gray-900);
  overflow-wrap: anywhere;
  user-select: all;          /* one click/tap selects the whole secret to copy */
}

.la-badge {
  display: inline-block;
  padding: .0625rem .5rem;
  border-radius: 9999px;
  background: var(--ms-blue-50);
  color: var(--ms-blue-darker);
  font-size: .75rem;
  font-weight: 600;
  vertical-align: middle;
}

.la-badge-warn { background: var(--amber-50); color: var(--amber-800); }

.la-inline { display: inline; }

/* ---- account page ------------------------------------------------------------------------ */

.la-section {
  margin: 0 0 1.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.la-section > h2 {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gray-900);
}

.la-section > h3 {
  margin: 1.5rem 0 .75rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gray-700);
}

.la-kv { margin: 0; font-size: .9375rem; }
.la-kv > div { display: flex; gap: 1rem; padding: .375rem 0; border-bottom: 1px solid var(--gray-100); }
.la-kv > div:last-child { border-bottom: 0; }
.la-kv dt { min-width: 8rem; color: var(--gray-500); }
.la-kv dd { margin: 0; color: var(--gray-900); overflow-wrap: anywhere; }

.la-factors { list-style: none; margin: 0; padding: 0; }

.la-factors > li {
  padding: .875rem 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: .9375rem;
}

.la-factors > li:last-child { border-bottom: 0; }
.la-factor-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.la-factor-actions { margin-left: auto; display: flex; gap: .875rem; }

.la-unverified {
  margin-top: .625rem;
  padding: .75rem;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: var(--radius-sm);
}

.la-unverified .la-hint { color: var(--amber-800); margin-top: 0; }

.la-table-wrap { overflow-x: auto; }

.la-sessions {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.la-sessions th {
  text-align: left;
  padding: .5rem .625rem;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.la-sessions td {
  padding: .625rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: top;
}

.la-sessions tr:last-child td { border-bottom: 0; }
.la-sessions td:nth-child(4) { max-width: 18rem; overflow-wrap: anywhere; }

.la-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.la-row > * { flex: 1 1 12rem; }
.la-empty { margin: 0; color: var(--gray-500); font-size: .9375rem; }

/* ---- footer ------------------------------------------------------------------------------ */

.la-footer {
  flex-shrink: 0;
  padding: 2rem 1rem 2.5rem;
  text-align: center;
  color: var(--gray-500);
  font-size: .8125rem;
}

.la-footer a { color: var(--gray-500); text-decoration: none; }
.la-footer a:hover { color: var(--ms-blue); text-decoration: underline; }
.la-footer-sep { margin: 0 .5rem; color: var(--gray-300); }

@media (max-width: 480px) {
  .la-shell { padding-top: 2rem; }
  .la-card, .la-section { padding: 1.25rem; }
}