/* ==========================================================================
   Roots & Wings Indy — Homeschool Co-op
   styles.css — Single stylesheet for the entire site
   ========================================================================== */

/* ---------- Custom Properties ---------- */
:root {
  /* Primary palette — main characters per 2026 brand guide. */
  --color-primary: #523A79;         /* Deep Purple */
  --color-primary-dark: #3A285C;
  --color-primary-light: #8858AD;   /* Medium Purple */
  --color-leaf: #5A6B39;            /* Olive Green */
  --color-wood: #5A2E02;            /* Dark Brown — use sparingly (depth) */

  /* Secondary palette — support & variety. */
  --color-teal: #1A7A7A;            /* Deep Teal */
  --color-accent: #E0B52C;          /* Golden Yellow */
  --color-accent-dark: #B8941C;
  --color-accent-light: #F0D66B;

  /* Accent palette — guest stars, use sparingly. */
  --color-chartreuse: #9BC431;      /* Chartreuse */
  --color-coral: #D95F3B;           /* Warm Coral */

  --color-cream: #F5F0E8;           /* Warm Cream */
  --color-cream-dark: #ECE5D7;
  --color-white: #FFFFFF;
  --color-text: #3A3F47;
  --color-text-light: #5E6572;
  --color-text-inverse: #FFFFFF;
  --color-border: #DFD9CC;
  --color-success: #5A6B39;
  --color-error: #D95F3B;

  /* RGB channels for semi-transparent usage */
  --color-primary-rgb: 82, 58, 121;
  --color-accent-light-rgb: 240, 214, 107;
  --color-primary-light-rgb: 136, 88, 173;
  --color-teal-rgb: 26, 122, 122;
  --color-chartreuse-rgb: 155, 196, 49;
  --color-coral-rgb: 217, 95, 59;

  /* 2026 brand stack. Playfair Display = display heading (elegant
     vibe per spec); Quicksand = rounded header / eyebrow labels (free
     Google match for KitRounded Light); Nunito Sans = body (warm
     humanist replacement for Avenir LT Pro Book). */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-rounded: 'Quicksand', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Nunito Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  --max-width: 1200px;
  --nav-height: 96px;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.3;
  font-weight: 700;
}

/* h1 = display moment — bump to Playfair 900 (Black) per 2026 brand
   spec. Body headings (h3+) stay at 700 to keep the page from feeling
   shouty. */
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p + p { margin-top: 1rem; }

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

/* Section eyebrow label. Olive Green + Quicksand (rounded) per 2026
   brand guide — Olive is the "Earthy" voice color that pairs with
   Deep Purple headings without competing; Quicksand fills the
   "Header Font" role (KitRounded Light on the brand spec, closest
   free Google match). */
.section-badge {
  display: inline-block;
  font-family: var(--font-rounded);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--color-leaf);
  margin-bottom: 12px;
}

.section-title {
  margin-bottom: 16px;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--color-text-light);
  max-width: 620px;
  margin: 0 auto 48px;
  font-weight: 400;
}

.text-center { text-align: center; }

/* =============================================================
   Buttons — picking the right class
   -------------------------------------------------------------
   The portal has grown several button families, each with a
   legitimate visual role. Prefer an existing class over inventing
   a new one. Rough guide:

   Hero / marketing CTAs (public site + install prompts)
     .btn .btn-primary         solid accent-filled pill, large
     .btn .btn-outline         transparent on primary-coloured bg
     .btn .btn-outline-dark    outlined primary-colour on light bg
     .btn .btn-danger          coral-filled pill — destructive CTA
                               (Confirm decline / Confirm delete inside modals)
     .btn .btn-sm              size modifier — pair with above

   Inline row buttons (admin rows in Supply Closet, Directory,
   Absences, etc. — small, outlined, space-efficient)
     .sc-btn                   neutral outlined chip (Edit)
     .sc-btn.sc-btn-del        destructive variant (Cancel / Delete)

   Coverage-board actions (tight chips on a slot row)
     .btn-cover                primary green solid — "Cover"
     .btn-assign, .btn-reassign  VP outlined variant
     .btn-link                 low-emphasis underlined text action

   "I'll be out" prompt on the responsibilities card
     .btn-absence              full-width accent-outlined prompt

   Pill-shaped affordances inside cards
     .mf-class-link            soft-tinted pill (class detail)
     .mf-elective-link         dashed-underline text-link chip
     .mf-manage-btn            rounded outlined "Manage" control
     .mf-billing-pay-btn       gradient pill — special Pay button

   Do NOT add a new button class if one of the above already
   fits. If in doubt, lean on .sc-btn / .sc-btn-del for row
   actions and .btn .btn-primary / .btn-outline-dark for CTAs.
   ============================================================= */
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1;
}

/* Primary CTA stays Golden Yellow — the 2026 brand guide formally
   classes Gold as secondary, but on this site the warm gold reads as
   the inviting, cheerful action call we want for "Schedule a Tour" /
   "Members" / "Donate". Deep Purple still leads as the page-wide
   identity color (navbar, hero gradient, headings, footer). */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-dark {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-dark:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Destructive CTA — same shape as .btn-primary but coral instead of
   gold, so a confirm-decline / confirm-delete step inside a modal
   reads as a real "this action is destructive" button instead of a
   small outlined chip. Pair with .btn .btn-sm for inside-modal use. */
.btn-danger {
  background-color: var(--color-coral);
  color: var(--color-white);
  border-color: var(--color-coral);
}
.btn-danger:hover {
  background-color: #B7472A;
  border-color: #B7472A;
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-sm {
  padding: 10px 24px;
  font-size: 0.9rem;
}

/* ---------- Navigation ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background-color: rgba(247, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  transition: box-shadow var(--transition-base);
}

.navbar.scrolled {
  box-shadow: var(--shadow-md);
}

.navbar .container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  height: 100%;
  padding-top: 4px;
  padding-bottom: 2px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-brand img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

.nav-brand {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
}
/* Redundant with the wordmark lockup in the nav image */
.navbar .nav-brand-text {
  display: none;
}
.nav-brand-text {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.nav-brand-text span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent-dark);
}

/* Quick-access icons — top right row */
.nav-quick-icons {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.nav-quick-icons-mobile {
  display: none;
}

/* ---------- Calendar Events List ---------- */
.cal-month-header {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  padding: 12px 0 8px;
  border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.15);
  margin-bottom: 4px;
}

.cal-month-header:first-child {
  padding-top: 0;
}

.cal-event {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.cal-event:last-child {
  border-bottom: none;
}

.cal-date {
  flex-shrink: 0;
  width: 48px;
  text-align: center;
}

.cal-day-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.cal-day-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-light);
}

.cal-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cal-summary {
  font-size: 0.95rem;
  color: var(--color-text);
}

.cal-time {
  font-size: 0.82rem;
  color: var(--color-text-light);
}

.cal-location {
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text-light);
  transition: all var(--transition-fast);
}

.nav-icon-btn:hover {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
}

/* Lightning bug feedback button */
.firefly-btn {
  color: var(--color-text-light);
  position: relative;
}
.firefly-btn svg circle[opacity] {
  fill: #e8d44d;
  animation: firefly-glow 3s ease-in-out infinite;
}
.firefly-btn:hover {
  color: #b8860b;
  background: rgba(232, 212, 77, 0.12);
}
@keyframes firefly-glow {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.45; }
}

.nav-links {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.nav-links a {
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: 50px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.08);
}

.nav-links .btn {
  margin-left: 8px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---------- Hero Section ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  overflow: hidden;
  padding: 120px 24px 80px;
}

/* Decorative arch shape */
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 80px;
  background-color: var(--color-cream);
  border-radius: 50% 50% 0 0;
}

.hero-bg-leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.06;
  pointer-events: none;
}

.hero-bg-leaves svg {
  position: absolute;
}

.hero-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero-watermark img {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.10;
  mix-blend-mode: overlay;
  filter: brightness(1.5);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero h1 {
  font-family: var(--font-heading);
  color: var(--color-white);
  margin-bottom: 16px;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
}

.hero-tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: var(--color-accent);
  margin-bottom: 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hero-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Floating leaf decorations */
.leaf-float {
  position: absolute;
  opacity: 0.08;
  animation: floatLeaf 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatLeaf {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-30px) rotate(10deg); }
  50% { transform: translateY(-10px) rotate(-5deg); }
  75% { transform: translateY(-25px) rotate(8deg); }
}

/* ---------- About Section ---------- */
.about {
  padding: 100px 0;
  background-color: var(--color-cream);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-image-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-image-stack .about-image {
  aspect-ratio: 16 / 9;
}

.about-image-placeholder {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 32px;
}

.about-image-placeholder svg {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.about-image-placeholder p {
  font-size: 0.9rem;
  font-style: italic;
}

.about-text h2 {
  margin-bottom: 24px;
}

.about-text p {
  color: var(--color-text-light);
  font-size: 1.05rem;
}

.inclusivity-statement {
  background: rgba(var(--color-primary-rgb), 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  margin-top: 20px;
}

.inclusivity-statement h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}

.inclusivity-statement p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.value-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(var(--color-primary-rgb), 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.value-icon svg {
  width: 20px;
  height: 20px;
}

.value-item h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.value-item p {
  font-size: 0.85rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* ---------- Programs Section ---------- */
.programs {
  padding: 100px 0;
  background-color: var(--color-white);
  position: relative;
}

/* Arch top */
.programs::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 60px;
  background-color: var(--color-cream);
  border-radius: 0 0 50% 50%;
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 20px;
}

.program-card {
  background-color: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  transition: all var(--transition-base);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.program-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
}

.program-card:hover::before {
  opacity: 1;
}

.program-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: transform var(--transition-base);
}

.program-card:hover .program-icon {
  transform: scale(1.1);
}

.program-icon svg {
  width: 32px;
  height: 32px;
}

.program-card h3 {
  margin-bottom: 8px;
  color: var(--color-primary-dark);
}

.program-card .age-range {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background-color: rgba(var(--color-accent-light-rgb), 0.15);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.program-card p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* ---------- Pricing ---------- */
.pricing {
  padding: 100px 0;
  background-color: var(--color-cream);
  position: relative;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  align-items: start;
}

.pricing-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
}

.pricing-pair .pricing-card {
  flex: 1;
}

.pricing-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin: 0 -8px;
}

.pricing-connector span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

.pricing-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
}

.pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card-featured {
  border-color: var(--color-primary);
  border-width: 2px;
  padding: 48px 28px 36px;
  box-shadow: var(--shadow-md);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 20px;
  border-radius: 50px;
  white-space: nowrap;
}

.pricing-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent-dark);
  margin-bottom: 8px;
}

.pricing-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  margin-bottom: 16px;
}

.pricing-amount {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.pricing-per {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-bottom: 20px;
}

.pricing-features li {
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--color-text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-left: 24px;
  position: relative;
}

.pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-yearly {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 2px solid var(--color-cream);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.pricing-yearly span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-top: 2px;
}

/* ---------- Programs Intro with Photo ---------- */
.programs-intro {
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.programs-intro-photo {
  float: right;
  width: 260px;
  margin: 4px 0 16px 28px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {
  .programs-intro-photo {
    float: none;
    width: 100%;
    margin: 0 0 20px;
    aspect-ratio: 1 / 1;
  }
}

/* ---------- Schedule Block ---------- */
.schedule-block {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-top: 48px;
  border: 1px solid var(--color-border);
}

.schedule-heading {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.schedule-heading svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.schedule-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.schedule-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px 20px;
  border-left: 3px solid var(--color-border);
  transition: all var(--transition-fast);
}

.schedule-item:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.schedule-item:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.schedule-item-highlight {
  background-color: rgba(var(--color-primary-rgb), 0.06);
  border-left-color: var(--color-primary);
}

.schedule-time {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
  white-space: nowrap;
  min-width: 160px;
  font-family: var(--font-body);
}

.schedule-label {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 600;
}

.schedule-note {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-style: italic;
}

.schedule-notice {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--color-text-light);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(var(--color-accent-light-rgb), 0.1);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.schedule-notice svg {
  flex-shrink: 0;
  color: var(--color-accent-dark);
  margin-top: 2px;
}

.section-note {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: 4px;
}

/* ---------- Age Group Cards ---------- */
.age-groups-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.age-group-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.age-group-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--accent, var(--color-primary));
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.age-group-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.age-group-card:hover::after {
  opacity: 1;
}

.age-group-emoji {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}

.age-group-card h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.age-group-card .age-range {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background-color: rgba(var(--color-accent-light-rgb), 0.15);
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   Age-group branding — one distinct color per age group, used app-wide.
   `.ag-<GroupName>` sets --ag (the group's brand color); components read
   var(--ag). Keep the class list in sync with MORNING_GROUP_ORDER /
   ageGroupData in script.js; the ageGroupClass() helper emits these names.
   ══════════════════════════════════════════════════════════════════ */
.ag-Greenhouse { --ag: #9CCC3C; } /* chartreuse    🌱 */
.ag-Saplings   { --ag: #3FA34D; } /* grass green   🌿 */
.ag-Sassafras  { --ag: #12A594; } /* teal-green    🍃 */
.ag-Oaks       { --ag: #8D6E63; } /* oak brown     🌳 */
.ag-Maples     { --ag: #EF6C00; } /* maple orange  🍁 */
.ag-Birch      { --ag: #3F7FBF; } /* birch blue    🌲 */
.ag-Willows    { --ag: #C9A227; } /* golden wheat  🌾 */
.ag-Cedars     { --ag: #14532D; } /* deep forest   🌲 */
.ag-Pigeons    { --ag: #7E6BA6; } /* dove purple   🕊️ */

/* Group name rendered in its brand color (schedules, cards, tiles). */
.ag-name { color: var(--ag); font-weight: 700; }
.session-group-link.ag-name { color: var(--ag); }

/* Small color dot for inline group labels (schedules, person cards). */
.ag-dot {
  display: inline-block;
  width: 0.62em; height: 0.62em;
  border-radius: 50%;
  background: var(--ag, var(--color-border));
  margin-right: 0.4em;
  vertical-align: baseline;
  flex-shrink: 0;
}

/* A group filter pill wearing its group color. */
.filter-pill.ag-grouped {
  border-color: var(--ag);
  color: var(--ag);
  border-style: solid;
  opacity: 1;
}
.filter-pill.ag-grouped:hover { border-color: var(--ag); color: var(--ag); }
.filter-pill.ag-grouped.active { background: var(--ag); border-color: var(--ag); color: #fff; }

/* Morning Class Builder group columns get a color header cap + name. */
.mcb-group .mcb-col-head { border-top: 3px solid var(--ag, var(--color-border)); border-top-left-radius: 6px; border-top-right-radius: 6px; }
.mcb-group .mcb-group-name { color: var(--ag, inherit); }

.age-group-note {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: 6px;
}

/* Age Group Modal */
.age-group-card {
  cursor: pointer;
}

.age-group-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.age-group-modal-overlay.active {
  display: flex;
}

.age-group-modal {
  background: var(--color-white);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.3s ease;
}

.age-group-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--color-text-light);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}

.age-group-modal-close:hover {
  color: var(--color-text);
}

.age-group-modal-emoji {
  font-size: 2.5rem;
  margin-bottom: 8px;
  display: block;
}

.age-group-modal-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.age-group-modal-range {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background-color: rgba(var(--color-accent-light-rgb), 0.15);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.age-group-modal-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 12px;
}

.age-group-modal-activities {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}

.age-group-modal-activities li {
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.5;
}

.age-group-modal-activities li::before {
  content: '🌿';
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 0.8rem;
}

.pricing-note {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: 8px;
  line-height: 1.4;
}

.pricing-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-fine-print {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: 24px;
}

.pricing-assistance {
  margin-top: 32px;
  font-size: 0.95rem;
  color: var(--color-text);
  background: rgba(var(--color-primary-light-rgb), 0.12);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  display: inline-block;
}

.pricing-assistance a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.pricing-assistance a:hover {
  text-decoration: underline;
}

/* ---------- Beyond Wednesdays ---------- */
.beyond-section {
  margin-top: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--color-white);
}

.beyond-section .schedule-heading {
  color: var(--color-white);
}

.beyond-section .schedule-heading svg {
  color: var(--color-accent);
}

.beyond-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.beyond-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 24px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all var(--transition-fast);
}

.beyond-item:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.beyond-item h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(var(--color-accent-light-rgb), 0.5);
  display: inline-block;
}

.beyond-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.beyond-note {
  text-align: center;
  margin-top: 32px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

/* ---------- Community / Testimonials ---------- */
.community {
  padding: 100px 0;
  background-color: var(--color-cream);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.testimonial-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px 32px 32px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border-top: 3px solid var(--color-accent);
  text-align: left;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.testimonial-quote {
  font-size: 4rem;
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 0.6;
  margin-bottom: 16px;
  opacity: 0.25;
}

.testimonial-card p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

.testimonial-author::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  margin-right: 12px;
  flex-shrink: 0;
}

.testimonial-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary-dark);
}

.testimonial-detail {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-style: normal !important;
  margin-top: 2px;
}

/* ---------- Board of Directors ---------- */
.board {
  padding: 60px 0;
  background-color: var(--color-white);
  position: relative;
}

.board .section-title {
  font-size: 1.4rem;
}

.board-grid {
  display: grid;
  /* minmax(0,1fr) lets tracks shrink below their content's intrinsic width.
     Plain 1fr won't, so long role pills ("Membership Director") pushed the
     grid wider than the viewport on mobile — clipped by overflow-x:hidden,
     cutting members off. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
/* Phones: 2 columns so the long board titles have room (7-wide is far too
   cramped, and 3 still wrapped titles awkwardly). The descendant selector
   (.board .board-grid) outranks the later breakpoint rules, so it wins
   regardless of source order. */
@media (max-width: 600px) {
  .board .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.board-member {
  padding: 12px 8px;
  text-align: center;
}

.board-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  letter-spacing: 0.5px;
}

.board-avatar-photo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
}

.board-member h4 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}

.board-role {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(45, 106, 63, 0.08);
  padding: 3px 10px;
  border-radius: 8px;
  /* inline-block (not inline-flex): a flex item won't shrink below its
     content width, so a capped pill let the text spill past the colored
     background. inline-block wraps the text *inside* the pill so the
     background grows to cover it. */
  display: inline-block;
  letter-spacing: 0.01em;
  /* Cap to the (narrow, on mobile) cell so long titles wrap inside the pill
     instead of forcing the grid track wider than the viewport. */
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
.board-member h4 {
  overflow-wrap: break-word;
}

/* ---------- FAQ Section ---------- */
.faq {
  padding: 100px 0;
  background-color: var(--color-cream);
}

.faq-list {
  max-width: 780px;
  margin: 32px auto 0;
}

.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
}

.faq-item[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.faq-item summary {
  padding: 20px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color var(--transition-fast);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.faq-item[open] summary::after {
  content: '−';
  transform: rotate(0deg);
}

.faq-item[open] summary {
  color: var(--color-primary);
}

.faq-item p {
  padding: 0 24px 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

.faq-item a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.faq-item a:hover {
  text-decoration: underline;
}

/* ---------- CTA Section ---------- */
.cta {
  padding: 100px 0;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 60px;
  background-color: var(--color-cream);
  border-radius: 0 0 50% 50%;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.cta h2 {
  color: var(--color-white);
  margin-bottom: 16px;
}

.cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  margin-bottom: 36px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Decorative circles */
.cta-decor {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.cta-decor-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -80px;
}

.cta-decor-2 {
  width: 200px;
  height: 200px;
  bottom: -60px;
  left: -40px;
}

/* ---------- Footer ---------- */
/* Deep Purple per 2026 brand guide — replaces the prior slate-grey
   (#3A3F47), which wasn't in the palette. */
.footer {
  background-color: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 32px;
}

.footer-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-accent-light);
  width: 100%;
  text-align: center;
  margin: 0 0 8px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .nav-brand-text {
  color: var(--color-white);
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.footer-brand .nav-brand-text span {
  color: var(--color-accent-light);
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 300px;
}

.footer h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-white);
  margin-bottom: 20px;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer ul a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.footer ul a:hover {
  color: var(--color-accent-light);
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.footer-social a svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a:hover {
  color: var(--color-accent-light);
}

/* ---------- Tour Modal ---------- */
.tour-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tour-modal-overlay.active {
  display: flex;
}

.tour-modal {
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px 32px 32px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.tour-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--color-text-light);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}

.tour-modal-close:hover {
  color: var(--color-text);
}

.tour-modal-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-text);
  margin-bottom: 6px;
}

.tour-modal-subtitle {
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

.tour-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tour-form-field label {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  font-size: 0.85rem;
}

.tour-form-field input,
.tour-form-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--color-cream);
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tour-form-field textarea {
  resize: vertical;
  min-height: 60px;
}

.tour-form-field input:focus,
.tour-form-field select:focus,
.tour-form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* Date + time pickers share the same chrome as text inputs so the
   form reads as one continuous shape. */
.tour-form-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--color-cream);
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tour-form-field select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tour-form-hint {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin: 4px 0 0;
}
/* Standalone hint above a row of fields (not a per-field hint).
   Slightly larger, italic, primary-tinted so it reads as guidance copy
   rather than a tooltip-style helper. */
.tour-form-hint-lead {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-primary-dark);
  margin: 0 0 6px;
}

.tour-form-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.tour-form-submit {
  align-self: center;
  padding: 11px 40px;
  font-size: 0.95rem;
  margin-top: 2px;
}

@media (max-width: 500px) {
  .tour-modal {
    padding: 28px 24px;
  }
  .tour-form-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Members Portal ---------- */

/* Login Gate */
.login-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  padding: 24px;
}

.login-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  text-align: center;
}

.login-card .hero-logo {
  width: auto;
  height: auto;
  background: none;
  border: none;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card .hero-logo img {
  width: auto;
  height: 80px;
  max-width: 100%;
  object-fit: contain;
}

/* Redundant with the wordmark lockup in the login image */
.login-brand-text {
  display: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 20px;
}

.login-brand-text span {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.55em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-top: 2px;
}

.login-card h2 {
  margin-bottom: 8px;
  font-size: 1.6rem;
}

.login-card > p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: 32px;
}

.form-group {
  text-align: left;
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text);
}

.form-group input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-cream);
  transition: border-color var(--transition-fast);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-white);
}

.form-group input.error {
  border-color: var(--color-error);
}

.login-error {
  display: none;
  color: var(--color-error);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 10px 16px;
  background-color: rgba(var(--color-accent-light-rgb), 0.08);
  border-radius: var(--radius-sm);
}

.login-error.visible {
  display: block;
}

.login-card .btn {
  width: 100%;
  justify-content: center;
}

.login-help {
  margin-top: 18px;
  text-align: left;
  font-size: 0.85rem;
}
.login-help summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
  text-align: center;
  list-style: none;
}
.login-help summary::-webkit-details-marker { display: none; }
.login-help ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--color-text-light);
  line-height: 1.5;
}
.login-help li { margin-bottom: 8px; }

