/* Palette pulled from the real club marks: the shield crest (forest green +
   mustard gold) and the street-sign poster (navy + cream + clay orange). */
:root {
  --bg: #f8f3e6;
  --bg-alt: #efe6cd;
  --ink: #1b2a20;
  --muted: #6c6650;
  --green: #244a30;
  --green-dark: #142d1c;
  --green-tint: #e8efe4;
  --brass: #cf9f3c;
  --brass-tint: #f6ecd2;
  --clay: #c97c33;
  --clay-tint: #f8e6d3;
  --duty: #3d5a80;
  --duty-tint: #e4eaf3;
  --highlight-tint: #dedad0;
  --highlight-ink: #2a2721;
  --border: #e2d7b4;
  --shadow: 0 12px 32px rgba(27, 42, 32, 0.1);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16140e;
    --bg-alt: #1e1b12;
    --ink: #f2ecd9;
    --muted: #b9ad8c;
    --green: #6fa17d;
    --green-dark: #4a7857;
    --green-tint: #1e2a20;
    --brass: #e0b653;
    --brass-tint: #2c2415;
    --clay: #d99257;
    --clay-tint: #2e1f14;
    --duty: #8fb4dd;
    --duty-tint: #1c2733;
    --highlight-tint: #45423a;
    --highlight-ink: #f2ecd9;
    --border: #362f1e;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

/* The browser's own [hidden] default (display: none) is only a UA-stylesheet
   rule — any author rule that sets `display` on the same element (e.g.
   .btn's `display: inline-block`) silently wins over it regardless of
   specificity, since author CSS always beats UA CSS. Pin it here so
   `el.hidden = true` always works site-wide, no matter what other classes
   an element carries. (Found via a real bug: a hidden .btn stayed visible.) */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Only rendered on the 5 custom admin pages (adminHub: true in front
   matter) — part of the same sticky .site-header box, not a second
   independently-sticky element, so it always stays visible together
   with the header with no separate stacking/offset math needed. Fixes
   a real complaint: deep in a long admin page (e.g. Duty Calendar with
   many officers/seasons), there was no way back to /admin/hub/ without
   scrolling up and re-navigating through browser history. */
.admin-toolbar {
  background: var(--green);
  border-top: 1px solid var(--green-dark);
}
.admin-toolbar a {
  display: block;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.45rem 1.5rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
}
.admin-toolbar a:hover { text-decoration: underline; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }

.brand-logo { width: 42px; height: auto; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-family: "Fraunces", serif; font-size: 1.15rem; font-weight: 600; }
.brand-text small { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.01em; }

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.social-links {
  display: flex;
  gap: 0.6rem;
}
.social-links a {
  color: var(--muted);
  display: flex;
}
.social-links a:hover { color: var(--green); }

.social-links-footer { margin-top: 0.3rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}

.site-nav > ul > li { position: relative; }

.site-nav > ul > li > a {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  display: inline-block;
}
.site-nav > ul > li > a:hover { color: var(--green); text-decoration: none; }

.has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.4rem;
  min-width: 220px;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow);
  z-index: 10;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: flex;
}

.dropdown li a {
  display: block;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.87rem;
  color: var(--ink);
}
.dropdown li a:hover { background: var(--green-tint); text-decoration: none; }

/* ---------- Layout ---------- */

main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.page-header {
  padding: 2.75rem 0 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.25rem;
}
.page-header h1 { font-size: 2rem; }
.page-header p { color: var(--muted); margin: 0; max-width: 60ch; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2rem; font-size: 1.3rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.05rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.35rem; }

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  padding: 4rem 1rem 3.5rem;
  margin: 0 -1.5rem 3rem;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--brass) 8%, transparent), transparent 45%),
    var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.hero h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
}
.hero-tagline { color: var(--muted); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.3rem; }
.hero-hours { color: var(--muted); font-size: 0.9rem; font-weight: 600; margin: 0 0 2rem; }

.hero-actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }

/* Split hero: photo carousel alongside the headline/CTA copy. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  align-items: center;
  gap: 2.5rem;
  text-align: left;
  padding: 3rem 1.5rem;
  /* The decorative .hero-mark is anchored off the tagline text's own
     width (see below), which shrinks at narrower viewports as the right
     column narrows — without a hard clip here it can spill past this
     box onto the page background at those widths (real bug, caught by
     the user). Safety net, not the primary sizing/position tuning. */
  overflow: hidden;
}

