@layer components {
  /* Agenda (redesign 2026-08) */
  .agenda { display: grid; grid-template-columns: 310px 1fr; gap: 0; max-inline-size: var(--main-width); margin-inline: auto; }
  .agenda__sidebar { border-inline-end: 1px solid var(--color-ink-lighter); padding: 1.25rem; }
  .agenda__main { padding: 1.25rem 1.5rem; min-inline-size: 0; }
  .agenda__tabs { display: inline-flex; background: var(--color-ink-lightest); border-radius: 9px; padding: 3px; margin-block-end: 1rem; }
  .agenda__tab { padding: 5px 16px; font-size: var(--text-small); font-weight: 600; color: var(--color-ink-dark); border-radius: 7px; text-decoration: none; }
  .agenda__tab--active { background: var(--color-white); color: var(--color-ink); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
  .agenda__day { margin-block-end: .5rem; }
  .agenda__day-label { font-size: var(--text-x-small); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-ink-medium); margin-block: 1rem .5rem; }
  .agenda__day-label b { color: var(--color-marker); }
  .agenda__row { display: grid; grid-template-columns: 64px 1fr auto; gap: .875rem; align-items: center; background: var(--color-white); border: 1px solid var(--color-ink-lighter); border-radius: 10px; padding: .75rem 1rem; margin-block-end: .5rem; }
  .agenda__time { font-weight: 700; font-variant-numeric: tabular-nums; }
  .agenda__time small { display: block; color: var(--color-ink-medium); font-weight: 500; }
  .agenda__row--dated { grid-template-columns: 84px 1fr auto; }
  .agenda__row--dated .agenda__time { text-align: start; }
  .agenda__date { display: block; font-size: var(--text-x-small); color: var(--color-ink-dark); white-space: nowrap; }
  .agenda__what { display: block; min-inline-size: 0; text-decoration: none; color: inherit; }
  .agenda__name { font-weight: 600; }
  .agenda__recurrence { color: var(--color-ink-medium); font-size: var(--text-small); margin-inline-start: .5ch; }
  .agenda__meta { display: block; color: var(--color-ink-medium); font-size: var(--text-small); }
  .agenda__end { display: flex; align-items: center; gap: .625rem; }
  .agenda__guests { font-size: var(--text-small); color: var(--color-ink-dark); font-variant-numeric: tabular-nums; }
  .agenda__guests b { color: var(--color-positive); }
  .agenda__filter-note { font-size: var(--text-small); color: var(--color-ink-medium); margin-block-end: .75rem; }
  .chip { display: inline-block; line-height: 1; }
  .chip--cat { background: var(--color-selected-light); color: var(--color-link); border-radius: 999px; padding: 2px 9px; font-size: var(--text-x-small); font-weight: 600; margin-inline-start: .5ch; }
  .agenda-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--text-xx-small); font-weight: 700; line-height: 1; white-space: nowrap; flex-shrink: 0; }
  .agenda-status--done { background: var(--color-ink-lightest); color: var(--color-ink-medium); }
  .agenda-status--draft { background: oklch(var(--lch-yellow-lightest)); color: oklch(var(--lch-yellow-darker)); }
  .agenda-status--live { background: oklch(var(--lch-green-lightest)); color: oklch(var(--lch-green-darker)); }
  .agenda-status--published { background: oklch(var(--lch-blue-lightest)); color: oklch(var(--lch-blue-darker)); }
  .agenda-status__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--color-positive); animation: pulse 1.4s ease-in-out infinite; flex-shrink: 0; }
  .agenda__list { display: flex; flex-direction: column; }
  .agenda__delete { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--color-ink-medium); font-size: 1rem; cursor: pointer; }
  .agenda__delete:hover { color: var(--color-danger-500); }
  @media (max-width: 860px) {
    .agenda { grid-template-columns: 1fr; }
    .agenda__sidebar { border-inline-end: none; border-block-end: 1px solid var(--color-ink-lighter); }
    .agenda__row { grid-template-columns: 64px minmax(0, 1fr); }
    .agenda__row--dated { grid-template-columns: 84px minmax(0, 1fr); }
    .agenda__end { grid-column: 2; justify-content: flex-start; }
  }

  .agenda-cal { padding: .875rem .75rem; border: 1px solid var(--color-ink-lighter); border-radius: 12px; }
  .agenda-cal__month { font-size: var(--text-small); }
  .agenda-cal table { inline-size: 100%; border-collapse: separate; border-spacing: 2px 3px; text-align: center; font-variant-numeric: tabular-nums; }
  .agenda-cal th { color: var(--color-ink-light); font-weight: 600; font-size: var(--text-xx-small); letter-spacing: .05em; padding-block: 6px; }
  .agenda-cal td { padding: 0; }
  .agenda-cal__day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; inline-size: 100%; block-size: 30px; border-radius: 9px; color: var(--color-ink-dark); text-decoration: none; }
  .agenda-cal__day:hover { background: var(--color-ink-lightest); }
  .agenda-cal__outside .agenda-cal__day { color: var(--color-ink-lighter); }
  .agenda-cal__day--has { font-weight: 600; }
  .agenda-cal__day--today { background: var(--color-link); color: var(--color-white); font-weight: 700; }
  .agenda-cal__day--selected { box-shadow: inset 0 0 0 1px var(--color-link); font-weight: 700; }
  .agenda-cal__dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--color-marker); opacity: 0; }
  .agenda-cal__day--has .agenda-cal__dot { opacity: 1; }
  .agenda-cal__day--today .agenda-cal__dot { background: var(--color-highlight); }
  .agenda-cal__heading { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-block-end: .75rem; }
  .agenda-cal__nav { display: flex; align-items: center; gap: 4px; }
  .agenda-cal__navbtn { display: inline-flex; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border: 1px solid var(--color-ink-lighter); border-radius: 7px; color: var(--color-ink-dark); text-decoration: none; }
  .agenda-cal__navbtn:hover { background: var(--color-ink-lightest); border-color: var(--color-ink-light); }
  .agenda-cal__navbtn .icon { --icon-size: 10px; }
  .agenda-cal__todaybtn { display: inline-flex; align-items: center; block-size: 22px; padding: 0 9px; border-radius: 999px; background: var(--color-selected-light); color: var(--color-link); font-size: var(--text-xx-small); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
  .agenda-cal__todaybtn:hover { background: var(--color-selected); }

  .agenda-filters { display: flex; flex-direction: column; gap: 4px; margin-block-start: 1.25rem; }
  .agenda-filters__item { display: flex; justify-content: space-between; font-size: var(--text-small); color: var(--color-ink-dark); padding: 6px 9px; border-radius: 7px; text-decoration: none; }
  .agenda-filters__item:hover { background: var(--color-ink-lightest); }
  .agenda-filters__item--active { background: var(--color-selected-light); color: var(--color-link); font-weight: 600; }
  .agenda-filters__item i { font-style: normal; color: var(--color-ink-medium); font-variant-numeric: tabular-nums; }
  .agenda__tab-count { font-weight: 500; margin-inline-start: 4px; color: var(--color-ink-medium); font-variant-numeric: tabular-nums; }

  .agenda-blank { text-align: center; padding-block: 3.5rem; }
  .agenda-blank__art { display: block; block-size: 110px; inline-size: auto; margin: 0 auto .875rem; }
  .agenda-blank h3 { font-family: var(--font-display); font-size: var(--text-medium); font-weight: 700; letter-spacing: -.02em; margin-block-end: .25rem; }
  .agenda-blank p { color: var(--color-ink-dark); font-size: var(--text-small); margin-block-end: 1rem; }

  .evt-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .evt-pill { display: inline-flex; align-items: center; position: relative; padding: 7px 14px; border: 1px solid var(--color-ink-lighter); border-radius: 999px; font-size: var(--text-small); font-weight: 600; color: var(--color-ink-dark); cursor: pointer; background: var(--color-white); transition: background .12s, border-color .12s, color .12s; }
  .evt-pill:has(input:checked) { background: var(--color-selected-light); border-color: var(--color-link); color: var(--color-link); }
  .evt-pill:has(input:focus-visible) { outline: 2px solid var(--color-link); outline-offset: 2px; }

  .evt-details { border: 1px solid var(--color-ink-lighter); border-radius: 9px; padding: 9px 13px; }
  .evt-details[open] { padding-block-end: 13px; }
  .evt-details__summary { cursor: pointer; font-size: var(--text-small); font-weight: 600; color: var(--color-ink-dark); list-style: none; }
  .evt-details__summary::-webkit-details-marker { display: none; }
  .evt-details__summary::before { content: "▸"; display: inline-block; margin-inline-end: 6px; color: var(--color-ink-medium); transition: transform .12s; }
  .evt-details[open] .evt-details__summary::before { transform: rotate(90deg); }
  .evt-details__body { margin-block-start: .75rem; }

  .evt-edit { display: grid; grid-template-columns: minmax(0, 660px) 330px; gap: 2rem; max-inline-size: 1070px; margin-inline: auto; padding: 1.5rem; }
  .evt-edit__main { display: flex; flex-direction: column; gap: 1.375rem; min-inline-size: 0; }
  .evt-field__label { display: block; font-size: var(--text-x-small); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-ink-medium); margin-block-end: 6px; }
  .evt-input { inline-size: 100%; border: 1px solid var(--color-ink-lighter); border-radius: 9px; background: var(--color-white); padding: 9px 13px; font-size: var(--text-normal); }
  .evt-input--title { font-size: 1.375rem; font-weight: 700; padding: 12px 15px; }
  .evt-field--error .evt-input { border-color: var(--color-negative); }
  .evt-field__hint { font-size: var(--text-x-small); color: var(--color-ink-medium); margin-block-start: 5px; }
  .evt-field__hint--error { color: var(--color-negative); }
  .evt-urlrow { display: flex; align-items: stretch; }
  .evt-urlrow__prefix { background: var(--color-ink-lightest); border: 1px solid var(--color-ink-lighter); border-inline-end: none; border-radius: 9px 0 0 9px; padding: 9px 12px; font-size: var(--text-small); color: var(--color-ink-dark); white-space: nowrap; }
  .evt-urlrow .evt-input { border-radius: 0 9px 9px 0; }
  .evt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-block-end: .625rem; }
  .evt-edit__actions { display: flex; justify-content: flex-end; gap: var(--inline-space); }
  @media (max-width: 860px) {
    .evt-edit { grid-template-columns: minmax(0, 1fr); }
    .evt-grid2 { grid-template-columns: 1fr; }
    /* Clamp scoped to mobile only — the 45% cap otherwise ellipsizes the URL
       prefix on desktop too (unscoped in the pre-fix rule). */
    .evt-urlrow__prefix { max-inline-size: 45%; overflow: hidden; text-overflow: ellipsis; }
  }

  /* Create / publish modals (turbo-frame "modal", modal.css) reuse the edit-page fields */
  .evt-modal { display: flex; flex-direction: column; gap: 1rem; }
  .evt-modal > .modal__footer { margin-block-start: .5rem; }
  .evt-modal__error { color: var(--color-danger-500); font-size: var(--text-small); font-weight: 500; }

  .evt-publish { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
  .evt-publish__link { display: block; max-inline-size: 100%; padding: .25rem .5rem; border-radius: .25rem; background: var(--color-warning-50); color: var(--color-warning-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evt-publish__link:hover { background: var(--color-warning-100); }

  .evt-card { border: 1px solid var(--color-ink-lighter); border-radius: 11px; padding: .875rem 1rem; margin-block-end: .875rem; background: var(--color-white); }
  .evt-card--danger { border-color: oklch(var(--lch-red-lighter)); background: oklch(var(--lch-red-lightest)); }
  .evt-card__title { font-size: var(--text-x-small); text-transform: uppercase; letter-spacing: .1em; color: var(--color-ink-medium); margin-block-end: .5rem; }
  .evt-card__row { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-small); padding-block: 5px; }
  .evt-card__row--stack { display: block; }
  .evt-card__row i { font-style: normal; color: var(--color-ink-medium); }
  .evt-card__label { font-size: var(--text-small); color: var(--color-ink-dark); display: block; margin-block-end: 4px; }
  .evt-card__linkbtn { display: block; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; background: none; border: none; padding: 0; margin-block: 6px 8px; position: relative; text-align: start; cursor: pointer; }
  .evt-card__link { display: flex; align-items: center; gap: 6px; font-size: var(--text-x-small); color: var(--color-link); background: var(--color-selected-light); border-radius: 7px; padding: 6px 10px; max-inline-size: 100%; overflow: hidden; }
  .evt-card__link-text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
  .evt-card__link-icon { flex-shrink: 0; }
  .evt-card__danger-link { color: var(--color-negative); font-size: var(--text-small); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; }

  /* Public event/workshop page (redesign 2026-08)
  /* ------------------------------------------------------------------------ */

  .pub { background: var(--color-canvas); color: var(--color-ink); text-align: start; }

  .pub-head { display: flex; padding-block: 14px; background: var(--color-white); border-bottom: 1px solid var(--color-ink-lighter); }
  .pub-head__inner { display: flex; align-items: center; gap: 12px; inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding-inline: 26px; }

  .pub-head__brand { display: flex; align-items: center; flex-shrink: 0; }
  .pub-head__brand-logo { display: block; block-size: 24px; inline-size: auto; }

  .pub-head__sep { inline-size: 1px; block-size: 22px; background: var(--color-ink-lighter); flex-shrink: 0; }

  .pub-head__school { display: flex; align-items: center; gap: 8px; min-inline-size: 0; flex: 1 1 auto; }
  .pub-head__school-logo { display: block; inline-size: 26px; block-size: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .pub-head__school-name {
    font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: var(--color-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0;
  }

  .pub-hero { position: relative; block-size: 240px; overflow: hidden; }
  .pub-hero__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .pub-hero__fallback { position: absolute; inset: 0; background: var(--color-link); }

  /* The brand cover for a page without a photo (events/_cover): the character
     for the kind of event standing in a white spotlight, shapes around it.
     --cover-figure and --cover-end place the character (art 1); the spot
     centers on it. */
  .pub-cover {
    --cover-figure: 160px;
    --cover-end: 8%;
    position: relative; block-size: 100%; max-inline-size: 1120px; margin-inline: auto;
  }
  .pub-cover::before {
    content: ""; position: absolute; inline-size: 360px; aspect-ratio: 1; border-radius: 50%; background: var(--color-white);
    inset-inline-end: calc(var(--cover-end) + var(--cover-figure) / 2 - 180px); inset-block-end: -150px;
  }
  .pub-cover__art { position: absolute; display: block; block-size: auto; }
  .pub-cover__art--1 { inline-size: var(--cover-figure); inset-inline-end: var(--cover-end); inset-block-end: -4px; }

  .pub-cover--workshop { --cover-figure: 96px; --cover-end: 10%; }
  .pub-cover--workshop .pub-cover__art--2 { inline-size: 34px; inset-inline-end: 34%; inset-block-start: 40px; }
  .pub-cover--workshop .pub-cover__art--3 { inline-size: 28px; inset-inline-start: 46%; inset-block-start: 96px; }
  .pub-cover--workshop .pub-cover__art--4 { inline-size: 84px; inset-inline-start: 22%; inset-block-start: 40px; }

  .pub-cover--social .pub-cover__art--2 { inline-size: 64px; inset-inline-end: 32%; inset-block-start: 30px; }
  .pub-cover--social .pub-cover__art--3 { inline-size: 34px; inset-inline-start: 50%; inset-block-start: 74px; }
  .pub-cover--social .pub-cover__art--4 { inline-size: 52px; inset-inline-start: 26%; inset-block-start: 36px; }
  .pub-cover--social .pub-cover__art--5 { inline-size: 30px; inset-inline-end: 3%; inset-block-start: 24px; }

  .pub-cover--administrative { --cover-figure: 170px; }
  .pub-cover--administrative::before { content: none; }
  .pub-cover--administrative .pub-cover__art--2 { inline-size: 40px; inset-inline-start: 50%; inset-block-start: 48px; }
  .pub-cover--administrative .pub-cover__art--3 { inline-size: 62px; inset-inline-start: 24%; inset-block-start: 34px; }

  .pub-cover--other { --cover-figure: 150px; }
  .pub-cover--other .pub-cover__art--1 { inset-block-end: -10px; }
  .pub-cover--other .pub-cover__art--2 { inline-size: 36px; inset-inline-start: 48%; inset-block-start: 48px; }
  .pub-cover--other .pub-cover__art--3 { inline-size: 88px; inset-inline-start: 22%; inset-block-start: 40px; }

  /* Phones: a smaller spot on the right, the shapes small in the free corner. */
  @media (max-width: 599px) {
    .pub-cover { --cover-end: 4%; }
    .pub-cover::before { inline-size: 280px; inset-inline-end: calc(var(--cover-end) + var(--cover-figure) / 2 - 140px); inset-block-end: -110px; }
    .pub-cover--workshop { --cover-figure: 78px; }
    .pub-cover--social { --cover-figure: 120px; }
    .pub-cover--other { --cover-figure: 118px; }
    .pub-cover--administrative { --cover-figure: 140px; }
    .pub-cover .pub-cover__art--2 { inline-size: 44px; inset: 20px auto auto 30%; }
    .pub-cover .pub-cover__art--3 { inline-size: 28px; inset: 24px auto auto 48%; }
    .pub-cover .pub-cover__art--4 { inline-size: 46px; inset: 34px auto auto 6%; }
    .pub-cover .pub-cover__art--5 { inline-size: 24px; inset: 24px 3% auto auto; }
  }
  .pub-hero__inner { position: relative; inline-size: 100%; block-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding-inline: 26px; }
  .pub-hero__badge {
    position: absolute; inset-inline-start: 26px; inset-block-end: -1px; background: var(--color-white);
    border-radius: 12px 12px 0 0; padding: 10px 18px 8px; text-align: center; box-shadow: 0 -4px 20px rgb(0 0 0 / .08);
  }
  .pub-hero__mo { display: block; font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--color-link); }
  .pub-hero__dd { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--color-ink); font-variant-numeric: tabular-nums; }

  .pub-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; padding: 26px; max-inline-size: 1120px; margin-inline: auto; }
  .pub-main { min-inline-size: 0; }

  .pub-kind { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-link); margin: 0; }
  .pub-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin: 2px 0 4px; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
  .pub-when { color: var(--color-ink-darker); font-size: 14px; margin: 0 0 18px; }

  .pub-sec { margin-block-end: 20px; }
  .pub-sec__title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--color-ink-darker); margin: 0 0 8px; }
  .pub-sec__body { font-size: 14px; color: var(--color-ink-dark); max-inline-size: 58ch; }

  .pub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 479px) {
    .pub-body { padding: 16px; }
    .pub-cards { grid-template-columns: 1fr; }
  }
  .pub-card { border: 1px solid var(--color-ink-lighter); background: var(--color-white); border-radius: 12px; padding: 13px 15px; }
  .pub-card__t { font-size: 12px; font-weight: 700; color: var(--color-ink); display: flex; gap: 7px; align-items: center; margin: 0 0 3px; }
  .pub-card__t .icon { color: var(--color-link); --icon-size: 15px; }
  .pub-card__d { font-size: 12.5px; color: var(--color-ink-dark); margin: 0; }
  .pub-card__link { color: var(--color-link); font-size: 12px; font-weight: 600; text-decoration: none; }
  .pub-card__links { font-size: 12px; color: var(--color-ink-dark); margin: 6px 0 0; }

  .pub-rsvp {
    border: 1px solid var(--color-ink-lighter); background: var(--color-white); border-radius: 16px; padding: 22px;
    box-shadow: 0 16px 40px -24px rgb(60 45 20 / .25); align-self: start;
  }
  .pub-rsvp__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
  .pub-rsvp__sub { font-size: 13px; color: var(--color-ink-dark); line-height: 1.5; margin: 0 0 16px; }
  .pub-rsvp__cal { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-block-start: 2px; }

  .pub-check {
    display: flex; align-items: center; justify-content: center;
    inline-size: 42px; block-size: 42px; border-radius: 50%;
    background: var(--color-positive); color: var(--color-white);
    font-size: 19px; font-weight: 800; margin: 0 0 14px;
  }

  .pub-field { margin-block-end: 14px; }
  .pub-field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-ink-dark); margin-block-end: 5px; }
  .pub-input { inline-size: 100%; border: 1px solid var(--color-ink-lighter); border-radius: 9px; background: var(--color-white); padding: 9px 12px; font-size: 14px; color: var(--color-ink); }
  .pub-field--error .pub-input { border-color: var(--color-negative); }
  .pub-field__hint { font-size: 12px; color: var(--color-negative); margin-block-start: 5px; }

  .pub-rsvp__submit {
    inline-size: 100%; border: none; border-radius: 10px; background: var(--color-link); color: var(--color-white);
    font-weight: 700; font-size: 14px; padding: 11px; cursor: pointer; margin-block-start: 2px;
  }
  .pub-rsvp__submit:hover { filter: brightness(0.92); }

  .pub-proof { font-size: 12.5px; color: var(--color-ink-dark); text-align: center; margin: 14px 0 0; }
  .pub-proof b { color: var(--color-positive); }

  .pub-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; color: var(--color-ink-dark); padding: 16px; border-top: 1px solid var(--color-ink-lighter);
  }
  .pub-foot__logo { display: block; block-size: 18px; inline-size: auto; }

  .pub-admin-bar {
    display: block; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--color-white);
    background: var(--color-ink); padding: 7px 10px; text-decoration: none;
  }
  .pub-admin-bar:hover { filter: brightness(1.15); }

  @media (max-width: 860px) {
    .pub-body { grid-template-columns: 1fr; }
  }

  /* Guests admin screen (Plan 4) */
  .guests-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-block-end: 1rem; }
  .guests-stat { border: 1px solid var(--color-ink-lighter); border-radius: 11px; padding: .875rem 1rem; background: var(--color-white); }
  .guests-stat__value { display: block; font-size: 1.5rem; font-weight: 800; color: var(--color-ink); font-variant-numeric: tabular-nums; }
  .guests-stat__label { display: block; font-size: var(--text-x-small); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-medium); margin-block-start: 2px; }
  .guests-stat--confirmed .guests-stat__value { color: var(--color-positive); }
  .guests-stat--invited .guests-stat__value { color: var(--color-link); }
  .guests-stat--declined .guests-stat__value { color: var(--color-negative); }
  @media (max-width: 640px) { .guests-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Guest cells stack name over contact (spacing stays the base .dt__cell's). */
  .dt__cell.dt__cell--guest { flex-direction: column; align-items: flex-start; }
  .dt__cell.dt__cell--guest .dt__text,
  .dt__cell.dt__cell--guest .dt__subtext { line-height: 1.2; }
  .dt__subtext { font-size: var(--text-x-small); color: var(--color-ink-medium); }
  .dt__subtext.dt__cell--edit { cursor: pointer; border-radius: 5px; padding: 1px 3px; margin-inline-start: -3px; }
  .dt__subtext.dt__cell--edit:hover { background: #f2f5fb; }

  .dt__pill--confirmed { color: var(--color-positive); background: color-mix(in srgb, var(--color-positive) 12%, var(--color-white)); }
  .dt__pill--invited { color: var(--color-link); background: var(--color-selected-light); }
  .dt__pill--declined { color: var(--color-negative); background: color-mix(in srgb, var(--color-negative) 12%, var(--color-white)); }

  .dt__text-btn { border: none; background: none; padding: 0; color: var(--color-link); font-size: var(--text-x-small); font-weight: 600; cursor: pointer; text-decoration: underline; }
  .dt__text-btn:disabled { color: var(--color-ink-light); cursor: default; text-decoration: none; }

  .guests-page__empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }

  .guests-page .dt__row-actions { position: relative; }
  .guests-page .dt tbody tr:hover .dt__row-actions,
  .guests-page .dt__row-actions:has(.dt-menu:not(.hidden)) { opacity: 1; }

  .dt-menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 4px); z-index: 20; min-width: 190px; max-inline-size: calc(100vw - 2rem); background: var(--color-white); border: 1px solid var(--color-ink-lighter); border-radius: 10px; box-shadow: 0 12px 30px -10px rgb(16 42 67 / .28); padding: 6px; }
  .dt-menu.hidden { display: none; }
  .dt-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; border: none; background: none; padding: 8px 10px; border-radius: 7px; font-size: var(--text-small); color: var(--color-ink-dark); cursor: pointer; }
  .dt-menu__item:hover { background: var(--color-ink-lightest); }
  .dt-menu__item:disabled { color: var(--color-ink-light); cursor: default; }
  .dt-menu__item:disabled:hover { background: none; }
  .dt-menu__item--danger { color: var(--color-negative); }

  .dt__blank-title { display: block; font-size: var(--text-normal); font-weight: 700; color: var(--color-ink-dark); margin-block-end: 4px; }

  .dt__row--new td { background: var(--color-selected-light); }
  .dt tbody tr.dt__row--new:hover td { background: #f8f9fc; }
  .dt__inline-input { inline-size: 100%; border: 1px solid var(--color-ink-lighter); border-radius: 7px; padding: 6px 9px; font-size: var(--text-small); background: var(--color-white); }
  .dt__inline-input:focus { outline: none; border-color: var(--color-link); box-shadow: 0 0 0 3px var(--color-selected-light); }
  .dt__inline-input--sub { margin-block-start: 3px; }
  /* 16px on touch devices so iOS Safari doesn't zoom the viewport on focus. */
  @media (hover: none) { .dt__inline-input { font-size: 16px; } }
  .dt__inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .dt__inline-error { color: var(--color-negative); font-size: var(--text-x-small); }
}