.login-back {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

/* Dashboard */
.dashboard {
  display: none;
  padding-top: var(--portal-header-height, 108px);
}

.dashboard.visible {
  display: block;
}

@media (max-width: 768px) {
  .dashboard { padding-top: var(--portal-header-height-mobile, 168px); }
}

/* ── Unified portal-header (docked + compact) ──
   The entire header — navbar, compact greeting strip, and view-mode pills —
   pins to the top of the viewport as a single position:fixed chrome so the
   whole thing stays accessible while scrolling. The navbar loses its own
   position:fixed (the parent handles pinning now). Greeting is compressed
   to a slim gradient strip; pills flow as a static bottom band. */
.portal-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(247, 247, 242, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Navbar inherits pinning from the parent; strip its own fixed chrome. */
.portal-header .navbar {
  position: static;
  height: 56px;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
  transition: none;
}

/* Flatten the navbar grid to a single flex row inside the portal-header —
   the 56px row can't fit the old 2-row grid (icons row 1 + links row 2)
   without overlap, so logo + icons + links all sit on one line. */
.portal-header .navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 0;
}

.portal-header .nav-brand {
  grid-row: auto;
  grid-column: auto;
  flex-shrink: 0;
}

.portal-header .nav-brand img {
  /* 48 px = 2026 brand guide minimum for the horizontal logo. The
     portal-header navbar is 56 px tall, so we keep 4 px of vertical
     padding above and below — tight but legible. */
  height: 48px;
}

.portal-header .nav-quick-icons {
  grid-row: auto;
  grid-column: auto;
  flex: 1;
  justify-content: flex-end;
  margin-right: 8px;
}

.portal-header .nav-links {
  grid-row: auto;
  grid-column: auto;
  flex-shrink: 0;
}

/* Compact greeting strip — one slim gradient band, centered */
.dashboard-header {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  padding: 6px 0 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.portal-header .dashboard-header .container {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-header h1 {
  color: var(--color-white);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dashboard-header p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  margin: 0;
  max-width: none;
}

/* Watermark was decorative only; hide it in compact mode */
.portal-header .hero-watermark { display: none; }

@media (max-width: 768px) {
  /* Pad the entire header for phones with a notch/camera cutout so the
     top of the navbar is never hidden by the physical device chrome. */
  .portal-header {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .portal-header .navbar {
    height: 56px;
    min-height: 56px;
  }
  /* Mobile portal-header — 44 px is below the brand-spec 48 px minimum,
     but at 56 px nav height with the toggle button + chat/drive icons
     competing for space, 48 px crowded into overlap. 44 px is the
     compromise; bump higher if the navbar height grows. */
  .portal-header .nav-brand img { height: 44px; }
  .dashboard-header p { display: none; }
  /* Dedicated icon-nav row sits between the navbar and the greeting band */
  .portal-header > .nav-quick-icons-mobile {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
    background-color: rgba(247, 247, 242, 0.94);
  }
  .portal-header > .nav-quick-icons-mobile::-webkit-scrollbar { display: none; }
}

/* Quick Links Grid */
.quick-links {
  padding: 60px 0 40px;
}

.quick-links h2 {
  margin-bottom: 32px;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.link-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
  transition: all var(--transition-base);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
  color: var(--color-text);
}

.link-card-icon {
  font-size: 2rem;
  line-height: 1;
}

.link-card h3 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.link-card p {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* Calendar Section */
.calendar-section {
  padding: 40px 0 60px;
}

.calendar-section h2 {
  margin-bottom: 24px;
}

.calendar-embed {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-embed iframe {
  width: 100%;
  height: 500px;
  border: none;
}

.calendar-placeholder {
  text-align: center;
  padding: 60px 24px;
  color: var(--color-text-light);
}

.calendar-placeholder svg {
  width: 64px;
  height: 64px;
  color: var(--color-primary-light);
  margin-bottom: 16px;
  opacity: 0.5;
}

.calendar-placeholder p {
  font-size: 0.95rem;
}

/* Announcements */
.announcements-section {
  padding: 40px 0 80px;
}

.announcements-section h2 {
  margin-bottom: 24px;
}

.announcement-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  transition: box-shadow var(--transition-fast);
}

.announcement-card:hover {
  box-shadow: var(--shadow-sm);
}

.announcement-date {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.announcement-card h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--color-text);
}

.announcement-card p {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* ---------- 404 Page ---------- */
.page-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background-color: var(--color-cream);
  position: relative;
  overflow: hidden;
}

.page-404 .hero-watermark img {
  opacity: 0.04;
  filter: none;
}

.page-404-content h1 {
  font-size: 8rem;
  color: var(--color-primary-light);
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.4;
}

.page-404-content h2 {
  margin-bottom: 16px;
}

.page-404-content p {
  color: var(--color-text-light);
  margin-bottom: 32px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Animations ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .about-grid {
    gap: 40px;
  }

  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .age-groups-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .beyond-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .board-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pricing-grid,
  .pricing-grid-2 {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-pair {
    flex-direction: column;
    gap: 0;
  }

  .pricing-pair .pricing-card {
    max-width: 400px;
    width: 100%;
  }

  .pricing-connector {
    margin: -8px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .nav-brand img {
    /* Brand minimum is 48 px for the horizontal logo. Mobile navbar is
       64 px tall so we keep 8 px breathing room top/bottom. */
    height: 48px;
    width: auto;
    max-width: 200px;
  }

  .nav-brand-text {
    font-size: 0.95rem;
  }

  .nav-brand-text span {
    font-size: 0.55rem;
  }

  .navbar .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }

  .nav-brand {
    grid-row: auto;
    grid-column: auto;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background-color: var(--color-cream);
    flex-direction: column;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-100vh);
    transition: transform var(--transition-base);
    visibility: hidden;
    z-index: 999;
    width: auto;
    grid-row: auto;
    grid-column: auto;
    justify-content: center;
  }

  .nav-links.open {
    transform: translateY(0);
    visibility: visible;
  }

  .nav-links a {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
  }

  .nav-links .btn {
    margin-left: 0;
    margin-top: 8px;
    justify-content: center;
  }

  /* Show the hamburger on mobile. The base .nav-toggle rule sets
     display:none (correct — hidden on desktop where the inline nav
     links show). This brings it back at <=768px. The members-portal
     override below keeps it hidden there since the icon row + inline
     Log Out replace the hamburger on that page. */
  .nav-toggle { display: flex; }
  body.members-portal .nav-toggle { display: none; }

  .nav-quick-icons {
    display: none;
  }

  .nav-icon-btn {
    width: 36px;
    height: 36px;
  }

  /* Inline Log Out at the end of the mobile icon row */
  .nav-mobile-logout {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 12px;
    font-size: 0.85rem;
  }

  .nav-icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .hero {
    padding: 100px 24px 80px;
    min-height: 90vh;
  }



  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-image {
    max-height: 300px;
  }

  .about-values {
    grid-template-columns: 1fr;
  }

  .programs-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .schedule-block {
    padding: 28px 20px;
  }

  .schedule-item {
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
  }

  .schedule-time {
    min-width: unset;
  }

  .age-groups-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .age-group-card {
    padding: 16px 12px;
  }

  .age-group-emoji {
    font-size: 1.4rem;
  }

  .beyond-grid {
    grid-template-columns: 1fr;
  }

  .beyond-section {
    padding: 28px 20px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .login-card {
    padding: 36px 28px;
  }
}

@media (max-width: 480px) {
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-buttons .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .links-grid {
    grid-template-columns: 1fr;
  }

  .age-groups-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-quick-icons-mobile .nav-icon-btn {
    width: 32px;
    height: 32px;
  }
  .nav-quick-icons-mobile .nav-icon-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ---------- Page Header (subpages) ---------- */
.page-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  padding: 140px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header h1 {
  color: var(--color-white);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 12px;
}

.page-header .hero-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--color-accent-light);
  font-weight: 400;
}

/* ---------- Support Page ---------- */
.support-section {
  padding: 80px 0 100px;
  background-color: var(--color-cream);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.support-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.support-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.support-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  margin-bottom: 24px;
  flex-shrink: 0;
}

.support-icon svg {
  width: 28px;
  height: 28px;
}

.support-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  margin-bottom: 12px;
}

.support-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 24px;
  flex-grow: 1;
}

.support-card .btn {
  margin-top: auto;
}

@media (max-width: 768px) {
  .support-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Merch Section ---------- */
.merch-section {
  padding: 80px 0 60px;
  background-color: var(--color-cream-dark);
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.merch-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px;
  text-align: center;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.merch-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.merch-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.merch-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-cream);
  margin-bottom: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.merch-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.merch-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}

.merch-blurb {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin-bottom: 14px;
}

.merch-price {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-primary);
  letter-spacing: 0.5px;
}

.merch-variants {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
  margin: 4px 0 18px;
}

.merch-card .merch-order-cta {
  margin-top: auto;
  pointer-events: none; /* button itself owns the click */
}

.merch-footnote {
  margin-top: 36px;
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-style: italic;
}

@media (max-width: 920px) {
  .merch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .merch-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Photo Strip ---------- */
.photo-strip {
  padding: 64px 0;
  background: var(--color-cream-dark);
  overflow: hidden;
}

.photo-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.photo-strip-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}

.photo-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.photo-strip-item:hover img {
  transform: scale(1.05);
}

.photo-strip-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: white;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

@media (max-width: 1024px) {
  .photo-strip-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .photo-strip-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }

  .photo-strip {
    padding: 40px 0;
  }
}

/* ==========================================================================
   Portal — Quick Access, Directory, Tabs, Location
   ========================================================================== */

/* ---------- Quick Access Bar ---------- */
.portal-quick-access {
  padding: 0;
  margin-top: -20px;
  position: relative;
  z-index: 2;
}

.quick-access-grid {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.quick-access-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.quick-access-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}

.quick-access-chat { background: var(--color-primary); }
.quick-access-drive { background: var(--color-accent); }
.quick-access-cal { background: var(--color-primary-dark); }

.quick-access-btn svg {
  flex-shrink: 0;
}

/* ---------- Login Divider ---------- */
.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  color: var(--color-text-light);
  font-size: 0.8rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---------- Portal Board ---------- */
.portal-board {
  padding: 60px 0;
  background: var(--color-white);
}

.portal-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.portal-board-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  border: 1.5px solid var(--color-primary);
  transition: all var(--transition-fast);
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
}

.portal-board-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

.portal-board-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  display: block;
}

.portal-board-card .board-avatar {
  width: 64px;
  height: 64px;
  font-size: 0.85rem;
  margin: 0 auto 12px;
}

.portal-board-card h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.portal-board-email {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--color-primary);
  word-break: break-all;
}

.portal-board-email:hover {
  text-decoration: underline;
}

/* ---------- Member Directory (Yearbook) ---------- */
.portal-directory {
  padding: 60px 0;
  background: var(--color-cream);
}

/* Filter pills */
.directory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.filter-pill {
  padding: 6px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.directory-filters-secondary {
  margin-top: -10px;
  margin-bottom: 16px;
}

.filter-pill-secondary {
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  border-style: dashed;
  border-color: var(--color-border);
  color: var(--color-text-light);
  opacity: 0.85;
}

.filter-pill-secondary:hover {
  opacity: 1;
}

.filter-pill-secondary.active {
  background: var(--color-text-light);
  border-color: var(--color-text-light);
  border-style: solid;
  color: var(--color-white);
  opacity: 1;
}

/* First-year families filter pill — matches the green card outline: a solid
   green (colored) border, no icon, no fill. Active adds a faint green tint so
   the toggle still reads. Placed after .filter-pill-secondary so it overrides
   at equal specificity. */
.filter-pill-new {
  border-color: var(--color-chartreuse, #9BC431);
  border-style: solid;
  color: #4e6a17;
  opacity: 1;
}
.filter-pill-new:hover {
  border-color: var(--color-chartreuse, #9BC431);
  color: #3d5411;
}
.filter-pill-new.active {
  background: rgba(var(--color-chartreuse-rgb, 155, 196, 49), 0.18);
  border-color: var(--color-chartreuse, #9BC431);
  border-style: solid;
  color: #3d5411;
}

/* Search bar + count */
.directory-search-wrap {
  max-width: 480px;
  margin: 0 auto 28px;
  position: relative;
}

.directory-search {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid var(--color-border);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.directory-search:focus {
  outline: none;
  border-color: var(--color-primary);
}

.directory-search::placeholder {
  color: var(--color-text-light);
}

.directory-count {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: 8px;
}

/* Yearbook face grid */
.yearbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}

.yb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.yb-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

.yb-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
  overflow: hidden;
}

.yb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yb-photo span {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
}

.yb-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 2px;
}

.yb-subtitle {
  font-size: 0.78rem;
  color: var(--color-text-light);
  line-height: 1.3;
}

.yb-pronouns {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: 1px;
}

.yb-family {
  font-size: 0.75rem;
  color: var(--color-text-light);
  opacity: 0.7;
  margin-top: 3px;
}

.yb-parent-of {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.3;
}

.yb-card-board {
  border-color: var(--color-primary);
  border-width: 1.5px;
}

/* First-year families: a green card outline instead of a 🌱 badge — same
   "new growth" cue, less visual clutter. outline (not border) so there's no
   layout shift and it survives the hover border-color change. */
.yb-card-new {
  outline: 2.5px solid var(--color-chartreuse, #9BC431);
  outline-offset: -1px;
}

.yb-board-badge {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(45, 106, 63, 0.08);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 5px;
  letter-spacing: 0.01em;
  white-space: normal;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
  max-width: 100%;
  word-break: break-word;
}

.yb-board-emoji {
  font-size: 0.72rem;
  line-height: 1;
}

/* New-member indicator — family hasn't completed a full co-op year yet.
   Chartreuse "new growth" tint with olive text, same pill anatomy as
   .yb-board-badge. */
.yb-new-badge {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--color-leaf);
  background: rgba(var(--color-chartreuse-rgb), 0.18);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 5px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}

/* Extra info shown on class-view cards */
.yb-allergy {
  font-size: 0.65rem;
  font-weight: 700;
  color: #a04030;
  background: rgba(196, 132, 122, 0.12);
  padding: 2px 8px;
  border-radius: 50px;
  margin-top: 5px;
}

.yb-card-class .yb-schedule {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: rgba(var(--color-accent-light-rgb), 0.15);
  padding: 2px 8px;
  border-radius: 50px;
  margin-top: 3px;
}

/* Per-child photo opt-out. Slate/gray so it reads as a restriction, not an
   alert. Card gets a subtle hatched outline so the state is legible even when
   the viewer misses the pill. */
.yb-no-photo {
  font-size: 0.65rem;
  font-weight: 700;
  color: #4b5563;
  background: rgba(75, 85, 99, 0.12);
  padding: 2px 8px;
  border-radius: 50px;
  margin-top: 5px;
  display: inline-block;
}
.yb-card.yb-card-no-photo {
  outline: 1.5px dashed rgba(75, 85, 99, 0.45);
  outline-offset: -3px;
}
.yb-card.yb-card-no-photo .yb-photo {
  opacity: 0.82;
}

/* Detail overlay */
.person-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Directory modal — wider/taller container than the shared person-detail
   card, because it hosts filter pills, search, and the yearbook grid.
   Sits below #personDetail in the z-index stack so person cards can
   stack on top when a face is tapped. */
.directory-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.directory-modal-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 1100px;
  width: 100%;
  padding: 28px 28px 32px;
  position: relative;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.directory-modal-title {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 0 0 6px;
  text-align: center;
}
.directory-modal-sub {
  color: var(--color-text-light);
  margin: 0 0 20px;
  text-align: center;
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  .directory-overlay { padding: 16px 8px; }
  .directory-modal-card { padding: 20px 16px 24px; max-height: calc(100vh - 32px); }
}

.person-detail-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 440px;
  width: 100%;
  padding: 28px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.detail-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: none;
  font-size: 1.8rem;
  color: var(--color-text-light);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-close:hover { color: var(--color-text); }

/* Unified modal-header actions row.
   Sits as a sibling of .detail-close in the top-right corner so every
   modal with additional controls (Print, Save, Manage, etc.) follows the
   same pattern: actions cluster immediately left of the close X. */
.detail-actions {
  position: absolute;
  top: 16px;
  right: 60px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 2;
}
.detail-actions .sc-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 600;
}
@media (max-width: 480px) {
  .detail-actions { top: 14px; right: 54px; }
  .detail-actions .sc-btn { padding: 5px 10px; font-size: 0.8rem; }
}

/* When the header action row is present, push the modal body down so the
   heading doesn't collide with the Print/X buttons. */
.person-detail-card:has(.detail-actions) .elective-detail {
  padding-top: 22px;
}

/* ════════════════════════════════════════════════════════════════
   renderReportModal — shared shell for tabular Workspace reports
   ════════════════════════════════════════════════════════════════
   Single-row header replaces the prior 3-band stack (chrome row +
   title/subtitle + Manage panel). Title block flexes left, icon-only
   chrome cluster pins right. Filter chips with built-in counts live
   immediately below.

   See script.js renderReportModal() for the contract; markup is:
     .rd-report-modal
       .rd-header-row  (title-block + chrome icons)
       .rd-supp-popover (admin-only, hidden until ⚙ click)
       <body slot> (filters + table) */

.rd-header-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 0 12px;
}
.rd-title-block { flex: 1; min-width: 0; }
.rd-title-block .rd-title { margin: 0; }
.rd-title-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}
.rd-title-block .rd-subtitle {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.rd-chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.rd-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  background: rgba(var(--color-primary-rgb), 0.05);
  color: var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.rd-icon svg { display: block; }
.rd-icon:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.rd-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.rd-icon[aria-expanded="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.rd-icon-close {
  border-color: rgba(0, 0, 0, 0.06);
  background: transparent;
  color: var(--color-text-light);
}
.rd-icon-close:hover {
  background: rgba(217, 95, 59, 0.12);
  border-color: rgba(217, 95, 59, 0.4);
  color: var(--color-coral);
}

/* Inline popover anchored to the chrome row that holds admin-only
   supplemental controls (Weights, Exemptions, Email Templates).
   Toggled by the ⚙ icon in the chrome cluster. */
.rd-supp-popover {
  margin: -6px 0 14px;
  padding: 10px 12px;
  background: rgba(var(--color-primary-rgb), 0.04);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rd-supp-popover[hidden] { display: none; }

/* Always-visible count strip — sits between the modal meta and the
   table. Reuses the in-row Status pill shapes (.ws-part-status /
   .pmrep-status) so the summary visually maps onto the column it
   summarizes. Read-only data, not interactive — filtering happens via
   the funnel popover on the column header. */
.rd-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 14px;
  align-items: center;
}

/* Count-strip pills that double as one-tap filter toggles (Membership
   Report). Layered onto the existing .ws-wv-* / .ws-track-count pill
   colors — this only resets the native button chrome and adds the
   hover/active affordance. Active = plum ring; click again to clear. */
.rd-count-pill {
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), filter var(--transition-fast);
}
.rd-count-pill:hover { filter: brightness(0.94); }
.rd-count-pill:focus-visible,
.rd-count-pill.is-active { box-shadow: 0 0 0 2px var(--color-primary); }

/* Per-column filter funnel + its popover. Replaces the prior
   in-thead filter <tr> (which didn't dock cleanly under the column-
   label row). Funnel sits inline next to the column label; click
   opens a popover anchored to the funnel. Popover renders to body
   so it isn't clipped by the modal's overflow. */
.ws-th-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-light);
  border-radius: 4px;
  cursor: pointer;
  vertical-align: -3px;
}
/* Without this, clicks on the SVG polygon target the SVG instead of
   the button — hits the parent <th>'s sort handler instead. */
.ws-th-filter-btn svg { pointer-events: none; }
.ws-th-filter-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
}
.ws-th-filter-btn.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.ws-th-filter-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.ws-th-filter-popover {
  position: absolute;
  /* Modal overlay (.person-detail-overlay) sits at z-index 9999, so
     the popover has to sit above that to be visible when triggered
     from a column header inside the modal. */
  z-index: 10000;
  min-width: 180px;
  max-width: 280px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  padding: 4px;
  font-family: var(--font-body);
  font-size: 0.84rem;
}
.ws-th-filter-popover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text);
  font-size: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.ws-th-filter-popover-row:hover { background: rgba(var(--color-primary-rgb), 0.08); }
.ws-th-filter-popover-row.is-current {
  background: var(--color-primary);
  color: var(--color-white);
}
.ws-th-filter-popover-count {
  margin-left: 16px;
  opacity: 0.55;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ws-th-filter-popover-row.is-current .ws-th-filter-popover-count {
  color: var(--color-accent);
  opacity: 0.95;
}

/* Inline meta-line select — used for filters that scope the whole
   table (year picker on PM Submissions). Lives in the modal's meta
   line, not a column. Smaller and quieter than column filters. */
.rd-meta-select {
  display: inline-block;
  margin: 0 4px;
  padding: 1px 6px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  vertical-align: baseline;
}
.rd-meta-select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Filter chip row — sits below the header chrome. Visually quieter
   than the chrome buttons (no default fill, smaller text, slim
   padding) so it reads as a "scope of data" control rather than as
   another set of action buttons. The "Show" label gives intent. The
   count rides in a small inset pill so it reads as data, not chrome. */
.rd-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
}
.rd-filters-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-light);
  margin-right: 6px;
}
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.rd-chip:hover {
  border-color: rgba(var(--color-primary-rgb), 0.45);
  color: var(--color-primary);
}
.rd-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: rgba(var(--color-primary-rgb), 0.08);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-light);
}
.rd-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}
.rd-chip.is-active .rd-chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
}
.rd-chip.is-active:hover {
  color: var(--color-white);
  border-color: var(--color-primary);
}
.rd-chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.rd-dot-ok   { background: var(--color-leaf); }
.rd-dot-warn { background: var(--color-accent-dark); }
.rd-dot-bad  { background: var(--color-coral); }

@media (max-width: 600px) {
  .rd-header-row { flex-wrap: wrap; }
  .rd-icon { width: 32px; height: 32px; font-size: 1rem; }
}

