/* Hero — split panel: photo beside a crimson gradient content panel */

.hero {
  display: flex;
  color: var(--color-white);
}

/* flex:1 (=1 1 0%) + min-width:0 keep a true 50/50 split regardless of the
   photo's intrinsic width; min-height lets a panel grow with its content. */
.hero__panel {
  flex: 1;
  min-width: 0;
  min-height: 90vh;
}

/* Photo panel (markup: <img class="hero__panel hero__panel--media">) */
.hero__panel--media {
  object-fit: cover;
  object-position: center 38%;
}

/* Crimson radial-gradient content panel holding the logo lockup */
.hero__panel--content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  background: radial-gradient(
    circle,
    var(--color-primary-dark) 0%,
    var(--color-primary) 50%,
    var(--color-primary-light) 100%
  );
}

/* Inset gold frame on the content panel */
.hero__panel--content::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--color-secondary);
  pointer-events: none;
}

/* gold hairline divider between the logo lockup and the subtitle */
.hero__rule {
  width: 64px;
  height: 2px;
  background: var(--color-secondary);
  margin: 28px auto 24px;
}

.hero__title {
  display: inline-block;
  margin-bottom: var(--space-lg);
  color: var(--color-white-85);
  font-family: var(--font-family);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
}

.hero__logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  fill: var(--color-white);
  margin-bottom: var(--space-md);
}

.hero__name {
  margin-bottom: 0;
  color: var(--color-white);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  text-align: left;
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-brand);
}

.hero__subtitle {
  font-family: var(--font-family);
  font-size: 1.5rem;
  color: var(--color-white-85);
  max-width: 620px;
  margin-inline: auto;
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}

/* Section titles — decoration now lives in .section-kicker + .section-motif (base.css) */
.section-title {
  text-align: center;
  margin: 0 0 var(--space-2xl);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-4xl);
  color: var(--color-gray-900);
  letter-spacing: var(--letter-spacing-loose);
}

/* Section head — groups kicker + title + motif so the kicker centers and the
   title's bottom margin collapses inside the head (see .section-kicker /
   .section-motif in base.css). */
.section-head {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.section-head .section-title {
  margin-bottom: 0;
}

/* Service times */
.service-times {
  padding: var(--space-3xl) 0;
  background-color: var(--color-gray-50);
  background-image: var(--quatrefoil-svg);
  background-size: auto 90%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .service-times {
    background-size: cover;
  }
}

.service-times__schedule {
  max-width: var(--container-form);
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm-sm);
  padding: var(--space-2xl);
}

.service-times__heading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid
    color-mix(in srgb, var(--color-secondary) 25%, var(--color-white));
}

.service-times__heading:first-child {
  margin-top: 0;
}

.service-times__entry {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm) 0;
}

.service-times__name {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
}

.service-times__time {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-dark);
}

.service-times__footer {
  max-width: 768px;
  margin-inline: auto;
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  padding-left: 0;
  border-left: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-2xl);
  text-align: center;
  text-wrap: balance;
  color: var(--color-gray-600);
  letter-spacing: var(--letter-spacing-loose);
  line-height: 1.8;
}

.service-times__footer::before {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-secondary);
  margin: 0 auto var(--space-lg);
}

/* Events section */
.events-section {
  padding: var(--space-3xl) 0;
  position: relative;
  background: url("/static/images/sanctuary_angle_blur.jpg") center / cover
    no-repeat;
}

.events-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-white-60);
}

.events-section > .container {
  position: relative;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-lg);
}

.event-card {
  position: relative;
  display: flex;
  gap: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  cursor: pointer;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

/* Shared card hover lift — gold border + warm shadow */
.event-card:hover,
.ministry-card:hover,
.bulletin-item:hover,
.staff-dashboard__card:hover,
.directory-card:hover,
.staff-card:hover {
  box-shadow: var(--shadow-warm-lg);
  transform: translateY(-3px);
  border-color: var(--color-gold-soft);
}

/* Gold top-rule accent on standout cards (service-times schedule handled in §7) */
.ministry-card,
.spotlight-card {
  border-top: 3px solid var(--color-secondary);
}

/* Serif card titles */
.event-card__title,
.ministry-card__name,
.spotlight-card__title,
.staff-card__name {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: var(--space-sm);
  background: linear-gradient(
    140deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  border-radius: var(--radius-md);
  color: var(--color-white);
  line-height: 1;
}

.event-card__weekday {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  font-weight: var(--font-weight-semibold);
  opacity: 0.85;
  margin-bottom: var(--space-2xs);
}

.event-card__month {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  font-weight: var(--font-weight-semibold);
}

.event-card__day {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.event-card__content {
  flex: 1;
  min-width: 0;
}

.event-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.event-card__title a {
  color: var(--color-gray-900);
  text-decoration: none;
}

.event-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.event-card:hover .event-card__title a {
  color: var(--color-primary);
}

/* Shared full-card focus pattern — suppress link outline, show card-level ring */
.event-card__title a:focus-visible,
.ministry-card__name a:focus-visible,
.bulletin-item__link:focus-visible,
.staff-card__name a:focus-visible {
  outline: none;
}

.event-card:has(.event-card__title a:focus-visible),
.ministry-card:has(.ministry-card__name a:focus-visible),
.bulletin-item:has(.bulletin-item__link:focus-visible),
.staff-card:has(.staff-card__name a:focus-visible) {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
  .event-card__title a:focus-visible,
  .ministry-card__name a:focus-visible,
  .bulletin-item__link:focus-visible,
  .staff-card__name a:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
}

.event-card__time,
.event-card__location {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-xs);
}

.event-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  letter-spacing: var(--letter-spacing-loose);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-primary-light);
  color: var(--color-white);
  text-decoration: none;
}

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

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
}

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

.btn--outline-light:hover {
  background-color: var(--color-white);
  color: var(--color-primary-dark);
  text-decoration: none;
}

.btn--secondary {
  background-color: var(--color-white);
  border-color: var(--color-gray-200);
  color: var(--color-gray-700);
}

.btn--secondary:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Cards (generic) */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

/* Page header — mahogany band, optional faint photo, gold inset frame */
.page-header {
  position: relative;
  padding: var(--space-3xl) 0;
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
  background: var(--color-primary-dark);
}

