/* login kit pages: mock-ups A (first visit), B (signed out), M (no access), O (sign-in door stuck), approved by
   Andrew 10/11/2026 (design/mockups/, the .app-card styles). A centered Flight Path card with the Sathers logo, the
   app name, a message and one button, light or dark from the device setting.
   The colors are login.sathers.org's own tokens (branding/login.css), copied by kit/sync-tokens.mjs so they can't
   drift; the fonts and logo are served by the kit from the app's own origin (assets/ next to this file). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

/* tokens:begin. Generated from branding/login.css by kit/sync-tokens.mjs; do not edit by hand. */
:root {
  --background: #F6F8FA;
  --foreground: #16202E;
  --card: #FFFFFF;
  --card-foreground: #16202E;
  --popover: #FFFFFF;
  --popover-foreground: #16202E;
  --primary: #1D3557;
  --primary-foreground: #FFFFFF;
  --secondary: #E9EEF4;
  --secondary-foreground: #16202E;
  --muted: #E9EEF4;
  --muted-foreground: #56647A;
  --accent: #E9EEF4;
  --accent-foreground: #16202E;
  --border: #DDE3EA;
  --input: #DDE3EA;
  --ring: #1D3557;
  --warning: #FEF9C3;
  --warning-foreground: #713F12;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #16202E;
  --sidebar-primary: #1D3557;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E9EEF4;
  --sidebar-accent-foreground: #16202E;
  --sidebar-border: #DDE3EA;
  --sidebar-ring: #1D3557;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0D141E;
    --foreground: #EEF2F6;
    --card: #141D2A;
    --card-foreground: #EEF2F6;
    --popover: #141D2A;
    --popover-foreground: #EEF2F6;
    --primary: #8FB0DA;
    --primary-foreground: #0D141E;
    --secondary: #1B2A3F;
    --secondary-foreground: #EEF2F6;
    --muted: #1B2A3F;
    --muted-foreground: #9AA8BA;
    --accent: #1B2A3F;
    --accent-foreground: #EEF2F6;
    --border: #2C3A4E;
    --input: #2C3A4E;
    --ring: #8FB0DA;
    --warning: #2B230B;
    --warning-foreground: #FDE68A;
    --sidebar: #141D2A;
    --sidebar-foreground: #EEF2F6;
    --sidebar-primary: #8FB0DA;
    --sidebar-primary-foreground: #0D141E;
    --sidebar-accent: #1B2A3F;
    --sidebar-accent-foreground: #EEF2F6;
    --sidebar-border: #2C3A4E;
    --sidebar-ring: #8FB0DA;
  }
}
/* tokens:end */

:root {
  color-scheme: light dark;
  --kit-body-font: "IBM Plex Sans", system-ui, sans-serif;
  --kit-heading-font: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--kit-body-font);
}

.kit-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.kit-card {
  width: 100%;
  max-width: 400px;
  padding: 40px 32px 34px;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
  overflow-wrap: anywhere;
}

.kit-logo { display: block; width: 88px; height: auto; margin: 0 auto; }

/* The app-name slot (the page's heading). */
.kit-app, .kit-title {
  margin: 22px 0 0;
  font-family: var(--kit-heading-font);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* The mock-ups' app name sits on a 1.55 line (order 0355, fidelity on screen A). */
.kit-app { line-height: 1.55; }

.kit-text { margin: 10px 0 0; color: var(--muted-foreground); font-size: 17px; line-height: 1.5; }
.kit-notice {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--warning);
  color: var(--warning-foreground);
  font-size: 15px;
  line-height: 1.4;
}

.kit-actions { margin: 28px 0 0; }
.kit-actions + .kit-actions { margin: 12px 0 0; }
.kit-more { margin: 16px 0 0; }

.kit-button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-foreground);
  font: 600 17px/48px var(--kit-body-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.kit-button--secondary {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
  line-height: 46px;
}

/* The quieter choice under the button ("Sign in as someone else"): a link-looking button, still a 44px target. */
.kit-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font: 400 15px/1.3 var(--kit-body-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Under a page's button (M's "Sign in as someone else"): a full-width text line, as the mock-up, with the 44px tap
   area kept by an overlay centered on it. */
.kit-more .kit-link { position: relative; display: block; width: 100%; min-height: 0; padding: 0; line-height: 1.55; }
.kit-more .kit-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

.kit-button:focus-visible, .kit-link:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Desktop: the card stays the same; the button is a fixed 240px rather than the card's width. */
@media (min-width: 1100px) {
  .kit-button { width: 240px; margin-left: auto; margin-right: auto; }
}