.detail-header {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

.detail-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.detail-photo span {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
}

.detail-info h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.detail-group {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.detail-parents,
.detail-kids {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.detail-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.detail-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.detail-btn-email {
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
}

.detail-btn-email:hover {
  background: rgba(var(--color-primary-rgb), 0.16);
}

.detail-btn-phone {
  background: rgba(var(--color-accent-light-rgb), 0.12);
  color: var(--color-accent-dark);
}

.detail-btn-phone:hover {
  background: rgba(var(--color-accent-light-rgb), 0.22);
}

.detail-family {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.detail-family h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
  margin-bottom: 12px;
}

.detail-family-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.detail-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 64px;
}

.detail-member-current {
  opacity: 1;
  font-weight: 700;
}

.detail-member-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-member-dot span {
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 700;
}

.detail-member span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}

.detail-member small {
  font-size: 0.7rem;
  color: var(--color-text-light);
}

.detail-member-current .detail-member-dot {
  box-shadow: 0 0 0 3px var(--color-primary);
}

/* Class staff banner */
.class-staff-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 4px;
}

.class-staff-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.class-staff-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-white);
}

.class-staff-meta {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
}

.class-staff-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

button.staff-role {
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px 8px 4px 4px;
  transition: background var(--transition-fast);
}

button.staff-role:hover {
  background: rgba(255,255,255,0.12);
}

.staff-role {
  display: flex;
  align-items: center;
  gap: 10px;
}

.staff-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.35);
}

.staff-dot span {
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
}

.staff-label {
  text-align: left;
}

.staff-label strong {
  display: block;
  font-size: 0.85rem;
  color: var(--color-white);
  line-height: 1.2;
}

.staff-label small {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
}

.staff-pronouns {
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

/* Class roster list */
.class-roster {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.roster-note {
  padding: 10px 20px;
  font-size: 0.75rem;
  color: var(--color-text-light);
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
}

.roster-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-align: left;
  font-family: var(--font-body);
}

.roster-row:last-child {
  border-bottom: none;
}

.roster-row:hover {
  background: rgba(var(--color-primary-rgb), 0.04);
}

.roster-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.roster-photo span {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
}

.roster-info {
  flex: 1;
  min-width: 0;
}

.roster-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.roster-meta {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.roster-tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.roster-allergy {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(196, 132, 122, 0.15);
  color: #a04030;
}

.roster-schedule {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(var(--color-accent-light-rgb), 0.15);
  color: var(--color-accent-dark);
}

/* Detail popup extras */
.detail-pronouns {
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-style: italic;
}

.detail-schedule {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}

.detail-board-role {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: rgba(var(--color-accent-light-rgb), 0.15);
  display: inline-block;
  padding: 3px 12px;
  border-radius: 50px;
  margin-bottom: 4px;
}

.detail-btn-board {
  background: rgba(var(--color-accent-light-rgb), 0.1);
  color: var(--color-accent-dark);
}

.detail-btn-board:hover {
  background: rgba(var(--color-accent-light-rgb), 0.2);
}

.detail-btn small {
  font-weight: 400;
  opacity: 0.7;
}

.detail-allergy-info {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a04030;
  background: rgba(196, 132, 122, 0.1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.detail-no-photo {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  background: rgba(75, 85, 99, 0.1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

/* New-member line on the person detail card — pairs with .yb-new-badge */
.detail-new-member {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-leaf);
  background: rgba(var(--color-chartreuse-rgb), 0.15);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

@media (max-width: 480px) {
  .class-staff-roles {
    flex-direction: column;
    gap: 12px;
  }

  .class-staff-banner {
    padding: 16px 18px;
  }

  .class-staff-header {
    flex-direction: column;
    gap: 4px;
  }

  .roster-row {
    padding: 10px 14px;
  }

  .roster-tags {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ---------- My Family Dashboard ---------- */
.my-family-section {
  padding: 0 0 20px;
  margin-top: -16px;
  position: relative;
  z-index: 2;
}

.my-family-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.mf-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.mf-card-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary-light);
}

.mf-kid {
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}

.mf-kid:last-child {
  margin-bottom: 0;
}

/* Kid header bar */
.mf-kid-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.mf-kid-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mf-kid-photo span {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
}

.mf-kid-name {
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-text);
}

.mf-class-link {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 50px;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mf-class-link:hover {
  background: rgba(var(--color-primary-rgb), 0.16);
}

/* Schedule table */
.mf-schedule {
  padding: 4px 0;
}

.mf-sched-row {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 14px;
  font-size: 0.82rem;
}

.mf-sched-row:nth-child(even) {
  background: rgba(255,255,255,0.5);
}

.mf-sched-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mf-sched-class {
  font-weight: 600;
  color: var(--color-text);
}

.mf-sched-room {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.08);
  padding: 2px 10px;
  border-radius: 50px;
  white-space: nowrap;
}

.mf-sched-teacher {
  font-size: 0.75rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

.mf-empty-text {
  font-style: italic;
  color: var(--color-text-light);
  font-weight: 400;
}

.mf-sched-empty .mf-sched-class {
  grid-column: 2 / -1;
}

/* Elective link in schedule */
.mf-elective-link {
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--color-primary-rgb), 0.4);
  transition: all var(--transition-fast);
}

.mf-elective-link:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
}

/* Elective detail popup */
.elective-detail h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.elective-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.elective-meta span {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 50px;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
}

.elective-teacher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}

.elective-roster-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
  margin-bottom: 10px;
}

.elective-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.elective-student {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.elective-student-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.elective-student-dot span {
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
}

.elective-student strong {
  color: var(--color-text);
}

.elective-student-last {
  color: var(--color-text-light);
  font-size: 0.78rem;
}

/* Per-child photo opt-out inline in class/elective rosters. Slate pill, same
   vocabulary as .yb-no-photo used on the yearbook cards. */
.elective-student-nophoto {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #4b5563;
  background: rgba(75, 85, 99, 0.12);
  padding: 1px 6px;
  border-radius: 50px;
  margin-left: 4px;
  white-space: nowrap;
}
.elective-student-nophoto-card .elective-student-dot {
  opacity: 0.82;
}

/* Small italic pronoun tag used inline in class/elective detail modals. */
.pronoun-inline {
  color: var(--color-text-light);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: 2px;
}

/* Parent duties */
.mf-duty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.mf-duty-clickable:hover {
  background: rgba(var(--color-primary-rgb), 0.04);
}

.mf-duty-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.mf-duty-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mf-duty-info strong {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.3;
}

.mf-duty-info span {
  font-size: 0.78rem;
  color: var(--color-text-light);
  line-height: 1.3;
}

.mf-duty-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.mf-duty-arrow {
  opacity: 0.35;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 2px;
}

.mf-duty-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.mf-duty-link:hover {
  text-decoration: underline;
}

/* =============================================================
   Empty-state text — "No assignments yet", "No absences yet", etc.
   -------------------------------------------------------------
   Use .empty-state as the canonical class. Legacy classes
   (.mf-empty, .pds-empty, .cl-dyn-empty, .coverage-empty, etc.)
   still work because they're defined elsewhere, but new code
   should prefer .empty-state. .empty-state-lg is the bigger
   centered variant used for panels with no content yet.
   ============================================================= */
.empty-state,
.mf-empty {
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-style: italic;
}
.empty-state-lg {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.85rem;
}

.mf-status-done, .mf-status-upcoming, .mf-status-open {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.mf-status-done {
  background: rgba(var(--color-primary-light-rgb), 0.2);
  color: var(--color-primary-dark);
}

.mf-status-upcoming {
  background: rgba(var(--color-accent-light-rgb), 0.2);
  color: var(--color-accent-dark);
}

.mf-status-open {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

/* ---------- Billing Card ---------- */
/* ---------- Billing Card — Refined Ledger ---------- */
.mf-billing-card {
  grid-column: 1 / -1;
}

/* Deposit blocks: compact, quiet — these are settled or simple */
.mf-billing-semester {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: box-shadow var(--transition-fast);
}

.mf-billing-semester:hover {
  box-shadow: var(--shadow-sm);
}

.mf-billing-semester:last-of-type {
  margin-bottom: 0;
}

/* Left accent stripe — green for paid, amber for due */
.mf-billing-semester::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary-light);
  transition: background var(--transition-fast);
}

/* Semester blocks that contain a due-status badge get the amber stripe */
.mf-billing-semester:has(.mf-billing-due-status)::before {
  background: var(--color-accent);
}

/* Semester blocks with balance due get a subtle warm tint */
.mf-billing-semester:has(.mf-billing-balance) {
  background: rgba(var(--color-accent-light-rgb), 0.04);
  border-color: rgba(var(--color-accent-light-rgb), 0.25);
}

.mf-billing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.mf-billing-header strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  letter-spacing: -0.01em;
}

.mf-billing-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Paid: calm green with a subtle checkmark feel */
.mf-billing-paid {
  background: rgba(var(--color-primary-light-rgb), 0.18);
  color: var(--color-primary-dark);
}

.mf-billing-paid::before {
  content: '\2713';
  font-size: 0.7rem;
}

/* Due: warm amber nudge */
.mf-billing-due-status {
  background: rgba(var(--color-accent-light-rgb), 0.22);
  color: var(--color-accent-dark);
}

.mf-billing-pending {
  background: rgba(var(--color-accent-light-rgb), 0.15);
  color: var(--color-accent-dark);
}

/* Block-level note used when a payment is submitted but the Treasurer
   hasn't yet marked the sheet row Paid. Replaces the Pay button. */
.mf-billing-pending-note {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(var(--color-accent-light-rgb), 0.15);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--color-text);
  font-style: italic;
}

/* Inline note explaining why the processing fee is added to the bill —
   shown on subsections that include a PayPal fee line item. */
.mf-billing-fee-note {
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--color-text-light);
  line-height: 1.45;
  font-style: italic;
}

/* Placeholder shown when both semester subsections are gated out
   (e.g. an unregistered family in April-Oct of a deposit-only year). */
.mf-billing-empty {
  margin: 8px 0 0;
  padding: 14px 16px;
  background: rgba(var(--color-primary-rgb), 0.04);
  border: 1px dashed rgba(var(--color-primary-rgb), 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--color-text-light);
  text-align: center;
}

.mf-billing-overdue {
  background: rgba(220, 53, 69, 0.12);
  color: var(--color-coral);
}

.mf-billing-overdue::before {
  content: '!';
  font-weight: 900;
}

.mf-billing-due {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

/* Line items — clean tabular rows */
.mf-billing-lines {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 10px;
  margin-top: 2px;
}

.mf-billing-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.84rem;
  padding: 4px 0;
  color: var(--color-text);
}

.mf-billing-line span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 16px;
}

/* Total row: strong separator */
.mf-billing-total {
  border-top: 2px solid var(--color-primary-dark);
  margin-top: 8px;
  padding-top: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
}

.mf-billing-paid-line {
  color: var(--color-text-light);
}

.mf-billing-paid-line span:last-child {
  color: var(--color-primary);
  font-weight: 600;
}

/* Balance due: the number that matters most */
.mf-billing-balance {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-accent-dark);
  padding-top: 2px;
}

.mf-billing-balance span:last-child {
  font-size: 1rem;
  font-weight: 800;
}

/* Footer */
.mf-billing-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.mf-billing-footer p {
  margin: 0 0 4px;
}

.mf-billing-contact a,
.mf-billing-contact-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.mf-billing-contact a:hover,
.mf-billing-contact-link:hover {
  text-decoration: underline;
}

.mf-billing-subtotal {
  border-top: 1px dashed var(--color-border);
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 600;
  color: var(--color-text);
}

.mf-billing-deposit {
  color: var(--color-primary);
  font-weight: 600;
}

.mf-billing-fee-line {
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
  opacity: 0.8;
}

/* Pay button: prominent but tasteful */
.mf-billing-pay-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.mf-billing-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(45, 106, 63, 0.25);
  letter-spacing: 0.02em;
}

.mf-billing-pay-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), #163d22);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(45, 106, 63, 0.35);
}

.mf-billing-pay-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(45, 106, 63, 0.2);
}

.mf-billing-pay-btn svg {
  opacity: 0.85;
}

/* Success / Error feedback */
.mf-billing-success {
  padding: 12px 16px;
  background: rgba(var(--color-primary-light-rgb), 0.12);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(var(--color-primary-light-rgb), 0.25);
}

.mf-billing-error {
  padding: 12px 16px;
  background: rgba(220, 53, 69, 0.06);
  color: var(--color-coral);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid rgba(220, 53, 69, 0.15);
}

.mf-billing-error a {
  color: var(--color-primary);
  font-weight: 600;
}

/* ---------- Board Responsibility Bullets ---------- */
.board-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  text-align: center;
}

.board-bullets li {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* Board detail popup responsibilities */
.detail-responsibilities {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.detail-responsibilities h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}

.detail-responsibilities ul {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
}

.detail-responsibilities li {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .my-family-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .mf-sched-row {
    grid-template-columns: 42px 1fr;
    gap: 2px 8px;
  }

  .mf-sched-room,
  .mf-sched-teacher {
    grid-column: 2;
    justify-self: start;
  }

  .mf-kid-bar {
    flex-wrap: wrap;
  }

  .mf-class-link {
    margin-left: 42px;
  }
}

/* ---------- Calendar ---------- */
.portal-calendar {
  padding: 60px 0;
  background: var(--color-white);
}

.calendar-embed {
  margin-top: 24px;
}

/* ---------- Portal Tables ---------- */
.directory-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.portal-table thead {
  background: var(--color-primary);
  color: var(--color-white);
}

.portal-table th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.portal-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: top;
}

.portal-table tbody tr:hover {
  background: rgba(var(--color-primary-rgb), 0.04);
}

.portal-table tbody tr:last-child td {
  border-bottom: none;
}

/* Announcements banner */
.announcements-section {
  padding: 30px 0;
}

.announcements-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}

.announcements-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.8;
}

.announcements-banner strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.announcements-banner p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.announcements-banner a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 480px) {
  .announcements-banner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* Yearbook responsive */
@media (max-width: 768px) {
  .yearbook-grid {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 8px;
  }

  .yb-card {
    padding: 12px 6px 10px;
  }

  .yb-photo {
    width: 60px;
    height: 60px;
  }

  .yb-photo span {
    font-size: 1.3rem;
  }

  .yb-name {
    font-size: 0.875rem;
  }

  .filter-pill {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .yearbook-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .directory-search-wrap {
    margin-bottom: 20px;
  }

  .person-detail-card {
    padding: 20px;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }

  .detail-family-grid {
    justify-content: center;
  }
}

/* ---------- Coordination Hub Tabs ---------- */
.portal-coordination {
  padding: 60px 0;
  background: var(--color-white);
}

.coordination-edit-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.portal-tabs {
  margin-top: 24px;
}

.portal-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
  margin-bottom: 0;
}

.portal-tab {
  padding: 10px 18px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.portal-tab:hover {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.04);
}

.portal-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.portal-tab-panel {
  display: none;
  padding: 28px 0;
}

.portal-tab-panel.active {
  display: block;
}

.portal-tab-panel h3 {
  font-size: 1.1rem;
  margin-bottom: 16px;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-done {
  background: rgba(var(--color-primary-light-rgb), 0.2);
  color: var(--color-primary-dark);
}

.status-upcoming {
  background: rgba(var(--color-accent-light-rgb), 0.2);
  color: var(--color-accent-dark);
}

.status-open {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

/* Volunteer role cards */
.portal-volunteer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.portal-role-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--color-border);
}

.portal-role-card h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}

.portal-role-card ul {
  list-style: none;
  padding: 0;
}

.portal-role-card li {
  padding: 6px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.portal-role-card li:last-child {
  border-bottom: none;
}

/* Committee chair */
.committee-chair {
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Session Section Titles ---------- */
.session-section-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 28px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}

.session-section-title:first-of-type {
  margin-top: 12px;
}

/* ---------- Session Pager ---------- */
.session-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.session-pager-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.session-pager-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
}

.session-pager-disabled {
  color: var(--color-border);
  cursor: default;
  border-color: transparent;
}

.session-pager-disabled:hover {
  background: none;
  border-color: transparent;
}

.session-pager-current {
  padding: 6px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.session-pager-active {
  color: var(--color-primary-dark);
}

.session-pager-now {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 50px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(var(--color-primary-light-rgb), 0.25);
  color: var(--color-primary-dark);
  vertical-align: middle;
  margin-left: 4px;
}

@media (max-width: 600px) {
  .session-pager {
    gap: 2px;
  }
  .session-pager-btn {
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .session-pager-current {
    font-size: 0.9rem;
    padding: 10px 12px;
  }
}

/* Clickable class rows in session table */
.session-class-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.session-class-row:hover {
  background: rgba(var(--color-primary-rgb), 0.06);
}

.session-group-link {
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Elective Cards ---------- */
.elective-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.elective-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.elective-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.elective-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.elective-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
}

.elective-age-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  white-space: nowrap;
}

.elective-both-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(var(--color-accent-light-rgb), 0.2);
  color: var(--color-accent-dark);
}

.elective-card-desc {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.elective-card-meta {
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.elective-card-spots {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-align: right;
}

/* Capacity bar (used in cards and detail popup) */
.elective-capacity {
  margin: 12px 0 8px;
}

.elective-capacity-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.elective-capacity-bar {
  height: 8px;
  background: var(--color-cream-dark);
  border-radius: 4px;
  overflow: hidden;
}

.elective-capacity-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-base);
}

/* Elective detail popup enhancements */
.elective-description {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 12px 0;
}

.elective-staff-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

/* ---------- Cleaning Grid ---------- */
.cleaning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.cleaning-floor-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid var(--color-border);
}

.cleaning-floor-card h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}

.cleaning-role {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cleaning-role:last-child {
  border-bottom: none;
}

.cleaning-area {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.cleaning-families {
  font-size: 0.85rem;
  color: var(--color-text);
}

/* ---------- Events Grid ---------- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.event-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid var(--color-border);
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary-light);
}

.event-card-name {
  font-size: 1rem;
  color: var(--color-primary-dark);
}

.event-card-date {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-top: 2px;
}

.event-roles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-role {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.85rem;
}

.event-role:last-of-type {
  border-bottom: none;
}

.event-role-label {
  font-weight: 600;
  color: var(--color-text-light);
  font-size: 0.8rem;
}

.event-role-person {
  color: var(--color-text);
}

.event-open-slot {
  color: var(--color-accent);
  font-style: italic;
}

.event-fill-summary {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-light);
}

@media (max-width: 600px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Class Ideas Grid ---------- */
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.ideas-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--color-border);
}

.ideas-card h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}