/* optional faint photo (markup: <img class="page-header__bg">) */
.page-header__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-mahogany);
  outline: 1px solid var(--frame-gold-soft);
  outline-offset: -14px;
  pointer-events: none;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

/* optional decorative arch glyph (markup: <span class="page-header__arch">) */
.page-header__arch {
  display: inline-block;
  width: 22px;
  height: 44px;
  margin: 0 auto var(--space-md);
  background: var(--color-gold-soft);
  -webkit-mask: var(--arch-svg) center / contain no-repeat;
  mask: var(--arch-svg) center / contain no-repeat;
}

.page-header__title {
  font-family: var(--font-family);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  margin-bottom: var(--space-xs);
  letter-spacing: var(--letter-spacing-loose);
}

/* gold small-caps eyebrow */
.page-header__subtitle {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-gold-pale);
  font-weight: var(--font-weight-semibold);
}

/* About content pages */
.about-content {
  padding: var(--space-3xl) 0;
}

.about-content .container {
  max-width: var(--container-content);
}

.content-section {
  display: flow-root; /* modern clearfix — contains the embed float within the section */
}

.content-section h2,
.content-section h3 {
  clear: both; /* a new section starts below any preceding floated figure (embed) */
}

.content-section h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: 1.85rem;
  color: var(--color-primary);
}

.content-section h2::before {
  content: "";
  flex: none;
  width: 4px;
  height: 1.4em;
  background: var(--color-secondary);
  border-radius: 2px;
}

.content-section h2:first-child {
  margin-top: 0;
}

.content-section h3 {
  font-family: var(--font-family);
  font-style: italic;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.content-section a {
  text-decoration: underline;
  text-decoration-color: var(--color-gold-soft);
  text-underline-offset: 3px;
}

.content-section p,
.content-section dl,
.content-section ul {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--color-gray-700);
}

/* Editorial body copy — larger, airier paragraphs */
.content-section p {
  font-size: 1.24rem;
  line-height: 1.78;
}

/* Pull-quotes */
.content-section blockquote {
  border-left: 3px solid var(--color-secondary);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-xl);
  font-family: var(--font-family);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.62;
  color: var(--color-gray-600);
}

/* Definition list (e.g. the Five Solas) */
.content-section dl {
  border-top: 2px solid
    color-mix(in srgb, var(--color-secondary) 25%, var(--color-white));
}
.content-section dl > div {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.content-section dl dt {
  font-family: var(--font-family);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary-dark);
}

/* About editorial figures + images.
   The <figure> owns layout/float; the <img> owns the warm tint + frame. */
.about__image {
  width: 100%;
  height: auto; /* override the intrinsic height="…" attr so scaling stays proportional (no distortion) */
  filter: sepia(
    0.15
  ); /* subtle warm/aged tint — color preserved (icons, stained glass stay vivid) */
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm-figure);
}

.about__figure {
  margin-block: var(--space-xl);
}

/* Standalone: fills the content column at the image's natural aspect ratio. */
.about__figure--standalone {
  margin-inline: auto;
}

.about__image--standalone {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Embed: floats to ~half width so body text wraps around it.
   The float lives on the figure so the caption floats with the image. */
.about__figure--embed {
  float: right;
  width: 50%;
  margin-block: var(--space-2xs) var(--space-md); /* top near-flush with first text line */
  margin-inline-start: var(
    --space-lg
  ); /* gap to wrapping text; right edge stays flush */
}

.about__image--embed {
  box-shadow: var(--shadow-md);
}

.about__caption {
  margin-top: var(--space-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-secondary-dark);
  text-align: center;
  line-height: 1.5;
}

.content-section > blockquote > p {
  color: var(--color-gray-500);
}

/* About/Visit reading pager — bottom-of-page Previous/Next navigation for the
   curated About → Visit sequence (DECISIONS #49). Rendered as its own <nav>
   landmark. On the six wrapper pages it sits inside .content-section, so the
   link rules are scoped under .about-pager (and placed after .content-section a)
   to win the color/decoration cascade. */
.about-pager {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-gold-soft);
}

/* Empty left slot keeps Next right-aligned on the first page (no Previous). */
.about-pager__slot {
  flex: 1 1 0;
}

.about-pager a.about-pager__link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 22rem;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-warm-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.about-pager__link--next {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.about-pager a.about-pager__link:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-warm-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.about-pager a.about-pager__link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.about-pager__dir {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gray-500);
}

.about-pager__kicker {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-secondary);
}

.about-pager__label {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

/* Terminal CTA on /visit — hands the visitor into the live site. */
.about-pager__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
  text-align: right;
}

.about-pager__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .about-pager {
    flex-direction: column;
  }

  .about-pager a.about-pager__link,
  .about-pager__slot {
    max-width: none;
  }

  .about-pager__slot {
    display: none;
  }

  .about-pager__link--next {
    margin-left: 0;
    text-align: left;
    align-items: flex-start;
  }

  .about-pager__cta,
  .about-pager__cta-actions {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
  }
}

.content-list {
  margin: var(--space-md) 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.content-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-family);
  font-size: 1.3rem;
  color: var(--color-gray-700);
}

.acrostic-letter {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: linear-gradient(
    140deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  border-radius: var(--radius-md);
}

/* Staff sections */
.about-content--staff .container {
  max-width: var(--container-wide);
}

.staff-section {
  margin-bottom: var(--space-3xl);
}

.staff-section:last-child {
  margin-bottom: 0;
}

.staff-section__title {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-secondary);
}

/* Staff grid */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
  max-width: var(--container-wide);
  margin-inline: auto;
}

/* Staff card — the whole card links to the member's detail page via the
   stretched-link idiom (.staff-card__name a::after). */
.staff-card {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.staff-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gradient-photo-wash);
}

.staff-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
}

.staff-card__info {
  padding: var(--space-lg);
}

.staff-card__name {
  font-size: var(--font-size-xl);
  color: var(--color-gray-900);
  margin-bottom: var(--space-xs);
}

/* Stretched link: the name anchor's ::after overlays the whole card, making it
   fully clickable (mirrors .event-card__title a). */
.staff-card__name a {
  color: var(--color-gray-900);
  text-decoration: none;
}

.staff-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.staff-card:hover .staff-card__name a {
  color: var(--color-primary);
}

.staff-card__title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary-dark);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}

