/* Shared look for gracepulcifer.com.
   Tokens and components only. Page layout lives under body.gp so the two
   original pages (dance.html, timeleft.html) can link this file for the back
   button and favicon without any of their own styling changing. */

:root {
  --bg: #111;
  --fg: #ddd;
  --panel: #191919;
  --panel-2: #222;
  --border: #333;
  --border-2: #444;
  --muted: #888;
  --muted-2: #666;
  --faint: #555;
  --accent: #ff5ea8;
  --accent-soft: #ff8fc8;
  --accent-ink: #1a0010;
  --good: #06d6a0;
  --warn: #ffd166;
  --cool: #4cc9f0;
  --radius: 10px;
  --font: 14px/1.5 system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---- Page shell (opt in with <body class="gp">) ------------------------ */
body.gp {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: var(--font);
  -webkit-text-size-adjust: 100%;
}
body.gp .wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 16px 48px;
}
body.gp h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.gp .sub {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
}

/* ---- Back button ------------------------------------------------------- */
/* Fixed so it works on the full-bleed pages too. */
.back {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(24, 24, 24, 0.82);
  color: #eee;
  font: var(--font);
  font-size: 13px;
  text-decoration: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.back:hover { background: #2c2c2c; }
.back .gp-mark { color: var(--accent); font-weight: 600; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  font: var(--font);
  color: #eee;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: #2c2c2c; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover:not(:disabled) { background: var(--accent-soft); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.big { padding: 14px 28px; font-size: 16px; }

/* ---- Cards and panels -------------------------------------------------- */
.card {
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card h2 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}

/* ---- Bits shared across pages ------------------------------------------ */
.num { font-variant-numeric: tabular-nums; }
.accent { color: var(--accent-soft); }
.muted { color: var(--muted); }
.tiny { font-size: 12px; color: var(--muted-2); }
body.gp .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

body.gp input[type=range] { display: block; width: 100%; margin: 0; accent-color: var(--accent); }
body.gp input[type=checkbox] { accent-color: var(--accent); }

/* The bounce from the control panel, as plain CSS for pages that only need
   Grace to look alive. */
@keyframes gp-bounce {
  0%   { transform: translateY(0)     rotate(-6deg) scale(1, 1); }
  25%  { transform: translateY(-14px) rotate(0deg)  scale(0.96, 1.04); }
  50%  { transform: translateY(0)     rotate(6deg)  scale(1.04, 0.96); }
  75%  { transform: translateY(-14px) rotate(0deg)  scale(0.96, 1.04); }
  100% { transform: translateY(0)     rotate(-6deg) scale(1, 1); }
}
.bounce {
  transform-origin: 50% 100%;
  animation: gp-bounce 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bounce { animation: none; }
}