.ideas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.idea-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  font-size: 0.78rem;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.idea-chip:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ---------- Elective Cards Mobile ---------- */
@media (max-width: 600px) {
  .elective-card-grid {
    grid-template-columns: 1fr;
  }
  .cleaning-grid {
    grid-template-columns: 1fr;
  }
  .ideas-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Location & Wifi ---------- */
.portal-location {
  padding: 60px 0;
  background: var(--color-cream);
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}

.location-map iframe {
  border-radius: var(--radius-md);
  width: 100%;
  min-height: 300px;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  border: 1px solid var(--color-border);
}

.info-card h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-card h4 svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.info-card p {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.6;
}

.info-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.wifi-credentials {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wifi-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wifi-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
  min-width: 70px;
}

.wifi-value {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-cream);
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* ---------- Install Prompt ---------- */
.portal-install {
  padding: 16px 0;
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.portal-install p {
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.portal-install .btn-primary {
  margin-right: 8px;
}

.portal-install .btn-outline-dark {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.3);
}

/* ---------- Portal Responsive ---------- */
@media (max-width: 768px) {
  .quick-access-btn {
    padding: 10px 12px;
  }

  .portal-board-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portal-tab-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .portal-tab-nav::-webkit-scrollbar {
    display: none;
  }

  .portal-tab {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .location-grid {
    grid-template-columns: 1fr;
  }

  .portal-volunteer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .portal-board-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Wider modal card when hosting Supply Closet, Curriculum, or Role Desc
   ========================================================================== */
.person-detail-card:has(.sc-modal),
.person-detail-card:has(.cl-modal),
.person-detail-card:has(.rd-modal),
.person-detail-card:has(.wv-modal),
.person-detail-card:has(.emi-modal) {
  max-width: 880px;
}
/* Tabular reports (Participation, PM Submissions, etc.) need extra
   width — many columns, sticky-first-column scrolling means we want
   to surface as much of the table as possible without horizontal
   scroll on a typical laptop. Bumps the cap to ~1100px while still
   capping at 96vw on smaller screens. */
.person-detail-card:has(.rd-report-modal) {
  max-width: min(1100px, 96vw);
}
.wv-modal {
  max-width: 860px;
  width: 100%;
}

/* ==========================================================================
   Policies & Guidelines card — three inline sub-links
   ========================================================================== */
.link-card-policies {
  cursor: default;
}
.link-card-policies:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}
.link-card-policies h3 {
  margin-bottom: 10px;
}
.policy-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.policy-links li { margin: 0; }
.policy-links a,
.policy-links button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.policy-links a:hover,
.policy-links a:focus-visible,
.policy-links button:hover,
.policy-links button:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
  outline: none;
}
.policy-link-arrow {
  color: var(--color-text-light);
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.policy-links a:hover .policy-link-arrow,
.policy-links button:hover .policy-link-arrow {
  color: var(--color-primary);
}

/* ==========================================================================
   Supply Closet Inventory modal
   ========================================================================== */
.sc-modal {
  max-width: 820px;
  width: 100%;
}
.sc-modal h3 {
  margin: 0 0 0.25rem 0;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
}
.sc-modal .sc-intro {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin: 0 0 1rem 0;
}
.sc-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}
.sc-search {
  flex: 1 1 220px;
  padding: 9px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}
.sc-search:focus {
  outline: none;
  border-color: var(--color-primary);
}
.sc-sort {
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
}
.sc-sort:focus {
  outline: none;
  border-color: var(--color-primary);
}
.sc-cat-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.sc-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
  user-select: none;
  font-family: inherit;
}
.sc-cat-chip .sc-cat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}
.sc-cat-chip:hover {
  border-color: var(--color-text-light);
}
/* Per-category dot color (stays meaningful but calm) */
.sc-cat-chip.sc-cat-permanent           .sc-cat-dot { background: var(--color-primary); }
.sc-cat-chip.sc-cat-currently_available .sc-cat-dot { background: var(--color-accent); }
.sc-cat-chip.sc-cat-classroom_cabinet   .sc-cat-dot { background: var(--color-primary-light); }
.sc-cat-chip.sc-cat-game_closet         .sc-cat-dot { background: var(--color-accent-light); }
/* Active state: soft tinted fill in the category's color */
.sc-cat-chip.sc-on.sc-cat-permanent           { background: rgba(var(--color-primary-rgb), 0.10);       border-color: var(--color-primary);       color: var(--color-primary-dark); }
.sc-cat-chip.sc-on.sc-cat-currently_available { background: rgba(196, 74, 56, 0.10);                    border-color: var(--color-accent-dark);   color: var(--color-accent-dark); }
.sc-cat-chip.sc-on.sc-cat-classroom_cabinet   { background: rgba(var(--color-primary-light-rgb), 0.14); border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.sc-cat-chip.sc-on.sc-cat-game_closet         { background: rgba(var(--color-accent-light-rgb), 0.25); border-color: var(--color-accent-light);  color: var(--color-text); }
.sc-cat-chip.sc-off {
  opacity: 0.7;
  color: var(--color-text-light);
}
.sc-cat-chip.sc-off .sc-cat-dot {
  opacity: 0.45;
}
.sc-count {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}
.sc-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
/* .sc-empty is an alias of .empty-state-lg — kept so existing markup
   continues to work. New code should use .empty-state-lg. */
.sc-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.85rem;
}
.sc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.sc-row:last-child { border-bottom: none; }
.sc-row:hover      { background: rgba(var(--color-primary-rgb), 0.05); }
.sc-name {
  font-size: 0.9rem;
  font-weight: 600;
}
.sc-notes a,
.cl-notes a {
  color: #1a73e8;
  text-decoration: underline;
}
.sc-notes a:hover,
.cl-notes a:hover { text-decoration: none; }
.sc-loc {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 2px;
}
.sc-notes {
  font-size: 0.7rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: 2px;
}
.sc-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sc-badge-permanent           { background: var(--color-primary); }
.sc-badge-currently_available { background: var(--color-accent); }
.sc-badge-classroom_cabinet   { background: var(--color-primary-light); }
.sc-badge-game_closet         { background: var(--color-accent-light); color: var(--color-text); }
.sc-actions {
  display: flex;
  gap: 0.35rem;
}
.sc-btn {
  background: transparent;
  border: 1.5px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--color-text);
  font-family: inherit;
  transition: all var(--transition-fast);
}
.sc-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.sc-btn-del {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.sc-btn-del:hover {
  background: rgba(var(--color-accent-light-rgb), 0.15);
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}
.sc-edit-form {
  padding: 0.85rem;
  background: rgba(var(--color-primary-rgb), 0.05);
  border-bottom: 1px solid var(--color-border);
}
.sc-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.sc-edit-form input,
.sc-edit-form select {
  padding: 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
}
.sc-edit-form input:focus,
.sc-edit-form select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.sc-edit-form .sc-edit-notes {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.6rem;
}
.sc-edit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.sc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.sc-add {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  transition: background var(--transition-fast);
}
.sc-add:hover {
  background: var(--color-primary-dark);
}
.sc-locations-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
}
.sc-locations-label {
  font-weight: 600;
  color: var(--color-text-light);
  font-size: 0.72rem;
}
.sc-loc-chip {
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary-dark);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.72rem;
}
.sc-loc-none {
  color: var(--color-text-light);
  font-style: italic;
  background: transparent;
}
.sc-manage-locs-btn {
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
/* Location manager */
.sc-locs-list {
  margin: 0.75rem 0;
}
.sc-loc-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.sc-loc-row .sc-loc-name-input {
  flex: 1;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}
.sc-loc-row .sc-btn {
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}
.sc-loc-row .sc-loc-delete {
  background: var(--color-danger, #dc3545);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}
.sc-loc-add-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.75rem;
}
.sc-loc-add-row .sc-loc-new-input {
  flex: 1;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}
.sc-save {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 500;
}
.sc-save:hover {
  background: var(--color-primary-dark);
}
.sc-coord {
  font-size: 0.72rem;
  color: var(--color-text-light);
}
.sc-coord strong { color: var(--color-primary-dark); }

@media (max-width: 540px) {
  .sc-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .sc-actions { justify-content: flex-start; }
  .sc-edit-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Curriculum Library modal
   ========================================================================== */
.cl-modal {
  max-width: 860px;
  width: 100%;
}
.cl-modal h3 {
  margin: 0 0 0.25rem 0;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
}
.cl-modal .cl-intro {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin: 0 0 1rem 0;
}
.cl-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}
.cl-search {
  flex: 1 1 220px;
  padding: 9px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}
.cl-search:focus {
  outline: none;
  border-color: var(--color-primary);
}
.cl-create {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.cl-create:hover {
  background: var(--color-primary-dark);
}
.cl-count {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
/* .cl-empty is .empty-state-lg with a full-width grid span so it
   centers inside the curriculum-library grid. */
.cl-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.85rem;
  grid-column: 1 / -1;
}
.cl-card {
  text-align: left;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cl-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.cl-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  line-height: 1.25;
}
.cl-card-badges, .cl-detail-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cl-detail-badges { margin: 0.25rem 0 0.75rem; }
.cl-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.3;
}
.cl-badge-am   { background: #FDEBD1; color: #7A4E00; }
.cl-badge-pm   { background: #E1E4FB; color: #2E3A85; }
.cl-badge-both { background: #DEF1E2; color: #2E6B2E; }
.cl-badge-fav  { background: #FFF4C4; color: #6B5500; }
.cl-card-meta {
  font-size: 0.72rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cl-card-overview {
  font-size: 0.78rem;
  color: var(--color-text);
  line-height: 1.4;
  margin-top: 0.15rem;
}
.cl-card-author {
  font-size: 0.7rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: auto;
  padding-top: 0.35rem;
}

/* ---------- Detail view ---------- */
.cl-detail-header {
  margin-bottom: 0.5rem;
}
.cl-detail-actions-top {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.cl-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.cl-title-row h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
}
/* Reviewer-only favorite star sits inline with the curriculum title.
   White outline when not favorited → filled yellow when the kid-favorite
   flag is on. VP + PMA + super user only. */
.cl-fav-star {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--color-text-light);
  line-height: 0;
  border-radius: 6px;
  transition: color 0.15s, transform 0.15s, background 0.15s;
}
.cl-fav-star:hover {
  color: var(--color-accent);
  background: rgba(var(--color-accent-light-rgb), 0.35);
  transform: scale(1.05);
}
.cl-fav-star:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.cl-fav-star.is-fav {
  color: var(--color-accent);
}
.cl-fav-star.is-fav:hover {
  color: var(--color-accent-dark);
}
.cl-icon-btn {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.cl-icon-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.cl-back {
  background: transparent;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  padding: 4px 0;
  font-weight: 500;
}
.cl-back:hover { color: var(--color-primary-dark); text-decoration: underline; }

.cl-detail-meta {
  font-size: 0.78rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.cl-detail-author {
  font-size: 0.72rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: 0.75rem;
}
.cl-detail-overview {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.55;
  background: rgba(var(--color-primary-rgb), 0.05);
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  margin-bottom: 0.85rem;
}
.cl-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cl-tag {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary-dark);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.cl-lessons {
  margin-bottom: 1rem;
}
.cl-lesson {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--color-white);
}
.cl-lesson-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.15);
}
.cl-lesson-num {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cl-lesson-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
}
.cl-lesson-overview {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin: 0 0 0.6rem 0;
  font-style: italic;
  line-height: 1.4;
}
.cl-lesson-section {
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
}
.cl-lesson-section strong {
  display: block;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.cl-lesson-section ol,
.cl-lesson-section ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text);
}
.cl-lesson-section li {
  margin-bottom: 0.25rem;
  line-height: 1.45;
}
.cl-lesson-section a {
  color: var(--color-primary);
}
.cl-qty {
  color: var(--color-text-light);
  font-size: 0.75rem;
}
.cl-notes {
  color: var(--color-text-light);
  font-size: 0.75rem;
  font-style: italic;
}
.cl-detail-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.cl-action-btn {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.cl-action-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.cl-action-del {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.cl-action-del:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

/* ---------- Editor view ---------- */
.cl-prefill {
  margin-bottom: 1rem;
  padding: 0.85rem;
  background: rgba(var(--color-accent-light-rgb), 0.18);
  border: 1px dashed var(--color-accent-dark);
  border-radius: var(--radius-sm);
}
.cl-prefill .cl-label {
  color: var(--color-accent-dark);
}
.cl-prefill-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-light);
  font-size: 0.7rem;
  margin-left: 0.35rem;
  font-style: italic;
}
.cl-editor-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.85rem;
  background: rgba(var(--color-primary-rgb), 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.cl-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.cl-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cl-label-sm {
  font-size: 0.68rem;
  margin-top: 0.5rem;
}
.cl-input {
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.88rem;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cl-editor-row > .cl-label,
.cl-editor-meta > .cl-label {
  min-width: 0;
}
.cl-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.cl-textarea {
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}
.cl-editor-lessons {
  margin-bottom: 1rem;
}
.cl-lesson-edit {
  background: rgba(var(--color-primary-rgb), 0.02);
}
.cl-lesson-title-input {
  flex: 1;
  padding: 6px 10px;
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
}
.cl-dyn-section {
  margin: 0.6rem 0;
}
.cl-dyn-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  margin-bottom: 0.35rem;
}
.cl-dyn-empty {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-style: italic;
  padding: 0.25rem 0;
}
.cl-dyn-row,
.cl-supply-row,
.cl-link-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.cl-dyn-row {
  align-items: flex-start;
}
.cl-dyn-bullet {
  font-size: 0.82rem;
  color: var(--color-text-light);
  font-weight: 700;
  min-width: 1.5em;
  text-align: right;
  padding-top: 10px;
  flex: 0 0 auto;
  line-height: 1.3;
}
/* Bullets in the read-only detail view sit next to plain text, not textareas */
.cl-step-table-row .cl-dyn-bullet {
  padding-top: 0;
}
.cl-dyn-row .cl-input { flex: 1; }
.cl-dyn-textarea {
  min-height: 2.5em;
  line-height: 1.45;
}
.cl-supply-row .cl-supply-name   { flex: 2; }
.cl-supply-row .cl-supply-qty    { flex: 0.5; min-width: 50px; }
.cl-supply-row .cl-supply-unit   { flex: 0.8; min-width: 100px; }
.cl-supply-row .cl-supply-notes  { flex: 2; }
.cl-link-row .cl-link-label { flex: 1; }
.cl-link-row .cl-link-url   { flex: 2; }

/* Parallel Activity / Instruction step rows */
.cl-steps-headers,
.cl-steps-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 32px;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.cl-steps-row { align-items: start; }
.cl-steps-headers {
  align-items: end;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-border);
}
.cl-steps-headers .cl-dyn-label {
  margin: 0;
  padding: 0;
  text-align: left;
  align-self: end;
  line-height: 1.1;
  white-space: nowrap;
}
.cl-steps-headers .cl-dyn-bullet {
  min-width: 0;
  padding: 0;
  height: 1em;
}
.cl-steps-row .cl-dyn-bullet {
  min-width: 0;
  text-align: right;
  padding-right: 4px;
  padding-top: 10px;
}
.cl-steps-spacer { width: 32px; }
.cl-step-cell {
  min-height: 3.5em;
  line-height: 1.45;
}

/* Detail view step table */
.cl-steps-section {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}
.cl-step-table-title {
  color: var(--color-primary-dark);
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.cl-step-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cl-step-table-headers,
.cl-step-table-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
  gap: 0.75rem;
}
.cl-step-table-headers {
  align-items: end;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.4rem;
}
.cl-step-table-headers .cl-dyn-bullet {
  min-width: 0;
  padding: 0;
  height: 1em;
}
.cl-step-col-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  text-align: left;
  display: block;
  align-self: end;
  line-height: 1.1;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}
.cl-step-table-row {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.06);
}
.cl-step-table-row:last-child { border-bottom: none; }
.cl-step-table-row .cl-dyn-bullet {
  min-width: 0;
  text-align: right;
  padding-right: 4px;
  padding-top: 0;
}
.cl-step-table-row:last-child { border-bottom: none; }
.cl-step-cell-view {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
}
.cl-supply-list { padding-left: 1.25rem; }
.cl-loc-group { margin-bottom: 0.4rem; }
.cl-loc-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cl-loc-group .cl-supply-list { margin-top: 0; }
.cl-room-setup {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.5;
  white-space: pre-wrap;
}

.cl-master-supplies {
  background: rgba(var(--color-accent-light-rgb), 0.18);
  border: 1px solid var(--color-accent-dark);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  margin-bottom: 1rem;
}
.cl-master-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}
.cl-master-details summary::-webkit-details-marker { display: none; }
.cl-master-details summary::before {
  content: '▾';
  display: inline-block;
  font-size: 0.7rem;
  color: var(--color-accent-dark);
  transition: transform 0.15s;
}
.cl-master-details:not([open]) summary::before { transform: rotate(-90deg); }
.cl-master-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}
.cl-master-count {
  font-size: 0.72rem;
  color: var(--color-text-light);
  font-weight: 400;
}
.cl-master-sub {
  margin: 0.4rem 0 0.5rem 0;
  font-size: 0.72rem;
  color: var(--color-text-light);
  font-style: italic;
}
.cl-master-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 1.5rem;
}
.cl-master-item {
  font-size: 0.78rem;
  line-height: 1.45;
  margin-bottom: 0.2rem;
  color: var(--color-text);
  break-inside: avoid;
  padding: 1px 0;
}
.cl-master-name {
  font-weight: 600;
}
.cl-master-lessons {
  font-size: 0.7rem;
  color: var(--color-text-light);
  font-weight: 600;
}
.cl-master-item .cl-qty {
  font-size: 0.72rem;
  color: var(--color-text-light);
}
.cl-master-item .cl-notes {
  font-size: 0.7rem;
  color: var(--color-text-light);
  font-style: italic;
}
.cl-source-group {
  margin-bottom: 0.6rem;
}
.cl-source-heading {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin: 0.5rem 0 0.25rem 0;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(var(--color-accent-dark-rgb, 0,0,0), 0.25);
}
.cl-source-group:first-child .cl-source-heading {
  margin-top: 0;
}
.cl-source-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 0.2rem;
}
.cl-source-closet { background: #e0f2e9; color: #1a6b3c; }
.cl-supply-copy {
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  .cl-master-list { columns: 1; }
}

/* Curriculum printing happens in a separate window opened by
   printCurriculumInNewWindow() — see script.js. No @media print rules
   needed for the main page. */
.cl-dyn-remove {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-accent-dark);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}
.cl-dyn-remove:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.cl-dyn-add {
  background: transparent;
  border: 1.5px dashed var(--color-primary);
  color: var(--color-primary);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 0.35rem;
  transition: all var(--transition-fast);
}
.cl-dyn-add:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-style: solid;
}

@media (max-width: 640px) {
  .cl-grid { grid-template-columns: 1fr; }
  .cl-editor-row { grid-template-columns: 1fr; }
  .cl-supply-row,
  .cl-link-row { flex-wrap: wrap; }
  .cl-supply-row .cl-supply-name,
  .cl-supply-row .cl-supply-qty,
  .cl-supply-row .cl-supply-unit,
  .cl-supply-row .cl-supply-notes,
  .cl-link-row .cl-link-label,
  .cl-link-row .cl-link-url { flex: 1 1 100%; }
  .cl-steps-headers,
  .cl-steps-row,
  .cl-step-table-headers,
  .cl-step-table-row {
    grid-template-columns: 1fr;
  }
  .cl-steps-headers .cl-dyn-bullet,
  .cl-steps-spacer { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .navbar,
  .hero-bg-leaves,
  .cta-decor {
    display: none;
  }

  body {
    background: white;
    color: black;
  }
}

/* ═══════════════════════════════════════════════
   ABSENCE & COVERAGE SYSTEM
   ═══════════════════════════════════════════════ */

/* Notification bell badge */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--color-coral);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 3px;
  box-shadow: 0 0 0 2px var(--color-bg, #fff);
}

/* Bell button gets a soft red ring + gentle pulse while unread notifications
   exist, so users notice it without having to open the dropdown. */
.notif-bell-btn.has-unread {
  color: var(--color-coral);
  animation: notifBellPulse 2s ease-in-out infinite;
}
.notif-bell-btn.has-unread .notif-badge {
  animation: notifBadgePulse 1.6s ease-in-out infinite;
}
@keyframes notifBellPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(220, 53, 69, 0)); }
  50%      { filter: drop-shadow(0 0 4px rgba(220, 53, 69, 0.55)); }
}
@keyframes notifBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 0 rgba(220, 53, 69, 0.45); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 5px rgba(220, 53, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-bell-btn.has-unread,
  .notif-bell-btn.has-unread .notif-badge {
    animation: none;
  }
}

/* Notification dropdown */
.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
}
.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.notif-mark-all {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 0.72rem;
  font-family: inherit;
}
.notif-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.82rem;
}
.notif-item {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.notif-item:hover { background: rgba(var(--color-primary-rgb), 0.04); }
.notif-unread { background: rgba(var(--color-primary-rgb), 0.06); }
.notif-item-title { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.15rem; }
.notif-item-body { font-size: 0.72rem; color: var(--color-text-light); line-height: 1.35; }
.notif-item-time { font-size: 0.65rem; color: var(--color-text-light); margin-top: 0.2rem; }

/* Push notification alert — fixed above navbar */
.push-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: #d97706;
  color: #fff;
  padding: 0.5rem 0;
}
.dashboard.has-push-banner .portal-header {
  top: 38px;
}
.dashboard.has-push-banner {
  padding-top: calc(var(--portal-header-height, 148px) + 38px);
}
@media (max-width: 768px) {
  .dashboard.has-push-banner {
    padding-top: calc(var(--portal-header-height-mobile, 168px) + 38px);
  }
}
.push-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.push-banner-inner svg {
  color: #fff;
  flex-shrink: 0;
}
.push-banner-inner span {
  flex: 1;
}
.push-banner-inner .btn {
  background: #fff;
  color: var(--color-primary);
  border: none;
  font-weight: 700;
}
.push-banner-dismiss {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0 0.3rem;
}
.push-banner-dismiss:hover {
  color: #fff;
}

/* Coordination tab — highlight current user's assignments */
.coord-highlight {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}
.coord-my-row {
  background: rgba(var(--color-primary-rgb), 0.05) !important;
}
.coord-my-card {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
}

/* Full-width card in My Family grid */
.mf-card-full {
  grid-column: 1 / -1;
}

/* Collapsible coverage board */
.mf-coverage-details {
  cursor: default;
}
.mf-coverage-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mf-coverage-summary::-webkit-details-marker { display: none; }
.mf-coverage-summary::before {
  content: '\25BE';
  font-size: 1.5rem;
  color: var(--color-text);
  transition: transform 0.15s;
}
.mf-coverage-details:not([open]) .mf-coverage-summary::before {
  transform: rotate(-90deg);
}
.coverage-summary-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  margin-left: auto;
}
.coverage-summary-open {
  background: #fef3cd;
  color: #856404;
}
.coverage-summary-ok {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

/* Responsibility block sections */
.mf-block-section {
  margin-bottom: 1rem;
}
.mf-block-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
  padding: 6px 12px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  border-left: 3px solid var(--color-primary);
}
.mf-block-section:last-child {
  margin-bottom: 0;
}

/* "I'll Be Out" button */
.btn-absence {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem;
  background: transparent;
  border: 1.5px solid var(--color-accent-dark);
  color: var(--color-accent-dark);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-absence:hover {
  background: var(--color-accent-dark);
  color: #fff;
}

/* Absence modal overlay */
/* ── PM class submission modal (mirrors .absence-* pattern) ── */
.cls-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cls-modal {
  background: #fff;
  border-radius: var(--radius-md, 8px);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem;
  position: relative;
}
.cls-modal h3 {
  margin: 0 0 0.25rem 0;
  font-family: var(--font-heading);
}
.cls-field { margin-bottom: 1.1rem; }
.cls-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}
.cls-req { color: var(--color-coral); font-weight: 700; }
.cls-help {
  color: var(--color-text-light);
  font-size: 0.8rem;
  margin: 0 0 0.4rem 0;
}
.cls-input { width: 100%; }
.cls-textarea { width: 100%; font-family: inherit; resize: vertical; }
.cls-cb-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cls-cb-group.cls-cb-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cls-cb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-text);
}
.cls-cb-label input { margin: 0; }
.cls-error {
  background: #fdecec;
  border: 1px solid var(--color-coral);
  color: #8a2222;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.cls-inspire {
  background: #FFF9E3;
  border: 1px solid #F0D66B;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.cls-inspire-head { margin-bottom: 0.5rem; font-size: 0.95rem; }
.cls-inspire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.cls-inspire-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cls-inspire-card:hover {
  border-color: var(--color-accent-dark);
  box-shadow: var(--shadow-sm);
}
.cls-inspire-card strong {
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
}
.cls-inspire-meta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
}
.cls-inspire-desc {
  font-size: 0.8rem;
  color: var(--color-text);
  line-height: 1.35;
}
.cls-inspire-use {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
}
.cls-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 600px) {
  .cls-modal { padding: 1.1rem; }
}

/* ── My Family — PM class submissions card ── */
.mf-classsubs-card .mf-classsubs-row:last-child { margin-bottom: 0; }
.mf-classsubs-card .mf-classsubs-new-btn { margin-top: 0.25rem; }

/* ── Schedule Builder (VP + PM Assistant) ── */
/* ---------- Morning Class Builder (Membership Director) ---------- */
/* Reuses the .sb-overlay / .sb-panel modal shell. Two-pane layout: a left
   "unassigned" pool + a responsive grid of the nine age-group classes.
   Kid chips drag between them; counts + auto age range update live. */