/* z-index lifts the email above the name's stretched ::after overlay so the
   mailto stays independently clickable. */
.staff-card__email a {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

.staff-card__email a:hover {
  color: var(--color-primary-light);
}

/* ESV copyright */
.esv-copyright {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  line-height: 1.6;
}

/* Scripture reference tooltips */
.scripture-ref {
  font-style: normal;
  color: var(--color-gray-700);
  border-bottom: 1px dotted var(--color-secondary);
  cursor: help;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.scripture-ref:hover,
.scripture-ref:focus-visible {
  color: var(--color-primary);
  border-bottom-style: solid;
}

.scripture-ref:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.scripture-tooltip {
  position: absolute;
  z-index: 200;
  width: max-content;
  max-width: min(420px, calc(100vw - 16px));
  background-color: var(--color-gray-800);
  color: var(--color-gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md) var(--space-lg);
}

.scripture-tooltip__body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.7;
  max-height: min(300px, 50vh);
  overflow-y: auto;
}

.scripture-tooltip__body strong {
  display: block;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-secondary-dark);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.scripture-tooltip__body strong:first-child {
  margin-top: 0;
}

.scripture-tooltip__caret {
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: var(--color-gray-800);
  transform: translateX(-50%);
  pointer-events: none;
}

.scripture-tooltip--above .scripture-tooltip__caret {
  top: 100%;
  bottom: auto;
  border-bottom-color: transparent;
  border-top-color: var(--color-gray-800);
}

/* Tooltip transitions */
.scripture-tooltip--enter {
  transition: opacity var(--transition-fast);
}

.scripture-tooltip--enter-start {
  opacity: 0;
}

.scripture-tooltip--enter-end {
  opacity: 1;
}

.scripture-tooltip--leave {
  transition: opacity var(--transition-fast);
}

.scripture-tooltip--leave-start {
  opacity: 1;
}

.scripture-tooltip--leave-end {
  opacity: 0;
}

/* Ministries overview */
.ministries-content {
  padding: var(--space-3xl) 0;
}

.ministry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl);
}

/* Ministry card */
.ministry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.ministry-card__body {
  flex: 1;
  padding: var(--space-lg);
}

.ministry-card__name {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
}

.ministry-card__name a {
  color: var(--color-gray-900);
  text-decoration: none;
}

.ministry-card__name a:hover {
  color: var(--color-primary);
}

.ministry-card__description {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ministry-card__meta {
  margin: 0;
}

.ministry-card__meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

.ministry-card__meta-row dt {
  margin-top: 0;
  min-width: 48px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-secondary-dark);
}

.ministry-card__meta-row dd {
  color: var(--color-gray-600);
}

.ministry-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* .ministry-content is available for ministry-specific content overrides if needed */

/* Ministry detail page */
.ministry-detail {
  padding: var(--space-3xl) 0;
}

.ministry-detail .container {
  max-width: var(--container-content);
}

.ministry-detail__meta,
.event-detail__meta,
.staff-detail__meta {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.ministry-detail__meta-item,
.event-detail__meta-item,
.staff-detail__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  font-size: var(--font-size-base);
  border-bottom: 1px solid var(--color-gray-100);
}

.ministry-detail__meta-item:last-child,
.event-detail__meta-item:last-child,
.staff-detail__meta-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ministry-detail__meta-item:first-child,
.event-detail__meta-item:first-child,
.staff-detail__meta-item:first-child {
  padding-top: 0;
}

.ministry-detail__meta-label,
.event-detail__meta-label,
.staff-detail__meta-label {
  min-width: 72px;
  flex-shrink: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-secondary-dark);
  padding-top: var(--space-2xs);
}

/* Stacked leader contacts (name + email link) in the ministry detail meta block. */
.ministry-detail__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Staff detail page */
.staff-detail {
  padding: var(--space-3xl) 0;
}

.staff-detail .container {
  max-width: var(--container-content);
}

/* Desktop: photo beside the contact meta; bio/back-link stay full-width below
   (they are siblings of the header, not inside it). Stacks on mobile — see the
   768px block. */
.staff-detail__header {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}

.staff-detail__photo {
  width: 100%;
  max-width: 320px;
  /* width:100% + max-width + auto inline margins centers the photo when its
     column/container is wider than 320px (mobile stack); a no-op in the ≤320px
     desktop grid column. */
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-warm-md);
  /* Placeholder wash — occluded once the img/initials paint. */
  background: var(--gradient-photo-wash);
}

/* Button modifiers */
.btn--sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  min-height: 2rem; /* 32px — meets WCAG 2.5.8 24px touch target minimum */
}

.btn--danger {
  background-color: var(--color-error-dark);
  color: var(--color-white);
  border-color: var(--color-error-dark);
}

.btn--danger:hover {
  background-color: var(--color-error-darker);
  border-color: var(--color-error-darker);
  color: var(--color-white);
  text-decoration: none;
}

.btn--danger:focus-visible {
  outline: 2px solid var(--color-error-darker);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-error-bg);
}

/* Auth-aware action bar on Events Calendar */
.events-actions {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-lg);
}

/* Ministry filter control — public events calendar */
.events-filter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-gray-200);
}

.events-filter__label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  white-space: nowrap;
}

.events-filter__controls {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.events-filter__select {
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-gray-900);
  cursor: pointer;
}

.events-filter__select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}

