:root {
  --fg: #1a1a1a;
  --bg: #fdfdfd;
  --muted: #555;
  --accent: #003366;
  --available: #ffffff;
  --pending: #fff3cd;
  --booked: #f8d7da;
  --blackout: #d6d8db;
  --past: #f0f0f0;
  --border: #999;
  --focus: #ffc107;
  --error: #b00020;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  line-height: 1.5;
}

a:focus, button:focus, [tabindex]:focus, input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

header, main, footer { max-width: 1100px; margin: 0 auto; padding: 1rem; }

header { border-bottom: 4px solid var(--accent); }
header h1 { color: var(--accent); margin: 0 0 0.25rem; font-size: 1.6rem; }
header .subtitle { color: var(--muted); margin: 0 0 0.75rem; font-size: 1.1rem; }
header nav a {
  display: inline-block;
  padding: 0.6rem 1rem;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  min-height: 44px;
  line-height: 1.6;
}

footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- Announcements ---- */
.announcements {
  margin: 1rem 0 1.5rem;
}
.announcement {
  border-left: 4px solid var(--accent);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.announcement p { margin: 0; }

/* Expiring (time-sensitive) — warm amber background */
.announcement.expiring {
  background: #fff8d0;
  border-left-color: #b08a00;
}

/* Persistent (evergreen info) — muted blue background */
.announcement.persistent {
  background: #e8eff7;
  border-left-color: var(--accent);
}

/* Pinned — emphasized left border, regardless of expiring/persistent */
.announcement.pinned {
  border-left-width: 6px;
  background: #fff3c0;
}
.announcement.pinned.persistent {
  background: #d5e3f3;
}

.pin-icon {
  color: #b08a00;
  font-weight: 700;
  margin-right: 0.25rem;
}

/* ---- Calendar ---- */
.legend {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0 1.5rem;
  overflow-x: auto;        /* narrow screens scroll horizontally rather than wrap */
}
.legend li {
  display: flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;     /* keep each entry intact */
}
.legend .swatch {
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--border);
  display: inline-block;
}
.legend .swatch.available { background: var(--available); }
.legend .swatch.pending   { background: var(--pending); }
.legend .swatch.booked    { background: var(--booked); }
.legend .swatch.blackout  { background: var(--blackout); }

.month { margin-bottom: 2rem; }
.month h2 { margin-bottom: 0.5rem; color: var(--accent); }

table.calendar { width: 100%; border-collapse: collapse; }
table.calendar th {
  padding: 0.5rem;
  background: #eee;
  border: 1px solid var(--border);
  text-align: center;
  font-weight: 600;
}
table.calendar td {
  border: 1px solid var(--border);
  padding: 0.5rem;
  vertical-align: top;
  height: 3.5rem;
  width: 14.28%;
  text-align: right;
}

.cell.available { background: var(--available); }
.cell.available .cell-request { display: block; text-decoration: none; color: inherit; }
.cell .day-num-link { text-decoration: none; color: inherit; }
.cell-line { cursor: pointer; }
.cell-line:hover { text-decoration: underline; }
.cell.pending   { background: var(--pending); }
.cell.booked    { background: var(--booked); }
.cell.blackout  { background: var(--blackout); }
.cell.past      { background: var(--past); color: var(--muted); }
/* Empty cells must use `border: none` (not transparent) so the neighbor's
   border wins the shared-edge tiebreak with `border-collapse: collapse`. */
.cell.empty     { background: transparent; border: none; }

.day-num { font-weight: 600; }

/* Unavailable days get a strikethrough on the day number. */
.cell.past .day-num,
.cell.pending .day-num,
.cell.booked .day-num,
.cell.blackout .day-num {
  text-decoration: line-through;
}

/* Booked cells missing required staff: red day number, red strikethrough,
   AND red dashes on either side ( -6- ) so the admin spots incomplete
   bookings even when the strikethrough alone is hard to see against the
   number's color. */
.cell.booked.understaffed .day-num {
  color: var(--error);
  text-decoration: line-through;
  text-decoration-color: var(--error);
}
.cell.booked.understaffed .day-num::before {
  content: "-";
  color: var(--error);
  font-weight: 700;
  margin-right: 0.15em;
  text-decoration: none;
  display: inline-block;
}
.cell.booked.understaffed .day-num::after {
  content: "-";
  color: var(--error);
  font-weight: 700;
  margin-left: 0.15em;
  text-decoration: none;
  display: inline-block;
}
.cell.booked.understaffed .cell-label {
  color: var(--error);
}

