/* One warm neutral tag for every category. */
.category-tag {
  --vp-category-color: var(--vp-muted);
  --vp-category-soft: var(--vp-surface-muted);
}

.primary-nav {
  position: fixed;
  z-index: 1030;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  left: max(0.75rem, env(safe-area-inset-left));
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 0.15rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-pill);
  background: #fff;
  box-shadow: var(--vp-shadow-md);
}

.primary-nav__link {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.25rem 0.15rem;
  color: var(--vp-ink);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.35rem;
}

.primary-nav__link .primary-nav__icon {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.primary-nav__link[aria-current="page"] { color: var(--vp-accent-dark); text-decoration: underline; text-decoration-thickness: 0.15rem; text-underline-offset: 0.2rem; }

.primary-nav__link[aria-current="page"] .primary-nav__icon { stroke-width: 2.4; }

.primary-nav__link--create .primary-nav__icon-wrap {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  color: #fff;
  background: var(--vp-accent);
  border-radius: var(--vp-radius-pill);
  box-shadow: var(--vp-shadow-md);
  transform: translateY(-0.55rem);
}

.primary-nav__link--create .primary-nav__icon-wrap .primary-nav__icon { width: 1.15rem; height: 1.15rem; }

.nav-unread-badge {
  display: inline-flex;
  min-width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.15rem;
  padding: 0 0.3rem;
  color: #fff;
  background: var(--vp-coral);
  border-radius: var(--vp-radius-pill);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
}

body.has-shell-nav .site-main { padding-bottom: calc(var(--vp-bottom-nav-height) + env(safe-area-inset-bottom)); }

/* The root, not each control, keeps focus targets above the bottom nav: Chromium ignores scroll-margin on textareas. */
@media (max-width: 61.98rem) {
  html:has(body.has-shell-nav) { scroll-padding-bottom: calc(var(--vp-bottom-nav-height) + 1rem + env(safe-area-inset-bottom)); }
}
body.has-shell-nav .site-footer { padding-bottom: calc(var(--vp-bottom-nav-height) + env(safe-area-inset-bottom)); }

@media (min-width: 62rem) {
  .primary-nav {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: var(--vp-sidebar-width);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: var(--vp-sidebar-brand-clearance) 1rem var(--vp-sidebar-menu-clearance);
    border: 0;
    border-right: 1px solid var(--vp-border);
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
  }

  .primary-nav__link { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; padding: 0.65rem 0.75rem; font-size: 0.95rem; text-align: left; }

  .primary-nav__link[aria-current="page"] { background: var(--vp-accent-soft); border-radius: var(--vp-radius); text-decoration: none; }
  .primary-nav__link[href="#account-menu"] { display: none; }

  .primary-nav__link--create .primary-nav__icon-wrap { width: 1.75rem; height: 1.75rem; box-shadow: none; transform: none; }

  body.has-shell-nav .site-main,
  body.has-shell-nav .site-footer,
  body.has-shell-nav .message-region { margin-left: var(--vp-sidebar-width); }

  body.has-shell-nav .site-header {
    position: fixed;
    z-index: 1035;
    inset: 0 auto 0 0;
    width: var(--vp-sidebar-width);
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  body.has-shell-nav .site-header__inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 1rem;
  }

  body.has-shell-nav .site-brand, body.has-shell-nav .site-navigation { pointer-events: auto; }
  body.has-shell-nav .site-navigation { margin-top: auto; justify-content: flex-start; }
  body.has-shell-nav .account-menu { width: 100%; }
  body.has-shell-nav .account-menu__summary { width: 100%; }
  body.has-shell-nav .account-menu__panel { top: auto; right: auto; bottom: calc(100% + 0.65rem); left: 0; }

  body.has-shell-nav .site-main { padding-bottom: 0; }
  body.has-shell-nav .site-footer { padding-bottom: env(safe-area-inset-bottom); }
}

.account-menu { position: relative; }
.account-menu__summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  list-style: none;
}
.account-menu__summary::-webkit-details-marker { display: none; }
.account-menu__panel {
  position: absolute;
  z-index: 1040;
  top: calc(100% + 0.65rem);
  right: 0;
  display: grid;
  width: min(22rem, calc(100vw - 2rem));
  gap: 0.2rem;
  padding: 0.75rem;
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  background: #fff;
  box-shadow: var(--vp-shadow-md);
}
.account-menu__panel .site-navigation__link { width: 100%; padding: 0.65rem 0.75rem; border: 0; border-radius: var(--vp-radius-sm); }
.account-menu__panel .site-navigation__link[aria-current="page"] { background: var(--vp-accent-soft); }
.account-menu__panel .logout-form { padding-top: 0.5rem; border-top: 1px solid var(--vp-border); }
.page-back { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; font-weight: 700; text-decoration: none; }
.page-back:hover { text-decoration: underline; }