.mcb-workflow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.mcb-workflow-note { color: var(--color-text-light); font-size: 0.9rem; }
.mcb-final-badge {
  display: inline-block;
  background: var(--color-leaf, #5a8f3c);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
}
.sc-btn.mcb-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.sc-btn.mcb-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.mcb-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 720px) {
  .mcb-layout { grid-template-columns: 1fr; }
}
.mcb-pool, .mcb-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-cream, #faf8f3);
  display: flex;
  flex-direction: column;
  min-height: 70px;
}
.mcb-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.mcb-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-border);
}
.mcb-group-name { display: inline-flex; align-items: center; gap: 4px; }
.mcb-count {
  min-width: 22px;
  text-align: center;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.8rem;
}
.mcb-count.mcb-count-big { background: #f6c6c0; color: #8a2a1c; }
.mcb-count.mcb-count-small { background: #fde6b8; color: #875a0a; }
.mcb-group-range {
  padding: 4px 10px 0;
  font-size: 0.75rem;
  color: var(--color-text-light);
}
.mcb-range-default { opacity: 0.7; font-style: italic; }
.mcb-col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 40px;
}
.mcb-kid {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: grab;
}
.mcb-kid[draggable="true"]:active { cursor: grabbing; }
.mcb-kid-name { font-weight: 600; }
.mcb-kid-age { color: var(--color-text-light); font-size: 0.75rem; margin-left: auto; }
.mcb-flag { cursor: help; font-size: 0.8rem; }
.mcb-dragging { opacity: 0.45; }
.mcb-dropover { outline: 2px dashed var(--color-primary); outline-offset: -3px; }
/* Finalized (locked) kid chips: not draggable, visually settled. */
.mcb-kid-locked {
  cursor: default;
  background: var(--color-cream, #faf8f3);
  border-style: dashed;
  opacity: 0.85;
}
/* Pending (unpaid) kids: placed/draggable like any other, just visually
   flagged — a soft amber tint + dashed border + ⏳ marker so Membership
   knows payment hasn't landed. (Locked still overrides cursor.) */
.mcb-kid-pending {
  border-style: dashed;
  border-color: #d9a441;
  background: repeating-linear-gradient(
    45deg, #fffaf0, #fffaf0 7px,
    rgba(217, 164, 65, 0.10) 7px, rgba(217, 164, 65, 0.10) 14px);
}
/* First-year family: a green chip outline so new members read at a glance,
   echoing the Directory's green card outline. outline (not border) so it
   layers over the pending amber/dashed border without fighting it. */
.mcb-kid-new { outline: 2.5px solid var(--color-chartreuse, #9BC431); outline-offset: -1px; }
.mcb-flag-new { cursor: default; }
.mcb-legend {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--color-text-light);
  line-height: 1.5;
}
.mcb-legend-swatch {
  display: inline-block;
  width: 22px;
  height: 13px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px dashed #d9a441;
  background: repeating-linear-gradient(
    45deg, #fffaf0, #fffaf0 5px,
    rgba(217, 164, 65, 0.12) 5px, rgba(217, 164, 65, 0.12) 10px);
}
.mcb-legend-swatch-new {
  border: 2.5px solid var(--color-chartreuse, #9BC431);
  background: #fff;
  box-shadow: none;
}

/* ── AM Teaching view (Morning Class Builder, Phase B1) ── */
.mcb-viewtoggle { display: inline-flex; gap: 0; margin: 0 0 14px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.mcb-vt-btn {
  border: 0; background: var(--color-white); color: var(--color-text);
  padding: 6px 16px; font: inherit; font-weight: 600; font-size: 0.86rem; cursor: pointer;
}
.mcb-vt-btn + .mcb-vt-btn { border-left: 1px solid var(--color-border); }
.mcb-vt-on { background: var(--color-primary); color: #fff; }
.mcb-teach-wrap { overflow-x: auto; }
.mcb-teach { border-collapse: collapse; width: 100%; min-width: 540px; }
.mcb-teach th, .mcb-teach td { border: 1px solid var(--color-border); padding: 6px 8px; text-align: left; vertical-align: top; }
.mcb-teach thead th { background: rgba(var(--color-primary-rgb), 0.06); font-size: 0.78rem; text-align: center; }
.mcb-teach-grp { white-space: nowrap; font-weight: 700; color: var(--color-primary-dark); background: rgba(var(--color-primary-rgb), 0.03); }
.mcb-teach-cell { min-width: 88px; }
.mcb-teach-edit { cursor: pointer; }
.mcb-teach-edit:hover { background: rgba(var(--color-primary-rgb), 0.08); }
.mcb-teach-lead { display: block; font-weight: 600; font-size: 0.84rem; color: var(--color-text); }
.mcb-teach-empty { color: var(--color-text-light); font-size: 0.82rem; }
.mcb-teach-assists { display: block; font-size: 0.72rem; color: var(--color-text-light); margin-top: 2px; }
.mcb-cell-panel { max-width: 420px; padding: 22px; }
.mcb-cell-lbl { display: block; font-weight: 600; font-size: 0.82rem; margin: 12px 0 4px; color: var(--color-primary-dark); }
.mcb-assist-input { margin-bottom: 6px; }
.mcb-cell-actions { display: flex; gap: 8px; margin-top: 16px; }

/* PM Schedule Builder helper inputs (Phase B2) — stacked member pickers. */
.sbEditHelper { margin-bottom: 6px; }

/* ── Special Events manager (Phase B3) ── */
.se-list { display: grid; gap: 14px; }
.se-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; background: var(--color-white); }
.se-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.se-name { font-weight: 700; font-size: 1rem; color: var(--color-primary-dark); }
.se-status { font-size: 0.74rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.se-status-proposed { background: rgba(217, 164, 65, 0.18); color: #9a6a12; }
.se-status-approved { background: rgba(90, 158, 99, 0.18); color: #2e7d32; }
.se-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.se-lbl { font-size: 0.78rem; font-weight: 600; color: var(--color-primary-dark); width: 100%; }
.se-date { width: auto; }
.se-lead { width: 100%; }
.se-assists { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
@media (max-width: 540px) { .se-assists { grid-template-columns: 1fr; } }
.se-note { font-size: 0.76rem; color: var(--color-text-light); margin: 0 0 8px; }
.se-people-save { margin-top: 4px; }

.sb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1rem;
}
.sb-panel {
  background: #fff;
  border-radius: var(--radius-md, 8px);
  width: 100%;
  max-width: 1100px;
  max-height: 95vh;
  overflow-y: auto;
  padding: 1rem 1.5rem 1.5rem;
  position: relative;
}
.sb-panel-picker, .sb-panel-edit { max-width: 720px; }
.sb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-right: 2rem;
  margin-bottom: 0.75rem;
}
.sb-year-label {
  font-size: 0.85rem;
  color: var(--color-text-light);
}
.sb-grid {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.sb-grid-head {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  padding: 6px 10px;
  border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.15);
}
.sb-grid-rowhead {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-border);
}
.sb-grid-rowhead-groups {
  color: var(--color-text-light);
  font-size: 0.75rem;
  margin-top: 2px;
}
.sb-cell {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
.sb-cell-head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-text-light);
}
.sb-cell-marker { font-size: 1rem; line-height: 1; }
.sb-cell-class {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.sb-cell-class:hover { box-shadow: var(--shadow-sm); border-color: var(--color-primary-light); }
.sb-cell-class-teacher {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 1px;
}
.sb-both-badge, .sb-draft-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 4px;
}
.sb-both-badge { background: #F0E4FF; color: #4a2d7a; }
.sb-draft-badge { background: #E1F0FF; color: #0A4A85; }
.sb-cell-add {
  background: transparent;
  border: 1px dashed rgba(var(--color-primary-rgb), 0.35);
  color: var(--color-primary);
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-top: auto;
}
.sb-cell-add:hover { background: rgba(var(--color-primary-rgb), 0.08); }
.sb-inbox-note {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-text);
}
/* Drag-and-drop palette of available submissions + slot drop states. */
.sb-palette {
  margin-top: 16px;
  border-top: 2px solid var(--color-border);
  padding-top: 12px;
}
.sb-palette-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}
.sb-palette-empty { font-size: 0.85rem; color: var(--color-text-light); font-style: italic; }
.sb-palette-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.sb-palette-card {
  flex: 0 0 200px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  cursor: grab;
}
.sb-palette-card:active { cursor: grabbing; }
.sb-palette-card strong { font-size: 0.86rem; color: var(--color-text); }
.sb-palette-card-meta { font-size: 0.74rem; color: var(--color-text-light); margin-top: 2px; }
.sb-palette-drop {
  background: rgba(var(--color-primary-rgb), 0.06);
  outline: 2px dashed var(--color-primary);
  outline-offset: 4px;
  border-radius: 8px;
}
.sb-cell-class { cursor: grab; }
.sb-cell-class:active { cursor: grabbing; }
.sb-cell-drop {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
  background: rgba(var(--color-primary-rgb), 0.1);
}
.sb-dragging { opacity: 0.45; }
/* Open-block grid: just PM1 + PM2 columns (no preset age-section rows).
   Higher specificity than .sb-grid so it wins regardless of source order. */
.sb-grid.sb-grid-open { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) {
  .sb-grid.sb-grid-open { grid-template-columns: 1fr; }
}
/* Session workflow bar at the top of the grid (counts + Approve Session). */
.sb-workflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: 8px;
}
.sb-workflow-counts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Card top row: ages pill (lead) + status chip + "Both" badge, all inline. */
.sb-class-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.sb-class-ages {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 10px;
  border-radius: 8px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}
.sb-class-name { font-weight: 600; font-size: 0.92rem; color: var(--color-text); line-height: 1.25; }
/* Age groups as colored words (replaces the old purple .sb-class-ages pill).
   Color comes from the .ag-name spans inside; this just sets size/weight. */
.sb-class-ages-words { font-size: 0.72rem; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
/* Co-leader request from the class submission (co_teachers free text). */
.sb-coleader { font-size: 0.7rem; color: var(--color-text-light); line-height: 1.3; margin-top: 2px; }
.sb-status-chip {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.sb-status-submitted { background: #eee; color: #555; }
.sb-status-drafted   { background: #fce9cf; color: #8a5a16; }   /* labeled "Approved" in UI */
.sb-status-scheduled { background: #dff0e0; color: #256b3f; }
.sb-status-declined  { background: #f5cccc; color: #8a2222; }
.sb-status-withdrawn { background: #eee; color: #777; }
/* Docked side palette (left) + grid (right) so available classes stay in view
   while dragging onto slots. The sidebar sticks within the scrolling body. */
.sb-layout { display: flex; gap: 16px; align-items: flex-start; }
.sb-main { flex: 1; min-width: 0; }
.sb-side {
  flex: 0 0 232px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 74vh;
  overflow-y: auto;
}
.sb-side .sb-palette { margin-top: 0; border-top: none; padding-top: 0; }
.sb-side .sb-palette-cards { flex-direction: column; overflow-x: visible; gap: 8px; }
.sb-side .sb-palette-card { flex: 0 0 auto; width: auto; }
.sb-palette-hint { font-size: 0.72rem; color: var(--color-text-light); margin-bottom: 8px; }
.sb-palette-card-sessions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sb-sess-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--color-border);
  color: var(--color-text-light);
}
.sb-sess-match { background: var(--color-primary); color: #fff; }   /* session being built */
.sb-sess-flex { background: #dff0e0; color: #256b3f; }
.sb-sess-none { background: transparent; font-weight: 500; font-style: italic; }
/* Preference summary on placed-class tiles. Stays muted so the scheduled
   info reads first; the ⚠ marker pulls the eye when placement is off-pref. */
.sb-pref-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
  font-size: 0.7rem;
  color: var(--color-text-light);
}
.sb-pref-label { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.sb-pref-hour {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--color-border);
  color: var(--color-text-light);
}
.sb-pref-hour.sb-pref-off { background: #fce9cf; color: #8a5a16; }
.sb-pref-ages { font-style: italic; }
.sb-pref-warn { color: #8a5a16; font-weight: 700; cursor: help; }
/* Editor modal: "Preferred" read-only block above the editable "Scheduled"
   fields so it's obvious which placement values are the teacher's request
   vs. the VP's call. */
.sb-pref-block {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f6f5f1;
  border-left: 3px solid var(--color-primary-light, var(--color-primary));
}
.sb-pref-block-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  font-weight: 700;
  margin-bottom: 6px;
}
.sb-pref-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0;
  font-size: 0.85rem;
}
.sb-pref-grid dt { color: var(--color-text-light); font-weight: 600; }
.sb-pref-grid dd { margin: 0; color: var(--color-text); }
.sb-sched-block-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  font-weight: 700;
  margin: 0 0 8px;
}
/* Session approval lock. Approved badge shows in the workflow bar; placed-
   class tiles get a subtle locked outline, and the grid loses hover affordances
   so users intuit it's read-only. The Edit modal still opens (for viewing
   details) — its callout calls out the lock + how to reopen. */
.sb-approved-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dff0e0;
  color: #256b3f;
  font-size: 0.8rem;
  font-weight: 700;
}
.sb-grid-locked .sb-cell { background: #fafaf6; }
.sb-cell-class-locked { cursor: pointer; border-style: dashed; opacity: 0.92; }
.sb-cell-class-locked:hover { box-shadow: none; }
.sb-locked-callout {
  background: #fff7e0;
  border-left: 3px solid #d6a93e;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #6b4f0e;
  margin: 0 0 12px;
}
/* Open Sign-Ups panel — appears under the Approved badge so the VP can set
   the date range that drives the parent My Family widget visibility. */
.sb-signup-panel {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f0e8ff;
  border-left: 3px solid var(--color-primary);
}
.sb-signup-panel-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 6px;
}
.sb-signup-panel-state { font-size: 0.88rem; color: var(--color-text); margin-bottom: 8px; }
.sb-signup-panel-state-open { color: #256b3f; }
.sb-signup-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sb-signup-edit-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.sb-signup-edit-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-light);
}
.sb-signup-edit-row input[type="date"] {
  margin-top: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  font-family: inherit;
}
.sb-signup-error { margin-top: 8px; }
@media (max-width: 820px) {
  .sb-layout { flex-direction: column; }
  .sb-side { position: static; flex: none; width: 100%; max-height: none; }
  .sb-side .sb-palette-cards { flex-direction: row; overflow-x: auto; }
  .sb-side .sb-palette-card { flex: 0 0 200px; }
}
.sb-pick-section-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  margin: 0 0 0.5rem;
}
.sb-pick-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.sb-pick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sb-pick-row-main { flex: 1; min-width: 0; }
.sb-pick-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 2px;
}
.sb-pick-row-desc {
  font-size: 0.85rem;
  color: var(--color-text);
  margin: 4px 0 0;
}
.sb-pick-row-actions { flex-shrink: 0; }

@media (max-width: 780px) {
  .sb-panel { padding: 1rem; }
  .sb-grid { grid-template-columns: 1fr; }
  .sb-grid-head:first-child, .sb-grid-rowhead { display: none; }
  .sb-grid-head { text-align: left; }
  .sb-cell { min-height: auto; }
  .sb-cell::before {
    content: attr(data-section) " · " attr(data-hour);
    display: block;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 4px;
  }
  .sb-pick-row { flex-direction: column; align-items: stretch; }
  .sb-pick-row-actions { align-self: flex-end; }
}

.absence-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.absence-modal {
  background: #fff;
  border-radius: var(--radius-md, 8px);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
}
.absence-modal h3 {
  margin: 0 0 1rem 0;
  font-family: var(--font-heading);
}
.absence-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.absence-field {
  margin-bottom: 1rem;
}
.absence-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}
.absence-dates {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.absence-date-btn {
  padding: 0.4rem 0.7rem;
  border: 1.5px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.absence-date-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.absence-date-btn:hover:not(.active) {
  border-color: var(--color-primary);
}
.absence-blocks {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.absence-block-label {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.absence-preview {
  background: rgba(var(--color-primary-rgb), 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  min-height: 2.5rem;
}
.absence-no-slots {
  font-size: 0.78rem;
  color: var(--color-text-light);
}
.absence-slot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.absence-slot-list li {
  font-size: 0.78rem;
  padding: 0.2rem 0;
}
.absence-slot-block {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.absence-submit {
  width: 100%;
  margin-top: 0.5rem;
}

/* Coverage board */
.coverage-intro {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin: 0 0 0.75rem 0;
}
.coverage-tab-nav {
  margin-bottom: 0;
}
.coverage-tab-badge {
  display: inline-block;
  background: #d97706;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.coverage-panel {
  display: none;
  padding-top: 0.75rem;
}
.coverage-panel.active {
  display: block;
}
.coverage-empty {
  color: var(--color-text-light);
  font-size: 0.82rem;
  font-style: italic;
  padding: 1rem 0;
}
.coverage-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #d97706;
  margin-bottom: 0.35rem;
}
.coverage-open-section {
  margin-bottom: 0.75rem;
}
.coverage-all-covered {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.75rem 0;
}
.coverage-details {
  border-top: 1px solid var(--color-border);
  margin-top: 0.25rem;
}
.coverage-details-toggle {
  font-size: 0.78rem;
  color: var(--color-text-light);
  cursor: pointer;
  padding: 0.5rem 0;
  font-weight: 600;
}
.coverage-details-toggle:hover {
  color: var(--color-primary);
}
.coverage-slot-for {
  color: var(--color-text-light);
  font-size: 0.72rem;
}
.coverage-slot-uncovered {
  font-size: 0.72rem;
  color: #d97706;
  font-weight: 600;
  white-space: nowrap;
}

/* =============================================================
   Unified message / note family
   -------------------------------------------------------------
   One set of tinted callout styles for inline status messages,
   row notes, coverage notes, billing feedback, etc. Use .note as
   the base and pair it with a semantic modifier. Legacy class
   names (.cov-note, .mf-billing-success, .mf-billing-error) are
   kept as aliases via comma selectors so call sites don't have
   to change.

   .note           base inline callout (default neutral tint)
   .note-ok        success / covered / paid (primary-green tint)
   .note-warn      attention / open slot / past due (amber tint)
   .note-error     failure / error / blocker (red tint)
   ============================================================= */
.note,
.cov-note {
  display: block;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.25rem;
  border-radius: 3px;
  line-height: 1.4;
  color: var(--color-text);
}
.note-ok,
.cov-note-ok {
  background: rgba(var(--color-primary-rgb), 0.06);
  color: var(--color-text);
}
.note-warn,
.cov-note-open {
  background: #fef3cd;
  color: #856404;
}
.note-error {
  background: rgba(220, 53, 69, 0.06);
  color: var(--color-coral);
}

/* Billing feedback (.mf-billing-success, .mf-billing-error) is a
   heavier block-level variant of .note-ok / .note-error with more
   padding + a border. Defined in the billing card section above. */

/* Coverage notes in responsibilities card */
.coverage-notes-area {
  margin-top: 0.5rem;
}

/* Class-curriculum link buttons in responsibilities */
.mf-duty-link-area {
  margin-top: 0.2rem;
}
.mf-link-btn {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.mf-link-view {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.mf-link-view:hover {
  background: var(--color-primary);
  color: #fff;
}
.mf-link-classpack {
  color: #855c1b;
  border-color: #d4a84b;
  background: rgba(212, 168, 75, 0.08);
}
.mf-link-classpack:hover {
  background: #d4a84b;
  color: #fff;
  border-color: #d4a84b;
}
.mf-link-attach {
  color: var(--color-text-light);
  border-style: dashed;
}
.mf-link-attach:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Attach picker modal */
.attach-picker-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.attach-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  transition: background var(--transition-fast);
}
.attach-picker-item:hover {
  background: rgba(var(--color-primary-rgb), 0.05);
}
.attach-picker-item:last-child { border-bottom: none; }
.attach-picker-subject {
  font-size: 0.72rem;
  color: var(--color-text-light);
}
.attach-picker-meta {
  font-size: 0.7rem;
  color: var(--color-text-light);
}

/* My absences section */
.my-absences {
  margin-top: 0.25rem;
}
.my-absence-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "info actions"
    "slots slots";
  align-items: start;
  column-gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.my-absence-row:last-child { border-bottom: none; }
.my-absence-info {
  grid-area: info;
  min-width: 0;
  font-size: 0.82rem;
}
.my-absence-detail {
  font-size: 0.72rem;
  color: var(--color-text-light);
  margin-top: 0.1rem;
}
.my-absence-actions {
  grid-area: actions;
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
  align-self: start;
}
.my-absence-slots {
  grid-area: slots;
  list-style: none;
  margin: 0.35rem 0 0 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  width: 100%;
}
.my-absence-slot {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-top: 0.2rem;
}
.my-absence-slot-ok {
  background: rgba(var(--color-teal-rgb), 0.1);
  color: var(--color-text);
}
.my-absence-slot-open {
  background: rgba(var(--color-coral-rgb), 0.1);
  color: var(--color-text);
}
.coverage-absence {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.coverage-absence:last-child { border-bottom: none; }
.coverage-person {
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.coverage-person-note {
  color: var(--color-text-light);
  font-size: 0.78rem;
}
.coverage-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  padding-left: 0.5rem;
  border-left: 3px solid transparent;
  margin-bottom: 0.2rem;
}
.coverage-slot-open { border-left-color: #ffc107; }
.coverage-slot-covered { border-left-color: var(--color-primary); }
.coverage-slot-block {
  display: inline-block;
  background: #e9ecef;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
}
.coverage-slot-desc {
  font-size: 0.78rem;
  flex: 1;
}
.coverage-slot-claimer {
  font-size: 0.72rem;
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}
.btn-cover {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-cover:hover { background: var(--color-primary-dark); }

/* VP-only "Assign…" and "Reassign" on a coverage slot. Share the tight
   footprint of .btn-cover but use an outline treatment so they read as
   secondary next to the primary volunteer button. */
.btn-assign,
.btn-reassign {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transform: none;
}
.btn-assign:hover,
.btn-reassign:hover {
  background: var(--color-primary);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* Coverage — "Covered" section (who is covering whose role) */
.coverage-covered-section { margin-bottom: 0.75rem; }
.coverage-section-label-ok { color: var(--color-primary); }

/* Wrap multiple action buttons on a coverage slot */
.coverage-slot-actions {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}

/* Link-style button used for low-emphasis actions (e.g. VP Unassign) */
.btn-link {
  background: transparent;
  border: none;
  color: var(--color-text-light);
  padding: 0.3rem 0.4rem;
  font-size: 0.72rem;
  font-family: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--color-primary); }

/* Assign-coverage modal subtitle */
.assign-coverage-slot {
  margin: 0 0 1rem 0;
  color: var(--color-text-light);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .notif-dropdown { width: 280px; right: -20px; }
  .absence-modal { padding: 1rem; }
  .coverage-slot { flex-wrap: wrap; }
  .coverage-slot-actions { width: 100%; justify-content: flex-end; margin-top: 0.35rem; }
}

/* ── Cleaning Coordinator Edit UI ── */
.cle-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--color-border);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--color-text);
  transition: all var(--transition-fast);
  margin-bottom: 16px;
}
.cle-edit-toggle:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.cle-edit-toggle svg { opacity: 0.6; }

.cle-liaison-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--color-text-light);
}
.cle-liaison-row label { font-weight: 600; }

.cle-input {
  padding: 5px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
}
.cle-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.cle-btn {
  background: transparent;
  border: 1.5px solid var(--color-border);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
  color: var(--color-text);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.cle-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.cle-btn-save {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.cle-btn-save:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.cle-family-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}
.cle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary-dark);
  padding: 3px 8px 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}
.cle-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  transition: color var(--transition-fast);
}
.cle-chip-x:hover { color: var(--color-accent-dark); }

.cle-add-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.cle-add-input { flex: 1; min-width: 0; }

.cle-tasks-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-primary);
  font-family: inherit;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.cle-tasks-toggle:hover { color: var(--color-primary-dark); }

.cle-tasks-editor {
  margin-top: 8px;
  padding: 10px;
  background: rgba(var(--color-primary-rgb), 0.04);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.cle-task-list { display: flex; flex-direction: column; gap: 6px; }
.cle-task-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.cle-task-input {
  flex: 1;
  min-height: 36px;
  padding: 6px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-white);
  resize: vertical;
}
.cle-task-input:focus { outline: none; border-color: var(--color-primary); }
.cle-task-row .cle-chip-x {
  margin-top: 6px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.cle-task-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

.cle-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: rgba(var(--color-primary-rgb), 0.04);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-light);
}
.cle-copy-row select { max-width: 140px; }

@media (max-width: 480px) {
  .cle-liaison-row { flex-wrap: wrap; }
  .cle-copy-row { flex-wrap: wrap; }
  .cle-add-row { flex-wrap: wrap; }
}

/* ── Manage Button on Duty Rows ── */
.mf-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: rgba(var(--color-primary-rgb), 0.08);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.25);
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.72rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--color-primary-dark);
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.mf-manage-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  border-color: var(--color-primary);
}
.mf-manage-btn svg { opacity: 0.7; }

/* ── Cleaning Management Modal ── */
.cle-modal-session-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}
.cle-modal-session-row label { font-weight: 600; margin-right: 4px; }
.cle-sess-btn {
  background: transparent;
  border: 1.5px solid var(--color-border);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--color-text);
  transition: all var(--transition-fast);
}
.cle-sess-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.cle-sess-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.cle-sess-active:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.clm-floor-section {
  margin-bottom: 16px;
}
.clm-floor-section h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.15);
}
.clm-area {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.clm-area:last-child { border-bottom: none; }
.clm-area-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.clm-area-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* ── View As Family Switcher ── */
.view-as-bar {
  margin-bottom: 16px;
  grid-column: 1 / -1;
}
.view-as-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(var(--color-accent-light-rgb, 255, 193, 7), 0.15);
  border: 1.5px solid rgba(var(--color-accent-light-rgb, 255, 193, 7), 0.4);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 8px;
}
.view-as-banner svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.view-as-reset {
  margin-left: auto;
  background: transparent;
  border: 1.5px solid var(--color-border);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
  color: var(--color-text);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.view-as-reset:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
}
.view-as-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-light);
}
.view-as-picker label {
  font-weight: 600;
  white-space: nowrap;
}
.view-as-select {
  flex: 1;
  max-width: 300px;
  padding: 5px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
}
.view-as-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
@media (max-width: 480px) {
  .view-as-picker { flex-wrap: wrap; }
  .view-as-select { max-width: 100%; }
}