@media (max-width: 768px) {
  .events-filter {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Event detail page */
.events-content {
  padding: var(--space-3xl) 0;
}

.event-detail {
  padding: var(--space-3xl) 0;
}

.event-detail .container {
  max-width: var(--container-content);
}

.event-detail__body {
  margin-bottom: var(--space-2xl);
}

/* Staff management views */
.staff-content {
  padding: var(--space-3xl) 0;
}

/* Staff sidebar layout — unified staff/admin left nav (DECISIONS #57) */
.staff-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Without min-width:0 the 1fr track's auto minimum lets wide staff tables
   blow out the grid instead of triggering .staff-table-wrap's overflow-x. */
.staff-layout__main {
  min-width: 0;
}

.staff-nav--desktop {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  max-height: calc(100dvh - var(--header-height) - var(--space-xl));
  overflow-y: auto;
  padding-right: var(--space-lg);
  border-right: 1px solid var(--color-gray-200);
}

.staff-nav__group + .staff-nav__group {
  margin-top: var(--space-lg);
}

/* Gold small-caps eyebrow — the .section-kicker recipe with nav-scoped spacing */
.staff-nav__group-label {
  display: block;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-secondary);
  margin-bottom: var(--space-xs);
}

.staff-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.staff-nav__link {
  display: block;
  padding: var(--space-sm);
  border-left: 2px solid transparent;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.staff-nav__link:hover {
  color: var(--color-primary);
  background: var(--color-gray-50);
  text-decoration: none;
}

.staff-nav__link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.staff-nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  border-left-color: var(--color-secondary);
  background: var(--color-gray-50);
}

/* Mobile: the sidebar collapses to a no-JS <details> disclosure */
.staff-nav-disclosure {
  display: none;
}

@media (max-width: 768px) {
  .staff-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .staff-nav--desktop {
    display: none;
  }

  .staff-nav-disclosure {
    display: block;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
  }

  .staff-nav-disclosure > summary {
    padding: var(--space-sm) var(--space-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
  }

  .staff-nav-disclosure > summary:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
  }

  .staff-nav-disclosure[open] > summary {
    border-bottom: 1px solid var(--color-gray-200);
  }

  .staff-nav-disclosure .staff-nav {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }
}

.staff-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Inside a titled section the section title's margin-bottom provides the gap. */
.staff-section .staff-dashboard__grid {
  margin-top: 0;
}

.staff-dashboard__card {
  display: block;
  padding: var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.staff-dashboard__card:hover {
  text-decoration: none;
}

.staff-dashboard__card:hover .staff-dashboard__card-title {
  color: var(--color-primary);
}

.staff-dashboard__card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-looser);
  margin-bottom: var(--space-xs);
  color: var(--color-gray-900);
}

.staff-dashboard__card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
}

.admin-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.admin-dashboard__stat {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.admin-dashboard__stat-value {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
}

.admin-dashboard__stat-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--space-sm);
}

.staff-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.staff-toolbar--split {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .staff-toolbar--split {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .staff-toolbar--split .staff-toolbar__actions {
    justify-content: flex-end;
  }
}

/* For a toolbar holding a single filter form and no right-side actions (the base
   flex-end exists to right-align action buttons). */
.staff-toolbar--start {
  justify-content: flex-start;
}

.staff-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.staff-table th {
  background-color: var(--color-gray-50);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-secondary-dark);
  border-bottom: 2px solid var(--color-gray-200);
  white-space: nowrap;
}

.sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.sort-link:hover {
  color: var(--color-primary);
}

.sort-indicator {
  font-size: var(--font-size-sm);
  opacity: 0.45;
}

.sort-link--active .sort-indicator {
  opacity: 1;
}

.staff-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
  vertical-align: middle;
}

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

.staff-table tr:hover td {
  background-color: var(--color-gray-50);
}

.staff-table__actions-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

.staff-table__actions-wrap {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}

/* Staff form */
.staff-form {
  max-width: 640px;
  margin-inline: auto;
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.form-required {
  color: var(--color-primary);
}

.form-optional {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.form-instructions {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 0;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--color-secondary) 15%, transparent);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-error-dark);
}

.form-success {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

/* Inline modifier — for validation results that appear beside a button */
.form-error--inline,
.form-success--inline {
  display: inline;
  margin-top: 0;
  margin-left: var(--space-sm);
}

.form-hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Password field with show/hide visibility toggle */
.password-field {
  position: relative;
}

/* room for the toggle button so revealed text doesn't run under it */
.password-field__input {
  padding-right: calc(var(--space-md) * 2 + 1.25rem);
}

.password-field__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
}

.password-field__toggle:hover {
  color: var(--color-gray-700);
}

.password-field__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}

.password-field__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.form-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

/* Preset-amount chips on the public giving form (Alpine enhancement over the
   number input; degrades to a hidden-from-AT button row). */
.give-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* Renders a form as inline — for forms embedded within a line of text or button row */
.form--inline {
  display: inline;
}

.form-textarea--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-sm);
}

/* Custom schema form fields */
.custom-fields {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
}

/* Static instructional content rendered inside a form (type: "display").
   Visually integrates with form-group spacing without an input frame. */
.form-display {
  margin: var(--space-md) 0;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-gray-700);
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-radio-label,
.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  cursor: pointer;
}

.form-radio-input,
.form-checkbox-input {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Custom field read-only summary (confirmation page, email) */
.custom-fields-summary {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
}

.custom-fields-summary__heading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  margin-bottom: var(--space-md);
}

.custom-fields-summary__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
}

.custom-fields-summary__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}

.custom-fields-summary__value {
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
}

.custom-fields-summary__empty {
  color: var(--color-gray-400);
}

/* Mailing address composite field */
.mailing-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.mailing-address__field {
  display: flex;
  flex-direction: column;
}

.mailing-address__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-sm);
}

.mailing-address-summary {
  display: flex;
  flex-direction: column;
  font-style: normal;
  line-height: 1.4;
}

.mailing-address-summary__line {
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
  }

  .hero__panel {
    min-height: 40vh;
  }

  .hero__title {
    font-size: var(--font-size-lg);
  }

  .hero__logo {
    flex-direction: column;
  }

  .hero__name {
    font-size: var(--font-size-3xl);
    text-align: center;
    letter-spacing: calc(var(--letter-spacing-brand) * 0.75);
  }

  .hero__subtitle {
    font-size: var(--font-size-lg);
  }

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

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

  .page-header {
    padding: var(--space-xl) 0;
  }

  .page-header__title {
    font-size: var(--font-size-2xl);
  }

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

  /* Stack the detail-page header: photo (centered) above the contact meta. */
  .staff-detail__header {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

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

  .ministry-detail__meta-item,
  .event-detail__meta-item {
    align-items: flex-start;
  }

  .col-hide-mobile {
    display: none;
  }

  .form-actions {
    flex-direction: column;
  }

  .mailing-address__row {
    grid-template-columns: 1fr;
  }
}

/* Bulletins */

.bulletins-content {
  padding: var(--space-2xl) 0;
}

.bulletins-content .container {
  max-width: var(--container-narrow);
}

.bulletin-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.bulletin-group {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.bulletin-group__date {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-loose);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-secondary);
}