.hero-copy { position: relative; }
.hero-copy .hero-actions { justify-content: flex-start; }

/* Recurring brand mark — no wording, since the header logo and the H1
   already say the club name; this is decoration, not a 3rd repeat of
   "Falmouth Skeet Club". A large, low-opacity watermark centered behind
   the H1/tagline/hours block (.hero-text — deliberately excludes the
   button row below it, so it never dims a clickable button) — TRYING
   THIS as of 2026-09-27, replacing an earlier version that instead
   floated a small mark in the empty space beside just the tagline
   line. If this doesn't work out, the small version's exact CSS is
   preserved in git history at commit 2f2f0a9 (a tagline-row-anchored
   .hero-mark rule, plus a mobile-only override in the max-width:720px
   block) — trivial to restore from there rather than reconstructed
   from memory. */
.hero-text { position: relative; }
.hero-mark {
  position: absolute;
  top: 40%;
  left: 42%;
  transform: translate(-50%, -50%);
  width: 1150px;
  height: 1150px;
  object-fit: contain;
  object-position: center;
  opacity: 0.18;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) { .hero-mark { opacity: 0.24; } }

/* ---------- Homepage carousel ---------- */

.carousel {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-alt);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  cursor: zoom-in;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.carousel-slide.is-active { opacity: 1; pointer-events: auto; }

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 16, 10, 0.45);
  color: #fff;
  border: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
}
.carousel-nav:hover { background: rgba(20, 16, 10, 0.65); }
.carousel-prev { left: 0.6rem; }
.carousel-next { right: 0.6rem; }

.carousel-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  z-index: 2;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
}
.carousel-dot.is-active { background: #fff; }

@media (max-width: 720px) {
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2.5rem 1rem;
  }
  .hero-media { width: 100%; max-width: 360px; margin: 0 auto; }
  .hero-copy .hero-actions { justify-content: center; }
  .hero-mark { width: 260px; height: 260px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-1px); }

/* Primary buttons use the same brass/gold accent as the Payments page
   buttons, site-wide — one consistent accent color instead of mixing
   green + brass. (This becomes a real admin-selectable option later —
   see src/_data/theme.json.) */
.btn-primary {
  background: var(--brass);
  border-color: var(--brass);
  color: #211c12;
}
.btn-primary:hover { background: color-mix(in srgb, var(--brass) 80%, black); border-color: color-mix(in srgb, var(--brass) 80%, black); }

.btn-brass {
  background: var(--brass);
  border-color: var(--brass);
  color: #211c12;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn[disabled]:hover { transform: none; box-shadow: none; }

button.btn { font-family: inherit; }

/* ---------- Content blocks ---------- */

.content-block { margin-bottom: 3rem; }
.content-block h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.content-block > p { color: var(--muted); max-width: 65ch; }

.callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}

.callout {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--bg-alt);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.callout:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.callout h3 { margin-top: 0; font-size: 1.05rem; }
.callout p { color: var(--muted); font-size: 0.92rem; margin-bottom: 0.9rem; }
.callout a { font-weight: 600; font-size: 0.88rem; }

.hub-status {
  font-size: 0.88rem;
  font-weight: 700;
  margin: -0.3rem 0 0.9rem;
}
.hub-status-inactive { color: var(--muted); font-weight: 600; }
.hub-status-live { color: var(--green); }
.hub-status-expired { color: var(--clay); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
  background: var(--bg);
}
.card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.card p { color: var(--muted); font-size: 0.9rem; margin: 0; }

.listing-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.listing-photos[data-count="1"] { grid-template-columns: 1fr; }
.listing-photos:not([data-count="1"]) { grid-template-columns: 1fr 1fr; }
.listing-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: pointer;
}
.listing-photos[data-count="1"] img { aspect-ratio: 4 / 3; }

.manage-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.manage-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.manage-photo img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
}

.notice {
  border: 1px solid var(--brass);
  background: var(--brass-tint);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: 0.92rem;
  margin: 1.5rem 0;
}
.notice strong { color: var(--ink); }
.notice-error { border-color: var(--clay); background: var(--clay-tint); }