/* ── Role Description Info Button & Modal ── */
.rd-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.25);
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: all var(--transition-fast);
  padding: 0;
}
.rd-info-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.rd-role-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.rd-role-link:hover {
  color: var(--color-primary-dark);
  text-decoration-style: solid;
}
.cleaning-area-link {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cleaning-area-link:hover {
  text-decoration-style: solid;
}
.rd-section {
  margin-top: 1rem;
}
.rd-section-divider {
  border-top: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.rd-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
/* Committee roster inside a board chair's Role Details popup. A clean
   equal-width 2-col grid with no per-item rule lines (the .elective-teacher
   bottom border is meant for a vertical list and looked misaligned here). */
.rd-committee-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 8px;
}
.committee-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin: 8px 0 4px;
}
.committee-roster .elective-teacher {
  border-bottom: none;
  margin-bottom: 0;
  padding: 8px 0;
}
@media (max-width: 520px) {
  .committee-roster { grid-template-columns: 1fr; }
}
.rd-info-icon {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.rd-modal { padding-bottom: 0.5rem; }
.rd-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--color-text);
}
.rd-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rd-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary-dark);
}
.rd-overview {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 12px;
}
.rd-section-title {
  font-size: 0.9rem;
  margin: 0 0 8px;
  color: var(--color-text);
}
.rd-duties {
  margin: 0 0 12px;
  padding-left: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text);
  list-style: disc;
}
.rd-duties li {
  margin-bottom: 6px;
  padding-left: 4px;
}
.rd-duties li::marker {
  color: var(--color-primary);
}
.rd-footer {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin: 8px 0 0;
  font-style: italic;
}
.rd-edit-btn { margin-top: 12px; }
.rd-playbook {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  background: #faf8fc;
  padding: 14px 16px;
  border-radius: 6px;
  margin: 8px 0 12px 0;
  max-height: 480px;
  overflow-y: auto;
  border-left: 3px solid var(--color-primary);
}
.rd-playbook a { color: var(--color-primary); word-break: break-word; }
.rd-playbook p { margin: 0 0 10px 0; }
.rd-playbook p:last-child { margin-bottom: 0; }
.rd-playbook h2, .rd-playbook h3, .rd-playbook h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 14px 0 6px 0;
}
.rd-playbook h2 { font-size: 1.1rem; }
.rd-playbook h3 { font-size: 1rem; }
.rd-playbook h4 { font-size: 0.95rem; }
.rd-playbook ul, .rd-playbook ol { margin: 0 0 10px 24px; }
.rd-playbook li { margin-bottom: 4px; }
.rd-playbook blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 8px 0;
  padding: 2px 0 2px 12px;
  color: var(--color-text-light);
  font-style: italic;
}
.rd-playbook-edit {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  min-height: 300px;
}

/* Quill rich-text editor for the playbook — match site typography + shell */
.rd-playbook-editor-wrap { margin-bottom: 12px; }
.rd-playbook-editor-wrap .ql-toolbar.ql-snow,
.rd-playbook-editor-wrap .ql-container.ql-snow {
  border-color: var(--color-border);
}
.rd-playbook-editor-wrap .ql-toolbar.ql-snow {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  background: var(--color-cream);
}
.rd-playbook-editor-wrap .ql-container.ql-snow {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  min-height: 260px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}
.rd-playbook-editor-wrap .ql-editor {
  min-height: 260px;
}
.rd-playbook-editor-wrap .ql-editor h2,
.rd-playbook-editor-wrap .ql-editor h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
}
.rd-playbook-editor-wrap .ql-editor a {
  color: var(--color-primary);
}
.rd-hint {
  margin: 2px 0 6px 0;
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
}
.rd-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin: 10px 0 4px;
}
.rd-textarea,
.rd-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 8px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text);
  box-sizing: border-box;
}
.rd-textarea:focus,
.rd-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.rd-textarea {
  resize: vertical;
  min-height: 60px;
}
.rd-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.rd-save-btn {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
}
.rd-save-btn:hover { opacity: 0.9; }
.rd-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rd-cancel-btn {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
}
.rd-cancel-btn:hover { background: var(--color-border); }

/* ── Supply closet: location filter select (lives in .sc-controls) ── */
.sc-loc-select {
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
  max-width: 180px;
}
.sc-loc-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.sc-controls .sc-manage-locs-btn {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .sc-controls {
    gap: 0.4rem;
  }
  .sc-loc-select,
  .sc-sort {
    flex: 1 1 140px;
    max-width: none;
  }
  .sc-controls .sc-manage-locs-btn {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

/* ── Supply closet: flag indicator + flag button ── */
.sc-row.sc-flagged {
  border-left: 3px solid #e07a2a;
  background: rgba(224, 122, 42, 0.05);
}
.sc-flag-indicator {
  display: inline-block;
  margin-left: 0.4rem;
  background: #e07a2a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.sc-btn.sc-flag-btn {
  background: #fff4e8;
  color: #a5531a;
  border-color: #e8c6a4;
}
.sc-btn.sc-flag-btn:hover:not(:disabled) {
  background: #e07a2a;
  color: #fff;
  border-color: #e07a2a;
}
.sc-btn.sc-unflag-btn {
  background: #eaf5ea;
  color: #2e6a2e;
  border-color: #bcd9bc;
}
.sc-btn.sc-unflag-btn:hover:not(:disabled) {
  background: #2e6a2e;
  color: #fff;
  border-color: #2e6a2e;
}

/* ── Supply closet: toast ── */
.sc-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: #2d3a4a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 10000;
  pointer-events: none;
}
.sc-toast.sc-toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Supply closet: coordinator quantity segmented control ── */
.sc-qty-seg {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-white);
  height: 28px;
}
.sc-qty-seg[data-busy="1"] { opacity: 0.6; }
.sc-qty-opt {
  border: none;
  background: transparent;
  color: var(--color-text-light);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-right: 1px solid var(--color-border);
}
.sc-qty-opt:last-child { border-right: none; }
.sc-qty-opt:hover:not(:disabled) { background: rgba(0,0,0,0.04); color: var(--color-text); }
.sc-qty-opt:disabled { cursor: not-allowed; }
.sc-qty-opt.sc-qty-active { color: #fff; }
.sc-qty-opt.sc-qty-empty.sc-qty-active  { background: var(--color-coral); }
.sc-qty-opt.sc-qty-low.sc-qty-active    { background: #e07a2a; }
.sc-qty-opt.sc-qty-medium.sc-qty-active { background: #b89400; }
.sc-qty-opt.sc-qty-high.sc-qty-active   { background: #2e6a2e; }

/* ── Supply closet: section headers for flagged vs rest ── */
.sc-section-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px 6px;
  background: var(--color-bg, #faf7f2);
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border);
}
.sc-section-flagged {
  background: rgba(224, 122, 42, 0.1);
  color: #a5531a;
}
.sc-section-rest {
  margin-top: 18px;
  padding-top: 14px;
}

/* ── Curriculum lesson: low/empty-stock pill beside supply names ── */
.cl-sup-flag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
  color: #fff;
}
.cl-sup-flag-low   { background: #e07a2a; }
.cl-sup-flag-empty { background: var(--color-coral); }
.cl-supply-lowstock { background: rgba(224, 122, 42, 0.06); border-radius: 4px; padding: 1px 4px; }
@media print {
  .cl-sup-flag { color: #000; background: transparent !important; border: 1px solid #000; }
  .cl-supply-lowstock { background: transparent !important; }
}

/* ── Directory detail: person's AM / PM1 / PM2 schedule ── */
.detail-day-schedule {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg, #faf7f2);
}
.pds-title {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pds-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-light);
  font-style: italic;
}
.pds-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--color-border);
}
.pds-row:first-of-type { border-top: none; }
.pds-row-empty { opacity: 0.6; }
.pds-block {
  display: flex;
  flex-direction: column;
}
.pds-block-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-dark, var(--color-primary));
  letter-spacing: 0.04em;
}
.pds-block-time {
  font-size: 0.7rem;
  color: var(--color-text-light);
}
.pds-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pds-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.pds-label { font-weight: 600; color: var(--color-text); }
.pds-detail { font-size: 0.75rem; color: var(--color-text-light); }
.pds-empty { font-size: 0.8rem; color: var(--color-text-light); font-style: italic; }
@media (max-width: 480px) {
  .pds-row { grid-template-columns: 70px 1fr; gap: 0.5rem; }
}

/* Directory absence / coverage badges */
.yb-absent-badge {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--color-coral);
  background: rgba(var(--color-coral-rgb), 0.1);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
  max-width: 100%;
}
.yb-covering-badge {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--color-teal);
  background: rgba(var(--color-teal-rgb), 0.1);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 5px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
.yb-card-absent {
  border-color: var(--color-coral);
  background: rgba(var(--color-coral-rgb), 0.04);
}

/* Class allergy / medical alerts — shown above the face grid in class view */
.class-allergy-alerts {
  grid-column: 1 / -1;
  border: 1px solid var(--color-coral);
  background: rgba(var(--color-coral-rgb), 0.08);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 14px;
  margin-bottom: 6px;
}
.class-allergy-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-coral);
  margin-bottom: 4px;
}
.class-allergy-alerts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 0.85rem;
  color: var(--color-text);
}
.class-allergy-alerts li strong { color: var(--color-text); }

/* ── Top-level page mode switcher: Workspace vs Info ──
   Rendered as a pill-style segmented control (not an underline)
   so the page-level scope is visually distinct from the underline
   subtabs used inside sections (.portal-tab). Different shape =
   different hierarchy. */
/* Sticky view-mode pills: nested inside .portal-header so it reads as the
   bottom band of one unified chrome (not a third stacked bar). Carries the
   purple gradient tail when flush with the greeting; switches to a crisp
   white sticky strip once pinned under the fixed navbar so the pills stay
   readable while scrolling. */
.quick-shortcut-bar {
  position: static;
  background: linear-gradient(180deg, var(--color-primary-dark) 0%, rgba(58, 40, 92, 0.96) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.quick-shortcut-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.qsb-greeting {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.qsb-greeting strong {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.qsb-greeting span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.qsb-pills {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.quick-shortcut-bar .container::-webkit-scrollbar { display: none; }
.qsb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.qsb-pill svg { flex-shrink: 0; }
.qsb-pill:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.16);
}
.qsb-pill.active {
  color: var(--color-primary-dark);
  background: var(--color-white);
  border-color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.qsb-pill.active:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: var(--color-primary-dark);
}
.qsb-pill-workspace { /* Workspace pill — no separate treatment needed in the unified header */ }

/* Header "View as" picker for the communications@ super user. Sits left of
   the My Family pill so it's always within reach regardless of page. */
.qsb-view-as {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.qsb-view-as[hidden] { display: none; }
.qsb-view-as-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.qsb-view-as .view-as-select {
  max-width: 220px;
  padding: 4px 8px;
  font-size: 0.8rem;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.95);
}

.page-mode-panel#page-workspace {
  padding: 40px 0 60px;
}

@media (max-width: 768px) {
  .quick-shortcut-bar .container {
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .qsb-greeting {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
  }
  .qsb-greeting strong { font-size: 0.92rem; }
  .qsb-greeting span { display: none; }
  .qsb-pills { justify-content: center; }
}

@media (max-width: 640px) {
  .qsb-pill {
    padding: 5px 12px;
    font-size: 0.8rem;
  }
  .qsb-pill svg { width: 14px; height: 14px; }
}

/* ── My Workspace tab ── */
.workspace-intro {
  margin-bottom: 14px;
}
.workspace-intro h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 0;
  font-size: 1.4rem;
}
.workspace-intro p {
  margin: 6px 0 0 0;
  color: var(--color-text-light);
  font-family: var(--font-body);
}
.workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.workspace-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.workspace-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary-light);
}
.workspace-card-header h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
  line-height: 1.3;
}
.workspace-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  color: var(--color-text);
  min-width: 0;
}
.ws-body-hint {
  margin: 0 0 4px 0;
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.5;
}
.ws-empty {
  color: var(--color-text-light);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
}

/* ── Welcome List (Welcome Coordinator) ───────────────────────────── */
.ws-welcome-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-welcome-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
}
.ws-welcome-item.ws-welcome-done {
  background: rgba(var(--color-primary-rgb), 0.04);
  border-color: rgba(var(--color-primary-rgb), 0.18);
}
.ws-welcome-main { min-width: 0; flex: 1; }
.ws-welcome-name {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}
.ws-welcome-contact { font-size: 0.8rem; margin-top: 1px; word-break: break-word; }
.ws-welcome-contact a { color: var(--color-primary-light); }
.ws-welcome-sub { font-size: 0.78rem; color: var(--color-text-light); margin-top: 1px; }
.ws-welcome-stamp { font-size: 0.74rem; color: var(--color-text-light); margin-top: 2px; font-style: italic; }
.ws-welcome-action { flex: 0 0 auto; }
.ws-welcome-action .ws-welcome-toggle { padding: 3px 10px; font-size: 0.8rem; }

/* ── Upcoming Events (read-only board calendar) ───────────────────── */
.ws-upcoming-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ws-upcoming-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
}
.ws-upcoming-item:last-child { border-bottom: none; }
.ws-upcoming-date {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.82rem;
  white-space: nowrap;
}
.ws-upcoming-title { font-size: 0.86rem; color: var(--color-text); }
.ws-upcoming-note { flex-basis: 100%; font-size: 0.78rem; color: var(--color-text-light); }
.ws-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-link-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Source-sheets widget items have a label + purpose blurb stacked
   vertically; override the default centered single-line flex. */
.ws-link-list li.ws-source-sheet-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ws-source-sheet-purpose {
  font-size: 0.85em;
  color: var(--color-text-light);
  padding-left: 26px;
  line-height: 1.35;
}
/* Explicit override so the `hidden` attribute actually hides the row —
   .ws-link-list li's display:flex above wins against [hidden]'s
   display:none otherwise (CSS specificity gotcha). */
.ws-link-list li[hidden] { display: none; }

/* Scheduled Tours To Do item carries a button + an inline glance-list
   (Date · Time · Family) underneath. Stack them vertically inside the
   <li>, indent the list to align under the button label. */
.ws-link-list li#ws-todo-tours-scheduled-item {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.ws-tours-sched-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-tours-sched-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.85rem;
  color: var(--color-text);
  border-left: 2px solid rgba(var(--color-primary-rgb), 0.15);
  padding-left: 10px;
}
.ws-tours-sched-when {
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.ws-tours-sched-fam {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-tours-sched-row.ws-tours-sched-more {
  font-style: italic;
  color: var(--color-text-light);
  border-left-color: transparent;
  font-size: 0.8rem;
}
/* Count pill that prepends a To Do item label, e.g. [3] Pending Waivers.
   Coral fill so it reads as "you have N items to action". */
.ws-link-pre-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-right: 8px;
  background: var(--color-coral);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  flex-shrink: 0;
}
.ws-link-list li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-primary);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  flex: 1;
  min-width: 0;
  transition: background var(--transition-fast);
}
.ws-link-list li a:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  text-decoration: underline;
}
/* Buttons inside the link list (for actions like waiver/curriculum that open
   in-app modals instead of linking out). Styled to match the anchor rows. */
.ws-link-list li .ws-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font: inherit;
  color: var(--color-primary);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: background var(--transition-fast);
}
.ws-link-list li .ws-link-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  text-decoration: underline;
}
.ws-link-icon {
  display: inline-flex;
  width: 20px;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.ws-mylink-del {
  flex-shrink: 0;
}
.ws-mylink-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.ws-mylink-form input[type="text"],
.ws-mylink-form input[type="url"] {
  flex: 1 1 120px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  min-width: 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ws-mylink-form input[type="text"]:focus,
.ws-mylink-form input[type="url"]:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-white);
}
.ws-opportunities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-opportunities li {
  padding: 10px 12px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text);
}
.ws-opp-committee {
  color: var(--color-text-light);
  font-size: 0.8rem;
  margin-left: 6px;
}
.ws-waiver-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ws-waiver-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ws-waiver-form input,
.ws-waiver-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ws-waiver-form input:focus,
.ws-waiver-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-white);
}
.ws-waiver-form textarea {
  resize: vertical;
  min-height: 56px;
}
.ws-wv-status {
  font-size: 0.85rem;
  min-height: 1em;
}
.ws-wv-err { color: var(--color-error); font-weight: 600; }

/* Manual merch order entry — inline form that drops in above the
   Merchandise Orders table when the Merchandise Manager clicks "+ Add
   Order". Inherits visual language from .ws-waiver-form (cream inputs,
   uppercase labels) but uses a two-column grid so the customer/item/
   variant fields lay out without overflowing the modal. */
.ws-merch-add-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(var(--color-primary-rgb), 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.ws-merch-add-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-primary);
}
.ws-merch-add-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0 4px;
}
.ws-merch-add-close:hover { color: var(--color-text); }
.ws-merch-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ws-merch-add-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ws-merch-add-field.ws-merch-add-notes { grid-column: 1 / -1; }
.ws-required { color: var(--color-error); }
.ws-merch-add-field input,
.ws-merch-add-field select,
.ws-merch-add-field textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ws-merch-add-field input:focus,
.ws-merch-add-field select:focus,
.ws-merch-add-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-white);
}
.ws-merch-add-field textarea { resize: vertical; min-height: 48px; }
.ws-merch-add-toggles {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--color-text);
}
.ws-merch-add-toggles label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.ws-merch-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ws-merch-add-status {
  font-size: 0.85rem;
  min-height: 1em;
}

/* Merch modal tab strip — borrows .portal-tab visual treatment but
   sized down for an in-modal context (modal title carries the page-
   level heading; tabs are a sub-scope, not a primary nav). */
.merch-tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--color-border);
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.merch-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.merch-tab-btn:hover {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.04);
}
.merch-tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.merch-tab-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.14);
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
}
.merch-tab-badge-warn {
  background: rgba(192, 57, 43, 0.14);
  color: #b93a33;
}

/* Inventory stock pills — pair the green/yellow/red semantic with the
   same pill shape used by .ws-wv-ok / .ws-wv-pending so the inventory
   tab reads as the same family of badges as the orders tab. */
.merch-stock-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  margin-left: 6px;
}
.merch-stock-low {
  background: rgba(224, 181, 44, 0.2);
  color: var(--color-accent-dark);
}
.merch-stock-out {
  background: rgba(192, 57, 43, 0.15);
  color: #b93a33;
}

/* Inventory edit row — takes over the row's full width via colspan.
   Re-uses the add-order field styling for consistency. */
.merch-inv-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px;
  background: rgba(var(--color-primary-rgb), 0.05);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}
.merch-inv-edit-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-primary-dark);
}
.merch-inv-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.merch-inv-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.merch-inv-edit-grid label.merch-inv-edit-notes { grid-column: 1 / -1; }
.merch-inv-edit-grid input,
.merch-inv-edit-grid textarea {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}
.merch-inv-edit-grid input:focus,
.merch-inv-edit-grid textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-white);
}
.merch-inv-edit-grid textarea { resize: vertical; min-height: 44px; }
.merch-inv-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.merch-inv-status {
  font-size: 0.82rem;
  color: var(--color-text-light);
}
.merch-inv-vendor-link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dotted rgba(var(--color-primary-rgb), 0.35);
  white-space: nowrap;
}
.merch-inv-vendor-link:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}
/* Status pills shared by Membership Report + Waivers Report (and any
   other table that needs Paid/Pending/Signed status cells). Same
   all-caps + tracking + bold treatment as .ws-part-status / .pmrep-status
   so every report's status column reads as the same kind of badge. */