.bulletin-group__row {
  display: flex;
  gap: var(--space-lg);
}

.bulletin-item {
  flex: 1;
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.bulletin-item__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.bulletin-item__icon svg {
  width: 100%;
  height: 100%;
}

.bulletin-item__label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-primary);
}

.bulletin-item__desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-style: italic;
  line-height: 1.5;
}

.bulletin-item__link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* bulletin row collapses to stack on very narrow phones */
@media (max-width: 600px) {
  .bulletin-group__row {
    flex-direction: column;
  }
}

/* Announcement Banner */

.announcement-banner {
  padding: var(--space-xl) 0;
}

.announcement-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.announcement-banner__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.announcement-banner__body {
  flex: 1;
  min-width: 0;
}

.announcement-banner__title {
  display: block;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  margin-bottom: var(--space-xs);
}

.announcement-banner__content {
  font-size: var(--font-size-base);
  margin: 0;
  line-height: 1.5;
}

/* Style variants */
.announcement-banner--none {
  background-color: var(--color-gray-50);
  border-bottom: 3px solid var(--color-primary);
}
.announcement-banner--none .announcement-banner__title {
  color: var(--color-primary);
}

.announcement-banner--info {
  background-color: var(--color-info-light);
  border-bottom: 3px solid var(--color-info);
}
.announcement-banner--info .announcement-banner__title,
.announcement-banner--info .announcement-banner__icon {
  color: var(--color-info-dark);
}
.announcement-banner--info .announcement-banner__content {
  color: var(--color-gray-800);
}

.announcement-banner--warning {
  background-color: var(--color-warning-light);
  border-bottom: 3px solid var(--color-warning);
}
.announcement-banner--warning .announcement-banner__title,
.announcement-banner--warning .announcement-banner__icon {
  color: var(--color-warning);
}
.announcement-banner--warning .announcement-banner__content {
  color: var(--color-gray-800);
}

/* Announcements Page */

.announcements-content {
  padding: var(--space-3xl) 0;
}

.announcements-content .container {
  max-width: var(--container-narrow);
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.announcement-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.announcement-card__date {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-secondary-dark);
  margin-bottom: var(--space-xs);
}

.announcement-card__title {
  font-size: var(--font-size-xl);
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

.announcement-card__content {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: 1.7;
  margin: 0;
}

/* Auth Forms */

.auth-section {
  padding: var(--space-3xl) 0;
  background-color: var(--color-gray-50);
  flex: 1;
}

.auth-form {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm-sm);
  padding: var(--space-2xl);
  max-width: var(--container-form);
  margin: 0 auto;
}

.auth-form--centered {
  text-align: center;
}

.auth-form__message {
  color: var(--color-gray-700);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.auth-form__footer {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-align: center;
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.form-input--error {
  border-color: var(--color-error);
  outline-color: var(--color-error);
  background: var(--color-error-bg);
}

/* Member Directory */

.directory-content {
  padding: var(--space-3xl) 0;
  background: var(--color-gray-50);
}

/* Search */

.directory-search__input {
  max-width: 360px;
  margin-bottom: var(--space-xl);
}

/* A–Z jump bar — letter filter row (Alpine sets the active letter) */

.directory-az {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.directory-az__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  font-family: var(--font-family-sans);
  font-size: 0.82rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-500);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.directory-az__btn:hover {
  border-color: var(--color-gold-soft);
  color: var(--color-primary);
}

.directory-az__btn[aria-pressed="true"],
.directory-az__btn.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Card grid — full-bleed square photo tiles with a mahogany monogram fallback */

.directory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

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

.directory-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-gray-900);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.directory-card:hover .directory-card__name {
  color: var(--color-primary);
}

.directory-card:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.directory-card__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gradient-photo-wash);
  display: flex;
  align-items: center;
  justify-content: center;
}

.directory-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.directory-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.directory-card__placeholder span {
  font-family: var(--font-family);
  font-size: 2.9rem;
  font-weight: var(--font-weight-semibold);
  color: color-mix(in srgb, var(--color-white) 32%, transparent);
}

.directory-card__name {
  padding: 15px 12px;
  font-family: var(--font-family);
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-gray-900);
  line-height: 1.4;
}

/* Detail page */

.directory-detail {
  padding: var(--space-2xl) 0;
}

.directory-detail__layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* directory detail photo+info stacks on narrow screens */
@media (max-width: 640px) {
  .directory-detail__layout {
    grid-template-columns: 1fr;
  }

  .directory-detail__own-settings {
    text-align: left;
  }
}

.directory-detail__photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.directory-detail__photo-frame {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-gray-100);
  box-shadow: var(--shadow-warm-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
}

.directory-detail__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.directory-detail__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-photo-wash);
  color: var(--color-white-60);
}

.directory-detail__photo-placeholder svg {
  width: 96px;
  height: 96px;
}

.directory-detail__photo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 200px;
}

.directory-detail__photo-actions form {
  width: 100%;
}

.directory-detail__photo-actions .btn {
  width: 100%;
}

.directory-photo-upload {
  display: block;
}

.directory-detail__info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.directory-detail__section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm) 0;
  letter-spacing: var(--letter-spacing-loose);
}

.directory-detail__section-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 1.2em;
  background: var(--color-secondary);
  border-radius: 2px;
}

.directory-detail__members {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.directory-detail__member {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

/* Head of household: distinguished by the project's primary burgundy (no text label).
   Contrast 6.51:1 (WCAG AA); the inset outline keeps the distinction visible in
   Windows High Contrast Mode, where background colors are overridden. */
.directory-detail__member--head {
  background-color: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  outline: 1.5px solid var(--color-primary);
  outline-offset: -1.5px;
}

.directory-detail__contact {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.directory-detail__contact-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.directory-detail__contact-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-dark);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-loose);
}

.directory-detail__contact-value {
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.directory-detail__contact-value a {
  color: var(--color-primary);
  text-decoration: none;
}

.directory-detail__contact-value a:hover {
  text-decoration: underline;
}

.directory-detail__privilege-note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-style: italic;
  margin: 0;
}

.directory-detail__back {
  display: inline-block;
  margin-top: var(--space-2xl);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.directory-detail__back:hover {
  text-decoration: underline;
}

.directory-detail__own-settings {
  margin-top: var(--space-lg);
  text-align: center;
}

/* Privilege hidden-field indicator */

.directory-hidden-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  vertical-align: middle;
  white-space: nowrap;
}

