/* Shared styling for the two pages that live outside the React app —
   the sign-in screen and the not-eligible screen.
   These are plain files served by Static Web Apps before any bundle
   loads, so they cannot use the app's stylesheet and instead restate
   the organization palette and the app's radius, shadow and type
   scales. Keep the values below in step with :root in app/globals.css. */

:root {
  /* Action. 500 is every primary button and link. */
  --blue-50: #f0f5f8;
  --blue-100: #dbe7f0;
  --blue-500: #005792;
  --blue-600: #004b7e;
  --blue-800: #003152;

  /* Attention. Reserved — it loses power if it is everywhere. */
  --amber-100: #fff4e6;
  --amber-800: #8e652a;

  --app-bg: var(--blue-50);
  --ink: #1c2730;
  --ink-soft: #5b6570;
  --ink-faint: #98a1ab;
  --border: #e4e8eb;

  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 35, 45, 0.06);
  --shadow-md: 0 6px 16px rgba(20, 35, 45, 0.1);

  --text-small: 12.5px;
  --text-body: 13.5px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16px of gutter at every width, so the card never touches a phone edge. */
  padding: 24px 16px;
  background: var(--app-bg);
  /* next/font self-hosts IBM Plex Sans for the app under a hashed URL these
     pages cannot reference, so this resolves it locally when the machine has
     it and falls back to the platform UI face otherwise. No webfont is
     fetched: the sign-in screen should not wait on a third party. */
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px 32px 34px;
  text-align: center;
}

.badge {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-action {
  background: var(--blue-500);
  color: #fff;
}

/* Attention, not action: this screen is a dead end, not a next step. */
.badge-attention {
  background: var(--amber-100);
  color: var(--amber-800);
}

h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
  line-height: 1.4;
}

p {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.sub {
  display: block;
  margin-top: 8px;
  font-size: var(--text-small);
  color: var(--ink-faint);
  line-height: 1.6;
}

a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--blue-500);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

a.btn:hover {
  background: var(--blue-600);
}

a.btn:focus-visible {
  outline: 2px solid var(--blue-800);
  outline-offset: 2px;
}

a.btn-secondary {
  background: #fff;
  color: var(--blue-500);
  border: 1px solid var(--border);
}

a.btn-secondary:hover {
  background: var(--blue-50);
}

.footnote {
  margin: 18px 0 0;
  font-size: var(--text-small);
  color: var(--ink-faint);
  line-height: 1.6;
}