@layer components {
  /* Events header
  /* ------------------------------------------------------------------------ */

  .header--events {
    --header-button-count: 1;

    @media (min-width: 640px) {
      --header-actions-width: 7.25rem !important;
    }
  }

  /* Event column layout
  /* ------------------------------------------------------------------------ */

  .events {
    --events-gap: 1ch;
    --events-border: 1px solid var(--color-ink-lighter);
    --events-day-header-height: 1.75rem;
  }

  .events--grid {
    --events-grid-gap: 1rem;
    --events-grid-columns: 1;

    container-type: inline-size;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--events-grid-gap);
    justify-content: center;
    margin: var(--block-space) auto;
    max-inline-size: var(--main-width);

    @media (min-width: 640px) {
      --events-grid-columns: 2;
    }

    @media (min-width: 960px) {
      --events-grid-columns: 3;
    }

    .event {
      inline-size: calc((100% - var(--events-grid-gap) * (var(--events-grid-columns) - 1) ) / var(--events-grid-columns)) !important;
      margin: 0 !important;
    }
  }

  .events__activity-summary {
    border: solid var(--color-ink-lighter);
    border-width: 1px 1px 0 1px;
    color: var(--color-ink-darker);
    inline-size: auto;
    margin-inline: auto;
    padding: 1.1lh 1lh 1lh;
    position: relative;
    text-align: start;
    z-index: 2;

    .events section:first-of-type & {
      border-radius: 0.5em 0.5em 0 0;
    }

    &:has(.events__activity--generating) {
      --border-color: var(--color-selected-dark);

      animation: gradient 4s ease infinite;
      background: linear-gradient(-45deg, var(--color-gradient-1), var(--color-gradient-2), var(--color-gradient-3), var(--color-gradient-4));
      background-size: 300%;
      text-align: center;
    }

    > * {
      column-count: 2;
      column-gap: var(--inline-space-double);
      margin-inline: auto;
      max-inline-size: 80ch;
    }

    a {
      color: inherit;
    }

    h3 {
      column-span: all;
      font-size: var(--text-large);
      line-height: 1.3;
      margin-block: 0.5em 0.25em;
      text-align: center;
      text-wrap: balance;

      + p {
        column-span: all;
        font-size: var(--text-medium);
        margin-block: 0 1.5em;
        text-align: center;
        text-wrap: balance;
      }
    }

    h4 {
      break-after: avoid-column;
      font-size: var(--text-medium);
      line-height: 1.3;
      margin-block: 0.5em 0.25em;
      text-wrap: balance;

      + p {
        break-inside: avoid-column;
        margin-block: 0 1.5em;
      }
    }

    hr { display: none; }
  }

  .events__activity-generating-msg {
    display: block;
    font-weight: 500;
    margin-block: 2lh;
    opacity: 0.5;
  }

  .events__activity-prompt-edit {
    inset: auto 1em 1em auto;
    position: absolute;
  }

  .events__filter-select {
    font-weight: inherit;
    text-decoration: underline;

    @media (any-hover: hover) {
      &:hover {
        --btn-color: var(--color-link);
      }
    }
  }

  .events__day {
    position: relative;

    @media (max-width: 639px) {
      margin-block-end: calc(var(--events-gap) * 2);
    }
  }

  .events__day-header,
  .events__column-header {
    font-size: var(--text-small);
    text-align: center;
    text-transform: uppercase;
  }

  .events__day-header {
    block-size: 0;
    margin-block-start: calc(var(--events-day-header-height) / 2);
    position: relative;
    z-index: var(--z-events-day-header);
  }

  .events__day-time {
    align-items: center;
    background-color: var(--color-ink);
    block-size: var(--events-day-header-height);
    border-radius: 0.2em;
    color: var(--color-ink-inverted);
    display: flex;
    gap: 0.4ch;
    inline-size: fit-content;
    inset: 0 auto auto 50%;
    margin-inline: auto;
    padding-inline: 1.5ch;
    position: absolute;
    translate: -50% -50%;
  }

  .events__columns {
    border-block-start: var(--events-border);
    position: relative;
    z-index: 1;

    @media (min-width: 640px) {
      align-items: end;
      border-inline: var(--events-border);
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      /* Pseudo column borders since .events__column is display: contents */
      &:before,
      &:after {
        border-inline-start: var(--events-border);
        content: "";
        inset-block: 0;
        position: absolute;
        z-index: var(--z-events-day-header);
      }

      &:before { inset-inline-start: calc(100% / 3); }
      &:after { inset-inline-end: calc(100% / 3); }
    }
  }

  .events__column {
    @media (max-width: 639px) {
      &:not(:has(.event)) {
        display: none;
      }
    }

    @media (min-width: 640px) {
      display: contents;
    }

    &:nth-of-type(1) > * { grid-column-start: 1; }
    &:nth-of-type(2) > * { grid-column-start: 2; }
    &:nth-of-type(3) > * { grid-column-start: 3; }
  }

  .events__column-header {
    background-color: var(--color-canvas);
    grid-row-start: 1;
    inset-block-start: calc(var(--block-space) * -1);
    margin-block-end: var(--events-gap);
    padding-block: calc(var(--events-gap) * 3) var(--events-gap);
    position: sticky;
    z-index: var(--z-events-column-header);

    @media (max-width: 639px) {
      margin-inline: calc(var(--main-padding) * -1);
      padding-inline: var(--main-padding);
    }
  }

  .events__column-footer {
    grid-row-start: 26;
    margin: var(--events-gap);
    padding: var(--block-space-half) var(--inline-space);
  }

  .events__maximize-button {
    inset: calc(var(--events-gap) * 3) 0 auto auto;
    outline-offset: -2px;
    position: absolute;
    transform: translateY(-10%);
    z-index: 1;

    @media (any-hover: hover ) {
      opacity: 0;

      .events__column-header:hover &,
      &:focus-visible {
        opacity: 1;
      }
    }
  }

  .events__time-block {
    align-content: end;
    display: grid;
    gap: var(--events-gap);
    justify-items: center;
    margin: 0;
    padding: 0;

    @media (min-width: 640px) {
      padding-block-end: calc(var(--events-gap) * 3);
      padding-inline: calc(var(--events-gap) * 2);
    }

    .event {
      grid-column-start: unset !important;
      grid-row-start: unset !important;
    }
  }

  .events__none {
    background-color: var(--color-canvas);
    border-block-start: var(--events-border);
    grid-column: 1 / -1;
    padding-block: 3em;
    text-align: center;
  }

  /* Event
  /* ------------------------------------------------------------------------ */

  .event {
    --column-gap: 0.7ch;

    background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
    border-radius: 0.2em;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-color) 20%, var(--color-canvas));
    color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    margin: var(--inline-space);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: clip;
    padding: 0.6em;
    position: relative;
    z-index: 0;

    @media (max-width: 639px) {
      inline-size: 100%;
    }

    &:has(.card__background img:not([src=""])) {
      background-color: var(--color-canvas) !important;
    }

    .event_attachments {
      .attachment--image {
        block-size: auto;
        max-inline-size: 30%;
      }
    }

    .card__background {
      filter: brightness(1.2) contrast(0.8);
      opacity: 0.2;
      z-index: 0;
    }

    .card__board {
      background-color: transparent;
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
      font-size: 0.7em;
      padding: 0;
      translate: 0 -0.3em;
    }

    .card__board-name {
      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
      margin: 0 0 0 calc(var(--inline-space) * 0.75);
      padding-inline-start: calc(var(--inline-space) * 0.75);
    }

    .card__header {
      overflow: visible;
    }

    .card__id {
      margin: 0;
    }
  }

  .event--related {
    outline: 0.15rem solid var(--card-color);
  }

  .event__content {
    max-inline-size: 100%;
    position: relative;
    z-index: 1;
  }

  .event__grid-item {
    background-color: var(--color-canvas);
    block-size: 100%;
    border-radius: 0;
    display: flex;
    inline-size: 100%;
  }

  .event__grid-column-title {
    --z: 3;

    background-color: var(--color-canvas);
    font-size: 0.9em;
    padding: 1.5em 0 1em;
    text-transform: uppercase;
  }

  .event__icon {
    display: grid;
    margin: -0.3em -0.3em auto auto;
    place-content: center;

    .icon {
      background-color: var(--card-color);
      block-size: 1em;
      inline-size: 1em;
      grid-area: 1 / 1;
    }
  }

  .event__timestamp {
    align-self: start;
    display: grid;
    font-weight: 600;
    margin-block-end: var(--block-space-half);
  }

  .event__title {
    --lines: 4;

    font-size: 1.1em;
    line-height: 1.2;
  }

  /* 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__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__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; }
  @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__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 .simple-calendar { 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 .prev-month .agenda-cal__day, .agenda-cal .next-month .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 .calendar-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-blank { text-align: center; padding-block: 3.5rem; }
  .agenda-blank__art { inline-size: 72px; block-size: 72px; margin: 0 auto .875rem; border-radius: 20px; background: linear-gradient(135deg, var(--color-link), oklch(var(--lch-blue-medium))); display: grid; place-items: center; font-size: 2rem; box-shadow: 0 10px 24px -10px oklch(var(--lch-blue-dark) / .5); }
  .agenda-blank h3 { font-size: var(--text-medium); margin-block-end: .25rem; }
  .agenda-blank p { color: var(--color-ink-medium); 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; }
  @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; }
  }

  .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; 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: linear-gradient(160deg, oklch(var(--lch-blue-darkest)), var(--color-link));
  }
  .pub-hero__fallback::after {
    content: ""; position: absolute; inset: 0; opacity: .16;
    background-image: repeating-linear-gradient(45deg, var(--color-white) 0 2px, transparent 2px 14px);
  }
  .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-negative); }
  .pub-hero__dd { display: block; font-size: 26px; font-weight: 800; line-height: 1; 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-title { font-size: 27px; margin: 2px 0 4px; letter-spacing: -.02em; line-height: 1.15; }
  .pub-when { color: var(--color-ink-medium); 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-light); 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__d { font-size: 12.5px; color: var(--color-ink-medium); 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-medium); 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-size: 16.5px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
  .pub-rsvp__sub { font-size: 13px; color: var(--color-ink-medium); 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-medium); text-align: center; margin: 14px 0 0; }
  .pub-proof b { color: var(--color-positive); }

  .pub-foot { text-align: center; font-size: 11px; color: var(--color-ink-light); padding: 14px; border-top: 1px solid var(--color-ink-lighter); }
  .pub-foot b { color: var(--color-link); }

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

  /* !important: events.css rules live in @layer components, which always loses to the
     unlayered .dt__cell base rule in tailwind.css regardless of selector specificity. */
  .dt__cell.dt__cell--guest { flex-direction: column; align-items: flex-start !important; gap: 2px; padding-block: 11px; }
  .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__pill--legacy { color: var(--color-ink-medium); background: var(--color-ink-lightest); }

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