*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-page:   #0a0a0a;
  --bg-card:   #111111;
  --bg-shift:  #1a1a1a;
  --border:    #272727;
  --text:      #ffffff;
  --text-muted:#999999;
  --available: #3dd68c;
}

body { background: var(--bg-page); color: var(--text); font-family: 'Inter', sans-serif; min-height: 100vh; }

/* Banner */
.banner-wrap { width: 100%; line-height: 0; }
.banner-wrap img { width: 100%; display: block; }

/* Title bar */
.title-bar {
  background: #7B2FBE;
  text-align: center;
  padding: 0.8rem 2rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

/* Status bar */
.status-bar {
  background: #0f0f0f;
  text-align: center;
  padding: 0.45rem 1rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  min-height: 1.8rem;
}
.status-bar.live::before   { content: "⦿ "; color: var(--available); }
.status-bar.fallback::before { content: "◌ "; color: #666; }

.recruitment-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: #d3d3d3;
}

.recruitment-bar a {
  color: #ffc840;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.recruitment-bar a:hover,
.recruitment-bar a:focus-visible {
  color: #ffd977;
}

/* Grid */
.schedule-wrap { max-width: 1200px; margin: 0 auto; padding: 1rem 1.25rem 2rem; }

/* Two flex columns so the right col can stretch to fill Saturday's height */
.days-grid { display: flex; align-items: stretch; gap: 1.5rem; }
.day-col   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.day-col[hidden] { display: none !important; }
.days-grid.is-loading { display: block; }
.days-grid.is-loading .loading-wrap { padding: 5rem 2rem; }

/* Wraps the last right-column day card + Thank You as one flex item,
   eliminating the extra gap that would otherwise make the right column taller */
.last-day-ty-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.5rem; }

/* Thank You fills whatever vertical space remains after the last day card */
.thankyou-fill { flex: 1; min-height: 0; border-radius: 6px; overflow: hidden; margin: 0 0.8rem; }
.thankyou-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 680px) {
  .days-grid { flex-direction: column; }
  .last-day-ty-wrap { flex: none; }
  .thankyou-fill { flex: none; height: 180px; margin: 0; }
}

/* Day card */
.day-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }

.day-header {
  padding: 0.8rem 1.25rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Shifts */
.shifts-list { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }

.shift {
  background: var(--bg-shift);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.shift-name  { font-weight: 700; font-size: 0.93rem; line-height: 1.3; margin-bottom: 0.18rem; }
.shift-time  { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; }

.shift-notes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.55rem; }
.note-tag {
  font-size: 0.65rem; font-weight: 700; padding: 0.18rem 0.5rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em;
  background: #1e1040; color: #c4a8ff;
}
.note-tag.heavy { background: #3a1010; color: #ff9898; }
.note-tag.full { background: #3a2600; color: #ffbf47; }

.volunteers-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-block; font-size: 0.8rem; font-weight: 600;
  padding: 0.25rem 0.7rem; border-radius: 20px; line-height: 1.4;
}
.chip-available {
  background: transparent; color: var(--available);
  border: 1.5px dashed var(--available);
}

/* Day-specific colours
   Each day gets: header bg/text, shift left-border, volunteer chip bg/text
   Colors are sampled from the Spring Blooms event palette and rendered
   as opacity-simulated solids over black.
*/

/* Wednesday - warm gold */
.day-wed .day-header  { background: #2e2200; color: #ffc840; }
.day-wed .shift       { border-left-color: #b88a10; }
.day-wed .chip-vol    { background: #3d2e00; color: #ffc840; }

/* Friday - burnt orange */
.day-fri .day-header  { background: #2e1400; color: #ff8040; }
.day-fri .shift       { border-left-color: #c05010; }
.day-fri .chip-vol    { background: #3d1c00; color: #ff8040; }

/* Saturday - hot pink / magenta */
.day-sat .day-header  { background: #300018; color: #ff5090; }
.day-sat .shift       { border-left-color: #b02860; }
.day-sat .chip-vol    { background: #400820; color: #ff5090; }

/* Sunday - purple */
.day-sun .day-header  { background: #1a0032; color: #b06cf0; }
.day-sun .shift       { border-left-color: #7030b8; }
.day-sun .chip-vol    { background: #240848; color: #b06cf0; }

/* Loading */
.loading-wrap { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.spinner {
  display: inline-block; width: 30px; height: 30px; margin-bottom: 1rem;
  border: 3px solid var(--border); border-top-color: #7B2FBE;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }