/* Shared design tokens + base primitives for every page (landing, create,
   templates, prep). Page-specific styling stays in that page's own <style>.
   These tokens were originally inlined in the single-screen card maker; they
   live here now so all pages share one look. */

:root {
  --bg: #0f1115; --panel: #171a21; --panel-2: #1e222b; --line: #2a2f3a;
  --text: #eef1f6; --muted: #9aa3b2; --accent: #f2c744; --accent-ink: #201a00;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; }

/* ---- Top nav (mounted by ui/nav.js) ---- */
.nav { display: flex; align-items: center; gap: 4px; max-width: 560px; margin: 0 auto;
       padding: 10px 16px; border-bottom: 1px solid var(--line); }
.nav-brand { font-weight: 700; font-size: 15px; margin-right: auto; color: var(--text); text-decoration: none; }
.nav a.nav-link { color: var(--muted); text-decoration: none; font-size: 13px;
                  padding: 6px 10px; border-radius: 8px; }
.nav a.nav-link:hover { color: var(--text); background: var(--panel-2); }
.nav a.nav-link[aria-current=page] { color: var(--accent-ink); background: var(--accent); font-weight: 600; }

/* ---- Shared primitives ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 14px; margin-bottom: 14px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
textarea, input[type=text], select {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit;
}
textarea { min-height: 84px; resize: vertical; }

/* Skip the mobile browser's 300ms double-tap-to-zoom detection on every button.
   Without this, tapping the same nudge button twice (or two adjacent buttons in
   quick succession — e.g. "+" then an arrow) triggers the page-level double-tap
   zoom instead of firing the second click. On the frame/nudge/pager grids that
   read as "the move buttons zoom instead of moving." */
button { touch-action: manipulation; }

button.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px;
                 padding: 14px; font: inherit; font-weight: 600; cursor: pointer; }
button.primary:disabled { opacity: .5; cursor: default; }
button.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
               border-radius: 10px; padding: 14px 16px; font: inherit; cursor: pointer; }

.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.hidden { display: none; }