@media (max-width: 35rem) {
  .site-header__inner { min-height: 4.25rem; align-items: center; flex-direction: row; flex-wrap: nowrap; }
  .site-brand__description { display: none; }
  .site-navigation { width: auto; margin-left: auto; }
  .account-menu__summary .account-context__text { display: none; }
  .account-menu__panel {
    position: fixed;
    top: auto;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: calc(var(--vp-bottom-nav-height) + max(1.25rem, env(safe-area-inset-bottom)));
    left: max(0.75rem, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - var(--vp-bottom-nav-height) - 2.5rem - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.category-tag { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.8rem; padding: 0.2rem 0.6rem; color: var(--vp-category-color); background: var(--vp-category-soft); border: 1px solid var(--vp-border); border-radius: var(--vp-radius-pill); font-size: 0.8rem; font-weight: 700; }


.agenda-frame { max-width: 70rem; }
.agenda-frame .page-header { margin-bottom: 1.5rem; }
.agenda-frame .page-header h1 { margin-bottom: 0.65rem; font-size: clamp(2rem, 5vw, 2.6rem); }
.agenda-date { margin-bottom: 0.5rem; color: var(--vp-accent-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.agenda-greeting__lead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.agenda-draft-hint { margin-bottom: 0.85rem; padding: 0.6rem 0.85rem; border: 1px solid var(--vp-border); border-left-width: 4px; border-left-color: var(--vp-accent); border-radius: var(--vp-radius-sm); background: var(--vp-gold-soft); font-weight: 700; }

.event-hero { margin-bottom: 1.25rem; overflow: hidden; border-radius: 1.25rem 1.25rem 1.25rem 0.5rem; background: var(--vp-accent-dark); color: #fff; }
.event-hero__cover { display: block; width: 100%; height: auto; aspect-ratio: var(--vp-cover-ratio); object-fit: cover; object-position: center; }
.event-hero__body { padding: clamp(1.1rem, 3vw, 1.65rem); }
.event-hero__eyebrow { margin-bottom: 0.5rem; color: var(--vp-on-dark-muted); font-size: 0.85rem; font-weight: 800; }
.event-hero__title { margin-bottom: 0.65rem; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.05; }
.event-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin-bottom: 0.85rem; }
.event-hero__meta dt { color: var(--vp-on-dark-muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.event-hero__meta dd { margin: 0; font-weight: 650; }
.event-hero__notice { display: inline-block; padding: 0.35rem 0.75rem; margin-bottom: 1rem; color: var(--vp-ink); background: var(--vp-gold-soft); border-radius: var(--vp-radius-pill); font-weight: 700; }
.event-hero__notice--discussion a { color: var(--vp-ink); }
.event-hero .avatar-stack { display: flex; padding: 0; margin: 0 0 0.5rem; list-style: none; }
.event-hero .avatar-stack li { display: inline-flex; margin-left: -0.5rem; }
.event-hero .avatar-stack li > * { border-color: var(--vp-accent-dark); }
.event-hero .avatar-stack li:first-child { margin-left: 0; }
.event-hero__people-caption { margin: 0 0 0.85rem; color: var(--vp-on-dark-muted); font-size: 0.85rem; }
.event-hero .viewer-rsvp { border-top-color: rgba(255, 255, 255, 0.3); }
.event-hero .viewer-rsvp h3, .event-hero__title a, .event-hero__link { color: #fff; }
.event-hero .event-facts dt, .event-hero .form-label, .event-hero .form-text { color: var(--vp-on-dark-muted); }
.event-hero :focus-visible { outline-color: #fff; }
.event-hero__link { display: inline-flex; min-height: 2.75rem; align-items: center; margin-top: 0.5rem; font-weight: 700; }

.upcoming-list { margin-bottom: 1.5rem; }
.upcoming-list .event-list { gap: 0.65rem; padding: 0; list-style: none; }
.upcoming-list .event-list > li { min-width: 0; }
.upcoming-list .event-card { height: 100%; padding: 0.85rem 1rem; border-left-width: 1px; border-radius: var(--vp-radius); }
.upcoming-list .event-card__cover { width: 100%; height: auto; margin-bottom: 0.75rem; aspect-ratio: var(--vp-cover-ratio); }
.upcoming-list .event-card__title { margin-bottom: 0.35rem; font-size: 1rem; }
.event-card__meta--compact { justify-content: space-between; }
.event-card__compact-meta { color: var(--vp-muted); }
.event-card__compact-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--vp-border); color: var(--vp-muted); font-size: 0.875rem; }


@media (min-width: 48rem) {
  .upcoming-list .event-list {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .event-hero--with-cover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem); }
  .event-hero--with-cover .event-hero__body { grid-area: 1 / 1; }
  .event-hero--with-cover .event-hero__cover-link { grid-area: 1 / 2; align-self: start; }
}

@media (max-width: 35rem) {
  .primary-nav { right: 0; bottom: 0; left: 0; padding-right: max(0.25rem, env(safe-area-inset-right)); padding-bottom: max(0.25rem, env(safe-area-inset-bottom)); padding-left: max(0.25rem, env(safe-area-inset-left)); border-width: 1px 0 0; border-radius: 0; box-shadow: 0 -0.3rem 1.25rem rgba(29, 41, 37, 0.09); }
  .primary-nav__link { position: relative; flex-basis: 44px; flex-shrink: 0; min-width: max-content; }
  .primary-nav__link--notifications { flex-grow: 1.6; }
  .nav-unread-badge { position: absolute; top: 0.15rem; right: 0.15rem; margin: 0; }
  .primary-nav__link--create .primary-nav__icon-wrap { width: 3rem; height: 3rem; }
  .page-frame { padding-top: 1.5rem; }
  .agenda-frame .page-header { margin-bottom: 1rem; }
  .agenda-greeting__lead { align-items: stretch; flex-direction: column; gap: 0.75rem; }
  .agenda-greeting__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .agenda-greeting__actions .btn { min-width: 0; padding-right: 0.6rem; padding-left: 0.6rem; }
  .event-hero { margin-right: -0.25rem; margin-left: -0.25rem; }
  .event-hero__body { padding: 1rem; }
  .event-hero__title { font-size: 1.75rem; }
  .event-hero   .event-detail-frame .page-header h1 { margin-bottom: 0; font-size: 2rem; }
  .event-detail-frame .event-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.form-grid { display: grid; min-width: 0; gap: 1.25rem; }
.event-form { width: 100%; max-width: 54rem; margin-right: auto; margin-left: auto; }
.event-form-frame .page-header { max-width: 54rem; margin-right: auto; margin-left: auto; }

.content-panel--subtle { padding: 1rem 1.25rem; border-style: dashed; background: var(--vp-canvas); }

.event-detail-composition--with-cover .event-facts { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.event-detail-frame .page-header { margin-bottom: 1.25rem; }
.event-detail-frame .content-panel { padding: clamp(1rem, 3vw, 1.5rem); border-radius: var(--vp-radius); }
/* Grouped list: optional detail sections and the agenda search share one row style. */
.section-list { overflow: hidden; background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: var(--vp-radius); box-shadow: var(--vp-shadow-sm); }
.section-list:not(:has(.section-row)) { display: none; }
.section-row + .section-row { border-top: 1px solid var(--vp-border); }
.section-row__summary { display: grid; min-height: 3.75rem; grid-template: "icon title chip chev" auto "icon detail chip chev" auto / 2.375rem minmax(0, 1fr) auto auto; align-items: center; column-gap: 0.75rem; padding: 0.7rem 0.9rem; list-style: none; cursor: pointer; }
div.section-row__summary { cursor: auto; }
.section-row__summary::-webkit-details-marker { display: none; }
.section-row__summary:focus-visible { outline-offset: -3px; }
.section-row__icon { display: grid; width: 2.375rem; height: 2.375rem; grid-area: icon; place-items: center; border-radius: 0.75rem; }
/* Coral stays reserved for chips that wait for the viewer; tiles only group. */
.section-row__icon--accent { color: var(--vp-accent-dark); background: var(--vp-accent-soft); }
.section-row__icon--grey { color: var(--vp-muted); background: var(--vp-surface-muted); }
.section-row__title { grid-area: title; align-self: end; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.section-row__title:not(:has(+ .section-row__detail)) { grid-row: 1 / 3; align-self: center; }
.section-row__detail { grid-area: detail; align-self: start; color: var(--vp-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.section-row__chevron { grid-area: chev; color: var(--vp-muted); transition: transform 0.2s; }
.section-row__disclosure[open] > summary .section-row__chevron { transform: rotate(90deg); }
.status-chip { grid-area: chip; padding: 0.2rem 0.55rem; border-radius: var(--vp-radius-pill); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.status-chip--todo { color: var(--vp-coral); background: var(--vp-coral-soft); }
.status-chip--ok { color: var(--vp-teal); background: var(--vp-teal-soft); }
.status-chip--info { color: var(--vp-muted); background: var(--vp-surface-muted); }
.section-row__content { padding: 0 0.9rem 1rem; }
/* In-row headings never outrank the row title (1rem/700). */
.section-row__content :is(h3, h4, h5, h6) { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.section-row__content :is(h4, h5, h6) { font-size: 0.9375rem; }
.section-group-title { margin: 0.5rem 0.4rem -0.5rem; color: var(--vp-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
/* "Wer kommt?": a decorative proportion bar, then labelled groups of person chips.
   Grey, not coral, marks refusals; coral stays for chips that wait for the viewer. */
.who-bar { display: block; width: 100%; height: 0.5rem; margin: 0.15rem 0 0.75rem; border-radius: var(--vp-radius-pill); background: var(--vp-surface-muted); }
.who-bar__going, .who-group--going .who-dot { fill: var(--vp-accent); background: var(--vp-accent); }
.who-bar__maybe, .who-group--maybe .who-dot { fill: var(--vp-gold); background: var(--vp-gold); }
.who-bar__not_going, .who-group--not_going .who-dot { fill: var(--vp-muted); background: var(--vp-muted); }
.who-bar__no_response { fill: var(--vp-border-strong); }
.who-group--no_response .who-dot { border: 1.5px dashed var(--vp-muted); }
.who-group { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; gap: 0.5rem; padding: 0.55rem 0; border-top: 1px solid var(--vp-border); }
.who-bar + .who-group, .attendance-overview > .who-group:first-child { border-top: 0; }
.who-group__label { display: flex; min-height: 1.75rem; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.875rem; font-weight: 700; }
.who-group__count { color: var(--vp-muted); font-weight: 400; }
.who-dot { width: 0.625rem; height: 0.625rem; flex: none; border-radius: 50%; }
.who-group__empty { margin: 0; padding-top: 0.2rem; color: var(--vp-muted); font-size: 0.875rem; }
.people { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.person { display: inline-flex; min-height: 1.75rem; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem 0.15rem 0.15rem; border: 1px solid var(--vp-border); border-radius: var(--vp-radius-pill); background: var(--vp-canvas); font-size: 0.8125rem; overflow-wrap: anywhere; }
.person .avatar-chip { width: 1.5rem; height: 1.5rem; font-size: 0.6rem; opacity: 1; }
.person--guest { font-style: italic; }
.person--viewer, .person--own { border-color: var(--vp-accent); }
.person__hint { color: var(--vp-muted); font-size: 0.75rem; font-style: normal; }
.person__reconfirm { color: var(--vp-gold); font-weight: 700; line-height: 1; }
/* A 24px remove control whose hit area reaches past the chip edge. */
.person__remove { position: relative; display: inline-grid; width: 1.5rem; height: 1.5rem; margin: -0.15rem -0.4rem -0.15rem 0; place-items: center; border-radius: 50%; color: var(--vp-muted); font-size: 1rem; font-style: normal; text-decoration: none; }
.person__remove::after { position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; content: ""; transform: translate(-50%, -50%); }
.person__remove:hover { color: var(--vp-coral); background: var(--vp-coral-soft); }
.who-comes__notice { margin: 0 0 0.5rem; color: var(--vp-muted); font-size: 0.8125rem; }
/* "+ Gast": a dashed chip that opens a compact inline form below the chips. */
.people__add:has(details[open]) { flex-basis: 100%; }
.guest-add__toggle { position: relative; display: inline-flex; min-height: 1.75rem; align-items: center; gap: 0.25rem; padding: 0.15rem 0.7rem; border: 1px dashed var(--vp-accent); border-radius: var(--vp-radius-pill); color: var(--vp-accent-dark); font-size: 0.8125rem; font-weight: 700; list-style: none; cursor: pointer; }
.guest-add__toggle::-webkit-details-marker { display: none; }
.guest-add__toggle::after { position: absolute; top: 50%; right: 0; left: 0; height: 2.75rem; content: ""; transform: translateY(-50%); }
.guest-add__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-top: 0.6rem; }
.guest-add__form .form-control { width: auto; min-width: 0; flex: 1 1 10rem; }
.guest-add__label, .guest-add__hint, .guest-add__error { flex-basis: 100%; margin: 0; font-size: 0.8125rem; }
.guest-add__hint { color: var(--vp-muted); }
.who-group--no_response .person { border-style: dashed; background: var(--vp-surface); }
.people__toggle { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.3rem; padding: 0 0.4rem; border-radius: var(--vp-radius-sm); color: var(--vp-accent-dark); font-size: 0.8125rem; font-weight: 700; list-style: none; cursor: pointer; }
.people__toggle::-webkit-details-marker { display: none; }
.people__toggle::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); }
.people__more details[open] > .people__toggle::after { transform: translateY(0.12rem) rotate(-135deg); }
.people__toggle:hover { text-decoration: underline; }
.people__toggle-open, .people__more details[open] .people__toggle-closed { display: none; }
.people__more details[open] .people__toggle-open { display: inline; }
.people__more:has(details[open]) { flex-basis: 100%; }
/* Once open, the one toggle follows the chips it revealed; DOM order stays summary-first. */
.people__more details[open] { position: relative; padding-bottom: 3rem; }
.people__more details[open] > .people__toggle { position: absolute; bottom: 0; left: 0; }
/* "Teilnahme": the viewer's answer and guests, then a divided "Wer kommt?" roster. */
.attendance-row .viewer-rsvp { padding-top: 0; border-top: 0; }
.attendance-deadline, .who-comes__count { margin: 0; color: var(--vp-muted); font-size: 0.8125rem; }
.who-comes { padding-top: 1rem; border-top: 1px solid var(--vp-border); }
.who-comes:first-child { padding-top: 0; border-top: 0; }
.who-comes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; margin-bottom: 0.4rem; }
/* Title and count wrap onto two lines on narrow screens instead of clipping. */
.who-comes__title, .who-comes__count { min-width: 0; margin: 0; overflow-wrap: anywhere; }
/* "Deine Antwort": the shared segmented choice; the radios stay for semantics
   and keyboard, and a check mark joins the accent fill. */
.viewer-rsvp { scroll-margin-top: 4.5rem; }
.viewer-rsvp .alert { margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.viewer-rsvp .event-facts { grid-template-columns: minmax(0, 1fr); margin-bottom: 0.5rem; }
/* minmax(0) keeps a long one-line note from widening the card past its edge. */
.rsvp-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
.rsvp-choice { margin: 0; }
/* Three equal answers in the shared segmented choice (app.css). */
.rsvp-choice > .radio-options { display: grid; max-width: 26rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rsvp-choice label { min-height: 2.75rem; padding: 0.3rem 0.4rem; overflow-wrap: normal; word-break: normal; }
/* A narrow card keeps "✓ Vielleicht" on one line rather than breaking the word,
   with room left for wide system fonts such as DejaVu Sans. */
@media (max-width: 22.5rem) {
  .rsvp-choice label { padding-inline: 0; font-size: 0.78rem; }
  .rsvp-choice .radio-options > div:has(:checked) label::before { margin-right: 0.1rem; }
}
.rsvp-form--auto .rsvp-form__save { display: none; }
.rsvp-form__hint { margin: 0; color: var(--vp-muted); font-size: 0.8125rem; }
.rsvp-choice[aria-busy="true"] { cursor: progress; }
.rsvp-form__save { justify-self: start; }
.rsvp-note__toggle { display: inline-flex; max-width: 100%; min-height: 2rem; align-items: center; gap: 0.25rem; color: var(--vp-accent-dark); font-size: 0.8125rem; font-weight: 600; list-style: none; cursor: pointer; }
.rsvp-note__toggle::-webkit-details-marker { display: none; }
.rsvp-note__toggle, .rsvp-withdraw__button { position: relative; }
.rsvp-note__toggle::after { position: absolute; inset: -0.375rem 0; content: ""; }
.rsvp-withdraw__button::after { position: absolute; inset: -0.625rem -0.25rem; content: ""; }
.rsvp-note__text { overflow: hidden; color: var(--vp-muted); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.rsvp-note__edit { flex: none; }
.rsvp-note__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; }
.rsvp-note__body textarea { flex: 1 1 14rem; }
.rsvp-note__body .invalid-feedback { flex-basis: 100%; }
.rsvp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35rem; margin-top: 0.25rem; color: var(--vp-muted); font-size: 0.8125rem; }
.rsvp-meta .rsvp-withdraw { margin: 0; }
.attendance-deadline:has(+ .rsvp-withdraw)::after { margin-left: 0.35rem; content: "·" / ""; }
.rsvp-withdraw__button { min-height: 1.5rem; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-decoration: underline; }
.rsvp-withdraw__button:hover { color: var(--vp-coral); }
/* Management actions: rounded pills; coral only for destructive ones. The transparent
   border becomes visible in forced colours. */
.manage-actions { gap: 0.5rem; }
.action-pill { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0.45rem 1rem; border: 1px solid transparent; border-radius: var(--vp-radius-pill); color: var(--vp-accent-dark); background: var(--vp-accent-soft); font-weight: 600; text-decoration: none; }
.action-pill:hover { border-color: currentColor; }
.action-pill--primary { color: #fff; background: var(--vp-accent-dark); }
.action-pill--danger { color: var(--vp-coral); background: var(--vp-coral-soft); }
@media (max-width: 35.98rem) { .who-group { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }
@media (min-width: 36rem) { .section-row__content { padding-left: calc(0.9rem + 2.375rem + 0.75rem); } }
@media (max-width: 24rem) {
  .section-row__summary { grid-template: "icon title chev" auto "icon detail chev" auto "icon chip chev" auto / 2.375rem minmax(0, 1fr) auto; }
  .status-chip { justify-self: start; margin-top: 0.3rem; }
}
@media (forced-colors: active) {
  .status-chip, .section-row__icon { border: 1px solid CanvasText; }
  .section-row__chevron { color: CanvasText; }
}

/* Each detail column stacks independently, so a tall panel in one column
   cannot displace the other column's panels. */
.detail-grid__main,
.detail-grid__aside { grid-template-columns: minmax(0, 1fr); align-content: start; }

@media (min-width: 62rem) {
  .detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: start;
    gap: 1.25rem;
  }

  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid > .form-grid__wide { grid-column: 1 / -1; }
}
.event-list--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.event-list--compact .event-card { min-width: 0; padding: 0.85rem 1rem; border-left-width: 1px; border-radius: var(--vp-radius); }
.event-list--compact .event-card__title { font-size: 1.125rem; margin-bottom: 0.5rem; }
.event-list--compact .event-facts { gap: 0.45rem; margin-bottom: 0.75rem; }
.event-list--compact .event-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; }
.event-card__cover { display: block; width: 160px; height: auto; aspect-ratio: var(--vp-cover-ratio); margin-bottom: 1rem; border-radius: var(--vp-radius); object-fit: cover; object-position: center; }

/* Account, administration and confirmation pages reuse the grouped list: link rows,
   chip groups and an action line; one filled coral confirm. Text actions and the
   segmented choice are the shared controls in app.css. */
ul.section-list { margin: 0; padding: 0; list-style: none; }
a.section-row__summary { color: inherit; text-decoration: none; }
a.section-row__summary:hover { background: var(--vp-canvas); }
.section-row__summary > .avatar-chip { grid-area: icon; justify-self: center; }
.section-row__title--danger { color: var(--vp-coral); }
.row-chips { display: flex; grid-area: chip; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.section-row__summary:has(> .row-action) { grid-template: "icon title chip" auto "icon detail detail" auto "icon action action" auto / 2.375rem minmax(0, 1fr) auto; }
.row-action { display: flex; grid-area: action; flex-wrap: wrap; gap: 0 1rem; margin: 0; }
.btn-coral { --bs-btn-color: #fff; --bs-btn-bg: var(--vp-coral); --bs-btn-border-color: var(--vp-coral); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7c2e22; --bs-btn-hover-border-color: #7c2e22; --bs-btn-active-color: #fff; --bs-btn-active-bg: #7c2e22; --bs-btn-active-border-color: #7c2e22; }
.btn-coral:focus-visible { outline: 3px solid var(--vp-focus); outline-offset: 3px; box-shadow: none; }
.confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; }
.form-check > .form-check-input { margin: 0; border-color: var(--vp-muted); }
.form-check-input:checked { border-color: var(--vp-accent); background-color: var(--vp-accent); }
.check-row { align-items: flex-start; padding: 0.35rem 0.9rem; border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); background: var(--vp-canvas); }
.check-row > .form-check-input { margin-top: 0.7rem; }
.check-row .invalid-feedback { flex-basis: 100%; }
.profile-head { display: flex; align-items: center; gap: 1rem; }
.profile-head h2 { margin: 0; overflow-wrap: anywhere; }
.profile-head p { margin: 0.2rem 0 0; color: var(--vp-muted); overflow-wrap: anywhere; }
.profile-head .row-chips { justify-content: flex-start; margin-top: 0.4rem; }
.chip-options > .radio-options { gap: 0.4rem; }
.chip-options > .radio-options > div { min-height: 2.25rem; padding: 0 0.75rem 0 0.6rem; font-size: 0.875rem; }
.chip-options label { padding: 0.35rem 0; gap: 0.45rem; }
button.person__remove { padding: 0; border: 0; background: none; }
.person form { display: inline-flex; margin: 0; }
.hyphenate { hyphens: auto; }
.event-form .schedule-section, .candidate-form .schedule-section { padding: 0; border: 0; }
.pref-lines { margin: 0; padding: 0; list-style: none; }
.pref-lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--vp-border); }
.pref-lines li:first-child { border-top: 0; }
.pref-lines__label { flex: 1 1 12rem; font-weight: 600; }
.pref-lines .row-chips { justify-content: flex-start; }
.joined > span + span::before { content: ", "; }
legend.form-label { font-size: 1rem; }
.content-panel > h2 + .who-group { padding-top: 0; border-top: 0; }