/* ---------- Base reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

/* Make room for the fixed global header injected from /_header.html */
:root { --globalbar-h: 48px; }                 /* keep this in one place */
body  { padding-top: var(--globalbar-h) !important; }

/* Ensure pages can scroll normally */
html, body { overflow-y: auto; }

/* Prevent top-margin collapse under the global bar */
body > :first-child { margin-top: 0; }

/* ---------- Typography ---------- */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg, #111);
  background: var(--bg, #fff);
  line-height: 1.5;
}

h1 {
  font-size: clamp(24px, 4vw, 40px);
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.muted { color: var(--muted, #666); font-size: 14px; }

/* fun little blink used on the homepage tagline */
.blink { animation: blink .4s linear 1; }
@keyframes blink { 0%{opacity:1} 40%{opacity:0} 60%{opacity:0} 100%{opacity:1} }

/* ---------- Layout helpers (safe, no fixed positioning) ---------- */
.wrap {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  gap: 12px;
}

.row { display: flex; gap: 8px; align-items: center; }
.panel { margin-top: 24px; width: min(600px, 100%); }
.card  { border: 1px solid #eee; border-radius: 10px; padding: 14px 16px; background: #fff; }

/* ---------- Forms / controls ---------- */
input[type=email],
input[type=text],
input[type=url],
input[type=number],
input[type=date],
input[type=color],
textarea,
select {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 8px;
}

textarea { width: 100%; }

button {
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fafafa;
}

button:hover { background: #f0f0f0; }

/* ---------- Links ---------- */
a { color: var(--accent, #0ea5e9); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Status text ---------- */
#status { color: var(--muted, #666); }