/* ==========================================================================
   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-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;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.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;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.01em;
}

/* ---------- 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 {
  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 input:focus,
.tour-form-field select: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-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, 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, 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;
  }
}

/* ---------- 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;
}

/* 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;
}

.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;
}

/* 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;
}

/* 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;
}

@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) ── */
.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: 1.5rem 1.75rem;
  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);
}
.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;
}
.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;
}
.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; }
/* 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 {
  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; }
/* 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-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); }

/* 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);
}
.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; }
.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; }
.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;
  overflow: hidden;
}
.emi-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.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);
}
.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;
}

/* ---------- 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-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;
}

/* 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; }