/* Only the gate is styled here. The planner bundle carries all of its own
   styling and replaces this document entirely, so anything added below the gate
   would be dead weight on every load. Colours are the Entirely palette the
   legacy password screen used, so the sign-in step looks continuous with what
   people were seeing before the migration. */

:root {
  --ink: #003e26;
  --panel: #0a4a30;
  --edge: #2a6b4a;
  --paper: #f2ebe3;
  --accent: #c7f100;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gate-card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 32px 36px;
  min-width: 300px;
  max-width: 420px;
  text-align: center;
}

.gate-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.gate-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; }

/* Errors land here and can be long - the API's 403 explains that group
   membership is written into the token at sign-in, and that sentence is the
   whole point of showing it. */
.gate-message { margin: 0; opacity: 0.9; }

.gate-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary,
.btn-ghost {
  padding: 10px 16px;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary { border: none; background: var(--accent); color: var(--ink); }

.btn-ghost {
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--paper);
  font-weight: 500;
}