.ws-wv-ok,
.ws-wv-pending,
.ws-wv-resent,
.ws-wv-new {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}
.ws-wv-ok      { background: rgba(90, 107, 57, 0.14);   color: var(--color-leaf); }
.ws-wv-pending { background: rgba(224, 181, 44, 0.18);  color: var(--color-accent-dark); }
.ws-wv-resent  { background: rgba(196, 80, 65, 0.14);   color: #b3381a; }
.ws-wv-new     { background: rgba(82, 58, 121, 0.12);   color: var(--color-primary-dark, #3d2a5c); }
/* Photos column pills — same shape as the status pills above so the
   Waivers Report reads as one consistent badge style. Allowed = leaf
   green (matches "signed"); opted out = slate so it stands apart from
   the warning amber used for pending rows. */
.ws-wv-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.ws-wv-photo-ok  { background: rgba(90, 107, 57, 0.14); color: var(--color-leaf); }
.ws-wv-photo-opt { background: rgba(80, 80, 90, 0.14);  color: #4b4f57; }
/* Tour Pipeline status pills — same shape as .ws-wv-* / .pmrep-status
   so all reports' status columns read as the same kind of badge.
   Color tracks the lifecycle: amber (waiting on us) → plum (committed
   slot) → chartreuse (in-flight) → green (success) → coral (lost) →
   gray (no response). */
.ws-tour-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}
.ws-tour-status-inquiry   { background: rgba(82, 58, 121, 0.12);           color: var(--color-primary-dark); }
.ws-tour-status-requested { background: rgba(224, 181, 44, 0.18);          color: var(--color-accent-dark); }
.ws-tour-status-scheduled { background: rgba(var(--color-primary-rgb), 0.14); color: var(--color-primary-dark); }
.ws-tour-status-toured    { background: rgba(var(--color-accent-light-rgb), 0.35); color: var(--color-accent-dark); }
.ws-tour-status-joined    { background: rgba(90, 107, 57, 0.16);            color: var(--color-leaf); }
.ws-tour-status-declined  { background: rgba(var(--color-coral-rgb), 0.18); color: #8A2222; }
.ws-tour-status-ghosted   { background: rgba(0, 0, 0, 0.08);                color: var(--color-text-light); }
/* "Inquiry" tag on Tour Pipeline rows that came from the Contact Us form
   rather than the Schedule a Tour form. */
/* Truncated message preview in the lean Inquiries table. */
.ws-inq-msg { color: var(--color-text-light); font-style: italic; }
.ws-tour-source-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary-dark);
}

/* Schedule + reschedule form rendered at the top of the expansion
   panel for a Tour Pipeline row. Two-column grid for date + time,
   note textarea spans full width. */
.ws-tour-schedule-form .ws-tour-sched-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 10px;
}
.ws-tour-schedule-form label,
.ws-tour-decline-form label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 4px;
}
.ws-tour-schedule-form select.rd-input,
.ws-tour-schedule-form textarea.rd-textarea,
.ws-tour-decline-form textarea.rd-textarea {
  width: 100%;
}
.ws-tour-sched-status,
.ws-tour-decline-status {
  font-size: 0.85rem;
  color: var(--color-text-light);
  min-height: 1em;
}

/* Neutral count-strip pill — used for informational tallies that
   aren't a status signal (e.g. Membership Report's per-track kid
   counts). Same shape/typography as .ws-wv-* so the strip reads as
   one row, but plum-on-cream so it doesn't compete with the
   green/amber Paid/Pending status pills next to it. */
.ws-track-count {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(var(--color-primary-rgb), 0.10);
  color: var(--color-primary-dark);
}
.ws-wv-stamp { color: var(--color-text-light); font-weight: 500; font-size: 0.86em; margin-left: 2px; }
.ws-wv-context { color: var(--color-text-light); font-size: 0.78rem; font-style: italic; }
.ws-waivers-table-wrap {
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}

/* Mobile: hide columns flagged mobileHide (still shown in the expanded
   row detail), and tighten cell padding/size so more fits without a wide
   horizontal scroll. */
@media (max-width: 640px) {
  .ws-srt-hide-sm { display: none !important; }
  .ws-waivers-table { font-size: 0.8rem; }
  .ws-waivers-table th,
  .ws-waivers-table td { padding: 7px 7px; }
}

/* ── Members summary card (My Workspace, board members) ──────────────
   At-a-glance stat tiles painted by loadMembersSummary(). Tiles use the
   shared design tokens (border/radius/heading font/plum); the track row
   reuses the global count-strip pills (.rd-counts + .ws-track-count), and
   the action uses the global .ws-link-btn — so the card reads as part of
   the same system as the Membership Report it links to. */
.ws-msum-loading { font-style: italic; color: var(--color-text-light); }
.ws-msum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 4px 0 10px;
}
.ws-msum-stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-msum-stat-new {
  background: rgba(var(--color-primary-rgb), 0.06);
  border-color: rgba(var(--color-primary-rgb), 0.22);
}
.ws-msum-num {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary-dark);
}
.ws-msum-lab {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-light);
}
.ws-waivers-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.ws-waivers-table th,
.ws-waivers-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.ws-waivers-table td {
  /* Long member / role names need to wrap; headers stay on one line. */
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Convention across every report: row-identifier and other body
     cells render in regular weight — Status pills + Actions buttons
     carry the visual emphasis. Don't wrap first-column content in
     <strong> in new reports; the rule below also defangs any stray
     <strong> wrappers in existing markup so the look stays uniform. */
  font-weight: 400;
}
.ws-waivers-table tbody td strong { font-weight: inherit; }
.ws-waivers-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-cream);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.ws-waivers-table tbody tr:last-child td { border-bottom: none; }

/* Sticky first column — keeps the row identifier (Member name) visible
   while the table scrolls horizontally. Two layouts to handle:
     1. Expandable tables — first cell is the caret, second is the row
        identifier. Both stick: caret at left:0, identifier at left:32px.
     2. Non-expandable tables — :first-child IS the row identifier, so
        we sticky that directly.
   Sticky cells need an explicit background so scrolled content doesn't
   show through. Hover state on the row also has to apply to the sticky
   cells, otherwise they stay white while the rest of the row tints. */
.ws-waivers-table th.ws-sort-caret-col,
.ws-waivers-table td.ws-srt-caret {
  width: 32px;
  min-width: 32px;
  position: sticky;
  left: 0;
  z-index: 1;
}
.ws-waivers-table th.ws-sort-caret-col + th,
.ws-waivers-table td.ws-srt-caret + td {
  position: sticky;
  left: 32px;
  z-index: 1;
}
.ws-waivers-table tbody td.ws-srt-caret,
.ws-waivers-table tbody td.ws-srt-caret + td {
  background: var(--color-white);
}
.ws-waivers-table tbody tr.ws-srt-row-expandable:hover td.ws-srt-caret,
.ws-waivers-table tbody tr.ws-srt-row-expandable:hover td.ws-srt-caret + td {
  background: rgba(var(--color-accent-light-rgb), 0.15);
}
/* Sticky thead corner — the caret + identifier headers must layer
   above sticky body cells AND above the regular sticky-top thead row. */
.ws-waivers-table thead th.ws-sort-caret-col,
.ws-waivers-table thead th.ws-sort-caret-col + th {
  z-index: 3;
}

/* Non-expandable tables: sticky :first-child as the row identifier. */
.ws-waivers-table:not(:has(.ws-sort-caret-col)) th:first-child,
.ws-waivers-table:not(:has(.ws-sort-caret-col)) td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
.ws-waivers-table:not(:has(.ws-sort-caret-col)) tbody td:first-child {
  background: var(--color-white);
}
.ws-waivers-table:not(:has(.ws-sort-caret-col)) thead th:first-child {
  z-index: 3;
}

/* Subtle right-edge shadow on the sticky identifier cell — mirrors
   the convention from spreadsheets so users can tell at a glance the
   table is scrolling underneath. */
.ws-waivers-table td.ws-srt-caret + td,
.ws-waivers-table:not(:has(.ws-sort-caret-col)) td:first-child {
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.08);
}
.ws-waivers-table th.ws-sort-caret-col + th,
.ws-waivers-table:not(:has(.ws-sort-caret-col)) th:first-child {
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.08);
}
.ws-report-request-hint {
  margin: 12px 0 0 0;
  padding: 10px 12px;
  background: rgba(var(--color-accent-light-rgb), 0.12);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--color-text-light);
}
.ws-report-request-hint a {
  color: var(--color-primary);
  font-weight: 600;
}

/* Sortable + expandable report tables (Waivers, Membership). */
.ws-sortable-table th.ws-sort {
  cursor: pointer;
  user-select: none;
}
.ws-sortable-table th.ws-sort:hover {
  background: rgba(var(--color-accent-light-rgb), 0.25);
}
.ws-sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7em;
  color: var(--color-primary);
  min-width: 0.8em;
  text-align: left;
}
.ws-srt-row-expandable { cursor: pointer; }
.ws-srt-row-expandable:hover { background: rgba(var(--color-accent-light-rgb), 0.15); }
.ws-srt-caret {
  width: 1.5em;
  text-align: center;
  color: var(--color-primary);
  font-size: 0.7rem;
}
.ws-sort-caret-col { width: 1.5em; }
.ws-srt-detail-row > td {
  background: rgba(var(--color-accent-light-rgb), 0.08);
  padding: 14px 16px !important;
  border-top: 1px solid var(--color-border);
}
.ws-srt-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 0.85rem;
}
.ws-reg-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
}
.ws-reg-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-reg-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ws-reg-detail-val { color: var(--color-text); word-break: break-word; }
.ws-reg-detail-section h5 {
  margin: 0 0 4px 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ws-reg-detail-kidlist {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Payment-status filter row sits above the Membership Report table.
   Shared across roles (all see the filter; Treasurer also gets the
   Mark Paid affordance below). */
.ws-mr-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ws-mr-filter-label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
}
.ws-mr-filter {
  width: auto;
  min-width: 160px;
  padding: 4px 8px;
  font-size: 0.9rem;
}

/* Member Onboarding modal — Comms-only checklist + welcome-email queue */
.mo-modal { padding-bottom: 1rem; }
.mo-section { margin-top: 18px; }
.mo-section-h {
  font-family: 'Playfair Display', serif;
  color: var(--color-primary-dark);
  font-size: 1.05rem;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mo-pill {
  display: inline-block;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.mo-row {
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fff;
}
.mo-row-head { margin-bottom: 8px; }
.mo-row-name {
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
/* Inline secondary action for dismissing an existing member who
   accidentally landed in the new-family queue. Visually
   de-emphasized — the primary action on each row is still the
   3-step welcome flow. */
.mo-row-dismiss {
  background: none;
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mo-row-dismiss:hover { background: rgba(var(--color-primary-rgb), 0.08); }
.mo-row-dismiss:disabled { opacity: 0.5; cursor: wait; }
.mo-row-sub { color: var(--color-text-light); font-weight: normal; }
.mo-row-derived { font-size: 0.84rem; color: var(--color-text-light); margin-top: 2px; }
.mo-row-derived code {
  background: rgba(var(--color-primary-rgb), 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 0.85em;
}
.mo-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mo-checklist li { font-size: 0.9rem; }
.mo-checklist label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mo-checklist input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary); }
.mo-step-stamp { color: var(--color-text-light); font-size: 0.8rem; }
/* Inline destination link next to a checklist step (e.g. "admin.google.com ↗"
   on the Workspace account creation step). De-emphasized weight so it
   reads as an aid, not the action — the checkbox is the action. */
.mo-step-link {
  font-size: 0.8rem;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dotted rgba(var(--color-primary-rgb), 0.35);
  margin-left: 6px;
  white-space: nowrap;
}
.mo-step-link:hover { border-bottom-color: var(--color-primary); }
.mo-step-email { margin-top: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mo-row-hint { color: var(--color-text-light); font-size: 0.82rem; font-style: italic; }
.mo-email-composer {
  margin-top: 10px;
  padding: 12px;
  background: rgba(var(--color-primary-rgb), 0.04);
  border-radius: 8px;
}
.mo-composer-info { margin: 0 0 10px; font-size: 0.88rem; color: var(--color-text-light); }
.mo-composer-label { display: block; font-weight: 600; color: var(--color-primary-dark); font-size: 0.85rem; margin: 8px 0 4px; }
.mo-composer-hint { font-weight: normal; color: var(--color-text-light); }
.mo-composer-subject { width: 100%; }
.mo-composer-note { width: 100%; font-size: 0.9rem; }
.mo-composer-actions { margin-top: 10px; }
.mo-composer-status { margin-top: 8px; font-size: 0.88rem; color: var(--color-text-light); }

.mo-template-preview {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  margin: 0 0 16px;
}
.mo-template-summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  font-size: 0.92rem;
  list-style: revert;
  user-select: none;
}
.mo-template-summary:hover { background: var(--color-bg-soft, #f7f4fb); border-radius: 8px; }
.mo-template-preview[open] .mo-template-summary { border-bottom: 1px solid var(--color-border); border-radius: 8px 8px 0 0; }
.mo-template-body {
  padding: 14px 18px;
  font-size: 0.92rem;
  line-height: 1.5;
  max-height: 420px;
  overflow-y: auto;
}
.mo-template-body h2 { font-size: 1.15rem; margin: 0 0 10px; color: var(--color-primary-dark); }
.mo-template-body h3 { font-size: 1rem; margin: 14px 0 6px; color: var(--color-primary-dark); }
.mo-template-body p { margin: 0 0 8px; }
.mo-removal-hint { font-size: 0.88rem; color: var(--color-text-light); margin: 0 0 10px; }
.mo-removal-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Treasurer-only mark-paid affordance at the bottom of the expanded
   row. Lighter tint than decline since this is a positive action. */
.ws-reg-mark-paid {
  border-top: 1px dashed rgba(var(--color-primary-rgb), 0.25);
  margin-top: 12px;
  padding-top: 12px;
}

/* Decline-registration affordance at the bottom of the Membership Report
   expanded row. Warm/danger tint so it reads as destructive. */
.ws-reg-decline {
  border-top: 1px dashed rgba(var(--color-error-rgb, 217, 95, 59), 0.35);
  margin-top: 12px;
  padding-top: 12px;
}
.ws-reg-decline-hint {
  color: var(--color-text-light);
  font-size: 0.88rem;
  margin: 6px 0 8px;
}
.ws-decline-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ws-decline-status {
  font-size: 0.88rem;
  color: var(--color-text-light);
}
.ws-reg-detail-notes {
  white-space: pre-wrap;
  background: var(--color-white);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.workspace-role-section {
  margin: 0 0 24px 0;
}
.workspace-role-section + .workspace-role-section {
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}
.ws-role-header {
  margin: 0 0 8px 0;
}
.ws-role-header h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.3;
}
.ws-role-description {
  margin: 0;
  padding: 0;
  background: transparent;
  border-left: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-light);
}
.ws-role-desc-block {
  margin: 0 0 12px 0;
}
.ws-role-playbook {
  margin: 0 0 10px 0;
  padding: 10px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.ws-role-playbook summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 1rem;
  padding: 2px 0;
  letter-spacing: 0.01em;
}
.ws-role-playbook summary:hover { text-decoration: underline; }

/* Wednesday Routine collapsible in the Co-op Calendar modal */
.cal-routine-details { padding: 14px 18px; }
.cal-routine-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 1.05rem;
  list-style: none;
}
.cal-routine-summary::-webkit-details-marker { display: none; }
.cal-routine-summary::marker { content: ''; }
.cal-routine-summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}
.cal-routine-details[open] .cal-routine-summary::after {
  transform: rotate(45deg);
}
.ws-role-playbook-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  max-height: 460px;
  overflow-y: auto;
}
.ws-role-playbook-body a {
  color: var(--color-primary);
  word-break: break-word;
}
.ws-role-playbook-body p { margin: 0 0 8px 0; }
.ws-role-playbook-body p:last-child { margin-bottom: 0; }
.ws-role-playbook-body h2, .ws-role-playbook-body h3, .ws-role-playbook-body h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 14px 0 6px 0;
  line-height: 1.3;
}
.ws-role-playbook-body h2 { font-size: 1.1rem; }
.ws-role-playbook-body h3 { font-size: 1rem; }
.ws-role-playbook-body h4 { font-size: 0.95rem; }
.ws-role-playbook-body ul, .ws-role-playbook-body ol { margin: 0 0 8px 22px; list-style: disc; }
.ws-role-playbook-body ol { list-style: decimal; }
.ws-role-playbook-body li { margin-bottom: 4px; }
.ws-role-playbook-body blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 6px 0;
  padding: 2px 0 2px 10px;
  color: var(--color-text-light);
  font-style: italic;
}
.ws-handoff-card .workspace-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ws-handoff-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-handoff-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ws-handoff-link:hover,
.ws-handoff-link:focus {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
  outline: none;
}
.ws-handoff-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-primary);
}
.ws-handoff-link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ws-handoff-link-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  line-height: 1.25;
}
.ws-handoff-link-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
  line-height: 1.3;
}
.ws-handoff-link-chev {
  font-size: 1.5rem;
  color: var(--color-text-light);
  flex-shrink: 0;
  line-height: 1;
}
.rd-subtitle {
  margin: -4px 0 12px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-style: italic;
}
.ws-role-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.ws-role-notes-label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.5px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ws-role-notes-scope {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.ws-role-notes-textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  resize: vertical;
  min-height: 60px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ws-role-notes-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-white);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
.workspace-hidden {
  margin-top: 24px;
  padding: 14px 16px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.workspace-hidden-label {
  font-family: var(--font-body);
  color: var(--color-text-light);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 600px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Edit My Info — self-service profile modal (members portal)
   Reuses .rd-input / .rd-label / .rd-save-btn / .rd-cancel-btn / .sc-btn.
   Only EMI-specific layout lives here.
   ========================================================================== */
.emi-modal .emi-subtitle {
  color: var(--color-text-light);
  font-size: 0.92rem;
  margin: 0 0 18px;
}
.emi-modal .emi-error {
  background: rgba(var(--color-coral-rgb), 0.10);
  border: 1px solid rgba(var(--color-coral-rgb), 0.35);
  color: var(--color-coral);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 12px;
}
.emi-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}
.emi-section-head h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-primary-dark);
}
.emi-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emi-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: start;
  background: rgba(var(--color-primary-rgb), 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.emi-photo-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
}
/* No overflow:hidden on the container — that clipped the camera badge to the
   circle. The image itself is rounded; the badge sits fully outside the clip. */
.emi-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* The whole avatar is the click target (camera badge alone was a tiny,
   partially-clipped hit area). */
