:root {
  /* Sampled directly from the real district shield logo (Pictures/Shield
     logo.png) — previously eyeballed from a screenshot since jnpsd.org is
     bot-protected; these are the actual brand colors now. */
  --jnpsd-black: #000000;
  --jnpsd-red: #d53036;
  --jnpsd-gold: #ffcb38;
  --jnpsd-white: #ffffff;
  --jnpsd-text: #1a1a1a;
  --jnpsd-gray-muted: #ccc;
  --jnpsd-gray-text: #666;
  --jnpsd-gray-label: #888;
  --jnpsd-success: #2e7d32;

  /* Spacing scale — use for new rules. Existing one-off values elsewhere in
     this file that don't cleanly match a step are left as literals rather
     than nudged to fit, to avoid subtle visual shifts on a live site. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Type scale. --text-xl scales fluidly by viewport width so page titles
     don't need a separate mobile override. */
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.75rem, 4vw + 1rem, 2.5rem);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f4f4f5;
  color: var(--jnpsd-text);
}

h1 { font-size: var(--text-xl); margin: 0 0 var(--space-4); line-height: 1.15; }
h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); line-height: 1.25; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--jnpsd-black);
  color: var(--jnpsd-white);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}
.nav a { color: var(--jnpsd-white); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--jnpsd-gold); }
.nav .brand { font-weight: 700; font-size: var(--text-md); }
.nav .spacer { flex: 1; }
.nav .muted { color: var(--jnpsd-gray-muted); font-size: 0.9rem; }

.user-menu { position: relative; }
.user-menu-trigger {
  background: none;
  border: none;
  color: var(--jnpsd-white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.user-menu-trigger:hover { color: var(--jnpsd-gold); }
.user-menu-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 180px;
  background: var(--jnpsd-white);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 0.4rem 0;
  z-index: 1000;
}
.user-menu-dropdown a {
  color: var(--jnpsd-text);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
}
.user-menu-dropdown a:hover { background: #f4f4f5; color: var(--jnpsd-red); }
.user-menu-section {
  padding: 0.3rem var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--jnpsd-gray-label);
}
.user-menu-divider { border-top: 1px solid #eee; margin: 0.4rem 0; }

.container { max-width: 900px; margin: 0 auto; padding: var(--space-4); }

.card {
  background: var(--jnpsd-white);
  border-radius: 8px;
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* Narrow centered card — auth/confirmation pages (login, check-email,
   profile setup, application confirmation, error). Add "center" for pages
   that also want their text centered. */
.card-narrow { max-width: 380px; margin: 3rem auto; }
.card-narrow.center { text-align: center; }

/* Wide centered content card — public marketing page sections. */
.card-wide { max-width: 700px; margin: 0 auto var(--space-5); }

/* Image-beside-text row (headshot/mascot + copy). */
.media-row { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }

.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Full-bleed band that cancels out .container's padding — pairs with a
   mobile override below so the bleed always matches .container's current
   padding at any width. */
.hero-bleed { margin: -1rem -1rem var(--space-5); }

/* Bordered data table — admin schedule/report grids. */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-2); border-top: 1px solid #eee; text-align: left; }
/* Full cell borders instead of row-separator lines — for an actual
   room x time matrix (admin schedule grid), not a row list. */
.data-table-grid th, .data-table-grid td { border: 1px solid #eee; }

.inline-form { display: inline; }

label { display: block; margin-top: var(--space-3); font-weight: 600; font-size: 0.9rem; }
input, textarea, select {
  width: 100%;
  padding: 0.6rem;
  margin-top: var(--space-1);
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: var(--text-base);
}

button, .button {
  display: inline-block;
  margin-top: var(--space-4);
  padding: 0.7rem 1.2rem;
  background: var(--jnpsd-red);
  color: var(--jnpsd-white);
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
button:hover, .button:hover { opacity: 0.9; }
.button-google { background: var(--jnpsd-black); }

.divider { text-align: center; color: var(--jnpsd-gray-label); margin: var(--space-4) 0; }
.error { color: var(--jnpsd-red); font-weight: 600; }
.muted { color: var(--jnpsd-gray-text); }

.session-card {
  background: var(--jnpsd-white);
  border-radius: 8px;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-card);
}
.status-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.status-pending { background: var(--jnpsd-gold); color: #000; }
.status-approved { background: var(--jnpsd-success); color: #fff; }
.status-rejected { background: var(--jnpsd-gray-label); color: #fff; }

@media (max-width: 640px) {
  .nav { padding: 0.6rem var(--space-3); gap: 0.6rem; }
  .nav .muted { display: none; }
  .container { padding: var(--space-3); }
  .card { padding: var(--space-4); }
  .hero-bleed { margin: -0.75rem -0.75rem var(--space-5); }
  button, .button {
    padding: 0.85rem 1.2rem;
    font-size: 1.05rem;
    min-height: 44px;
  }
  /* Primary single-action forms (login, reserve, submit) go full-width for
     an easy thumb target; inline admin/roster action buttons keep their
     natural size so they don't blow out table cells. */
  .card > form:only-child > button[type="submit"]:only-of-type {
    display: block;
    width: 100%;
  }
  input, textarea, select { font-size: var(--text-base); padding: 0.75rem; }
  table { font-size: var(--text-sm); }
}