/* perimeter.css - the pre-auth face (login, signup, verify, reset, cli-login).
 *
 * Voice: a bit whimsical. This is folkorama's front door, so it may have some
 * personality - warmth, larger type, a little motion - while staying lite and
 * hand-written (no utility framework). Loaded ONLY on the perimeter; it never
 * shares a page with app.css.
 */

/* Light-only by design - see the same note in app.css. Auto dark theme would
 * invert how-to.html's dark pre blocks and leave their light text unreadable. */
:root { color-scheme: light; }

:where(html) {
  --ink: #201d2b;
  --muted: #6a6577;
  --line: #e2ddef;
  --accent: #6b3fa0;
  --accent-2: #0b6b5f;
  --bg: #faf8ff;
  --panel: #ffffff;
  --danger: #b00020;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

:where(body) {
  margin: 0; color: var(--ink);
  background: radial-gradient(120% 90% at 50% -10%, #f0eaff 0%, var(--bg) 55%);
  min-height: 100vh;
}

body > h1 { text-align: center; margin: 2.5rem 0 0.25rem; font-size: 1.6rem; letter-spacing: -0.01em; }
body > h1 a { color: var(--accent); text-decoration: none; }
body > h2 { text-align: center; margin: 0 0 1.25rem; font-weight: 600; color: var(--muted); font-size: 1.05rem; }

/* the auth card - every perimeter page centers a single friendly panel */
body > div[x-data], body > form, main {
  max-width: 22rem; margin: 0 auto 3rem; padding: 1.5rem 1.5rem 1.75rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 30px -18px rgba(60, 40, 110, 0.45);
  animation: rise 0.4s ease-out both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; color: var(--muted); }
input {
  width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; margin-top: 0.1rem;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fdfcff;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  width: 100%; margin-top: 1rem; padding: 0.65rem 1rem; cursor: pointer;
  font: inherit; font-weight: 600; color: #fff; border: 0; border-radius: 9px;
  background: linear-gradient(180deg, #7d4fc0, var(--accent));
  transition: filter 0.15s ease, transform 0.05s ease;
}
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button:disabled { filter: grayscale(0.4); opacity: 0.65; cursor: not-allowed; }

a { color: var(--accent-2); }
p { font-size: 0.92rem; }
p > a { white-space: nowrap; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f1eefb; color: var(--ink); padding: 0.1rem 0.35rem; border-radius: 5px; }

.error, [style*="color:red"], [style*="color: red"] { color: var(--danger) !important; }
.ok { color: #137333; }
.err { color: var(--danger); }

/* cli-login extras: countdown + return-to-terminal cue */
.countdown { text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0 0; }
.countdown[data-low="1"] { color: var(--danger); }
.terminal-cue {
  margin-top: 1rem; padding: 0.75rem; border-radius: 9px; text-align: center;
  background: #eef7f5; color: #1c3b36; border: 1px solid #bfe3db;
  animation: pop 0.35s ease-out both;
}
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.terminal-cue .check { font-size: 1.5rem; display: block; }