.directory-lock-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Settings form */

.directory-settings-form {
  max-width: 540px;
}

.directory-settings__household {
  margin-bottom: var(--space-lg);
}

.directory-settings__household-name {
  font-family: var(--font-family);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  text-align: center;
  margin: 0;
}

.directory-settings__row {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.directory-settings__row--primary {
  border-bottom-color: var(--color-gray-200);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.directory-settings__fields {
  margin-bottom: var(--space-lg);
}

.directory-settings__fields-intro {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: var(--space-md) 0 var(--space-sm) 0;
}

.directory-settings__toggle-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  cursor: pointer;
}

.directory-settings__checkbox {
  margin-top: var(--space-2xs);
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.directory-settings__toggle-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
}

.directory-settings__toggle-hint {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.directory-settings__note {
  max-width: 540px;
  margin-top: var(--space-lg);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-style: italic;
  text-align: center;
}

.directory-settings__section-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.directory-settings__divider {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: var(--space-xl) 0 var(--space-lg);
}

.directory-settings__city-row {
  display: grid;
  grid-template-columns: 1fr 110px 80px;
  gap: var(--space-md);
}

@media (max-width: 480px) {
  .directory-settings__city-row {
    grid-template-columns: 1fr;
  }
}

/* Event Registration */

.event-registration {
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--space-xl);
}

.event-registration__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.event-registration__notice {
  padding: var(--space-md);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.event-registration__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

@media (max-width: 600px) {
  .event-registration__status {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.event-registration__badge {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.event-registration__badge--registered {
  color: var(--color-success);
}

.event-registration__badge--waitlisted {
  color: var(--color-warning);
}

.event-registration__confirmed {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
}

.event-registration__attendee-row {
  border-left: 3px solid var(--color-gray-200);
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (max-width: 600px) {
  .event-registration__attendee-row {
    padding-left: var(--space-sm);
  }
}

.event-registration__attendee-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.event-registration__attendee-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.event-registration__pricing {
  padding: var(--space-md);
  background-color: var(--color-gray-50);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.event-registration__pricing-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.event-registration__pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.event-registration__pricing-table td {
  padding: var(--space-xs) 0;
  vertical-align: middle;
}

.event-registration__pricing-table td:last-child {
  text-align: right;
  font-weight: var(--font-weight-semibold);
  padding-left: var(--space-md);
}

.event-registration__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

/* Staff Registrant Count Badges */

.reg-count-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-right: var(--space-xs);
}

.reg-count-badge--waitlisted {
  background-color: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.reg-count-badge--cancelled {
  background-color: var(--color-gray-100);
  color: var(--color-text-muted);
}

.reg-count-badge--danger {
  background-color: var(--color-error-bg);
  color: var(--color-error-darker);
  border: 1px solid var(--color-error-dark);
}

.reg-row--cancelled td {
  opacity: 0.6;
}

/* Alerts */

.alert {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.alert--danger {
  background-color: var(--color-error-bg);
  border-left: 4px solid var(--color-error-dark);
  color: var(--color-error-darker);
}

.alert--success {
  background-color: var(--color-success-bg);
  border-left: 4px solid var(--color-success);
  color: var(--color-success);
}

.alert--info {
  background-color: var(--color-info-light);
  border-left: 4px solid var(--color-info);
  color: var(--color-info-dark);
}

.alert--warning {
  background-color: var(--color-warning-light);
  border-left: 4px solid var(--color-warning);
  color: var(--color-warning-dark);
}

/* Staff Toolbar Group */

.staff-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* A group whose selects size to their content rather than claim the flex row
   (the base .form-select is width:100%). Opt-in only — other groups (e.g. the
   records page's fund/method/status filters) keep the full-width stacking. */
.staff-toolbar__group--auto .form-select {
  width: auto;
}

.staff-toolbar__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

/* Staff Manual Add Form */

.staff-manual-add {
  max-width: var(--container-content);
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

/* Mode Toggle (pill segmented control) */

/* Event Category Rows (Staff Form) */

.form-divider {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: var(--space-2xl) 0 var(--space-xl);
}

.form-section-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

/* My Registrations — Grouped Event Layout */

.reg-group {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.reg-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  gap: var(--space-md);
}

.reg-group__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.reg-group__date {
  font-weight: var(--font-weight-normal);
}

.reg-group__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .reg-group__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.reg-group .staff-table-wrap {
  border-radius: 0;
  border: none;
}

.reg-payment-notice {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}

/* Cancel Confirmation — Attendee List */

.cancel-attendee-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cancel-attendee-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.cancel-attendee-list__item:last-child {
  border-bottom: none;
}

/* Confirmation Modal */

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.confirm-modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.confirm-modal__dialog {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xl);
  padding: var(--space-xl);
  max-width: 480px;
  width: 100%;
}

.confirm-modal__title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.confirm-modal__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.confirm-modal__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* Outline + danger compound modifier — used when .btn--outline and .btn--danger
   appear together. Overrides the solid fill from .btn--danger so the button
   renders as a bordered outline with colored text on a transparent background.
   Example: <button class="btn btn--sm btn--outline btn--danger"> */
.btn--outline.btn--danger {
  background-color: transparent;
  color: var(--color-error-dark);
  border-color: var(--color-error-dark);
}

.btn--outline.btn--danger:hover {
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
  color: var(--color-white);
  text-decoration: none;
}

.btn--outline.btn--danger:focus-visible {
  outline: 2px solid var(--color-error-darker);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-error-bg);
}

/* Staff capacity management form */
.reg-capacity-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.reg-capacity-form .form-group {
  margin-bottom: 0;
}

.reg-capacity-form__input {
  width: 120px;
}

.reg-capacity-form__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Badges — the single status-chip vocabulary (registration, payment, gift,
   role, and directory statuses all use .badge + a semantic modifier) */
.badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-loose);
  text-align: center;
}

.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.badge--danger {
  background: var(--color-error-bg);
  color: var(--color-error-dark);
}

.badge--neutral {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

/* Staff event form: disabled fieldset for "closed" registration state */
.form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.form-fieldset:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Form Library: live preview pane and template-loader controls */
.form-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.form-inline-actions .form-select {
  flex: 1 1 16rem;
  min-width: 0;
}

.form-preview-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
}

.form-preview {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.form-preview--empty,
.form-preview--error {
  background: transparent;
  border-style: dashed;
}

.form-preview--error {
  border-color: var(--color-error-dark);
}

.form-preview__inner fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

/* Schema Hint Disclosure Widget */

.schema-hint {
  margin-top: var(--space-xs);
}

.schema-hint summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.schema-hint summary::-webkit-details-marker {
  display: none;
}

.schema-hint summary::before {
  content: "▶";
  font-size: var(--font-size-xs);
  transition: transform var(--transition-fast);
  display: inline-block;
}

.schema-hint[open] summary::before {
  transform: rotate(90deg);
}

.schema-hint summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.schema-hint__body {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.schema-hint__section-title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-looser);
  color: var(--color-secondary-dark);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.schema-hint__section-title:first-child {
  margin-top: 0;
}

.schema-hint__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.schema-hint__table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 2px solid var(--color-gray-200);
  white-space: nowrap;
}

.schema-hint__table td {
  padding: var(--space-xs) var(--space-sm);
  vertical-align: top;
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-600);
}

.schema-hint__table tr:last-child td {
  border-bottom: none;
}

.schema-hint__table td:first-child {
  white-space: nowrap;
  color: var(--color-gray-800);
}

.schema-hint__required {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.schema-hint__example {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-xs);
  color: var(--color-gray-700);
  overflow-x: auto;
  white-space: pre;
  margin-top: var(--space-xs);
}

/* Registrant table: registration scope badge */

.reg-scope-badge {
  display: inline-block;
  margin-inline-start: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-sans);
  letter-spacing: var(--letter-spacing-looser);
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  background: transparent;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  white-space: nowrap;
}

/* Registrant table: custom column truncation */

.staff-table__th--custom,
.staff-table__td--custom {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Payment actions cell (Phase 2) */

.payment-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.payment-actions__notes {
  width: 100%;
  min-width: 160px;
  resize: vertical;
  font-size: var(--font-size-sm);
}

.payment-actions__buttons {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}

/* Gift records: inline status-change control */
/* The audited per-row status change in the giving-records table. .form-select and
   .form-input are block/full-width by default; here they sit inline and compact.
   Related: .form-inline-actions (same structural idea — flex container forcing form
   controls inline) but intentionally distinct: the select is shrink-to-content here
   (no flex-grow) and the controls are compact btn--sm height to fit a table cell. */
.gift-status-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.gift-status-form .form-select,
.gift-status-form .form-input {
  width: auto;
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-sm);
}

.gift-status-form__note {
  flex: 1 1 8rem;
  min-width: 0;
}

/* Annual giving statement (printable tax receipt, DECISIONS #54) */
/* A document-style surface: the on-screen frame + action bar are stripped in
   print.css so a Print/Save-as-PDF produces a clean receipt. */
.statement-page {
  padding: var(--space-2xl) 0;
}

.statement__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-xl);
}

.statement__year-form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.statement__year-form .form-select {
  width: auto;
}

.statement__year-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.statement {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-2xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.statement__org {
  text-align: center;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-primary);
}

.statement__org-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  fill: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.statement__org-name {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--letter-spacing-brand);
}

.statement__org-line {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.statement__title {
  text-align: center;
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-xl);
}

.statement__donor {
  margin-bottom: var(--space-xl);
}

.statement__donor-name {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2xs);
}