.emi-photo-thumb-btn {
  cursor: pointer;
  outline: none;
}
.emi-photo-thumb-btn:hover .emi-photo-btn,
.emi-photo-thumb-btn:focus-visible .emi-photo-btn {
  background: var(--color-primary-dark);
}
.emi-photo-thumb-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.4);
}
.emi-photo-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--shadow-sm);
}
.emi-photo-btn:hover {
  background: var(--color-primary-dark);
}
/* ── Afternoon Class Sign-ups (My Family card) ── */
.signup-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: 8px;
}
.signup-admin-sess { font-size: 0.85rem; color: var(--color-text); }
.signup-admin-sess select { margin-left: 4px; }
.signup-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
}
.signup-status-open { background: #dff0e0; color: #256b3f; }
.signup-status-closed { background: #fce9cf; color: #8a5a16; }
.signup-status-locked { background: #e7e2f0; color: var(--color-primary-dark); }
.signup-status-none { background: #eee; color: #777; }
.signup-admin-btns { display: flex; gap: 6px; margin-left: auto; }
.signup-note { font-size: 0.85rem; color: var(--color-text-light); margin: 4px 0 12px; }
.signup-dates {
  font-size: 0.78rem;
  color: var(--color-text-light);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-border);
}
.signup-empty { font-size: 0.8rem; color: var(--color-text-light); font-style: italic; margin: 2px 0; }
.signup-kid {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  margin-top: 12px;
}
.signup-kid-name { font-weight: 700; color: var(--color-primary-dark); margin-bottom: 8px; }
.signup-hour { margin-bottom: 10px; }
.signup-hour-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.signup-classes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) { .signup-classes { grid-template-columns: 1fr; } }
.signup-class {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  cursor: pointer;
}
.signup-class:disabled { cursor: default; opacity: 0.75; }
/* Age-fit highlighting — fit gets a green accent, clear mismatches recede.
   Defined before .signup-class-sel so the selected (purple) state wins. */
.signup-class-fit { border-color: #5a9e63; background: rgba(90, 158, 99, 0.09); }
.signup-class-misfit { opacity: 0.5; }
.signup-class-misfit .signup-class-name { font-weight: 500; color: var(--color-text-light); }
.signup-fit-check { color: #2e7d32; font-weight: 800; }
.signup-fit-key { color: #2e7d32; font-weight: 700; background: rgba(90, 158, 99, 0.16); padding: 0 4px; border-radius: 4px; }
.signup-kid-age {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-light);
  background: var(--color-border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  vertical-align: middle;
}
.signup-class-sel { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.08); }
.signup-rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--color-border);
  color: var(--color-text-light);
}
.signup-class-sel .signup-rank { background: var(--color-primary); color: #fff; }
.signup-class-body { display: flex; flex-direction: column; min-width: 0; }
.signup-class-name { font-weight: 600; font-size: 0.88rem; color: var(--color-text); }
.signup-class-meta { font-size: 0.74rem; color: var(--color-text-light); }
.signup-save { margin-top: 6px; }

/* ── Photo cropper modal (Edit My Info) ── */
.crop-overlay {
  position: fixed;
  inset: 0;
  /* Must sit above the Edit-My-Info modal (#personDetail is z-index 9999
     with inner elements at 10000), or the crop card renders behind it. */
  z-index: 10050;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.crop-card {
  background: var(--color-white);
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.crop-title {
  margin: 0 0 4px;
  color: var(--color-primary-dark);
  font-size: 1.1rem;
}
.crop-hint {
  margin: 0 0 14px;
  color: var(--color-text-light);
  font-size: 0.85rem;
}
.crop-viewport {
  position: relative;
  width: min(280px, 78vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #1e1e1e;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.crop-viewport:active { cursor: grabbing; }
.crop-img {
  position: absolute;
  top: 0;
  left: 0;
  /* Override the global `img { max-width:100% }` reset, which otherwise caps
     the width to the viewport while the inline height stays sized — squishing
     the image. The JS sets exact width/height to preserve aspect ratio. */
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.crop-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
}
.crop-zoom {
  width: 100%;
  margin: 0 0 16px;
  accent-color: var(--color-primary);
}
.crop-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.emi-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}
.emi-kid-fields {
  grid-template-columns: 1.2fr 1fr 1.1fr 1fr;
  gap: 10px 12px;
}
.emi-inline-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-light);
}
.emi-inline-label .rd-input {
  font-size: 0.88rem;
  padding: 8px 10px;
}
.emi-readonly {
  background: #f5f4ef;
  color: #6f6f6f;
  cursor: not-allowed;
}
.emi-full {
  grid-column: 1 / -1;
}
.emi-photo-optout {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text);
  background: rgba(255, 248, 225, 0.6);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  cursor: pointer;
}
.emi-photo-optout input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.emi-photo-optout strong {
  color: var(--color-primary-dark);
}
.emi-remove {
  align-self: start;
  padding: 4px 10px;
  font-size: 1rem;
  line-height: 1;
}
.emi-empty {
  color: var(--color-text-light);
  font-style: italic;
  font-size: 0.88rem;
  padding: 6px 2px 0;
}
.emi-btn-row {
  justify-content: flex-end;
  margin-top: 20px;
}
@media (max-width: 760px) {
  .emi-row {
    grid-template-columns: 56px 1fr;
    gap: 10px;
  }
  .emi-remove {
    grid-column: 2;
    justify-self: end;
    margin-top: -4px;
  }
  .emi-photo-thumb {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
  }
  .emi-fields,
  .emi-kid-fields {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .emi-fields,
  .emi-kid-fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- Participation Tracker (VP / Afternoon Class Liaison) ---------- */
.ws-part-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0 12px;
  font-size: 0.85rem;
}
.ws-part-filter-btn.ws-part-filter-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.ws-part-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 10px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ws-part-badge-board  { background: #edf4ff; color: #1f4788; }
.ws-part-badge-new    { background: #fff4e0; color: #a85b00; }
.ws-part-badge-exempt { background: #f3e8fd; color: #5e2c8a; }
.ws-part-zero { color: var(--color-text-light); }
/* Status pill — shared shape for every report's Status column.
   Convention: ALL CAPS + tracking + bold + pill rounding. Semantic
   color comes from the .ws-part-status-*  / .pmrep-status-* variant
   class that gets concatenated in the rendering code. Both reports
   resolve to the same visual treatment so users get a consistent
   "this is a status badge" cue across the Workspace. */
.ws-part-status,
.pmrep-status {
  display: inline-block;
  padding: 2px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  white-space: nowrap;
}
.ws-part-status-on_track { background: #e5f5e9; color: #1f6c3a; }
.ws-part-status-near     { background: #fff4d9; color: #8a6400; }
.ws-part-status-behind   { background: #fde2e2; color: #a32222; }
.ws-part-status-new      { background: #fff4e0; color: #a85b00; }
.ws-part-status-exempt   { background: #f3e8fd; color: #5e2c8a; }

.ws-part-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-part-roles,
.ws-part-exemption,
.ws-part-coverage-note {
  font-size: 0.85rem;
  color: var(--color-text);
}
.ws-part-session h5 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ws-part-session ul { margin: 0 0 4px 16px; padding: 0; }
.ws-part-session li { font-size: 0.85rem; line-height: 1.45; }

.ws-part-weights-table,
.ws-part-exempt-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.85rem;
}
.ws-part-weights-table th,
.ws-part-weights-table td,
.ws-part-exempt-table th,
.ws-part-exempt-table td {
  border: 1px solid var(--color-border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.ws-part-weights-table thead th,
.ws-part-exempt-table thead th {
  background: rgba(var(--color-accent-light-rgb), 0.2);
  font-weight: 700;
}
.ws-part-weight-input {
  width: 80px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem;
}
.ws-part-weight-desc {
  font-size: 0.72rem;
  color: var(--color-text-light);
  font-weight: 400;
}
.ws-part-weight-status,
.ws-part-exempt-status {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.78rem;
}
.ws-part-exempt-form,
.ws-part-exempt-existing {
  margin-top: 12px;
}
.ws-part-exempt-form h5 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Personal Participation Badge (greeting strip) ----------
   A tiny growing-plant icon button that sits next to "Welcome, [name]".
   One icon, three stages; theme-tinted so it pops on the dark purple
   greeting gradient but still reads as part of the R&W palette. */
.qsb-plant-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
  line-height: 0;
}
.qsb-plant-badge[hidden] { display: none; }
.qsb-plant-badge:hover,
.qsb-plant-badge:focus-visible {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.65);
  outline: none;
}
.qsb-plant-badge:active { transform: scale(0.96); }
.qsb-plant-icon { display: inline-flex; }
.qsb-plant-icon svg { display: block; }

/* Tier-specific tints. Coral → gold → chartreuse — bright enough to pop
   against the dark-purple greeting gradient. */
.qsb-plant-badge.plant-sprout  { color: var(--color-coral);      box-shadow: 0 0 0 0 rgba(var(--color-coral-rgb), 0.0); }
.qsb-plant-badge.plant-sapling { color: var(--color-accent);     box-shadow: 0 0 0 0 rgba(var(--color-accent-light-rgb), 0.0); }
.qsb-plant-badge.plant-tree    { color: var(--color-chartreuse); box-shadow: 0 0 0 0 rgba(var(--color-chartreuse-rgb), 0.0); }

/* Gentle ambient glow on the tree stage — a small reward for sticking with it. */
.qsb-plant-badge.plant-tree {
  animation: plantTreeGlow 3.2s ease-in-out infinite;
}
@keyframes plantTreeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-chartreuse-rgb), 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--color-chartreuse-rgb), 0.18); }
}

/* ---------- Participation panel inside Ways to Help card ---------- */
.ws-part-panel {
  margin: -4px 0 16px;
  padding: 14px 14px 12px;
  border-radius: var(--radius-md);
  background: rgba(var(--color-primary-rgb), 0.04);
  border-left: 4px solid var(--color-primary-light);
}
.ws-part-panel-sprout  { background: rgba(var(--color-coral-rgb), 0.08);         border-left-color: var(--color-coral); }
.ws-part-panel-sapling { background: rgba(var(--color-accent-light-rgb), 0.18);  border-left-color: var(--color-accent-dark); }
.ws-part-panel-tree    { background: rgba(var(--color-chartreuse-rgb), 0.14);    border-left-color: var(--color-leaf); }
.ws-part-panel-loading { opacity: 0.7; }

.ws-part-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ws-part-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  flex-shrink: 0;
}
.ws-part-panel-sprout  .ws-part-panel-icon { color: var(--color-coral); }
.ws-part-panel-sapling .ws-part-panel-icon { color: var(--color-accent-dark); }
.ws-part-panel-tree    .ws-part-panel-icon { color: var(--color-leaf); }

.ws-part-panel-headings h5 {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.ws-part-panel-headings p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.35;
}

.ws-part-meter {
  height: 10px;
  background: rgba(var(--color-primary-rgb), 0.10);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 6px;
}
.ws-part-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
  background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
}
.ws-part-panel-sprout  .ws-part-meter-fill { background: linear-gradient(90deg, var(--color-coral), #B84a2a); }
.ws-part-panel-sapling .ws-part-meter-fill { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark)); }
.ws-part-panel-tree    .ws-part-meter-fill { background: linear-gradient(90deg, var(--color-chartreuse), var(--color-leaf)); }

.ws-part-meter-caption {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--color-text);
}
.ws-part-meter-caption strong { color: var(--color-primary-dark); }
.ws-part-new-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(var(--color-teal-rgb), 0.12);
  color: var(--color-teal);
}
.ws-part-exempt-note {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--color-text);
  font-style: italic;
}

.ws-part-recap {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 14px;
  font-size: 0.85rem;
  color: var(--color-text);
}
.ws-part-recap li::before {
  content: "✦";
  color: var(--color-accent-dark);
  margin-right: 6px;
}
.ws-part-roles-line {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-light);
}
.ws-part-roles-line strong { color: var(--color-text); }

.ws-part-subhead {
  margin: 14px 0 4px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.ws-part-submit-line {
  margin: 4px 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.ws-part-submit-link {
  appearance: none;
  background: var(--color-primary);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.ws-part-submit-link:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.ws-part-submit-link:active { transform: translateY(0); }
.ws-part-submit-hint {
  color: var(--color-text-light);
  font-size: 0.84rem;
}

/* Subtle inline text link rendered as a button (opens a modal rather than
   navigating). Used in the Ways to Help card to point at Organization &
   Roles and the Class Ideas board. */
.ws-inline-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}
.ws-inline-link:hover { color: var(--color-primary-dark); }

/* ---------- PM Submissions Report (modal opened from PM Class Scheduling) ---------- */
.pmrep-modal {
  width: min(980px, 96vw);
  max-width: 100%;
}
/* The "N new" pill on the workspace Submissions Report button. */
.ws-link-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--color-coral);
  color: var(--color-white);
  letter-spacing: 0.02em;
}
.ws-link-count[hidden] { display: none; }
.pmrep-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.pmrep-count {
  font-size: 0.8rem;
  color: var(--color-text-light);
  background: rgba(var(--color-primary-rgb), 0.08);
  padding: 2px 8px;
  border-radius: 999px;
}
.pmrep-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 6px 0 10px;
  font-size: 0.82rem;
  color: var(--color-text-light);
}
.pmrep-filters label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pmrep-filters select {
  padding: 3px 6px;
  font-size: 0.82rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-text);
}
.pmrep-tbl-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.pmrep-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.pmrep-tbl th {
  text-align: left;
  padding: 6px 10px;
  background: rgba(var(--color-primary-rgb), 0.06);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.pmrep-tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(var(--color-border), 1);
  vertical-align: top;
  color: var(--color-text);
}
.pmrep-tbl tbody tr:last-child td { border-bottom: 0; }
.pmrep-tbl tbody tr:hover td { background: rgba(var(--color-accent-light-rgb), 0.12); }
.pmrep-class-cell strong { color: var(--color-primary-dark); }
.pmrep-class-desc {
  margin-top: 2px;
  color: var(--color-text-light);
  font-size: 0.78rem;
  line-height: 1.3;
  max-width: 340px;
}
/* .pmrep-status base shape now lives alongside .ws-part-status above
   (shared between Participation Tracker + PM Submissions). Variant
   classes below keep PM-specific color mappings. */
.pmrep-status-submitted { background: #e5f5e9;                                     color: #1f6c3a; }
.pmrep-status-drafted   { background: rgba(var(--color-accent-light-rgb), 0.35);   color: var(--color-accent-dark); }
.pmrep-status-scheduled { background: rgba(var(--color-chartreuse-rgb), 0.22);     color: var(--color-leaf); }
.pmrep-status-declined  { background: rgba(var(--color-coral-rgb), 0.18);          color: #8A2222; }
.pmrep-status-withdrawn { background: rgba(var(--color-primary-rgb), 0.10);        color: var(--color-primary-dark); }
.pmrep-actions-col { width: 1%; white-space: nowrap; }
.pmrep-actions { white-space: nowrap; }
.pmrep-btn {
  margin-right: 4px;
  font-size: 0.78rem;
}
.pmrep-schedule-note {
  font-size: 0.76rem;
  color: var(--color-text-light);
  font-style: italic;
}

/* Standard Actions cell wrapper for renderSortableTable reports
   (Membership, Waivers). Mirrors the .pmrep-actions look so all three
   reports read as one tool. Buttons inside auto-flow inline; rows with
   no applicable actions show a muted em-dash via .ws-srt-actions-empty. */
.ws-srt-actions { white-space: nowrap; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ws-srt-actions .sc-btn {
  margin: 0;
  font-size: 0.78rem;
}
.ws-srt-actions-empty {
  color: var(--color-text-light);
  font-size: 0.85rem;
}

/* ---------- Roles Manager (President workspace widget → modal) ---------- */
.roles-mgr-modal { width: min(820px, 96vw); }
/* Toolbar row sits under the modal subtitle (the "+ Add Role" button
   lives in .detail-actions at the top, same slot Participation Tracker
   uses). Right-aligned single-row toolbar, subtle divider below. */
.roles-mgr-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 4px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.roles-mgr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.roles-branch {
  margin: 14px 0 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.roles-branch-orphans .roles-branch-head {
  margin: 0;
  padding: 8px 14px;
  background: rgba(var(--color-coral-rgb), 0.08);
  color: var(--color-coral);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.roles-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.roles-row:last-child { border-bottom: 0; }
/* Hover stays in the primary-tint family so board rows and child rows
   share the same semantics — no gold-yellow flash that reads like a
   different state. */
.roles-row:hover { background: rgba(var(--color-primary-rgb), 0.04); }
.roles-row-depth-0 {
  background: rgba(var(--color-primary-rgb), 0.06);
  font-weight: 600;
}
.roles-row-depth-0:hover { background: rgba(var(--color-primary-rgb), 0.10); }
.roles-row-depth-1 { padding-left: 34px; }
.roles-row-depth-2 { padding-left: 54px; }
.roles-row-depth-3 { padding-left: 74px; }
/* Tree connectors: a faint vertical guide down the indent and a short
   horizontal elbow into each child row. Makes the parent→child
   relationship obvious without leaning on background-color games. */
.roles-row-depth-1::before,
.roles-row-depth-2::before,
.roles-row-depth-3::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.roles-row-depth-1::before { left: 20px; }
.roles-row-depth-2::before { left: 40px; }
.roles-row-depth-3::before { left: 60px; }
.roles-row-depth-1::after,
.roles-row-depth-2::after,
.roles-row-depth-3::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 10px;
  height: 1px;
  background: var(--color-border);
}
.roles-row-depth-1::after { left: 20px; }
.roles-row-depth-2::after { left: 40px; }
.roles-row-depth-3::after { left: 60px; }
.roles-row-archived { opacity: 0.6; }
.roles-row-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.roles-row-title {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: left;
  cursor: pointer;
}
.roles-row-title:hover { text-decoration: underline; }
.roles-row-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.roles-row-main {
  justify-content: flex-start;
}
.roles-row-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.roles-row-actions .sc-btn {
  padding: 3px 10px;
  font-size: 0.78rem;
}
.roles-pill {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary-dark);
}
.roles-pill-term {
  background: rgba(var(--color-accent-light-rgb), 0.35);
  color: var(--color-accent-dark);
}
.roles-pill-cat-board       { background: rgba(var(--color-primary-rgb), 0.18);     color: var(--color-primary-dark); }
.roles-pill-cat-committee_role { background: rgba(var(--color-teal-rgb), 0.14);    color: var(--color-teal); }
.roles-pill-cat-cleaning_area  { background: rgba(var(--color-chartreuse-rgb), 0.18); color: var(--color-leaf); }
.roles-pill-cat-class       { background: rgba(var(--color-coral-rgb), 0.15);      color: var(--color-coral); }
.roles-pill-archived        { background: #eee; color: #555; }
.roles-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.8rem;
  color: var(--color-text-light);
}
.roles-row-overview { flex: 1 1 auto; max-width: 640px; }
.roles-row-stamp { flex: 0 0 auto; font-size: 0.75rem; }
.roles-row-holder-line {
  margin-top: 2px;
  font-size: 0.84rem;
  line-height: 1.3;
}
.roles-row-holder-label {
  color: var(--color-text-light);
  font-weight: 500;
}
.roles-row-holder {
  color: var(--color-primary-dark);
  font-weight: 600;
}
.roles-row-holder-empty {
  color: var(--color-coral);
  font-weight: 500;
  font-style: italic;
}
.roles-row-board-note {
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
  white-space: nowrap;
}

/* ── Confirm Role Holders modal ── */
.confirm-roles-year-banner {
  padding: 10px 14px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.confirm-roles-state-yes {
  color: var(--color-leaf);
  font-weight: 700;
}
.confirm-roles-state-no {
  color: var(--color-coral);
  font-weight: 700;
}
.confirm-roles-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.confirm-roles-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}
.confirm-roles-row:last-child {
  border-bottom: none;
}
.confirm-roles-title {
  font-weight: 700;
  color: var(--color-primary);
  flex: 0 0 auto;
  min-width: 200px;
}
.confirm-roles-holders {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  text-align: right;
}
.confirm-roles-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 500;
}
.confirm-roles-empty {
  color: var(--color-coral);
  font-style: italic;
  font-size: 0.88rem;
}
.confirm-roles-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ── Organization & Roles (member-facing org chart) ──
   Board roles head each branch; committee roles indent beneath. Rows are
   tap-to-expand buttons revealing the role description (rd-overview /
   rd-duties reused from the role-detail modal). */
.org-note {
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-style: italic;
  margin: 0 0 10px;
}
.org-summary {
  font-size: 0.92rem;
  color: var(--color-text);
  padding: 8px 12px;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.org-open-count {
  color: var(--color-accent-dark);
  font-weight: 700;
}
/* Condensed org chart: board members across the top as columns, with the
   roles that report to each nested beneath. No icons. Responsive grid —
   as many ~14rem columns as fit; wraps to 1 on a phone. */
.org-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 12px;
  align-items: start;
}
.org-col {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(var(--color-primary-rgb), 0.035);
  overflow: hidden;
}
/* Board-member header atop a column: title over holder name. */
.org-col-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: rgba(var(--color-primary-rgb), 0.10);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}
.org-col-head .org-item-title {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.95rem;
}
.org-col-emoji { font-size: 1.05rem; line-height: 1; margin-right: 2px; }
.org-col-head .org-item-holders { margin-left: 0; }
.org-col-head .org-holder-name { color: var(--color-primary); font-size: 0.86rem; }
.org-col-head-static {
  padding: 7px 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  background: rgba(var(--color-primary-rgb), 0.10);
  border-bottom: 1px solid var(--color-border);
}
.org-col-roles { padding: 6px; }
.org-col-cat {
  font-family: var(--font-rounded);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 6px 4px 3px;
}
.org-item { margin-bottom: 4px; }
.org-item:last-child { margin-bottom: 0; }
.org-row-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--radius-sm);
}
.org-row-head:hover { background: rgba(var(--color-primary-rgb), 0.06); }
.org-row-head-expanded { background: rgba(var(--color-primary-rgb), 0.06); }
.org-mini { border: 1px solid var(--color-border); background: var(--color-white); }
.org-item-title { font-weight: 600; color: var(--color-text); font-size: 0.85rem; }
.org-item-holders {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px 5px;
  margin-left: auto;
}
.org-holder-name { font-size: 0.8rem; color: var(--color-text-light); font-weight: 600; }
.org-open-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--color-accent-light-rgb), 0.35);
  color: var(--color-accent-dark);
  font-size: 0.72rem;
  font-weight: 700;
}
.org-item-open .org-mini {
  border-style: dashed;
  border-color: rgba(var(--color-accent-light-rgb), 0.9);
  background: rgba(var(--color-accent-light-rgb), 0.08);
}
.org-row-detail {
  padding: 4px 10px 9px;
  font-size: 0.84rem;
}
.org-foot {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: 14px;
}
.roles-row-holder-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.roles-row-holder-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 8px;
  background: var(--color-soft-bg, #f4ede4);
  border-radius: 999px;
  font-size: 0.82rem;
}
.roles-row-holder-remove {
  background: transparent;
  border: 0;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  border-radius: 999px;
}
.roles-row-holder-remove:hover { color: var(--color-coral); background: rgba(0,0,0,0.04); }
.roles-row-assign {
  font-size: 0.78rem;
  padding: 2px 8px;
}
.roles-mgr-yearpick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  margin-right: auto; /* push the Show-archived toggle to the right */
}
.roles-mgr-yearpick select {
  padding: 2px 6px;
  font-size: 0.85rem;
}

/* ── Co-op Calendar modal (Phase B: DB-backed SESSION_DATES) ── */
.coop-cal-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.coop-cal-yearpick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  margin-right: auto;
}
.coop-cal-yearpick select {
  padding: 2px 6px;
  font-size: 0.85rem;
}
.coop-cal-ro-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--color-coral-rgb), 0.12);
  color: var(--color-coral);
}
.coop-cal-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.coop-cal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.coop-cal-table thead {
  background: var(--color-primary);
  color: var(--color-white);
}
.coop-cal-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.coop-cal-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.coop-cal-input {
  width: 100%;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
}
.coop-cal-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
}
.coop-cal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}
.coop-cal-add-row {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
/* Draft row added by "+ Add session" so the President fills it in inline
   instead of going through browser prompts. Subtle tint marks it as
   "new + unsaved" without competing with the saved rows. */
.coop-cal-draft-row td { background: #fff8e1; }
.coop-cal-draft-row td:first-child { border-left: 3px solid var(--color-primary); }
/* Existing row whose inputs have been edited but not yet saved. Same gold
   accent as draft rows so unsaved state reads consistently. */
.coop-cal-table tr[data-id].is-dirty td:first-child { border-left: 3px solid var(--color-primary); }
.coop-cal-table tr[data-id].is-dirty td { background: #fffbf0; }
.coop-cal-msg { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #fce9cf; color: #8a5a16; font-size: 0.88rem; }
/* Bottom save bar — one Save batches every dirty row + every draft. */
.coop-cal-save-bar {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Board Calendar add/edit form (inline panel inside the Board Calendar
   modal). Reuses the coop-cal table/toolbar/save-bar styles for layout. */
.board-cal-form {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-cream, #fbf8f2);
}
.board-cal-field { margin-bottom: 10px; }
.board-cal-field label { font-weight: 600; font-size: 0.9rem; }
.board-cal-field input,
.board-cal-field textarea {
  width: 100%;
  max-width: 320px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  margin-top: 2px;
}
.board-cal-field textarea { max-width: 100%; resize: vertical; }
.board-cal-field input[type="date"] { max-width: 200px; }
.board-cal-opt { font-weight: 400; color: var(--color-text-muted, #777); font-size: 0.82rem; }
.board-cal-legend { font-size: 0.82rem; color: var(--color-text-muted, #777); margin: 4px 0 10px; line-height: 1.4; }
.board-cal-derived-row td { background: #f7f5fb; }
.board-cal-auto-cell {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
  width: 1%;
}
.board-cal-auto-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  background: #ece7f6;
  color: #5b4a93;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}
.board-cal-role {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--color-text-muted, #777);
  font-style: italic;
}

/* Role edit overlay (opens on top of the Roles Manager modal). Uses its
   own stacking context so closing it doesn't collapse the manager. */
.role-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 40, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  overflow-y: auto;
  padding: 40px 16px;
}
.role-edit-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 24px 28px 20px;
  width: min(760px, 100%);
  position: relative;
}
.role-edit-close {
  position: absolute;
  top: 10px;
  right: 12px;
}
.role-edit-form { margin-top: 10px; }
.role-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.role-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-light);
}
.role-edit-field input,
.role-edit-field select,
.role-edit-field textarea {
  font: inherit;
  font-weight: 400;
  color: var(--color-text);
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  resize: vertical;
}
.role-edit-field-wide { grid-column: 1 / -1; }
.role-edit-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.role-edit-err {
  margin: 0;
  color: var(--color-coral);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .role-edit-grid { grid-template-columns: 1fr; }
  .roles-mgr-toolbar { justify-content: space-between; }
}

/* Flash highlight on the Ways to Help card when the plant badge is clicked,
   so users notice which card they just jumped to. */
@keyframes wsCardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(var(--color-accent-light-rgb), 0.0); }
  40%  { box-shadow: 0 0 0 6px rgba(var(--color-accent-light-rgb), 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-light-rgb), 0.0); }
}
.ws-card-flash { animation: wsCardFlash 1.4s ease-out; }