/* Short public label shown in the cell beneath the day number (e.g., "VFW"). */
.cell-label {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0.1rem;
  color: var(--accent);
  /* Don't inherit the strikethrough that's on .day-num */
  text-decoration: none;
}
.cell.blackout .cell-label { color: #555; }

/* Multi-event cell lines: up to 3 short lines below the day number, plus
   an optional "+N more" link to the day-view page. */
.cell-lines {
  display: block;
  text-align: left;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  line-height: 1.15;
  text-decoration: none;
}
.cell-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  text-decoration: none;
}
.cell-line.offsite { color: #1e6091; font-style: italic; }
.cell-line.blackout-line { color: #6b4500; font-weight: 600; }
.cell-line.needs-vols { color: var(--error); font-weight: 600; }
.cell-line-more {
  display: block;
  font-size: 0.7rem;
  color: var(--accent);
  text-decoration: underline;
  margin-top: 0.1rem;
}
.cell-line-marker { font-weight: 700; color: #1e6091; margin-right: 0.25em; }

/* Volunteer-call banner — sits above announcements, red until the slots fill. */
.volunteer-calls { margin: 0.75rem 0 1rem; }
.volunteer-call {
  background: #fde6e6;
  border-left: 4px solid var(--error);
  padding: 0.6rem 0.9rem;
  margin: 0.25rem 0;
  border-radius: 3px;
}
.volunteer-call p { margin: 0; }

/* Available cells are clickable shortcuts into the request form. */
.cell.available a {
  display: block;
  padding: 0.5rem;
  min-height: 3rem;
  text-align: right;
  text-decoration: none;
  color: var(--accent);
}
.cell.available a:hover {
  background: #e8f0ff;
}
.cell.available a:focus {
  outline-offset: -3px;
}

.legend-hint {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- Forms ---- */
form { max-width: 720px; margin: 1rem 0; }

fieldset {
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  border-radius: 4px;
}
legend {
  font-weight: 600;
  color: var(--accent);
  padding: 0 0.5rem;
}

.field { margin-bottom: 1rem; }
.field > label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="time"],
.field textarea {
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  min-height: 44px;
  font-family: inherit;
}
.field textarea { resize: vertical; min-height: 88px; }

.checkbox-field, .radio-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.checkbox-field input, .radio-field input {
  margin-top: 0.3rem;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}
.checkbox-field label, .radio-field label {
  display: inline;
  font-weight: 400;
  margin: 0;
}

.error {
  color: var(--error);
  font-size: 0.95rem;
  margin: 0.25rem 0;
}

.alert, .warning {
  padding: 1rem 1.25rem;
  border-radius: 4px;
  margin: 1rem 0;
}
.alert-error, .warning {
  background: #fff3cd;
  border-left: 4px solid #b08a00;
}

.actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.actions .primary,
button.primary,
input[type="submit"].primary {
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
}
.actions .primary:hover { background: #002244; }

.actions .secondary,
a.secondary {
  color: var(--accent);
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Honeypot field — out of normal flow, invisible to humans + screen readers, but bots still see it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.policies-link { display: inline-block; margin: 0.5rem 0; }

/* ---- Staff portal ---- */
.staff-roles { color: var(--muted); font-style: italic; margin-bottom: 1rem; }
.staff-note { color: var(--muted); font-style: italic; font-size: 0.9rem; }
.event-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0;
  margin: 1rem 0;
  background: #fafafa;
}
.event-summary {
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
}
.event-summary::-webkit-details-marker { display: none; }
.event-summary::before {
  content: "▸";
  color: var(--accent);
  font-size: 0.9rem;
  display: inline-block;
  width: 1ch;
}
.event-card[open] > .event-summary::before { content: "▾"; }
.event-summary-date { font-weight: 600; color: var(--accent); }
.event-summary-meta { color: var(--fg); }
.event-summary-mine {
  background: #1f7a3a;
  color: white;
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.event-summary-claimable {
  background: var(--error);
  color: white;
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.event-summary-bid {
  color: var(--muted);
  font-family: monospace;
  font-size: 0.85rem;
}
.event-card[open] > .event-summary { border-bottom: 1px solid var(--border); }
.event-card > *:not(.event-summary) {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.event-card > ul.slot-list { padding-bottom: 0.5rem; }
.event-meta { color: var(--muted); margin: 0.75rem 0; }
.slot-list { list-style: none; padding: 0; margin: 0; }
.slot {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid #e5e5e5;
}
.slot:last-child { border-bottom: 0; }
.slot.open { background: #fff8e0; }
.slot.filled { color: var(--fg); }
.slot-note { color: var(--muted); font-style: italic; }
.filled-by-list { list-style: none; padding-left: 1rem; margin: 0.25rem 0; }
.filled-by-list li { margin: 0.25rem 0; }
.btn-claim, .btn-unclaim {
  padding: 0.3rem 0.8rem;
  margin-left: 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-claim { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-unclaim { background: #fff; color: var(--error); border-color: var(--error); }
.alert-success { background: #dff0d8; border-left: 4px solid #28a745; padding: 0.75rem 1rem; margin: 1rem 0; }
.alert-warning { background: #fff3cd; border-left: 4px solid #b08a00; padding: 0.75rem 1rem; margin: 1rem 0; }

/* ---- Cost projection on the thanks page ---- */
.cost-projection {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #fff8d0;
  border-left: 4px solid #b08a00;
  border-radius: 4px;
}
.cost-projection h3 {
  margin-top: 0;
  color: var(--accent);
}
.cost-projection h3 em {
  color: var(--error);
  font-style: normal;
  font-weight: 700;
}
.cost-disclaimer {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0.5rem 0;
}
.cost-table {
  width: 100%;
  margin-top: 0.75rem;
  border-collapse: collapse;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.cost-table th,
.cost-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.cost-table th {
  background: #f0f0f0;
  font-weight: 600;
}
.cost-table .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cost-table tr.waived td {
  text-decoration: line-through;
  color: var(--muted);
}
.cost-table tr.total td {
  border-top: 2px solid var(--accent);
  border-bottom: 0;
  background: #fafafa;
}

/* ---- Utility ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  html { font-size: 16px; }
  table.calendar td { padding: 0.25rem; height: 2.75rem; font-size: 0.9rem; }
  header h1 { font-size: 1.3rem; }
  fieldset { padding: 0.75rem; }
}

/* ---- High-contrast preference ---- */
@media (prefers-contrast: more) {
  :root {
    --pending: #ffe066;
    --booked: #ff8a8a;
    --blackout: #b0b0b0;
    --border: #000;
  }
}

/* ---- Print ---- */
@media print {
  header nav, footer, .skip-link, form { display: none; }
  .month { break-inside: avoid; }
}