.map-embed {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.map-embed iframe { display: block; }

.file-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 0.75rem;
  background: var(--bg-alt);
  color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.file-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.file-card .file-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.file-card .file-meta { flex: 1; }
.file-card .file-meta strong { display: block; font-size: 0.92rem; }
.file-card .file-meta span { color: var(--muted); font-size: 0.8rem; }

.contact-line { color: var(--muted); font-size: 0.9rem; }

/* ---------- Forms ---------- */

form.simple-form {
  max-width: 42rem;
  display: grid;
  gap: 1rem;
}
.simple-form label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}
.simple-form input,
.simple-form select,
.simple-form textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
}
.simple-form textarea { min-height: 7rem; resize: vertical; }
.simple-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.simple-form fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.simple-form legend { font-weight: 600; font-size: 0.88rem; padding: 0 0.4rem; }
.simple-form .radio-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin-bottom: 0.4rem; }
.simple-form .radio-row input { width: auto; }
.simple-form button { justify-self: start; }

/* ---------- Password gate ---------- */

.gate {
  max-width: 26rem;
  margin: 3rem auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  background: var(--bg-alt);
}
.gate p { color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.87rem;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.footer-col strong { color: var(--ink); display: block; margin-bottom: 0.5rem; }
.footer-col p { margin: 0.25rem 0; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--green); }

.footer-copy {
  text-align: center;
  padding: 1rem 1.5rem 1.5rem;
  font-size: 0.8rem;
  margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0.5rem 1.5rem 1rem;
  }
  .site-nav.is-open { display: block; }

  .site-nav > ul {
    flex-direction: column;
    gap: 0;
  }
  .site-nav > ul > li { border-top: 1px solid var(--border); }
  .site-nav > ul > li:first-child { border-top: none; }
  .site-nav > ul > li > a { display: block; padding: 0.75rem 0; }

  .has-dropdown .dropdown {
    display: flex;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0.5rem 0.75rem;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { display: flex; }

  .simple-form .field-row { grid-template-columns: 1fr; }
}

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.gallery-thumb {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.gallery-thumb:hover img { transform: scale(1.05); }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
}
.lightbox:not([hidden]) { display: flex; }

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

@media (max-width: 600px) {
  .lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
  .lightbox-close { font-size: 1.8rem; top: 0.75rem; right: 1rem; }
}

/* ---------- Homepage announcement popup ---------- */

.announcement-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 3, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}
.announcement-overlay:not([hidden]) { display: flex; }

/* Deliberately a bold, fixed warm-gold treatment in both light and dark
   mode — this is meant to read as a poster/flyer that grabs attention
   regardless of theme, not a regular content card that should blend in
   (same reasoning as the calendar's "today" badge or a featured-event
   chip always using clay/brass regardless of theme). Sized with clamp()
   throughout so it scales smoothly from phone to a large desktop monitor
   instead of a single fixed width that's cramped on some devices and
   tiny/lost on others. */