.statement__donor-line {
  margin: 0;
}

.statement__table {
  margin-bottom: var(--space-lg);
}

.statement__amount {
  text-align: right;
}

/* `.staff-table th { text-align: left }` (specificity 0,1,1) beats the rule above
   (0,1,0), so the amount/total column *headers* need a higher-specificity override to
   right-align over their numeric cells. */
.staff-table th.statement__amount {
  text-align: right;
}

.statement__subtotals {
  margin-inline-start: auto;
  max-width: 24rem;
}

.statement__total-row th,
.statement__total-row td {
  font-weight: var(--font-weight-bold);
  border-top: 2px solid var(--color-gray-300);
}

.statement__empty {
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
}

.statement__disclaimer {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-style: italic;
}

@media (max-width: 600px) {
  .statement {
    padding: var(--space-md);
  }

  .statement__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Admin user detail card */
.admin-user__card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.admin-user__card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

.admin-user__card--danger {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.admin-user__profile {
  display: flex;
  flex-direction: column;
}

.admin-user__profile-row {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

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

.admin-user__profile-label {
  font-weight: var(--font-weight-semibold);
  min-width: 140px;
  flex-shrink: 0;
  color: var(--color-gray-500);
}

.admin-user__role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.admin-user__role-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-user__role-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.admin-user__role-checkbox input[type="checkbox"] {
  margin-top: var(--space-2xs);
  flex-shrink: 0;
}

.admin-user__role-checkbox-name {
  font-weight: var(--font-weight-semibold);
}

.admin-user__role-checkbox-desc {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Admin pagination */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.admin-pagination__info {
  color: var(--color-gray-500);
}

.admin-pagination__disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Admin user search input */
/* Reusable HTMX search input (components.SearchInput) */
.search-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.search-input__field {
  width: 280px;
  max-width: 100%;
}

/* HTMX toggles .htmx-request on the hx-indicator target during an in-flight
   request; the spinner is invisible (and removed from the a11y tree) otherwise. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.search-input__indicator {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-gray-300);
  border-top-color: var(--color-primary);
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .search-input__indicator {
    animation: search-spin 0.6s linear infinite;
  }

  @keyframes search-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* Empty state (staff index "no items" message) */
.empty-state {
  padding: var(--space-xl) 0;
  text-align: center;
}

/* Member-facing registration payment actions (My Registrations) */
.reg-payment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Staff form: leader assignment sub-section (ministry edit) */
.staff-form__section {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-gray-200);
}

.staff-form__section h3 {
  font-size: var(--font-size-lg);
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
}

/* Staff member form: photo management section */
.staff-photo-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-gray-200);
}

.staff-photo-section__preview {
  display: block;
  max-width: 200px;
  max-height: 200px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
}

.staff-photo-section__form {
  margin-bottom: var(--space-md);
}

/* HTMX search picker */
/* Shared select-to-act picker, used by the ministry-leader, registrant,       */
/* assign-person, and permission-grant pickers (Items J / Phase 3–5).          */

/* .picker — block root; unstyled by design, provides BEM namespace */
.picker {
}

.picker__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--space-sm);
}

