/*
 * Landing shell styles (PHISH-453) — a verbatim port of the shell `landingDocument()` builds in
 * backend/src/services/landingRender.ts, so a page looks identical whichever half rendered it
 * while links already in inboxes drain onto the old HTML route.
 *
 * `--accent` is set by landing.js from the payload (a brand theme's primary colour, PHISH-243);
 * the default is KCDS Comply-teal, matching DEFAULT_ACCENT on the backend.
 */
:root {
  /* Served landing pages emulate real (always-light) sign-in pages, so pin light: without this,
     'light dark' lets a dark-mode viewer's browser paint form controls dark on the white card
     (PHISH-259). */
  color-scheme: light;
  --accent: #0f766e;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 6%, #fff); color: #111;
}
.card {
  max-width: 34rem; margin: 1.5rem; padding: 2rem; border-radius: 14px; background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08); border-top: 5px solid var(--accent);
}
h1 { font-size: 1.35rem; margin: 0 0 .5rem; color: var(--accent); }
p { line-height: 1.5; }
label { display: block; font-size: .85rem; margin: .75rem 0 .25rem; }
/* Explicit light field background so inputs never inherit a dark UA/browser theme (PHISH-259). */
input, select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid #cbd5e1; border-radius: 8px;
  box-sizing: border-box; background: #fff; color: #0f172a;
}
button {
  margin-top: 1rem; width: 100%; padding: .7rem; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer;
}
.muted { color: #64748b; font-size: .85rem; }
.badge {
  display: inline-block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}

/*
 * Fallback-card reveal (PHISH-584). The static card in landing.html says "This page could not be
 * loaded"; it used to paint on every visit and then get replaced a beat later by the real page.
 * While data-state="loading" it is hidden; landing.js removes the attribute the moment it renders
 * the page or gives up. If the module never runs (blocked script, sandbox) this CSS-only timer
 * reveals the fallback anyway, so the benign copy is still guaranteed to show eventually.
 */
.card[data-state="loading"] {
  visibility: hidden;
  animation: landing-fallback-reveal 0s linear 5s forwards;
}
@keyframes landing-fallback-reveal { to { visibility: visible; } }