.announcement-card {
  position: relative;
  background: linear-gradient(155deg, #ffe9ad 0%, var(--brass) 55%, #d99a2b 100%);
  border: 3px solid #f4c752;
  border-radius: var(--radius);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  max-width: 600px;
  width: 100%;
  padding: clamp(1.75rem, 4vw + 1rem, 3rem) clamp(1.5rem, 3vw + 0.75rem, 2.5rem) clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  text-align: center;
}

.announcement-image {
  width: 100%;
  max-height: clamp(180px, 34vw, 340px);
  object-fit: contain;
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: clamp(0.85rem, 1.5vw + 0.5rem, 1.5rem);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.announcement-text {
  white-space: pre-wrap;
  color: #3d2909;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 1.85rem);
  line-height: 1.4;
  margin: 0;
}

.announcement-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  background: rgba(0, 0, 0, 0.14);
  border: none;
  color: #3d2909;
  width: clamp(2rem, 1.2rem + 1.5vw, 2.5rem);
  height: clamp(2rem, 1.2rem + 1.5vw, 2.5rem);
  border-radius: 50%;
  font-size: clamp(1.4rem, 1vw + 1.1rem, 1.9rem);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.announcement-close:hover { background: rgba(0, 0, 0, 0.26); }

/* ---------- Admin: submissions review ---------- */

.admin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.admin-controls label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
.admin-controls select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
}
#submissions-list summary::-webkit-details-marker { display: none; }
#submissions-list .card p { margin: 0.3rem 0; word-break: break-word; }

/* ---------- Activity Calendar (public + Duty Officer embed) ---------- */

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.cal-view-toggle {
  display: inline-flex;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.cal-view-toggle button {
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.cal-view-toggle button.is-active { background: var(--green); color: #fff; }
.cal-month-nav { display: flex; align-items: center; gap: 0.9rem; }
.cal-month-nav .cal-month-label { font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; min-width: 160px; text-align: center; }
.cal-nav-btn {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cal-nav-btn:hover { background: var(--green-tint); }
.cal-legend { display: flex; gap: 1.1rem; font-size: 0.82rem; color: var(--muted); align-items: center; }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cal-dot.featured { background: var(--brass); }
.cal-dot.regular { background: var(--green); }
.cal-dot.duty { background: var(--duty); }
.cal-dot.highlighted { background: var(--highlight-ink); border: 1px solid var(--highlight-ink); }

.cal-grid {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cal-weekday-row, .cal-day-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekday-row div {
  padding: 10px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.cal-day-cell {
  min-height: 96px;
  padding: 7px 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-day-row > .cal-day-cell:last-child { border-right: none; }
.cal-day-cell.is-outside { background: var(--bg-alt); }
.cal-day-cell.is-outside .cal-day-num { color: var(--muted); opacity: 0.55; }
.cal-day-num { font-family: "Fraunces", Georgia, serif; font-size: 0.95rem; font-weight: 600; }
.cal-day-cell.is-today .cal-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--clay);
  color: #fff;
  border-radius: 50%;
  font-size: 0.82rem;
}
.cal-chip {
  font-size: 0.62rem;
  line-height: 1.2;
  padding: 2px 5px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  border: none;
  font: inherit;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A day's chip text scales to how busy that day actually is (density
   class set in calendar.js from the real event count, capped at 5 since
   that's the most ever shown directly) — a light day stays comfortably
   large instead of matching the worst-case size everywhere, and a packed
   day shrinks just enough to fit, floored well above illegible. */
.cal-day-cell--n1 .cal-chip { font-size: 0.8rem; padding: 3px 7px; }
.cal-day-cell--n2 .cal-chip { font-size: 0.72rem; padding: 3px 6px; }
.cal-day-cell--n3 .cal-chip { font-size: 0.66rem; padding: 2px 5px; }
.cal-day-cell--n4 .cal-chip { font-size: 0.6rem; padding: 2px 5px; }
.cal-day-cell--n5 .cal-chip { font-size: 0.56rem; padding: 2px 4px; }
.cal-chip.regular { background: var(--green-tint); color: var(--green-dark); }
.cal-chip.featured {
  background: var(--brass-tint);
  color: #6b4d16;
  font-weight: 700;
  border-left: 3px solid var(--brass);
  padding-left: 5px;
}
.cal-chip.duty { background: var(--duty-tint); color: var(--duty); }
.cal-chip.highlighted {
  background: var(--highlight-tint);
  color: var(--highlight-ink);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .cal-chip.regular { color: var(--green); }
  .cal-chip.featured { color: var(--brass); }
  .cal-chip.duty { color: var(--duty); }
}
.cal-chip-more { font-size: 0.6rem; color: var(--muted); padding: 2px 5px; background: none; border: none; font: inherit; cursor: pointer; text-align: left; }

@media (max-width: 620px) {
  .cal-day-cell { min-height: 72px; }
  .cal-weekday-row div { font-size: 0.62rem; padding: 8px 2px; }
  .cal-day-num { font-size: 0.82rem; }
  .cal-chip { font-size: 0.58rem; padding: 2px 4px; }
  .cal-chip-more { font-size: 0.56rem; }
  .cal-day-cell--n1 .cal-chip { font-size: 0.72rem; padding: 2px 5px; }
  .cal-day-cell--n2 .cal-chip { font-size: 0.66rem; padding: 2px 5px; }
  .cal-day-cell--n3 .cal-chip { font-size: 0.6rem; padding: 2px 4px; }
  .cal-day-cell--n4 .cal-chip { font-size: 0.56rem; padding: 2px 4px; }
  .cal-day-cell--n5 .cal-chip { font-size: 0.52rem; padding: 2px 3px; }
}

.cal-year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .cal-year-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cal-year-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .cal-year-grid { grid-template-columns: 1fr; } }
.cal-mini-month { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 12px; cursor: pointer; }
.cal-mini-month h3 { font-size: 0.92rem; margin: 0 0 8px; text-align: center; font-family: "Fraunces", Georgia, serif; }
.cal-mini-weekday-row, .cal-mini-day-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-mini-weekday-row div { font-size: 0.56rem; color: var(--muted); text-align: center; padding-bottom: 3px; }
.cal-mini-day { font-size: 0.62rem; text-align: center; padding: 3px 0; position: relative; }
.cal-mini-day.is-outside { color: transparent; }
.cal-mini-day.has-events { cursor: pointer; }
.cal-mini-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-weight: 700;
}
.cal-mini-day-num.featured { background: var(--brass); color: #6b4d16; }
.cal-mini-day-num.regular { background: var(--green); color: #fff; }
.cal-mini-day-num.duty { background: var(--duty); color: #fff; }
.cal-mini-day-num.highlighted { background: var(--highlight-ink); color: var(--bg); }
.cal-year-caption { color: var(--muted); font-size: 0.85rem; margin: 0 0 16px; }

.cal-day-tooltip {
  position: fixed;
  z-index: 90;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  max-width: 240px;
  pointer-events: none;
}
.cal-day-tooltip-date {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.cal-day-tooltip-row { display: flex; align-items: center; gap: 0.45rem; }
.cal-day-tooltip-row + .cal-day-tooltip-row { margin-top: 0.25rem; }

.cal-detail-panel {
  margin-top: 20px;
  background: var(--green-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.cal-detail-panel[hidden] { display: none; }
.cal-detail-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.cal-detail-badge.featured { background: var(--brass); color: #3a2a08; }
.cal-detail-badge.regular { background: var(--green); color: #fff; }
.cal-detail-badge.duty { background: var(--duty); color: #fff; }
.cal-detail-badge.highlighted { background: var(--highlight-ink); color: var(--bg); }
.cal-detail-panel h3 { margin: 0 0 4px; font-size: 1.2rem; }
.cal-detail-meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 8px; }
.cal-detail-close { float: right; background: none; border: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; }
.cal-day-agenda { display: grid; gap: 6px; margin-top: 10px; }
.cal-day-agenda-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 0.88rem; }
.cal-day-agenda-name { font-weight: 600; flex: 1; }
.cal-day-agenda-time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }

.cal-print-menu { position: relative; display: inline-block; }
.cal-print-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 0.4rem; min-width: 240px;
}
.cal-print-menu-list a {
  display: block; padding: 0.5rem 0.6rem; border-radius: 8px; color: var(--ink);
  text-decoration: none; font-size: 0.88rem;
}
.cal-print-menu-list a:hover { background: var(--bg-alt); }
.cal-print-menu-list a small { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 0.1rem; }

@media print {
  .cal-view-toggle { display: none !important; }
  .cal-grid { box-shadow: none; }
}

/* Duty Officer embed: quieter chrome, no manage/print affordances */
#calRoot[data-mode="embed"] .cal-print-menu { display: none; }

/* ---------- Printable calendar (/events/calendar/print/) ---------- */

.print-body { background: #e9e4d6; padding: 2rem 1rem; }
.print-controls { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; }
.print-orientation-note { max-width: 420px; margin: 0 auto 1.5rem; text-align: center; font-size: 0.85rem; }
/* text-align/inline-block, not flex — this legend is embedded in every
   printed page's own header (unlike .print-controls above, which is
   no-print), so it needs the same flex-avoidance as .pc-mini-row below. */
.pc-legend { text-align: center; margin: 0.4rem 0 0; font-size: 0.75rem; color: #666; }
.pc-legend span { display: inline-block; margin: 0 0.6rem; }
.pc-legend .cal-dot { vertical-align: middle; margin-right: 5px; }
/* Locked to light-mode-equivalent hex values, not the theme tokens —
   this page is print output, always on white paper, regardless of
   whatever color scheme the viewer's OS happens to be in when previewing
   it on screen (same reasoning as the rest of this print stylesheet
   using literal colors instead of var(--...) throughout). */
.pc-legend .cal-dot.featured { background: #cf9f3c; }
.pc-legend .cal-dot.regular { background: #244a30; }
.pc-legend .cal-dot.duty { background: #3d5a80; }
.pc-legend .cal-dot.highlighted { background: #2a2721; }

.pc-page {
  background: #fff; color: #1a1a1a; max-width: 8.5in; margin: 0 auto 2rem;
  padding: 0.5in; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border-radius: 4px;
}
.pc-page-compact { max-width: 11in; }
.pc-page-header { text-align: center; margin-bottom: 1rem; }
.pc-page-header h1 { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; margin: 0 0 0.15rem; color: #1a1a1a; }
.pc-page-header p { margin: 0; color: #555; font-size: 0.95rem; }
.pc-page-footer { text-align: center; margin-top: 1rem; font-size: 0.72rem; color: #888; }

.pc-month-title, .pc-mini-title {
  font-family: "Fraunces", Georgia, serif; text-align: center; font-weight: 600; color: #1a1a1a;
}
.pc-month-title { font-size: 1.25rem; margin-bottom: 0.6rem; }
.pc-mini-title { font-size: 1rem; margin-bottom: 0.4rem; }

.pc-grid { border: 1px solid #999; }
.pc-weekday-row, .pc-day-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.pc-weekday-row div {
  text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 5px 2px; color: #555; border-bottom: 1px solid #999;
}
.pc-day-cell { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 4px 5px; }
.pc-day-row > .pc-day-cell:last-child { border-right: none; }
.pc-day-cell.is-outside { background: #f5f3ee; }
.pc-day-num { font-weight: 700; font-size: 0.82rem; margin-bottom: 2px; color: #1a1a1a; }

.pc-grid-full .pc-day-cell { min-height: 1.0in; }
/* A 6-week month needs shorter day boxes to fit one landscape sheet (7.5in of printable height:
   5 rows at 1.0in and 6 rows at 0.85in leave about 0.3in to spare with the page's header and footer; 5 rows at 1.1in overflowed by 0.13in). */
.pc-grid-full.pc-rows-6 .pc-day-cell { min-height: 0.85in; }
.pc-grid-full .pc-event { font-size: 0.74rem; line-height: 1.3; margin-bottom: 2px; color: #1a1a1a; }
.pc-grid-full .pc-event.regular { color: #142d1c; }
.pc-grid-full .pc-event.featured { font-weight: 700; color: #6b4d16; }
.pc-grid-full .pc-event.duty { font-weight: 600; color: #3d5a80; }
.pc-grid-full .pc-event.highlighted { font-weight: 700; color: #2a2721; background: #e5e2d8; padding: 1px 3px; border-radius: 3px; }
.pc-grid-full .pc-event-time { color: #666; font-weight: 400; }

/* Print shows every event on a day (no "+N more" cutoff), so a packed
   day needs its own, smaller tier instead of the same size as a light
   day — see densityClass() in calendar-print.js. Capped at 6 ("6 or
   more") since print stays legible at smaller point sizes than the
   screen equivalent would be. */
.pc-grid-full .pc-day-cell--n1 .pc-event { font-size: 0.86rem; }
.pc-grid-full .pc-day-cell--n2 .pc-event { font-size: 0.78rem; }
.pc-grid-full .pc-day-cell--n3 .pc-event { font-size: 0.7rem; }
.pc-grid-full .pc-day-cell--n4 .pc-event { font-size: 0.64rem; }
.pc-grid-full .pc-day-cell--n5 .pc-event { font-size: 0.58rem; }
.pc-grid-full .pc-day-cell--n6 .pc-event { font-size: 0.52rem; line-height: 1.2; }

.pc-grid-compact .pc-day-cell { min-height: 0.5in; }
.pc-grid-compact .pc-day-num { font-size: 0.6rem; }
.pc-grid-compact .pc-event { font-size: 0.48rem; line-height: 1.15; margin-bottom: 1px; color: #1a1a1a; }
.pc-grid-compact .pc-event.regular { color: #142d1c; }
.pc-grid-compact .pc-event.featured { font-weight: 700; color: #6b4d16; }
.pc-grid-compact .pc-event.duty { font-weight: 600; color: #3d5a80; }
.pc-grid-compact .pc-event.highlighted { font-weight: 700; color: #2a2721; background: #e5e2d8; padding: 0 2px; border-radius: 2px; }
.pc-grid-compact .pc-day-cell--n1 .pc-event { font-size: 0.56rem; }
.pc-grid-compact .pc-day-cell--n2 .pc-event { font-size: 0.5rem; }
.pc-grid-compact .pc-day-cell--n3 .pc-event { font-size: 0.46rem; }
.pc-grid-compact .pc-day-cell--n4 .pc-event { font-size: 0.42rem; }
.pc-grid-compact .pc-day-cell--n5 .pc-event { font-size: 0.38rem; }
.pc-grid-compact .pc-day-cell--n6 .pc-event { font-size: 0.35rem; line-height: 1.1; }

/* display: grid, not flex — Safari's print engine has a known bug where
   flex children can collapse to zero size specifically when actually
   printing (renders fine on screen, comes out blank on paper). Grid is
   already used successfully elsewhere on this exact page (the day-cell
   rows below), so this stays consistent with what's proven to work in
   this print pipeline rather than introducing flexbox here too. */
.pc-mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4in; }
.pc-mini-col { min-width: 0; }

@media print {
  .print-body { background: #fff; padding: 0; }
  .no-print { display: none !important; }
  .pc-page {
    box-shadow: none; border-radius: 0; max-width: none; margin: 0; padding: 0;
    page-break-after: always;
  }
  .pc-page:last-child { page-break-after: auto; }
  /* One month = one sheet, even in landscape: tighter spacing around the grid, and never split a page. */
  .pc-page { break-inside: avoid; page-break-inside: avoid; }
  .pc-page-header { margin-bottom: 0.5rem; }
  .pc-month-title { margin-bottom: 0.3rem; }
  .pc-page-footer { margin-top: 0.4rem; }
  @page { margin: 0.5in; }
}

/* ---------- Admin date fields (see js/date-fields.js) ---------- */
.date-field { position: relative; display: flex; align-items: center; gap: 0.35rem; }
.date-field input[type="date"] { flex: 1; min-width: 0; }
/* Hide the browser's faint sample date in an empty field (unless being edited),
   and show a plain format hint instead so it never looks like a real value. */
.date-field.is-empty input[type="date"]:not(:focus),
.date-field.is-empty input[type="date"]:not(:focus)::-webkit-datetime-edit,
.date-field.is-empty input[type="date"]:not(:focus)::-webkit-datetime-edit-fields-wrapper,
.date-field.is-empty input[type="date"]:not(:focus)::-webkit-datetime-edit-text,
.date-field.is-empty input[type="date"]:not(:focus)::-webkit-datetime-edit-month-field,
.date-field.is-empty input[type="date"]:not(:focus)::-webkit-datetime-edit-day-field,
.date-field.is-empty input[type="date"]:not(:focus)::-webkit-datetime-edit-year-field { color: transparent; -webkit-text-fill-color: transparent; }
.date-field .date-hint { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); display: none; pointer-events: none; color: var(--muted); font-size: 0.9rem; }
.date-field.is-empty:not(:focus-within) .date-hint { display: block; }
.date-field .date-clear { display: none; border: none; background: none; cursor: pointer; color: var(--clay); font-size: 1.2rem; line-height: 1; padding: 0 0.25rem; }
.date-field:not(.is-empty) .date-clear { display: inline-block; }
.unavail-row .date-field { flex: 0 0 11.5rem; }

/* ---------- Calendar subscribe box (/events/calendar/, js/calendar-subscribe.js) ---------- */
.subscribe-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--bg-alt); margin: 0.8rem 0; max-width: 40rem; }
.subscribe-card label { display: block; font-size: 0.82rem; font-weight: 600; margin: 0 0 0.3rem; }
.subscribe-card select { width: 100%; font: inherit; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); margin-bottom: 0.8rem; }
.subscribe-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.subscribe-download { font-size: 0.82rem; color: var(--muted); margin-left: 0.2rem; }