.picker__results-container {
  margin-top: var(--space-xs);
  border-radius: var(--radius-sm);
  min-height: 0;
}

.picker__results {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
}

.picker__result {
  border-bottom: 1px solid var(--color-gray-100);
}

.picker__result:last-child {
  border-bottom: none;
}

.picker__result form {
  margin: 0;
}

.picker__pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
  font-family: var(--font-family-sans);
}

.picker__pick:hover {
  background-color: var(--color-gray-50);
}

.picker__pick:focus-visible {
  background-color: var(--color-gray-50);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.picker__pick-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.picker__pick-sub {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.picker__empty {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  padding: var(--space-sm) 0;
}

.picker__error {
  margin-top: var(--space-xs);
}

/* Registrant manual-add picker (Phase 3 convergence) */

.registrant-picker__selected {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

.registrant-picker__label {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-gray-800);
  font-weight: var(--font-weight-semibold);
}

.registrant-picker__clear {
  flex-shrink: 0;
}

/* Ministry leader list (assigned leaders in edit form) */

.leader-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

.leader-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.leader-list__item:last-child {
  border-bottom: none;
}

.leader-list__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.leader-list__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.leader-list__email {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.leader-list__item form {
  margin: 0;
  flex-shrink: 0;
}

.leader-list__error {
  margin-bottom: var(--space-sm);
}

/* Badge accent (gold) */
.badge--accent {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  color: var(--color-secondary-dark);
}

/* Spotlight / Featured Event */
.spotlight-event {
  padding: var(--space-xl) 0;
  background: var(--color-gray-50);
}

.spotlight-card {
  display: flex;
  gap: var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.spotlight-card__image {
  flex: 0 0 340px;
  max-width: 340px;
}

.spotlight-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight-card__content {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.spotlight-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 72px;
  padding: var(--space-sm);
  background: linear-gradient(
    140deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  border-radius: var(--radius-md);
  color: var(--color-white);
  line-height: 1;
}

.spotlight-card__body {
  flex: 1;
  min-width: 0;
}

.spotlight-card__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-xs);
}

.spotlight-card__title a {
  color: var(--color-gray-900);
  text-decoration: none;
}

.spotlight-card__title a:hover {
  color: var(--color-primary);
}

.spotlight-card__title a:focus-visible {
  outline: none;
}

.spotlight-card:has(.spotlight-card__title a:focus-visible) {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

@supports not selector(:has(*)) {
  .spotlight-card__title a:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
}

.spotlight-card__time,
.spotlight-card__location {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-xs);
}

.spotlight-card__description {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  margin: var(--space-sm) 0 var(--space-md);
  line-height: var(--line-height-relaxed);
}

/* Public ministry detail: upcoming events link wrapper */
.ministry-detail__events {
  margin-top: var(--space-xl);
}

.spotlight-card__description p:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .spotlight-card {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .spotlight-card__image {
    flex: none;
    max-width: 100%;
    height: 300px; /* definite height so img height:100% resolves */
    overflow: hidden; /* clip so object-fit:cover crops instead of bleeding */
  }

  .spotlight-card__content {
    padding: var(--space-md);
  }

  .spotlight-card__title {
    font-size: var(--font-size-xl);
  }
}

/* Staff household management (directory:manage) */

.staff-form__address-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-md);
}

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

.household-members__heading {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: var(--font-size-lg);
}

.household-members__panel {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
}

.household-members__add-form {
  max-width: 640px;
}

.household-members__add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

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

.household-members__head-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
  font-weight: var(--font-weight-normal);
}

/* Member list (current household members) */
.member-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.member-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.member-list__item:last-child {
  border-bottom: none;
}

.member-list__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.member-list__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.member-list__email {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.member-list__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.member-list__actions form {
  margin: 0;
}

.member-list__reorder {
  display: flex;
  gap: var(--space-2xs);
}

.member-list__move {
  padding: var(--space-2xs) var(--space-xs);
  line-height: 1;
}

.member-list__move:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Admin role surface (Phase 5 Convo 2) */
.badge--system {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  margin-left: var(--space-xs);
  text-transform: uppercase;
}

.admin-role__name {
  font-weight: var(--font-weight-semibold);
}

.admin-role__card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.admin-role__card-title {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

.admin-role__card--danger {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.admin-role__meta {
  margin-top: var(--space-md);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.admin-role__form {
  max-width: 640px;
}

/* Notice variant for the admin role (defense-in-depth lock) */
.admin-role__notice {
  background: var(--color-warning-light);
  border-left: 4px solid var(--color-warning-dark);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.admin-role__notice-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning-dark);
}

.admin-role__notice p {
  margin: 0 0 var(--space-sm);
  color: var(--color-gray-700);
}

.admin-role__notice-meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Permissions checkbox list — scrollable so Save/Cancel stay reachable for
   the full set of permissions (mirrors .picker__results max-height treatment). */
.admin-role__perm-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 360px;
  overflow-y: auto;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-sm);
  padding-inline-end: 0; /* avoid collision with the scrollbar track */
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.admin-role__perm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-xs);
  cursor: pointer;
}

.admin-role__perm-checkbox:focus-within {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

.admin-role__perm-checkbox input[type="checkbox"] {
  margin-top: var(--space-2xs);
  flex-shrink: 0;
}

.admin-role__perm-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.admin-role__perm-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.admin-role__perm-name {
  font-weight: var(--font-weight-semibold);
}

.admin-role__perm-badge {
  text-transform: uppercase;
}

.admin-role__perm-desc {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.admin-role__delete-warning {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
}

/* HTMX error toast (global htmx-errors.js — 5xx / network failure feedback) */

.htmx-error-toast {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 24rem;
  box-shadow: var(--shadow-warm-lg);
}

.htmx-error-toast[hidden] {
  display: none;
}

.htmx-error-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  color: inherit;
  padding: 0 var(--space-2xs);
}

.htmx-error-toast__close:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Inline destructive-action confirm (components.ConfirmForm) */

.confirm-form {
  display: inline-flex;
}

.confirm-form__reveal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.confirm-form__prompt {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}