:root {
  --ink: #1b241f;
  --ink-soft: #3f4b45;
  --slate: #66726c;
  --mist: #eef1ee;
  --paper: #f6f8f6;
  --white: #ffffff;
  --emerald: #0f6b48;
  --emerald-dark: #0a4e34;
  --emerald-soft: #e7f2ec;
  --sand: #f1eadb;
  --line: #e1e7e2;
  --warning: #a14d2b;
  --shadow: 0 12px 32px rgba(27, 36, 31, 0.06);
  --shadow-soft: 0 4px 16px rgba(27, 36, 31, 0.05);
  --surface-subtle: #fafbfa;
  --surface-tint: #f0f5f2;
  --control-line: #cbd4ce;
  --warning-soft: #fff7e8;

  /* Named roles for values that were already here, repeated inline in a dozen
     rules each. Naming them changes nothing rendered - every value below is
     copied verbatim from the rule it was lifted out of - and it is what makes
     a later theme switch a change to this block rather than to 2,900 lines.
     The contrast pairs were measured (see .alert--warning); a token keeps the
     measured pair together instead of letting one half drift. */
  --rail: #f3f8f6;              /* quiet emerald tint behind rail/status cards */
  --brand-soft-line: #acd2c4;   /* was inline in .environment-pill */
  --accent: #c88c51;            /* was inline in .schedule-card__dot--soft */
  --track: var(--mist);         /* unfilled progress track */
  --warn-bg: #fff8e9;
  --warn-fg: #76501d;
  --warn-line: #e5cea0;
  --note-bg: #fffaf0;
  --note-fg: #6b4a12;
  --note-line: #e0c48c;
  --danger-bg: #fff5f1;
  --danger-fg: #71351f;
  --danger-line: #d8a18b;
  --shadow-lg: 0 22px 60px rgba(23, 33, 29, 0.1);
  /* The one filled card on the landing page. Deliberately not --ink: see
     .feature-card--accent. */
  --step3: #2b3d35;

  /* Used by .checkbox-grid and .required-activity-list, which referenced them
     without them ever being defined - so every declaration naming one was
     invalid and dropped, and those lists rendered with no border, radius,
     padding or gap. Values chosen to match what comparable panels here
     already use (.ambiguity-field: 1rem padding, 0.65rem radius, 0.5rem gap). */
  --border: var(--line);
  --radius-sm: 0.65rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* IBM Plex Sans, self-hosted from /static/fonts so the page makes no
   third-party font request and stays within the app's own CSP origin.
   Upright exists at 400/500/600/700 and italic at 400/600 - nothing else.
   Ask for a weight outside a style's set and the browser synthesises it,
   which is what the italics below were added to stop.
   SIL Open Font License 1.1 - see fonts/OFL.txt. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2");
}

/* Real italics. Without these the browser slants an upright face by shear,
   which is not the same shapes - Plex italic redraws a, e and f rather than
   tilting them. 400 covers body <em>; 600 covers the landing hero's em, which
   inherits the 600 heading weight. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
}

/* Event communications */
.communications-page,
.communications-page > *,
.communications-page .workspace-hero__main,
.communications-page .section-heading,
.communications-page .preview-grid > *,
.communications-page .support-contact-card,
.communications-page .message-preview,
.communications-page .status-summary-grid,
.communications-page .choice-group,
.communications-page .choice-card > span,
.communications-page .attendee-checklist label > span,
.communications-page .detail-list div,
.communications-page .detail-list dd {
  min-width: 0;
}

.communications-page :is(h1, h2, h3, p, strong, small, dd, a, span) {
  overflow-wrap: anywhere;
}

.communications-page :is(input, select, textarea),
.communications-page fieldset,
.communications-page .audience-picker {
  max-width: 100%;
  min-width: 0;
}

.communications-form {
  max-width: 58rem;
}

.audience-picker,
.communications-form fieldset {
  border: 1px solid var(--border, #ccd8d1);
  border-radius: 0.9rem;
  padding: 1rem;
}

.audience-picker legend,
.communications-form legend {
  font-weight: 600;
  padding: 0 0.35rem;
}

.choice-group {
  border-top: 1px solid var(--border, #d9e2dd);
  margin-top: 1rem;
  padding-top: 1rem;
}

.choice-group h2 {
  font-size: 1rem;
  margin: 0 0 0.65rem;
}

.choice-card,
.attendee-checklist label {
  align-items: flex-start;
  border: 1px solid var(--border, #ccd8d1);
  border-radius: 0.75rem;
  cursor: pointer;
  display: flex;
  gap: 0.7rem;
  margin: 0.55rem 0;
  padding: 0.75rem;
}

.choice-card:focus-within,
.attendee-checklist label:focus-within {
  box-shadow: 0 0 0 3px rgba(20, 112, 78, 0.24);
  outline: 2px solid #14704e;
  outline-offset: 2px;
}

.choice-card input,
.attendee-checklist input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.choice-card span,
.attendee-checklist span {
  display: grid;
  min-width: 0;
}

.choice-card small,
.attendee-checklist small {
  color: var(--muted, #53615a);
}

.attendee-checklist {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0;
}

.message-preview {
  background: #fff;
  border: 1px solid var(--border, #ccd8d1);
  border-radius: 0.9rem;
  margin: 1.25rem 0;
  padding: 1.25rem;
}

.plain-text-preview {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.confirmation-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.confirmation-actions form {
  margin: 0;
}

.status-summary-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

.status-summary-grid div {
  background: #f3f7f5;
  border-radius: 0.65rem;
  display: grid;
  padding: 0.75rem;
}

.status-summary-grid strong {
  font-size: 1.35rem;
}

.filter-bar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.filter-bar .form-field {
  flex: 1 1 12rem;
  margin: 0;
}

.detail-list {
  display: grid;
  gap: 0.65rem;
}

.detail-list div {
  display: grid;
  gap: 0.15rem;
  grid-template-columns: minmax(7rem, 0.35fr) 1fr;
}

.detail-list dt {
  font-weight: 600;
}

.status-text {
  font-weight: 600;
}

.responsive-table {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.responsive-table > table {
  min-width: 44rem;
}

.communications-page .responsive-table {
  width: 100%;
}

.communications-page .responsive-table > table {
  width: 100%;
}

.communications-page .responsive-table :is(th, td) {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .attendee-checklist,
  .preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .choice-card,
  .attendee-checklist label,
  .message-preview,
  .audience-picker,
  .communications-form fieldset {
    min-width: 0;
  }

  .confirmation-actions,
  .confirmation-actions form,
  .confirmation-actions .button {
    align-items: stretch;
    display: grid;
    width: 100%;
  }

  .detail-list div {
    grid-template-columns: minmax(0, 1fr);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  line-height: 1.55;
}

a { color: inherit; }

/* Native controls do not inherit the document face, so a <button> renders in
   the browser's own UI font while an <a class="button"> beside it renders in
   ours - the same component in two typefaces. Family only: every component
   rule keeps setting its own size and weight. Three rules already spot-fixed
   this with `font: inherit`; they are harmless now but no longer load-bearing. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* The UA stylesheet gives <strong> `bolder`, which is relative: inside body
   text it lands on 700, but nested in a 600 label it resolves to 900, and we
   ship no 900 face for the browser to use. An absolute weight keeps ordinary
   emphasis at real Bold and never asks for a face that does not exist. The
   many `.thing strong` rules below are more specific and still win. */
strong,
b {
  font-weight: 700;
}

/* Unclassed headings on the older operational screens were left at the UA's
   `bold`, which reads 700 beside the 600 the rest of the type system uses.
   Low specificity on purpose: every component heading rule below sets its own
   weight and still wins. */
h1,
h2,
h3,
h4 {
  font-weight: 600;
}

/* THE FOCUS RING, and why it is two rings rather than one.

   No single color is visible everywhere this app puts a focusable control.
   Measured against the three backgrounds one actually sits on:

     --emerald on --paper/--white ........ 5.0:1   ok
     --emerald on --ink (activity header)  3.3:1   ok, and marginal
     --emerald on --emerald (primary button) 1:1   invisible

   So the emerald outline is paired with a white halo drawn in the offset gap.
   Whichever background the control sits on, one of the two contrasts: the halo
   carries it on ink (about 17:1) and on the emerald button (5.0:1), the outline
   carries it on the page. Visibility beats subtlety on a focus indicator.

   Checkbox and radio are enumerated with every other native control so their
   focus treatment does not depend on a third-party forms stylesheet. */

:root a:focus-visible,
:root button:focus-visible,
:root summary:focus-visible,
:root [type="text"]:focus-visible,
:root [type="email"]:focus-visible,
:root [type="password"]:focus-visible,
:root [type="search"]:focus-visible,
:root [type="number"]:focus-visible,
:root [type="datetime-local"]:focus-visible,
:root [type="checkbox"]:focus-visible,
:root [type="radio"]:focus-visible,
:root select:focus-visible,
:root textarea:focus-visible,
:root [tabindex]:focus-visible {
  outline: 3px solid var(--emerald);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--white);
  border-radius: 0.25rem;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 1rem;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.page-shell { min-height: 100vh; }

.site-header,
.site-footer,
main {
  width: min(1200px, calc(100% - 3rem));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.8rem;
  border-bottom: 1px solid var(--line);
}

.site-header nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.nav-identity {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
}

.nav-signout { margin: 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  --mark-size: 2.4rem;
  position: relative;
  display: inline-block;
  width: var(--mark-size);
  height: var(--mark-size);
  flex: 0 0 auto;
}

.brand-mark--sm { --mark-size: 2rem; }
.brand-mark--lg { --mark-size: 8rem; }

.brand-mark__ear {
  position: absolute;
  top: 4%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--ink);
}

.brand-mark__ear--left { left: 3%; }
.brand-mark__ear--right { right: 3%; }

.brand-mark__face {
  position: absolute;
  inset: 13% 5% 2%;
  border: max(2px, calc(var(--mark-size) * 0.045)) solid var(--ink);
  border-radius: 48% 48% 44% 44%;
  background: var(--paper);
}

.brand-mark__eye {
  position: absolute;
  top: 35%;
  width: 24%;
  height: 30%;
  border-radius: 55% 45% 55% 45%;
  background: var(--ink);
}

.brand-mark__eye::after {
  content: "";
  position: absolute;
  top: 32%;
  left: 38%;
  width: 23%;
  height: 23%;
  border-radius: 50%;
  background: var(--paper);
}

.brand-mark__eye--left { left: 16%; transform: rotate(15deg); }
.brand-mark__eye--right { right: 16%; transform: rotate(75deg); }

.brand-mark__nose {
  position: absolute;
  left: 43%;
  bottom: 18%;
  width: 14%;
  height: 10%;
  border-radius: 50% 50% 60% 60%;
  background: var(--emerald);
}

.nav-link,
.text-link {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration-color: var(--emerald);
  text-underline-offset: 0.3rem;
}

.environment-pill,
.count-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.72rem;
  border: 1px solid var(--brand-soft-line);
  border-radius: 999px;
  color: var(--emerald-dark);
  background: var(--emerald-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.eyebrow {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow--accent { color: var(--emerald); }

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 5rem;
  align-items: center;
  min-height: 40rem;
  padding: 5rem 0 6rem;
}

.hero h1,
.admin-hero h1,
.workspace-hero h1,
.not-found h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.hero h1 { max-width: 14ch; font-size: clamp(2.4rem, 4.6vw, 3.25rem); }
.hero h1 em { color: var(--emerald); font-weight: inherit; }

.hero__lede {
  max-width: 38rem;
  margin: 2rem 0 0;
  color: var(--ink-soft);
  font-size: 1.18rem;
  line-height: 1.75;
}

.hero__guest-access {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--emerald);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.hero__guest-access p { margin: 0; }
.hero__guest-access p + p { margin-top: 0.35rem; }
.hero__guest-access strong { color: var(--ink); font-weight: 600; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.72rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.button--primary {
  border: 1px solid var(--emerald);
  color: var(--white);
  background: var(--emerald);
  box-shadow: none;
}

.button--primary:hover { background: var(--emerald-dark); }
.button--secondary { border: 1px solid var(--line); color: var(--ink); background: var(--white); }
.button--secondary:hover { border-color: #9fb9ad; background: #f2f8f5; }
.button--ghost { border: 1px solid transparent; color: var(--ink-soft); background: transparent; }
.button--ghost:hover { border-color: var(--line); color: var(--ink); background: var(--surface-subtle); }
.button--danger { border: 1px solid var(--danger-line); color: var(--danger-fg); background: var(--danger-bg); }
.button--danger:hover { border-color: #b56f52; background: #fde9e1; }
.button--small { padding: 0.55rem 0.75rem; font-size: 0.75rem; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.button-row form { margin: 0; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.card-actions,
.workspace-actions,
.activity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.card-actions { justify-content: flex-end; }
.workspace-actions { margin: -1rem 0 1.5rem; }
.activity-header__aside { display: grid; gap: 0.75rem; }
.activity-actions { justify-content: flex-end; }
.activity-actions a { color: var(--emerald-dark); font-size: 0.73rem; font-weight: 600; text-underline-offset: 0.25rem; }

.hero__art {
  position: relative;
  min-height: 30rem;
  border: 1px solid var(--line);
  border-radius: 50% 50% 45% 55% / 44% 48% 52% 56%;
  background: linear-gradient(145deg, var(--emerald-soft), #f4f1e8);
  box-shadow: var(--shadow);
}

.hero-mark { position: absolute; inset: 5rem auto auto 50%; transform: translateX(-50%); }

.schedule-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 15rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(217, 224, 219, 0.8);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 35px rgba(23, 33, 29, 0.1);
}

.schedule-card strong,
.schedule-card small { display: block; }
.schedule-card strong { font-size: 0.84rem; }
.schedule-card small { margin-top: 0.1rem; color: var(--slate); font-size: 0.69rem; }
.schedule-card__dot { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: var(--emerald); }
.schedule-card__dot--ink { background: var(--ink); }
.schedule-card__dot--soft { background: var(--accent); }
.schedule-card--top { top: 2.6rem; right: -1rem; transform: rotate(2deg); }
.schedule-card--middle { top: 13rem; left: -2rem; transform: rotate(-2deg); }
.schedule-card--bottom { right: 0.75rem; bottom: 2.75rem; transform: rotate(1deg); }

.feature-section { padding: 2rem 0 7rem; }
.section-heading { max-width: 43rem; margin-bottom: 2.25rem; }
.section-heading h2 { margin: 0; font: 600 clamp(1.5rem, 2.4vw, 1.9rem)/1.15 var(--font-heading); letter-spacing: -0.012em; }
.section-heading--row { display: flex; max-width: none; align-items: end; justify-content: space-between; }
.section-block { margin: 3rem 0 5rem; }
.panel { margin-bottom: 1.5rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--white); box-shadow: 0 12px 38px rgba(23, 33, 29, 0.04); }
.panel > :first-child { margin-top: 0; }
.panel--accent { border-left: 4px solid var(--emerald); background: #f6fbf8; }
.muted { color: var(--slate); }
.record-note { color: var(--slate); font-size: 0.78rem; overflow-wrap: anywhere; }
.compact-list { margin: 0.55rem 0 0; padding-left: 1.1rem; color: var(--warning); }
.compact-list li + li { margin-top: 0.25rem; }
.compact-form { display: grid; gap: 0.55rem; margin-top: 0.7rem; }
.compact-form .form-field textarea { min-width: 13rem; }
.compact-form .button { justify-content: center; padding: 0.55rem 0.7rem; border-width: 1px; cursor: pointer; font: inherit; font-size: 0.75rem; }
.import-workspace-grid { gap: 1.25rem; margin-bottom: 2.5rem; border: 0; }
.import-workspace-grid .panel { margin: 0; }
.import-workspace-grid .admin-form { margin: 1rem 0 0; padding: 0; border: 0; box-shadow: none; }
.import-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin: 1.75rem 0 3rem; }
.metric-card { display: grid; gap: 0.35rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; color: var(--ink); background: var(--white); text-decoration: none; }
.metric-card span { color: var(--slate); font-size: 0.75rem; font-weight: 600; }
.metric-card strong { color: var(--emerald-dark); font: 600 2rem/1 var(--font-heading); }
.metric-card small { color: var(--slate); font-size: 0.72rem; line-height: 1.35; }
/* Four counts across the top of an Event. Collapses to two before it collapses
   to one: three metrics on one row and a widow on the next reads as an error. */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1.25rem; }
@media (max-width: 960px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* One horizontal fill. Only ever rendered where a finite, stored capacity is
   the denominator - see EventReservationSummaryView.fill_percent for why there
   is no Activity-level equivalent. The width is set inline because it is data,
   not style; the tone class carries the color. */
.pressure-bar { display: grid; gap: 0.3rem; min-width: 0; }
.pressure-bar__label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.pressure-bar__label span { color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; }
.pressure-bar__label strong { font-size: 0.78rem; font-weight: 600; }
.pressure-bar__track { overflow: hidden; height: 0.4rem; border-radius: 999px; background: var(--track); }
.pressure-bar__fill { height: 100%; border-radius: 999px; background: var(--emerald); }
.pressure-bar--steady .pressure-bar__label strong { color: var(--emerald-dark); }
.pressure-bar--quiet .pressure-bar__fill { background: var(--brand-soft-line); }
.pressure-bar--quiet .pressure-bar__label strong { color: var(--slate); }
.pressure-bar--scarce .pressure-bar__fill { background: var(--accent); }
.pressure-bar--scarce .pressure-bar__label strong { color: var(--warn-fg); }

/* Pre-publication checklist. Three states, not two: satisfied, outstanding-and
   -blocking, outstanding-but-optional. The optional rows are deliberately quiet
   - an Event may publish with no Activities and no Attendees, and a row that
   shouts would teach the opposite. */
.publish-checklist { display: grid; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.publish-checklist li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.65rem; align-items: start; padding: 0.6rem 0.7rem; border-radius: 0.55rem; }
.publish-checklist__mark { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 0.7rem; font-weight: 700; line-height: 1; }
.publish-checklist strong { display: block; font-size: 0.83rem; font-weight: 600; }
.publish-checklist small { color: var(--slate); font-size: 0.74rem; line-height: 1.4; }
.publish-checklist li.is-done .publish-checklist__mark { border-color: var(--emerald); color: var(--white); background: var(--emerald); }
.publish-checklist li.is-done strong { color: var(--ink-soft); font-weight: 500; }
.publish-checklist li.is-blocking { background: var(--rail); }
.publish-checklist li.is-blocking .publish-checklist__mark { border-color: var(--warn-line); color: var(--warn-fg); background: var(--warn-bg); }
.publish-checklist li.is-optional .publish-checklist__mark { color: var(--slate); }

/* Sign in. A card the width of its own content, centred, with room above and
   below so it does not sit against the header. */
.auth-shell { display: grid; place-items: start center; padding: 4rem 0 7rem; }
.auth-card { width: min(29rem, 100%); padding: 2rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--white); box-shadow: var(--shadow); }
.auth-card h1 { margin: 0; font: 600 1.6rem/1.2 var(--font-heading); letter-spacing: -0.012em; }
.auth-card__lede { margin: 0.6rem 0 1.5rem; color: var(--slate); font-size: 0.85rem; line-height: 1.55; }
/* The form inside is already a card everywhere else, so it gives up its own
   frame here rather than drawing a second one inside this one. */
.auth-card .admin-form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
@media (max-width: 680px) {
  .auth-shell { padding: 2rem 0 4rem; }
  .auth-card { padding: 1.35rem; }
}

/* Feedback status filter, as a segmented control rather than loose links. The
   three states are one choice, and a segment makes that a single object the
   eye reads once instead of three things it has to compare. */
/* max-width so it can shrink on a narrow screen rather than pushing the page
   sideways: an inline-flex segment with three items will not wrap on its own. */
.feedback-status-tabs { display: inline-flex; max-width: 100%; gap: 0.25rem; margin: 0 0 1.25rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--white); overflow-x: auto; }
.feedback-status-tabs a { padding: 0.5rem 1.1rem; border-radius: 0.45rem; color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.feedback-status-tabs a:hover { background: var(--surface-subtle); }
.feedback-status-tabs a[aria-current="page"] { color: var(--white); background: var(--emerald); }

/* Activities as rows. The design handoff records that a three-up card grid was
   tried and rejected: Activities are compared against each other on times and
   bookings, and cards put every comparison on a different line. Explicit
   columns, so the eye runs down one fact at a time. */
.activity-rows { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--white); overflow: hidden; }
.activity-rows__head,
.activity-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 1rem; align-items: center; padding: 0.85rem 1.1rem; }
.activity-rows__head { border-bottom: 1px solid var(--line); background: var(--surface-subtle); color: var(--slate); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.activity-row + .activity-row,
.activity-rows__head + .activity-row { border-top: 1px solid var(--mist); }
.activity-rows__head + .activity-row { border-top: 0; }
.activity-row:hover { background: var(--surface-subtle); }
.activity-row a { text-decoration: none; }
.activity-row__name a { color: var(--ink); font-size: 0.88rem; font-weight: 600; }
.activity-row__name a:hover { color: var(--emerald-dark); }
.activity-row small { display: block; margin-top: 0.15rem; color: var(--slate); font-size: 0.72rem; line-height: 1.4; }
.activity-row__shape span,
.activity-row__bookings span { color: var(--ink-soft); font-size: 0.8rem; }
.activity-row__actions { display: flex; gap: 0.75rem; justify-self: end; }
.activity-row__actions .text-link { font-size: 0.78rem; font-weight: 600; }
@media (max-width: 900px) {
  /* Two columns, then the actions on their own line. A four-column row at this
     width truncates the name, which is the one cell nobody can guess. */
  .activity-rows__head { display: none; }
  .activity-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0.5rem; }
  .activity-row__name { grid-column: 1 / -1; }
  .activity-row__actions { grid-column: 1 / -1; justify-self: start; }
}

/* Event breadcrumb. The path INTO the Event, so it sits above the hero and
   shares its white band and container width - three elements, one piece of
   chrome. Below the tabs it read as the page's first line of content, and its
   only crumb the tab bar had not already lit was the one naming the tab. */
.event-crumbs { background: var(--white); }
.event-crumbs__inner { width: min(1200px, calc(100% - 3rem)); margin: 0 auto; }
/* The band supplies the space above; the hero supplies the space below. The
   page-level rule sets 1.5rem for a crumb that opens a page, which is too much
   lead-in for one that opens a strip of chrome. */
.event-crumbs__inner .breadcrumbs { padding-top: 1rem; }

/* Event hero. Shares the tab bar's white band and container width so the two
   read as one piece of chrome rather than two stacked strips. */
.event-hero { background: var(--white); }
.event-hero__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; width: min(1200px, calc(100% - 3rem)); margin: 0 auto; padding: 1rem 0; }
.event-hero__identity { min-width: 0; }
.event-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.event-hero__name { max-width: 46rem; margin: 0.6rem 0 0; font: 600 clamp(1.6rem, 2.6vw, 2.05rem)/1.15 var(--font-heading); letter-spacing: -0.015em; overflow-wrap: anywhere; }
/* On a tab other than the Overview the name is a link back to it, and it must
   not read as a link in a body of text - no underline, inherited color. */
.event-hero__name a { color: inherit; text-decoration: none; }
.event-hero__name a:hover { color: var(--emerald-dark); }
.event-hero__meta { margin: 0.5rem 0 0; color: var(--slate); font-size: 0.85rem; }
/* The Workspace name is a destination, not the first half of a sentence about
   dates, so it has to read as a link even though the breadcrumb above the hero
   now reaches the same place. */
.event-hero__meta a { color: var(--emerald-dark); font-weight: 600; text-decoration: none; }
.event-hero__meta a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.event-hero__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 680px) {
  .event-crumbs__inner,
  .event-hero__inner { width: calc(100% - 2rem); }
  .event-hero__actions { width: 100%; }
  .event-hero__actions .button { flex: 1 1 auto; justify-content: center; }
}

/* Event tab bar. Replaced a left sidebar, which cost every page a column of
   width on a screen whose content is mostly tables. Horizontal scrolling
   rather than wrapping below 900px: a tab bar that reflows to two rows moves
   every tab under the reader's finger between one page and the next. */
.event-tabs {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.event-tabs ul {
  display: flex;
  gap: 1.5rem;
  width: min(1200px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
.event-tabs li { flex: 0 0 auto; }
.event-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0 0.75rem;
  border-bottom: 2px solid transparent;
  color: var(--slate);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.event-tab:hover { color: var(--ink); }
/* The 2px underline is the only marker, so it also has to survive a forced
   color mode where backgrounds are dropped. A border does; a background
   would not. */
.event-tab.is-current {
  border-bottom-color: var(--emerald);
  color: var(--ink);
  font-weight: 600;
}
.event-tab__count {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  color: var(--slate);
  background: var(--mist);
  font-size: 0.68rem;
  font-weight: 600;
}
.event-tab.is-current .event-tab__count { color: var(--emerald-dark); background: var(--emerald-soft); }
@media (max-width: 680px) {
  .event-tabs ul { gap: 1.1rem; width: calc(100% - 2rem); }
}

/* Agenda board. One column per Event-local day, replacing a flat table in
   which the day boundaries were invisible and every row spelled the same long
   date twice.

   `auto-fit` rather than the handoff's fixed `repeat(3, 1fr)`: three columns is
   right for the three-day Event the design draws, and wrong for a nine-day one,
   where it would stack three tall columns beside six empty rows. The 17rem
   floor is what makes a column still readable when several days share a row. */
.agenda-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; align-items: start; margin-top: 1rem; }
.agenda-day { border: 1px solid var(--line); border-radius: 0.875rem; background: var(--white); overflow: hidden; }
.agenda-day__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--mist); background: var(--surface-subtle); }
.agenda-day__date { margin: 0; font-size: 0.8rem; font-weight: 600; }
.agenda-day__count { margin: 0; color: var(--slate); font-size: 0.72rem; }
/* The window note. Quiet, because it is a fact about paging rather than a
   problem with the Event, but present, because a truncated day column that
   says nothing reads as a complete one. */
.agenda-day__window { margin: 0; padding: 0.6rem 1rem; border-bottom: 1px solid var(--mist); color: var(--slate); background: var(--surface-subtle); font-size: 0.72rem; }
.agenda-day__blocks:last-child + .agenda-day__window { border-top: 1px solid var(--mist); border-bottom: 0; }
.agenda-day__blocks { display: grid; gap: 0.5rem; margin: 0; padding: 0.75rem; list-style: none; }

/* A block's left edge is its state. Published carries the brand; draft and
   cancelled recede to the line color, because neither is attendee-facing and
   a board of tinted rows turns a normal Event into an alarm. The two are then
   separated by the title rather than the edge: a cancelled item was published
   once and is retained as history, which the strike-through says and a color
   would not. */
.agenda-block { padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 0.625rem; background: var(--white); }
.agenda-block__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0; }
.agenda-block__time { color: var(--slate); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; }
.agenda-block__state { flex: 0 0 auto; color: var(--slate); font-size: 0.66rem; font-weight: 600; }
.agenda-block__title { margin: 0.3rem 0 0; font-size: 0.85rem; font-weight: 600; }
.agenda-block__title a { color: var(--ink); text-decoration: none; }
.agenda-block__title a:hover { color: var(--emerald-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.agenda-block__meta { margin: 0.3rem 0 0; color: var(--slate); font-size: 0.72rem; }
.agenda-block--published { border-left-color: var(--emerald); }
.agenda-block--published .agenda-block__state { color: var(--emerald-dark); }
.agenda-block--draft { background: var(--surface-subtle); }
.agenda-block--cancelled { background: var(--surface-subtle); }
.agenda-block--cancelled .agenda-block__title a { color: var(--slate); text-decoration: line-through; }

/* Needs-your-attention panel. The dot carries the urgency, not the row: a
   tinted row per item turns three warnings into an alarm, and these are things
   to look at rather than failures. Capped at three items by the service. */
.attention-panel { margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--white); }
.attention-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--mist); }
.attention-panel__head h2 { margin: 0; font-size: 0.95rem; }
.attention-panel ul { margin: 0; padding: 0; list-style: none; }
.attention-item { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: start; padding: 0.9rem 1.1rem; }
.attention-item + .attention-item { border-top: 1px solid var(--mist); }
.attention-item__dot { width: 0.5rem; height: 0.5rem; margin-top: 0.35rem; border-radius: 50%; background: var(--slate); }
.attention-item strong { display: block; font-size: 0.86rem; font-weight: 600; }
.attention-item p { margin: 0.2rem 0 0; color: var(--slate); font-size: 0.78rem; line-height: 1.45; }
.attention-item .text-link { flex: 0 0 auto; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.attention-item--scarce .attention-item__dot { background: var(--accent); }
.attention-item--blocking .attention-item__dot { background: var(--warn-fg); }
@media (max-width: 680px) {
  .attention-item { grid-template-columns: 0.5rem minmax(0, 1fr); }
  .attention-item .text-link { grid-column: 2; }
}

/* Public link and its QR. The link column is allowed to shrink; the symbol is
   not, because a QR below about 7rem stops scanning reliably on a phone. */
/* The address moved to the Website tab, where it sits inside a section card
   that already supplies the border and padding `.public-link-row` used to. The
   Overview keeps a pointer to it rather than a second copy of the URL. */
.public-link-pointer { margin: 1rem 0 0; font-size: 0.85rem; }
/* Layout only: the section card around it already supplies the border and the
   padding that `.public-link-row` used to carry. The QR sits beside the address
   rather than under it, because the two are one answer to one question. */
.public-link-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; }
.public-link-qr { display: grid; gap: 0.4rem; justify-items: center; margin: 0; }
.public-link-qr__code { display: grid; place-items: center; padding: 0.6rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--white); }
.public-link-qr__code svg { display: block; width: 7.5rem; height: 7.5rem; }
.public-link-qr figcaption { max-width: 9rem; color: var(--slate); font-size: 0.7rem; line-height: 1.35; text-align: center; }

/* Attendee brand swatches. The color arrives as a custom property rather than
   a `background` declaration, matching the Organization form's preview: same
   validated six-digit value, same one reason `style-src` permits inline
   styles at all. The chip is decorative — the hex sits beside it as text. */
.brand-swatches { display: grid; gap: 0.75rem; margin: 0; }
.brand-swatch { display: grid; gap: 0.25rem; }
.brand-swatch dt { color: var(--slate); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.brand-swatch dd { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.brand-swatch__chip { width: 1.9rem; height: 1.4rem; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 0.375rem; background: var(--preview-color); }
.brand-swatch code { color: var(--slate); font-family: var(--font-mono); font-size: 0.75rem; }
@media (max-width: 680px) {
  .public-link-row { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
.metric-card:hover,
.metric-card--selected { border-color: var(--emerald); background: var(--emerald-soft); box-shadow: inset 0 0 0 1px var(--emerald); }
.import-preview-table { min-width: 68rem; }
.import-preview-table th:first-child { width: 4rem; }
.import-preview-table td:nth-child(2) { width: 18rem; overflow-wrap: anywhere; }
.import-preview-table td:nth-child(3) { width: 25rem; overflow-wrap: anywhere; }
.import-preview-table td:nth-child(4) { width: 20rem; }
.confirmation-panel { max-width: 58rem; }
.result-counts { max-width: 40rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-card { min-height: 18rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); }
/* Lifted off near-black on purpose. --ink is the body text color, and a card
   painted in it reads as a hole in the page rather than a third card; the
   design handoff calls this one out specifically. */
.feature-card--accent { color: var(--white); background: var(--step3); }
.feature-card__number { color: var(--emerald); font: 600 2rem/1 var(--font-heading); }
.feature-card h3 { margin: 5rem 0 0.7rem; font-size: 1.15rem; }
.feature-card p { margin: 0; color: var(--slate); }
.feature-card--accent p { color: #bdc7c2; }
.feature-grid--pair .feature-card h2 { margin: 2rem 0 1rem; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.2; }
.feature-grid--pair .feature-card p { max-width: 48ch; line-height: 1.75; }
.feature-grid--pair .feature-card--accent .feature-card__number { color: #dfece4; }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 0 2.75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.84rem;
}
.site-footer__meta { color: var(--slate); }

.admin-hero,
.workspace-hero {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 3.75rem 0 2.5rem;
}
.admin-hero { align-items: end; }
.admin-hero h1,
.workspace-hero h1,
.not-found h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
.admin-hero h1,
.workspace-hero h1 { font-size: clamp(1.85rem, 3vw, 2.4rem); }
.admin-hero p,
.workspace-hero__description { max-width: 44rem; color: var(--slate); }
.admin-hero__count { display: flex; align-items: baseline; gap: 0.7rem; }
.admin-hero__count strong { color: var(--emerald); font: 600 2.5rem/1 var(--font-heading); }
.admin-hero__count span { color: var(--slate); font-weight: 600; }

/* Two Workspace cards abreast where there is room. One per row wastes the
   right half of a wide screen on a page whose whole job is letting you pick
   between them; auto-fit means a single Workspace still fills the width
   rather than sitting in a half-page column beside nothing. */
/* min(28rem, 100%) rather than a bare 28rem. auto-fit will not shrink a track
   below its stated minimum, so on a 375px screen a 28rem floor makes the whole
   document 448px wide and the page scrolls sideways. Caught by rendering it. */
.organization-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); gap: 1.25rem; padding-bottom: 5rem; align-items: start; }
.activity-list { display: grid; gap: 1.25rem; padding-bottom: 5rem; }
.organization-card,
.activity-card { border: 1px solid var(--line); border-radius: 1rem; background: var(--white); box-shadow: 0 12px 38px rgba(23, 33, 29, 0.04); overflow: hidden; }
.organization-card__header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.5rem; }
.organization-card h2 { margin: 0; font-size: 1.2rem; }
/* The card heading became the way into an Organization's own page, and a link
   that looks exactly like the text beside it is not a link anybody will find.
   Underlined rather than recolored: emerald here would compete with the New
   Event button a few pixels to its right, and an underline is the one link
   affordance that does not depend on seeing color at all — WCAG 1.4.1. The
   rule is muted so the heading still reads as a heading; hover brings it to
   full strength and shifts to emerald, matching every other link here.

   #719280 rather than the lighter grey-green this started as, because a
   non-text indicator needs 3:1 against its background under WCAG 1.4.11 and
   measurement said the first choice was 2.10:1. This is 3.43:1 on the card's
   white, still far below the heading's own 16.5:1, so it reads as an underline
   under a heading rather than as a second heading. */
.organization-card h2 a { color: inherit; text-decoration: underline; text-decoration-color: #719280; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.organization-card h2 a:hover { color: var(--emerald-dark); text-decoration-color: currentColor; }
.slug { margin: 0.2rem 0 0; color: var(--slate); font: 0.78rem var(--font-mono); }
.event-list { border-top: 1px solid var(--line); }
.event-row { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1.25rem; align-items: center; padding: 1.15rem 1.5rem; cursor: pointer; text-decoration: none; transition: background-color 160ms ease, box-shadow 160ms ease; }
.event-row + .event-row { border-top: 1px solid var(--line); }
.event-row:hover { background: #f2f8f5; }
.event-row:focus-visible { outline: 0; border-radius: 0; background: #f2f8f5; box-shadow: inset 0 0 0 3px #34d399; }
.event-row:hover .event-row__main strong,
.event-row:focus-visible .event-row__main strong { color: var(--emerald-dark); }
.event-row__date { color: var(--emerald-dark); font-size: 0.82rem; font-weight: 600; }
.event-row__main strong,
.event-row__main small { display: block; }
.event-row__main small { margin-top: 0.2rem; color: var(--slate); }
.event-row__arrow { color: var(--emerald-dark); font-size: 0.74rem; font-weight: 600; white-space: nowrap; transition: transform 160ms ease; }
.event-row:hover .event-row__arrow,
.event-row:focus-visible .event-row__arrow { transform: translateX(0.2rem); }

.empty-state { display: flex; gap: 1rem; align-items: center; min-height: 15rem; padding: 2rem; border: 1px dashed #b9c6bf; border-radius: 1rem; background: rgba(238, 242, 239, 0.45); }
.empty-state--compact { min-height: 0; margin: 0 1.5rem 1.5rem; padding: 1rem; border-radius: 0.65rem; }
.activity-panel .empty-state--compact { margin: 0; }
.empty-state__spark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: 50%; color: var(--emerald); background: var(--emerald-soft); }
.empty-state__title { margin: 0; font-weight: 600; }
.empty-state__copy { margin: 0.15rem 0 0; color: var(--slate); font-size: 0.85rem; }

.breadcrumbs { padding-top: 1.5rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; padding: 0; list-style: none; color: var(--slate); font-size: 0.78rem; }
.breadcrumbs a { color: var(--emerald-dark); font-weight: 600; }
.workspace-hero { align-items: start; padding-top: 1.85rem; }
.workspace-hero__main { max-width: 43rem; }
.workspace-hero__organization { margin: 0.85rem 0 0; color: var(--emerald-dark); font-weight: 600; }
.workspace-hero__description { margin-top: 1.25rem; }
.event-facts,
.activity-config { margin: 0; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--white); }
.event-facts { width: min(100%, 25rem); }
.metadata-row { display: grid; grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.metadata-row + .metadata-row { margin-top: 0.62rem; padding-top: 0.62rem; border-top: 1px solid var(--mist); }
.metadata-row dt { color: var(--slate); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.metadata-row dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 0.86rem; font-weight: 600; }

.booking-summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 3.5rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--emerald); border-radius: 0.75rem; background: var(--emerald-soft); }
.booking-summary__totals p { margin: 0; font-size: 0.86rem; }
.status-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.status-badge { padding: 0.28rem 0.52rem; border: 1px solid rgba(23, 33, 29, 0.12); border-radius: 999px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.78); font-size: 0.69rem; font-weight: 500; }
.status-badge strong { margin-left: 0.2rem; color: inherit; }
.status-badge--pending { border-color: var(--warn-line); color: var(--warn-fg); background: var(--warn-bg); }
.status-badge--confirmed { border-color: #a8d2c2; color: var(--emerald-dark); background: #f0faf6; }
.status-badge--cancelled,
.status-badge--no_show,
.status-badge--archived { border-color: #d5dcd8; color: #5f6b65; background: #f2f4f3; }
.status-badge--completed { border-color: #c7d8d0; color: #36584a; background: #edf4f1; }

.activities-section { padding-bottom: 2rem; }
.activity-card--detail { margin: 2rem 0 4rem; }
/* This header is a light card like every other surface in the admin UI. It
   was a near-black slab, and the fill was also what separated it from the
   panels below - hence the explicit bottom border. `.activity-card__header`,
   `.activity-config` and `.activity-actions` appear only in
   admin/activity_workspace.html, so these are recolored in place rather than
   overridden through the --workspace modifier; there is no dark variant left
   for a modifier to override. */
.activity-card__header { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.45rem 1.5rem; color: var(--ink); background: var(--white); border-bottom: 1px solid var(--line); }
.activity-card__header .eyebrow { color: var(--slate); }
.activity-card__header h1,
.activity-card__header h3 { margin: 0; font: 600 1.5rem/1.2 var(--font-heading); }
.activity-card__header p { max-width: 40rem; margin: 0.7rem 0 0; color: var(--ink-soft); }
.activity-config { min-width: 19rem; padding: 0.95rem 1.1rem; border-color: var(--line); background: var(--surface-tint); }
.activity-config .metadata-row { grid-template-columns: 8.5rem 1fr; }
.activity-config .metadata-row + .metadata-row { border-color: var(--line); }
.activity-config dt { color: var(--ink-soft); }
.activity-grid { display: grid; grid-template-columns: 1.4fr 1fr; border-bottom: 1px solid var(--line); }
.activity-grid--workspaces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border-bottom: 0; overflow-wrap: anywhere; }
.activity-grid--workspaces > * { min-width: 0; }
.activity-panel { padding: 1.5rem; }
.activity-panel + .activity-panel { border-left: 1px solid var(--line); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-heading h2,
.panel-heading h4 { margin: 0; font-size: 1rem; }
.count-chip--small { padding: 0.22rem 0.5rem; font-size: 0.65rem; }
.resource-list,
.manual-slot-list { display: grid; gap: 0.75rem; }
.resource-card,
.manual-slot { padding: 1rem; border: 1px solid var(--line); border-radius: 0.7rem; background: #fcfdfc; }
.resource-card > header { display: flex; justify-content: space-between; gap: 1rem; }
.resource-card header strong,
.resource-card header span { display: block; }
.resource-card header > div:first-child > span { color: var(--slate); font-size: 0.71rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.resource-card > p { margin: 0.75rem 0; color: var(--slate); font-size: 0.82rem; }
.availability-counts { display: flex; gap: 0.75rem; text-align: right; font-size: 0.68rem; font-weight: 600; }
.availability-counts .available { color: var(--emerald-dark); }
.availability-counts .unavailable { color: var(--warning); }
.window-list { margin-top: 0.9rem; border-top: 1px solid var(--mist); }
.window-row { display: grid; grid-template-columns: 5.5rem 1fr auto 1fr auto; gap: 0.55rem; align-items: center; padding-top: 0.6rem; color: var(--ink-soft); font-size: 0.73rem; }
.window-kind { font-weight: 600; text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.04em; }
.window-kind--available { color: var(--emerald-dark); }
.window-kind--unavailable { color: var(--warning); }
.manual-slot__time strong,
.manual-slot__time span { display: block; }
.manual-slot__time strong { font-size: 0.82rem; }
.manual-slot__time span { color: var(--slate); font-size: 0.75rem; }
.manual-slot__meta { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--mist); color: var(--slate); font-size: 0.7rem; }
.resource-less-label { color: var(--emerald-dark); font-weight: 600; }
.resource-card__actions { display: grid; justify-items: end; gap: 0.35rem; }
.resource-card__actions > a,
.panel-heading__actions > a,
.window-actions a,
.manual-slot__meta a { color: var(--emerald-dark); font-size: 0.7rem; font-weight: 600; }
.panel-heading__actions { display: flex; align-items: center; gap: 0.65rem; }
.panel-heading__actions > .button--primary { color: var(--white); font-size: 0.75rem; }
.panel-more-actions { position: relative; }
.panel-more-actions summary { color: var(--emerald-dark); font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.panel-more-actions > div { position: absolute; z-index: 4; top: calc(100% + 0.45rem); right: 0; display: grid; width: max-content; min-width: 10rem; gap: 0.55rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--white); box-shadow: var(--shadow); }
.panel-more-actions a { color: var(--emerald-dark); font-size: 0.72rem; font-weight: 600; }
.window-actions { display: flex; align-items: center; gap: 0.5rem; }

/* A WITHDRAWN MANUAL SLOT IS STILL LISTED, AND HAS TO LOOK LISTED-BUT-OFF
   rather than broken. Hiding it would read as deleted, and not being deleted
   is the whole point of withdrawing.

   The row recedes the way an unavailable public occurrence does — paper
   ground, dashed border — so "this is not currently on offer" is said by the
   same visual language in both surfaces rather than invented twice here. The
   text does NOT fade: an admin has to be able to read the time they are
   deciding about, and greying the content is how a deliberate state gets
   mistaken for a rendering fault. */
.manual-slot--withdrawn { border-style: dashed; background: var(--paper); }

/* The marker sits in the time block beside "Start only", so it is read with
   the time rather than hunted for among the actions. --slate on --paper is
   4.94:1, the same pairing the public listing's "Fully booked" already uses:
   quiet, and about as quiet as it can be while clearing AA. */
.status-badge--withdrawn { border-color: var(--line); color: var(--slate); background: var(--paper); text-transform: uppercase; letter-spacing: 0.04em; }
.manual-slot__time .status-badge--withdrawn { display: inline-block; margin-top: 0.3rem; }

/* Restore is a POST, so it is a button; it sits among Edit/Withdraw/Remove
   links and must not look like a fourth kind of control. Styled as the links
   beside it rather than as a button, because its weight should come from its
   wording, not from a filled shape shouting next to "Remove". */
.inline-form { display: inline; }
.link-button { padding: 0; border: 0; background: none; color: var(--emerald-dark); font: inherit; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.activity-card > .booking-summary { margin: 0; border-left: 0; border-radius: 0; }
.activity-next-step { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1rem; padding: 1.2rem 1.35rem; border: 1px solid #b8d6c9; border-radius: 0.8rem; background: #f0f8f4; }
.activity-next-step h2 { margin: 0.3rem 0 0; font-size: 1.15rem; }
.activity-next-step p { max-width: 42rem; margin: 0.45rem 0 0; color: var(--slate); }

/* Public attendee listing. Modelled on .window-row's grid and its behaviour at
   both breakpoints, rather than reusing that class, whose admin meaning would
   otherwise drift. */
.activity-section { padding-bottom: 3rem; }
.activity-section__description { margin: 0.5rem 0 0; max-width: 44rem; color: var(--slate); }
.listing-note { margin: 0 0 1.25rem; color: var(--slate); font-size: 0.9rem; }
.occurrence-day { margin-bottom: 1.75rem; }
.occurrence-day__heading { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--emerald-dark); }
.occurrence-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.occurrence-row { display: grid; grid-template-columns: 12.5rem 1fr auto auto; gap: 0.9rem; align-items: center; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--white); }
.occurrence-row__time { font-weight: 600; color: var(--ink); }
.occurrence-row__resources { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.occurrence-resource { padding: 0.15rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--mist); font-size: 0.75rem; color: var(--ink-soft); }
.occurrence-row__capacity { color: var(--slate); font-size: 0.8rem; }
.occurrence-row__capacity--lead { grid-column: 2; justify-self: start; color: var(--emerald-dark); font-size: 0.95rem; font-weight: 600; }
.occurrence-row__state { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warning); }
.occurrence-row--unavailable { background: var(--paper); border-style: dashed; }
.occurrence-row--unavailable .occurrence-row__time,
.occurrence-row--unavailable .occurrence-row__capacity:not(.occurrence-row__capacity--scarce) { color: var(--slate); }

/* SCARCITY IS A FILLED PILL, and the fill is the point.

   The wording and the styling used to disagree: the resource-less lead ("40
   left") is emerald and 800, while "Only 2 of 4 places left" was --slate at
   400, so the emptiest row on a listing was the loudest and the scarcest was as
   quiet as every other. A filled shape outranks colored text at a glance, and
   this row already has a pill idiom in .occurrence-resource, so the emphasis
   reads as native rather than as an intrusion.

   NOT --warning, which is 5.81:1 on white and perfectly legible, but is this
   app's refusal color — it dresses .occurrence-row__state and every error
   summary. Scarcity is urgency, not failure, and borrowing the failure color
   would tell an attendee the time is broken rather than nearly gone.

   Measured, on the two backgrounds a row actually has:

     --white on --emerald-dark ......... 7.38:1   the pill's text
     --emerald-dark on --white ......... 7.38:1   the pill's area, ordinary row
     --emerald-dark on --paper ......... 7.17:1   the pill's area, dashed row

   A tinted pill was measured and rejected: --emerald-dark on --emerald-soft
   reads at 6.17:1, but the pill AREA is 1.20:1 against the white row, so the
   shape all but disappears and the fill stops doing the work it was chosen for.

   No font-size here on purpose. The size is inherited, so a scarce caption is
   always bigger-or-equal to the plentiful caption of its own shape — 0.8rem
   beside a resource, 0.95rem from --lead without one — and gains the fill on
   top. Setting one would shrink the lead variant and trade emphasis away.

   The :not() above is load-bearing. A time with places left can still be
   unbookable through a Resource conflict, and that row is BOTH --unavailable
   and --scarce; the descendant rule outranks this one, so without the
   exclusion it would paint --slate on --emerald-dark at 1.45:1 — a pill with
   effectively invisible text.

   justify-self, because below 680px the row collapses to a single 1fr column
   and a grid item stretches to fill it. Found by looking: without this the
   pill spans the whole card as a banner — louder than intended, and it stops
   reading as a badge and starts reading as a progress bar. The same idiom
   --lead already uses. */
.occurrence-row__capacity--scarce { justify-self: start; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--emerald-dark); color: var(--white); font-weight: 600; }

/* Fully booked recedes, and the row does the receding. --unavailable already
   pales the background and dashes the border, which is what makes a full time
   read as closed. The caption stays plain --slate at 4.94:1 on --paper: quiet,
   and about as quiet as it can be while still clearing AA. Named explicitly so
   it cannot inherit a future emphasis meant for a time somebody can still
   take. */
.occurrence-row__capacity--full { color: var(--slate); font-weight: 400; }

/* Announced but not shown. The repo has aria-hidden for the inverse case; this
   is what lets a control read "Earlier times, the 7 days before Aug 12" to a
   screen reader while showing only "Earlier". */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.browse-controls { margin: 1rem 0 4rem; }

.not-found { max-width: 42rem; margin: 6rem auto 8rem; text-align: center; }
.not-found__mark { margin-bottom: 1rem; }
.not-found h1 { margin-bottom: 1.25rem; }
.not-found p { margin: 0 auto 2rem; color: var(--slate); }

/* `border: 1px solid` with no color resolves to currentColor, which on an
   unmodified .alert is --ink: a near-black hairline box, heavier than either
   modifier below and heavier than anything else on the page. Both modifiers
   set their own color, so this default was only ever reached by a plain note
   — and every plain note in the admin surface was drawing that box. --line is
   what every other panel here outlines itself with. */
.alert { margin: 1.25rem 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--paper); }
.alert--success { border-color: #9dceb9; color: var(--emerald-dark); background: #edf9f4; font-weight: 600; }
.alert--error { border-color: #e0a58c; color: var(--danger-fg); background: var(--danger-bg); }
/* The heading was 1rem at weight 400 — the same size and weight as the list
   under it, so it read as a first sentence rather than a heading. Only the
   weight moves; the size was already deliberate. */
/* Reassurance, beside something that needs acting on. A confirm page can
   carry both — "somebody still holds this" and "withdrawing breaks nothing" —
   and if they look identical the reader weighs them equally, which is the
   wrong way round. The quiet one loses the fill and drops to --slate; the
   difference is presence of a filled ground, which reads at a glance where a
   tint would not: --sand on --paper is 1.16:1, invisible as an area. */
.alert--quiet { background: transparent; color: var(--slate); }
/* Amber, and deliberately neither of the two above. The invitation link page
   carries one message — copy this now, because nothing keeps a second copy —
   and it is not an error (nothing went wrong) and not reassurance (something
   IS about to be lost). Measured rather than eyeballed: #6b4a12 on #fffaf0 is
   7.72:1, comfortably past WCAG AA's 4.5 and in the same range as the error
   variant's 8.78 and the success variant's 6.04, so it carries no less weight
   than either. */
.alert--warning { border-color: var(--note-line); color: var(--note-fg); background: var(--note-bg); }
.alert h2 { margin: 0; font-size: 1rem; font-weight: 600; }
/* The reset clears list markers globally, so an alert's list was indented
   sentences with nothing marking them as separate items.

   BOTH KINDS, and the ordered one is the case that matters. The first version
   of this rule named `ul` only, which left the invite form's `<ol>` — the
   numbered sequence of what happens next — rendering as flush
   paragraphs. That list is ordered because it is a sequence, so losing the
   numbers loses the one thing it was saying. Every other `<ol>` in the admin
   surface is a breadcrumb, which is outside `.alert` and untouched by this.

   1.4rem rather than 1.2rem: a decimal marker is wider than a disc, and at
   1.2rem "2." sat half outside the padding box while the disc looked right. */
.alert ul,
.alert ol { margin: 0.5rem 0 0; padding-left: 1.4rem; }
.alert ul { list-style: disc; }
.alert ol { list-style: decimal; }
.form-hero { max-width: 52rem; padding: 2rem 0 1.5rem; }
.form-hero--actions { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 2rem; }
.form-hero h1 { margin: 0; font: 600 clamp(1.85rem, 3vw, 2.4rem)/1.1 var(--font-heading); letter-spacing: -0.012em; }
.form-hero p { max-width: 44rem; margin: 0.9rem 0 0; color: var(--slate); }
.admin-form { display: grid; gap: 1.4rem; max-width: 58rem; margin-bottom: 5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); box-shadow: var(--shadow); }
.manual-times-form { max-width: 64rem; }
.manual-times-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--paper); }
.manual-times-context div { display: grid; gap: 0.2rem; min-width: 0; }
.manual-times-context strong { overflow-wrap: anywhere; }
.manual-times-assignment { margin: 0; padding: 0.8rem 1rem; border-left: 0.25rem solid var(--emerald); border-radius: 0.35rem; background: var(--mist); }
.manual-times-assignment span { margin-right: 0.35rem; color: var(--slate); }
.manual-date-groups { display: grid; gap: 1rem; }
.manual-times-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.manual-times-section-heading h2 { margin: 0.25rem 0 0; font-size: 1.25rem; }
.manual-date-group { border: 1px solid var(--line); border-radius: 0.85rem; background: #fcfdfc; overflow: hidden; }
.manual-date-group__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--mist); background: var(--paper); }
.manual-date-group__header .form-field { width: min(100%, 18rem); }
.manual-date-group__remove { margin-bottom: 0.72rem; color: var(--warning); }
.manual-time-rows { display: grid; }
.manual-time-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 0.85rem; align-items: end; padding: 1rem 1.1rem; border-top: 1px solid var(--mist); }
.manual-time-row:first-child { border-top: 0; }
.manual-time-row--error { background: #fff8f3; }
.manual-time-row__remove { margin-bottom: 0.72rem; }
.manual-time-row__errors { grid-column: 1 / -1; }
.manual-date-group__add { margin: 0 1.1rem 1rem; color: var(--emerald-dark); font-weight: 600; }
.manual-times-more-options { padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--paper); }
.manual-times-more-options summary { cursor: pointer; font-weight: 600; }
.manual-times-more-options p { margin: 0.75rem 0 0; color: var(--slate); }
.manual-times-option-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.2rem; margin-top: 0.75rem; }
.manual-times-option-links a { color: var(--emerald-dark); font-weight: 600; }
.manual-times-actions { align-items: center; }
.manual-times-count { margin: 0 auto 0 0; color: var(--slate); font-size: 0.82rem; font-weight: 600; }
.activity-quick-form,
.event-quick-form { max-width: 48rem; }
.activity-duration-field[hidden] { display: none; }
.quick-create-defaults { padding: 1rem 1.1rem; border: 1px solid #c7d8d0; border-radius: 0.75rem; background: var(--rail); }
.quick-create-defaults h2 { margin: 0.3rem 0 0; font-size: 1rem; }
.quick-create-defaults p { margin: 0.45rem 0 0; color: var(--slate); }
.activity-contextual-options { min-width: 0; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--white); }
.activity-contextual-options > summary { cursor: pointer; padding: 1rem 1.15rem; }
.activity-contextual-options > summary span { display: grid; gap: 0.2rem; }
.activity-contextual-options > summary small { color: var(--slate); font-weight: 400; }
.activity-contextual-options > div { border-top: 1px solid var(--line); }
.activity-contextual-options .activity-panel { border: 0; border-radius: 0; box-shadow: none; }
.workspace-contextual-options { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--white); }
.workspace-contextual-options > summary { cursor: pointer; padding: 1rem 1.15rem; }
.workspace-contextual-options > summary span { display: grid; gap: 0.2rem; }
.workspace-contextual-options > summary small { color: var(--slate); font-weight: 400; }
.workspace-contextual-options > div { border-top: 1px solid var(--line); }
.workspace-contextual-options .organization-overview__section { margin-top: 0; border: 0; border-radius: 0; }
/* Feedback shares the existing navigation during the private beta. */
.feedback-launch { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0.4rem 0.75rem; border: 1px solid var(--brand-soft-line); border-radius: 999px; color: var(--emerald-dark); background: var(--white); font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.feedback-launch:hover { color: var(--emerald-dark); background: var(--rail); text-decoration: underline; }
.feedback-form { max-width: 48rem; }
.feedback-thanks { max-width: 44rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); box-shadow: var(--shadow); }
.feedback-thanks .button { margin-top: 1.1rem; }
.feedback-list { display: grid; gap: 1rem; }
.feedback-card { padding: 1.2rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--white); box-shadow: var(--shadow); }
.feedback-card > header { display: flex; justify-content: space-between; gap: 1rem; }
.feedback-card > header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.feedback-card__message { white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-card dl { display: grid; gap: 0.5rem; }
.feedback-card dl div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; }
.feedback-card dt { color: var(--slate); font-size: 0.78rem; font-weight: 700; }
.feedback-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) {
  .feedback-card > header { display: grid; }
  .feedback-card dl div { grid-template-columns: 1fr; gap: 0.1rem; }
}
.support-contact-fields,
.support-source-fields,
.location-fields { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 0.75rem; }
.support-contact-fields > legend,
.support-source-fields > legend,
.location-fields > legend { padding: 0 0.35rem; font-weight: 600; }
.source-choice-list { display: grid; gap: 0.65rem; }
.source-choice-list label { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.65rem; background: #fcfdfc; cursor: pointer; }
.source-choice-list input { margin-top: 0.2rem; }
.source-choice-list span { display: grid; gap: 0.2rem; }
.source-choice-list small { color: var(--slate); }
.policy-summary { display: grid; gap: 0.25rem; margin: 0.8rem 0; padding: 0.8rem 0.9rem; border-left: 0.25rem solid var(--emerald); border-radius: 0.35rem; background: var(--mist); overflow-wrap: anywhere; }
.policy-summary span { color: var(--ink-soft); font-size: 0.82rem; }
.event-support-fields { display: grid; gap: 1rem; padding-top: 0.3rem; border-top: 1px solid var(--mist); }
.location-override-fields { display: grid; gap: 1rem; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--mist); }
.location-preview { min-width: 0; padding: 1rem; border: 1px solid #c7d8d0; border-radius: 0.7rem; background: var(--rail); }
.location-preview h3,
.location-value h3 { margin: 0; font-size: 1rem; }
.location-effective-value > .eyebrow { margin: 0 0 0.25rem; }
.location-facts { display: grid; gap: 0.55rem; min-width: 0; margin: 0.75rem 0 0; }
.location-facts div { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: 0.75rem; }
.location-facts dt { color: var(--slate); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.location-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.location-facts a { color: var(--emerald-dark); font-weight: 600; }
.location-admin-note { overflow-wrap: anywhere; white-space: pre-wrap; }
.location-summary { display: grid; gap: 0.8rem; min-width: 0; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: #fcfdfc; }
.location-summary > p { margin: 0; }
.support-contact-card { margin: 0 0 2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--white); }
.support-contact-card .section-heading { margin-bottom: 0.75rem; }
.support-contact-card p,
.support-contact-card address { margin: 0.25rem 0 0; font-style: normal; }
.support-contact-card address { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.support-contact-card address a { color: var(--emerald-dark); font-weight: 600; }
.brand-color-preview { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.brand-color-preview span { min-width: 8rem; padding: 0.75rem 1rem; border-radius: 0.6rem; color: var(--preview-foreground); background: var(--preview-color); font-weight: 600; text-align: center; }
.attendee-page { --attendee-primary: #087f5b; --attendee-secondary: #17211d; --attendee-primary-foreground: #ffffff; --attendee-secondary-foreground: #ffffff; }
.attendee-page .attendee-header { color: var(--attendee-secondary-foreground); background: var(--attendee-secondary); border-bottom-color: transparent; }
.attendee-brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; overflow-wrap: anywhere; }
.attendee-brand__mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--attendee-primary-foreground); background: var(--attendee-primary); font-weight: 700; }
.attendee-attribution { color: inherit; font-size: 0.78rem; font-weight: 600; }
.attendee-page .button--primary,
.attendee-page .button--small { color: var(--attendee-primary-foreground); background: var(--attendee-primary); }
.attendee-page .button--primary:hover,
.attendee-page .button--small:hover { color: var(--attendee-primary-foreground); background: var(--attendee-primary); text-decoration: underline; }
.attendee-page .workspace-hero,
.attendee-page .form-hero { border-left: 0.35rem solid var(--attendee-secondary); padding-left: 1rem; }
.attendee-page .presentation-group { min-width: 0; margin: 1.25rem 0 2rem; }
.attendee-page .presentation-group > h3 { margin-bottom: 0.8rem; padding: 0.75rem 1rem; border-radius: 0.65rem; color: var(--attendee-secondary-foreground); background: var(--attendee-secondary); overflow-wrap: anywhere; }
.attendee-page .occurrence-row__location { grid-column: 1 / -1; min-width: 0; }
.attendee-location { min-width: 0; margin: 0.8rem 0; padding: 0.9rem 1rem; border-left: 0.3rem solid var(--attendee-primary, var(--emerald)); background: var(--paper); overflow-wrap: anywhere; }
.attendee-location__heading,
.attendee-location__name,
.attendee-location address,
.attendee-location__instructions p { margin: 0.2rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The four other <address> contexts already force upright; this one was left
   on the UA's italic default, so the attendee location line leaned while its
   siblings did not. */
.attendee-location address { font-style: normal; }
.attendee-location a,
.attendee-support a { overflow-wrap: anywhere; }
.attendee-location__instructions { margin-top: 0.65rem; }
.attendee-support address { display: grid; gap: 0.35rem; font-style: normal; overflow-wrap: anywhere; }
.attendee-page .support-contact-card { border-top: 0.3rem solid var(--attendee-primary); }
.attendee-page .itinerary-item__instructions { margin-top: 0.8rem; overflow-wrap: anywhere; }
.attendee-page .itinerary-item__instructions p { white-space: pre-wrap; }
.attendee-page a:focus-visible,
.attendee-page button:focus-visible,
.attendee-page summary:focus-visible,
.attendee-page input:focus-visible,
.attendee-page select:focus-visible,
.attendee-page textarea:focus-visible,
.attendee-page [tabindex]:focus-visible { outline-color: #000000; box-shadow: 0 0 0 3px #ffffff; }
.muted-copy { color: var(--slate); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Line the controls up across a field grid whatever the help text does. The
   grid already stretches every cell in a row to the same height, so handing
   the leftover space to the control's top margin bottom-pins it and a field
   with help lands level with one without. The label and help carry the gap
   explicitly because `margin-top: auto` collapses to zero in whichever cell is
   tallest, which would otherwise butt that control against its own help text.
   A help-less field gets a little more air under its label; that reads as
   breathing room, and the inputs line up. */
.form-grid .form-field { display: flex; flex-direction: column; }
.form-grid .form-field > label,
.form-grid .form-field > .field-help { margin-bottom: 0.45rem; }
.form-grid .form-field > .field-help { margin-top: 0; }
.form-grid .form-field > input:not([type="checkbox"]):not([type="radio"]),
.form-grid .form-field > select { margin-top: auto; }
.form-field label,
.form-field legend { display: block; color: var(--ink); font-size: 0.83rem; font-weight: 600; }
/* Checkboxes and radios stay native. Explicit size and accent preserve their
   familiar platform behavior without depending on a runtime CSS framework. */
.form-field input:not([type="radio"]):not([type="checkbox"]),
.form-field select,
.form-field textarea { width: 100%; margin-top: 0.45rem; padding: 0.72rem 0.8rem; border: 1px solid #b7c2bc; border-radius: 0.55rem; color: var(--ink); background: var(--white); font: inherit; }
.form-field textarea { resize: vertical; }
/* A select does not build its box from line-height the way an input does -
   Chrome forces `line-height: normal` on it and ignores an author value - so
   the two controls end up 2.8px apart despite identical padding, border and
   font. That difference is invisible in ordinary flow but shows up the moment
   a field grid lines controls up. This restates the input's own box: its
   1.55 line box, its 0.72rem padding top and bottom, and its two 1px borders. */
.form-field select { min-height: calc(1.55em + 1.44rem + 2px); }
.form-field [type="checkbox"],
.form-field [type="radio"] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  accent-color: var(--emerald);
}
.field-help { margin: 0.25rem 0 0; color: var(--slate); font-size: 0.76rem; }
/* The invitation link, in a readonly input rather than a code block so it can
   be selected and copied with no script. Monospace because the eye has to
   check a random string against what was pasted, and a proportional face makes
   l/1 and O/0 hard to tell apart. `text-overflow` does nothing on an input, so
   a link too long for the box simply scrolls — which is fine, since selecting
   it takes the whole value whatever is visible. */
.link-field { font-family: var(--font-mono); font-size: 0.85rem; }
/* The copy button and its confirmation, under the link rather than beside it.
   Beside it would mean making the input flex, and the input has to keep the
   exact shape it has when no script runs and no button appears — the button is
   an addition to that page, not a rearrangement of it. */
.copy-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0 0; }
/* Emerald rather than the amber the warning above it uses: this is the one
   thing on the page that went right. Measured, not eyeballed — #056247 on the
   page's own #fbfcfa is 7.17:1, well past WCAG AA. Small and weighted rather
   than large and colored, so it reads as a confirmation beside a control
   instead of competing with the warning it sits under. */
.copy-status { color: var(--emerald-dark); font-size: 0.78rem; font-weight: 600; }
/* A label that names a value rather than a control, so it is not a <label>.
   Matched to the real one so the two read as the same kind of thing. */
.field-static-label { display: block; color: var(--ink); font-size: 0.83rem; font-weight: 600; }
.field-static { margin: 0.45rem 0 0; color: var(--ink); font-weight: 600; }
.field-error { margin: 0.35rem 0 0; color: var(--warning); font-size: 0.78rem; font-weight: 600; }
.entry-errors { margin: 0.35rem 0 0; padding-left: 1.1rem; color: var(--warning); font-size: 0.78rem; }
.entry-errors li { margin-top: 0.15rem; }
.form-field--error input,
.form-field--error select,
.form-field--error textarea { border-color: var(--warning); }
.ambiguity-field { display: grid; gap: 0.5rem; margin: 0; padding: 1rem; border: 1px solid var(--warn-line); border-radius: 0.65rem; background: var(--warn-bg); }
.ambiguity-field label { font-weight: 500; }
.checkbox-field { margin: 0; padding: 0; border: 0; }
.checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.65rem; }
.checkbox-list label { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.6rem; background: #fcfdfc; cursor: pointer; }
.resource-empty-note { margin: 0.65rem 0 0; padding: 0.8rem; border-radius: 0.6rem; color: var(--slate); background: var(--mist); font-size: 0.8rem; }
.locked-schedule { padding: 1rem; border: 1px solid #c7d8d0; border-radius: 0.7rem; background: var(--rail); }
.locked-schedule h2 { margin: 0; font-size: 1rem; }
.locked-schedule > p { margin: 0.35rem 0 0.85rem; color: var(--slate); }
.locked-schedule dl,
.confirmation-details { display: grid; gap: 0.65rem; margin: 0; }
.locked-schedule dl div,
.confirmation-details div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.locked-schedule dt,
.confirmation-details dt { color: var(--slate); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.locked-schedule dd,
.confirmation-details dd { margin: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--mist); }
.form-actions button { cursor: pointer; font: inherit; }
.resource-admin-list { display: grid; gap: 0.8rem; padding-bottom: 5rem; }
.resource-admin-list article { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--white); }
/* h2 on the Resources screen, where the page heading is "Resources"; h3 on
   an Organization's own page, where "Resources" is itself an h2. One rule, so
   a Resource card looks the same wherever the outline puts it. */
.resource-admin-list h2,
.resource-admin-list h3 { margin: 0; font-size: 1.1rem; }
.resource-admin-list p { margin: 0.35rem 0 0; color: var(--slate); }

/* Admin booking records. One card per occurrence carrying a real table: the
   rows are tabular data an admin scans down a column, unlike the public
   listing's occurrence rows, which are a list of choices. The table keeps its
   native semantics rather than being re-laid-out with grid, so the header
   cells stay header cells for a screen reader. */
.occurrence-group { margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--white); overflow: hidden; }
.occurrence-group__header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--mist); background: #fcfdfc; }
.occurrence-group__header h2 { margin: 0; font-size: 1.05rem; }
.occurrence-group__when { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0; font-weight: 600; color: var(--ink); }
.occurrence-group__counts { margin: 0.35rem 0 0; color: var(--slate); font-size: 0.78rem; }
.occurrence-group__truncated { margin: 0.4rem 0 0; color: var(--warning); font-size: 0.75rem; font-weight: 600; }
.pill { padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--mist); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); }
/* One table, fifteen screens. Agenda, Attendees, Groups, Bookings and the
   import previews all render through this, so the design handoff's table
   treatment is applied once here rather than per screen: a tinted header
   strip, hairline row rules, and a hover that makes it obvious which row your
   eye is on in a list of four hundred attendees. */
.records-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.records-table th,
.records-table td { padding: 0.8rem 1.2rem; text-align: left; vertical-align: middle; }
.records-table thead th { border-bottom: 1px solid var(--line); color: var(--slate); background: var(--surface-subtle); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.records-table tbody tr { border-top: 1px solid var(--mist); }
.records-table tbody tr:first-child { border-top: 0; }
.records-table tbody tr:hover { background: var(--surface-subtle); }
.records-table tbody th { font-weight: 600; }
.records-table code { color: var(--slate); font-size: 0.72rem; }
/* Deliberately no border or radius here. Several callers already nest this
   inside a bordered panel, and a card inside a card draws two lines around one
   table. The header strip and row rules above carry the treatment instead, so
   it reads the same whether or not a panel surrounds it. */
.records-table-wrap { overflow-x: auto; }
.records-table--booking-list { min-width: 43rem; }
.records-table--activity { min-width: 51rem; }
.reschedule-candidates { display: grid; gap: 0.75rem; margin-top: 0.85rem; }
.reschedule-candidate { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--white); }
.reschedule-candidate:has(input:checked) { border-color: var(--emerald); box-shadow: 0 0 0 2px rgba(8, 127, 91, 0.13); }
.reschedule-candidate input { margin-top: 0.2rem; }
.reschedule-candidate__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin-top: 0.35rem; color: var(--slate); font-size: 0.82rem; }
.detail-card { max-width: 46rem; margin: 0 0 2rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--white); }
.detail-card h2 { margin-top: 0; }
.detail-list { display: grid; gap: 0.7rem; margin: 0; }
.detail-list div { display: grid; grid-template-columns: minmax(9rem, 0.5fr) 1fr; gap: 1rem; }
.detail-list dt, .booking-history__move dt { color: var(--slate); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.detail-list dd, .booking-history__move dd { margin: 0; }
.booking-history { max-width: 52rem; margin: 2.5rem 0; }
.booking-history .section-heading { margin-bottom: 1rem; }
.booking-history__list { display: grid; gap: 1rem; padding: 0; list-style: none; }
.booking-history__entry { padding: 1.25rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--white); }
.booking-history__entry p { margin: 0 0 0.85rem; }
.booking-history__when { color: var(--slate); }
.booking-history__move { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.booking-history__move div { display: grid; gap: 0.3rem; }
.program-item-audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.program-item-audit-grid h3 { margin: 0 0 0.65rem; font-size: 0.9rem; }
.program-item-snapshot { grid-template-columns: 1fr; }
.program-item-snapshot dd { overflow-wrap: anywhere; }
.activity-bookings { padding-bottom: 1rem; }
.activity-bookings .section-heading p { margin: 0.65rem 0 0; color: var(--slate); }
.booking-filters { max-width: none; margin-bottom: 2rem; }
.booking-filters__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.pager { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 5rem; }

/* Private Attendee itinerary. The labels remain visible text because category
   and lifecycle meaning cannot depend on color. Every child can shrink and
   wrap so long titles, descriptions, and Resource names never widen the page. */
.private-itinerary-hero { align-items: end; }
.private-itinerary-hero p { margin: 0.55rem 0 0; color: var(--slate); }
/* A reserved Event place is a settled fact, so it reads as one line. Not being
   reserved is an action and keeps its panel - see the template. */
.event-reservation-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 52rem; margin: 1.25rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }

/* Demoted below the schedule. A row, not a panel: one control and the sentence
   that says what it does and does not silence. */
.reminder-preference { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 52rem; margin: 2rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--surface-subtle); }
.reminder-preference__copy { min-width: 0; flex: 1 1 18rem; }
.reminder-preference h2 { margin: 0; font-size: 0.95rem; line-height: 1.3; }
.reminder-preference p { margin: 0.35rem 0 0; color: var(--slate); font-size: 0.8rem; }
.reminder-preference form { flex: 0 0 auto; }

.private-itinerary { max-width: 52rem; padding-bottom: 1rem; }
.private-itinerary__introduction { max-width: 44rem; margin: 0.65rem 0 0; color: var(--slate); }
.itinerary-day { margin: 0 0 2rem; }
.itinerary-day__heading { margin: 0 0 0.75rem; color: var(--emerald-dark); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; }
.itinerary-list { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.itinerary-item { min-width: 0; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--white); overflow-wrap: anywhere; }
/* A cancelled entry is retained history, so it is dimmed in place rather than
   collapsed away: somebody may be looking for it precisely BECAUSE it changed.
   Dimmed by naming a color, never by `opacity`. Measured on --white:
   --slate is 5.01:1 and passes AA; `opacity: 0.6` over --ink computes to
   #767c79 at 4.26:1 and fails it, which is the quiet way this would have gone
   wrong. The title keeps --ink so the entry stays identifiable at a glance. */
.itinerary-item--cancelled { border-style: dashed; background: var(--paper); }
.itinerary-item--cancelled .itinerary-item__description,
.itinerary-item--cancelled .itinerary-item__marks { color: var(--slate); }
/* The Resource chips are deliberately NOT dimmed. They sit on --mist, and
   --slate over --mist measures 4.41:1 — under AA for 12.5px normal text,
   where the same color clears it at 4.70:1 over the card's --paper. They are
   already quiet at --ink-soft, and the dashed border, the paper ground and the
   dimmed marks carry the state without them. */
.itinerary-item__header { min-width: 0; }
.itinerary-item__header h4 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
/* Name first, then one quiet line carrying the time and the two marks. The
   marks used to sit above the title, so every entry opened by announcing its
   category rather than what it is. */
.itinerary-item__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.4rem 0 0; }
.itinerary-item__time { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; }
.itinerary-category { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.2rem 0.58rem; border: 1px solid var(--emerald); border-radius: 999px; color: var(--emerald-dark); background: var(--emerald-soft); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; }
.itinerary-item__resources-label { color: var(--slate); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; }
.itinerary-item__description { margin: 1rem 0 0; color: var(--ink-soft); white-space: pre-wrap; }
.itinerary-item__resources { margin-top: 1rem; }
.itinerary-item__resources ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.itinerary-item__resources li { padding: 0.2rem 0.58rem; border: 1px solid var(--line); border-radius: 999px; background: var(--mist); color: var(--ink-soft); font-size: 0.78rem; }
.itinerary-item__resources-empty { margin: 1rem 0 0; color: var(--slate); font-size: 0.82rem; }
.itinerary-item__history-note { margin: 1rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.82rem; font-weight: 600; }
.itinerary-item__cancellation-note { margin: 1rem 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.itinerary-item__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
.itinerary-item__actions .button { min-height: 2.75rem; justify-content: center; }
.private-itinerary-pager { max-width: 52rem; justify-content: space-between; }

/* Conflict confirmation and its immutable administrator history. */
.conflict-review { max-width: 58rem; margin: 1.5rem 0 0; padding: 1.35rem; border: 2px solid #d5a44a; border-radius: 0.9rem; background: var(--warn-bg); }
.conflict-review h2 { margin: 0.35rem 0; }
.conflict-review__list { display: grid; gap: 0.8rem; margin-top: 1rem; }
.conflict-review__item { min-width: 0; padding: 1rem; border: 1px solid var(--warn-line); border-radius: 0.75rem; background: var(--white); }
.conflict-review__item h3 { margin: 0 0 0.8rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.conflict-review__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.conflict-review__pair > div { display: grid; gap: 0.25rem; min-width: 0; padding: 0.8rem; border-radius: 0.55rem; background: var(--mist); overflow-wrap: anywhere; }
.conflict-review__confirmation { margin-top: 0.8rem; }
.conflict-audit-list { display: grid; gap: 1rem; max-width: 62rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.conflict-audit-entry { padding: 1.35rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--white); }
.conflict-audit-entry h2 { margin: 0.25rem 0; }
.conflict-audit-entry details { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mist); }
.conflict-audit-entry summary { color: var(--emerald-dark); font-weight: 600; cursor: pointer; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 4rem; }
  .hero__art { min-height: 27rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .feature-card h3 { margin-top: 2rem; }
  .activity-grid { grid-template-columns: 1fr; }
  .activity-grid--workspaces { grid-template-columns: minmax(0, 1fr); }
  .activity-panel + .activity-panel { border-top: 1px solid var(--line); border-left: 0; }
  .occurrence-row { grid-template-columns: 10rem 1fr auto; }
  .import-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-filters__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .records-table { font-size: 0.78rem; }
  .records-table th,
  .records-table td { padding: 0.55rem 0.75rem; }
  .records-table code { font-size: 0.62rem; }
  .site-header,
  .site-footer,
  main { width: min(100% - 2rem, 1180px); }
  .site-header { align-items: flex-start; gap: 1rem; min-height: 4.5rem; padding-block: 1rem; }
  .site-header nav { flex: 1 1 auto; min-width: 0; align-items: flex-end; flex-direction: column; flex-wrap: nowrap; gap: 0.45rem; text-align: right; }
  .nav-identity { max-width: 100%; overflow-wrap: anywhere; }
  .environment-pill { max-width: 10rem; text-align: center; }
  .hero { min-height: 0; padding: 3.5rem 0 4rem; }
  .hero__lede { font-size: 1rem; }
  .hero__actions { align-items: start; flex-direction: column; }
  .hero__art { min-height: 25rem; border-radius: 2rem; }
  .hero-mark { top: 4.5rem; }
  .schedule-card { min-width: 12.5rem; padding: 0.7rem; }
  .schedule-card--top { top: 1.25rem; right: -0.35rem; }
  .schedule-card--middle { top: 12.5rem; left: -0.35rem; }
  .schedule-card--bottom { right: -0.2rem; bottom: 1.25rem; }
  .feature-section { padding-bottom: 4rem; }
  .site-footer,
  .admin-hero,
  .workspace-hero,
  .activity-card__header,
  .booking-summary { flex-direction: column; }
  .organization-card__header,
  .form-hero--actions,
  .resource-admin-list article { align-items: flex-start; flex-direction: column; }
  .hero-actions { align-items: flex-start; }
  .card-actions { justify-content: flex-start; }
  .admin-hero,
  .workspace-hero { padding: 2.5rem 0 2rem; }
  .workspace-hero { padding-top: 1.5rem; }
  .admin-hero { align-items: start; }
  .event-row { grid-template-columns: 1fr auto; gap: 0.5rem; }
  .event-row__date { grid-column: 1 / -1; }
  .event-facts,
  .activity-config { min-width: 0; width: 100%; }
  .activity-card__header { gap: 1.5rem; }
  .activity-next-step { align-items: stretch; flex-direction: column; }
  .status-list { justify-content: flex-start; }
  .section-heading--row { align-items: start; }
  .section-heading--row,
  .button-row { flex-direction: column; }
  .button-row { align-items: stretch; }
  .button-row .button,
  .button-row form .button { width: 100%; justify-content: center; }
  .resource-card > header,
  .manual-slot__meta { flex-direction: column; }
  .availability-counts { text-align: left; }
  .window-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .window-row > span[aria-hidden] { display: none; }
  .occurrence-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .occurrence-row__capacity--lead { grid-column: 1; }
  .breadcrumbs li:nth-child(4),
  .breadcrumbs li:nth-child(5) { display: none; }
  /* The QR drops under the address rather than squeezing it: a 7.5rem symbol
     beside a URL field leaves the field too narrow to read the address in. */
  .public-link-layout { grid-template-columns: minmax(0, 1fr); }
  .form-grid,
  .form-grid--four { grid-template-columns: 1fr; }
  .manual-times-context { grid-template-columns: 1fr; }
  .manual-times-section-heading,
  .manual-date-group__header { align-items: stretch; flex-direction: column; }
  .manual-date-group__header .form-field { width: 100%; }
  .manual-date-group__remove { align-self: flex-start; margin-bottom: 0; }
  .manual-time-row { grid-template-columns: 1fr; align-items: stretch; }
  .manual-time-row__remove { justify-self: start; margin-bottom: 0; }
  .manual-times-actions .manual-times-count { order: 3; margin: 0; text-align: center; }
  .location-facts div { grid-template-columns: 1fr; gap: 0.1rem; }
  .checkbox-list { grid-template-columns: 1fr; }
  .detail-list div,
  .booking-history__move,
  .program-item-audit-grid { grid-template-columns: 1fr; }
  .itinerary-item { padding: 1rem; }
  .itinerary-item__times { grid-template-columns: 1fr; }
  .conflict-review__pair { grid-template-columns: 1fr; }
  .private-itinerary-pager { align-items: stretch; flex-direction: column; }
  .private-itinerary-pager .button { justify-content: center; min-height: 2.75rem; }
  .admin-form { padding: 1rem; }
  .booking-filters__fields { grid-template-columns: 1fr; }
  .import-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card:last-child { grid-column: 1 / -1; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions .button { justify-content: center; }
}
.form-fields--disabled {
  opacity: 0.58;
}

.form-fields--disabled :is(input, select, textarea) {
  cursor: not-allowed;
}

/* Signed-in account orientation. */
.welcome-account-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(14rem, 0.8fr);
  gap: 1.25rem;
  max-width: 48rem;
  margin: 1.25rem 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
  box-shadow: 0 14px 40px rgba(23, 33, 29, 0.06);
}
.welcome-account-card h2 { margin: 0.25rem 0 0; font-size: 1.3rem; }
.welcome-account-card p { margin: 0.3rem 0 0; color: var(--slate); overflow-wrap: anywhere; }
.welcome-account-card__access { align-self: center; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.welcome-organization-list { display: grid; gap: 0.25rem; margin: 0.45rem 0 0; padding: 0; list-style: none; }
.welcome-organization-list a { font-weight: 600; }

/* Persistent Event setup rail. The rail is navigation and orientation, not a
   wizard: all destinations stay available and every status is derived from
   stored configuration. */
/* One readiness line replaces the reference-fact table that used to sit here.
   Every fact it carried already appears on the Event overview page, and the
   navigation is worth more than a duplicate at the top of the column. The
   wording describes a permission rather than completion: publishing sets no
   write guard, so an administrator keeps building afterwards. */
/* Every root row shares one grid, so labels, chips and the disclosure caret
   line up whether the row is a group summary or a plain link. Plain links
   simply leave the caret column empty. */


@media (max-width: 960px) {
  /* The collapsed summary carries the readiness line here, so the header's
     copy stands down. Exactly one of the two is ever in the document. */
}

@media (max-width: 680px) {
  .welcome-account-card { grid-template-columns: 1fr; padding: 1rem; }
  .welcome-account-card__access { padding: 1rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
}

/* 2026 administrator experience refresh. These rules intentionally sit after
   the long-lived component styles so the redesign can remain presentation-only
   while older operational screens continue to use their established layout. */
h1,
h2,
.section-heading h2,
.form-hero h1,
.admin-hero__count strong,
.dashboard-counts strong {
  font-family: var(--font-heading);
}

.status-badge--complete {
  border-color: #a8d2c2;
  color: var(--emerald-dark);
  background: #eef8f3;
}

.status-badge--not-started {
  border-color: #d5dcd8;
  color: #59655f;
  background: #f3f5f4;
}

.muted-copy { color: var(--slate); }

/* Persistent Event guide */














/* Event overview */
.event-overview {
  display: grid;
  gap: 1rem;
  padding: 1.2rem 0 5rem;
}

.event-overview__section {
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}


.event-overview__description { max-width: 48rem; margin: 0.8rem 0 0; color: var(--slate); }
/* Exact start and end times: the only fact the left rail does not already
   carry, which is why the duplicated facts row above it could go. */


.event-overview__section { padding: 1.4rem; }
.section-heading--compact { margin-bottom: 1.15rem; }
.section-heading--compact h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
.section-heading--compact p { max-width: 42rem; margin: 0.35rem 0 0; color: var(--slate); font-size: 0.84rem; }

.event-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 0.65rem; overflow: hidden; }
.event-setting-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; min-width: 0; padding: 1.15rem 1.15rem 1.2rem; background: var(--surface-subtle); }
.event-setting-card:nth-child(even) { border-left: 1px solid var(--line); }
.event-setting-card:nth-child(n + 3) { border-top: 1px solid var(--line); }
.event-setting-card__icon { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border-radius: 0.45rem; color: var(--emerald-dark); background: var(--emerald-soft); font-weight: 600; }
.event-setting-card h2,
.event-setting-card h3,
.event-setting-card .location-value h3 { margin: 0; font-size: 0.92rem; font-weight: 600; }
.event-setting-card p,
.event-setting-card address { margin: 0.28rem 0 0; color: var(--slate); font-size: 0.77rem; font-style: normal; }
.event-setting-card address a { color: var(--emerald-dark); font-weight: 600; }
.event-setting-card .location-facts { font-size: 0.75rem; }
.event-setting-card .location-facts div { grid-template-columns: 6.5rem minmax(0, 1fr); }
.event-setting-card .location-admin-note { font-size: 0.72rem; }

.event-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.event-stat-grid > div { display: grid; gap: 0.25rem; min-width: 0; padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--surface-subtle); }
.event-stat-grid span { color: var(--slate); font-size: 0.69rem; font-weight: 600; }
.event-stat-grid strong { font-size: 1.3rem; font-weight: 600; overflow-wrap: anywhere; }
.event-manage-links { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; }
.event-manage-links a { padding: 0.38rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--white); font-size: 0.7rem; font-weight: 600; text-decoration: none; }
.event-manage-links a:hover { border-color: #9fb9ad; color: var(--emerald-dark); }
.program-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: 0.6rem; background: var(--surface-subtle); }
.program-summary-row p { margin: 0; color: var(--slate); }
.program-summary-row p strong { color: var(--ink); font-size: 1.2rem; }


/* Create/Edit Event */
/* The design handoff's side rail: a fixed 17rem column beside fluid content.
   Wider than the 14.5rem it replaced because the rail now carries a status
   line as well as the section list, and a status sentence that wraps to four
   lines reads as a paragraph rather than a note. */
.event-create-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.75rem; align-items: start; padding-top: 1.5rem; }
.event-create-layout__content { min-width: 0; }

/* The side rail from the design handoff. Three stacked pieces, deliberately
   not one box: a title block on the page ground, a list card, and a quiet
   status card. Putting the title inside the card made the rail read as a
   widget beside the form; outside, it reads as the page telling you what it
   is, which is what the rest of the column then answers. */
.form-rail { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.form-rail__disclosure > summary { display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--white); cursor: pointer; list-style: none; }
.form-rail__disclosure > summary::-webkit-details-marker { display: none; }
.form-rail__disclosure > nav { display: grid; }

.form-rail__title h1 { margin: 0; font: 600 1.5rem/1.2 var(--font-heading); letter-spacing: -0.012em; }
.form-rail__title p { margin: 0.5rem 0 0; color: var(--slate); font-size: 0.81rem; line-height: 1.5; }

.form-rail__sections { display: grid; gap: 0.15rem; margin: 0; padding: 0.6rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--white); list-style: none; }
/* A three-column grid so the hint aligns under the label rather than under
   the number. The number keeps its own column at every state. */
.form-rail__section { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.1rem 0.6rem; padding: 0.7rem; border-radius: 0.55rem; text-decoration: none; }
.form-rail__number { grid-row: span 2; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--slate); background: var(--white); font-size: 0.7rem; font-weight: 600; }
.form-rail__label { color: var(--ink-soft); font-size: 0.83rem; font-weight: 600; }
.form-rail__label small { color: var(--slate); font-size: 0.65rem; font-weight: 500; text-transform: uppercase; }
.form-rail__hint { color: var(--slate); font-size: 0.72rem; line-height: 1.4; }
.form-rail__section:hover { background: var(--surface-subtle); }
.form-rail__section:hover .form-rail__label { color: var(--ink); }
.form-rail__section.is-current { background: var(--rail); }
.form-rail__section.is-current .form-rail__label { color: var(--ink); }
.form-rail__section.is-current .form-rail__number { border-color: var(--emerald); color: var(--white); background: var(--emerald); }

/* A rail's primary action is full width. It is the one thing on the page you
   are most likely to have come to do, and a button that matches the rail's
   edges reads as belonging to it rather than floating in it. */
.form-rail__primary { justify-content: center; width: 100%; }
/* Without a number there is no first column to sit beside, so the label and
   hint start at the row's own padding instead of a phantom indent. */
.form-rail__label--flush,
.form-rail__hint--flush { grid-column: 1 / -1; }

.form-rail__status { padding: 0.85rem 1rem; border: 1px solid var(--brand-soft-line); border-radius: 0.75rem; background: var(--rail); }
.form-rail__status p { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.45; }

.event-form-hero { padding: 0.8rem 0 1.3rem; }
.event-form-hero h1 { font-size: clamp(1.85rem, 3vw, 2.4rem); }
.event-config-form { gap: 0.9rem; max-width: none; margin-bottom: 4rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.form-card { display: grid; gap: 1rem; scroll-margin-top: 1rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--white); box-shadow: var(--shadow-soft); }
.form-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.form-card__number { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--emerald); font-size: 0.7rem; font-weight: 600; }
.form-card > header h2 { margin: 0; font: 600 1.15rem/1.25 var(--font-heading); letter-spacing: -0.005em; }
.form-card > header h2 small { color: var(--slate); font: 500 0.68rem/1 var(--font-sans); text-transform: uppercase; }
.form-card > header p { margin: 0.2rem 0 0; color: var(--slate); font-size: 0.78rem; }
.form-card > .support-source-fields,
.form-card > .location-fields { padding: 0; border: 0; }
.form-card > .support-source-fields > legend.visually-hidden { position: absolute; }
.form-card .source-choice-list label { border-color: var(--line); background: var(--surface-subtle); }
.form-card .source-choice-list label:has(input:checked) { border-color: #91b8a5; background: var(--surface-tint); box-shadow: inset 3px 0 0 var(--emerald); }
.form-card .event-support-fields,
.form-card .event-reminder-fields { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--surface-subtle); }
.form-card .event-support-channels .field-help { min-height: 2.4rem; }
.form-card .event-cancellation-options { display: grid; gap: 0.8rem; }
.form-card .event-cancellation-options > fieldset { padding: 0; border: 0; }
.form-card input:not([type="radio"]):not([type="checkbox"]),
.form-card select,
.form-card textarea { border-color: var(--control-line); border-radius: 0.45rem; }
.form-card textarea { min-height: 7rem; }
.form-actions-shell { position: sticky; z-index: 5; bottom: 0; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 0.65rem; background: rgba(255, 255, 255, 0.96); box-shadow: 0 -8px 24px rgba(27, 36, 31, 0.08); backdrop-filter: blur(8px); }
.form-actions-shell .form-actions { padding: 0; border: 0; }

/* Signed-in account */
.welcome-hero { max-width: 54rem; padding-top: 3.8rem; }
.welcome-account-card { grid-template-columns: minmax(0, 1.35fr) minmax(13rem, 0.65fr); max-width: 58rem; margin: 1.5rem 0 5rem; padding: 0; border-radius: 0.8rem; box-shadow: var(--shadow-soft); overflow: hidden; }
.welcome-account-card__main { display: grid; gap: 1.4rem; padding: 1.5rem; }
.welcome-account-card__identity h2 { font: 600 1.3rem/1.25 var(--font-heading); }
.welcome-account-card__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.welcome-account-card__actions form { margin: 0; }
.welcome-account-card__access { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.5rem; border-left: 1px solid var(--line); background: var(--surface-subtle); }

/* Organization overview */
.admin-hero h1 + p { margin-top: 1rem; }

.dashboard-counts { display: flex; gap: 1.5rem; }
.dashboard-counts > div { display: grid; grid-template-columns: auto auto; gap: 0.5rem; align-items: baseline; }
.dashboard-counts strong { color: var(--emerald); font-size: 2.5rem; font-weight: 600; line-height: 1; }
.dashboard-counts span { color: var(--slate); font-size: 0.75rem; font-weight: 600; }
.organization-card { border-radius: 0.75rem; box-shadow: var(--shadow-soft); }
.organization-card__header { padding: 1.2rem 1.35rem; }
.organization-card h2 { font-family: var(--font-heading); font-weight: 600; }
.organization-events-table-wrap { border-top: 1px solid var(--line); overflow-x: auto; }
.organization-events-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.organization-events-table th { padding: 0.65rem 1rem; color: var(--slate); background: var(--surface-subtle); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; text-align: left; text-transform: uppercase; }
.organization-events-table td { padding: 0.85rem 1rem; border-top: 1px solid var(--line); color: var(--slate); }
.organization-events-table tbody tr:hover { background: var(--surface-tint); }
.organization-events-table td a strong { color: var(--ink); font-size: 0.84rem; }
.organization-events-table__action { text-align: right; white-space: nowrap; }

.organization-overview {
  display: grid;
  gap: 1rem;
  padding: 1.2rem 0 5rem;
}

.organization-overview__header,
.organization-overview__settings,
.organization-overview__section {
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.organization-overview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.7rem;
}

.organization-overview__heading { min-width: 0; }
.organization-overview__heading h1 {
  max-width: 22ch;
  margin: 0.3rem 0 0;
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.organization-overview__heading .slug { margin: 0.75rem 0 0; }
.organization-overview__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 0.6rem; }

.organization-overview__settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.organization-setting-card { min-width: 0; padding: 1.25rem 1.4rem; }
.organization-setting-card + .organization-setting-card { border-left: 1px solid var(--line); }
.organization-setting-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.organization-setting-card h2 { margin: 0.25rem 0 0; font-size: 1.15rem; font-weight: 600; }
.organization-setting-card p,
.organization-setting-card address { margin: 0.55rem 0 0; color: var(--slate); font-size: 0.8rem; font-style: normal; }
.organization-setting-card address { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.organization-setting-card address a { color: var(--emerald-dark); font-weight: 600; }

.organization-overview__section { padding: 1.4rem; }
.organization-overview__section .organization-events-table-wrap { border: 1px solid var(--line); border-radius: 0.65rem; overflow-x: auto; }
.organization-overview__section .organization-events-table th:first-child { border-top-left-radius: 0.65rem; }
.organization-overview__section .organization-events-table th:last-child { border-top-right-radius: 0.65rem; }

.organization-resource-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.organization-resource-preview > a {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  min-height: 8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--ink);
  background: var(--surface-subtle);
  text-decoration: none;
}
.organization-resource-preview > a:hover { border-color: #9fb9ad; background: var(--surface-tint); }
.organization-resource-preview strong { padding-right: 2.5rem; font-size: 0.88rem; overflow-wrap: anywhere; }
.organization-resource-preview small { color: var(--slate); font-size: 0.72rem; }
.organization-resource-preview__action { position: absolute; right: 0.8rem; bottom: 0.8rem; color: var(--emerald-dark); font-size: 0.68rem; font-weight: 600; }
.organization-overview__more { margin: 0.85rem 0 0; color: var(--slate); font-size: 0.72rem; }
.organization-overview__more a { color: var(--emerald-dark); font-weight: 600; }

/* Landing page refinements */
.hero { min-height: 37rem; padding-block: 4.5rem; }
.hero__art { border-radius: 2rem; background: linear-gradient(145deg, #dfece4, #f2eee5); box-shadow: var(--shadow); }
.feature-card { min-height: 15rem; border-radius: 0.75rem; box-shadow: var(--shadow-soft); }

@media (min-width: 1101px) {
  /* Wide enough for the rail to be permanent, so the disclosure is inert and
     its content shows whether or not the details element happens to be open. */
  .form-rail__disclosure:not([open]) > nav { display: grid; }
}

/* The rail stacks at 1100px rather than 960px, per the design handoff. At
   17rem it leaves too little for a form card below that width, and a cramped
   two-column form is worse than a stacked one. */
@media (max-width: 1100px) {
  .event-create-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1rem; }
  /* Title, primary action and status stay visible; only the section list
     folds away, so the page keeps its heading on a narrow screen. */
  .form-rail { position: static; gap: 0.85rem; }
  .form-rail__disclosure > summary { display: flex; }
  /* Collapsed, the summary is the whole rail, so it keeps its own rounded
     corners. Open, it becomes a header joined to the content below it. */
  .form-rail__disclosure[open] > summary { border-bottom: 0; border-radius: 0.75rem 0.75rem 0 0; }
  .form-rail__disclosure[open] > nav { padding: 0.6rem; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 0.75rem 0.75rem; background: var(--white); }
  .form-rail__disclosure[open] .form-rail__sections { border: 0; padding: 0; }
}

@media (max-width: 960px) {
  .event-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .event-setting-card:nth-child(even) { border-left: 0; }
  .event-setting-card:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .organization-overview__header { flex-direction: column; }
  .organization-overview__actions { width: 100%; }
  .organization-overview__actions .button { flex: 1 1 auto; }
}

@media (max-width: 760px) {
  .event-stat-grid,
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .section-heading--compact { align-items: stretch; }
  .section-heading--compact .inline-actions { display: grid; width: 100%; }
  .program-summary-row { align-items: stretch; flex-direction: column; }
  .dashboard-counts { gap: 0.8rem; }
  .dashboard-counts > div { grid-template-columns: auto; gap: 0; }
  .organization-overview__settings,
  .organization-resource-preview { grid-template-columns: minmax(0, 1fr); }
  .organization-setting-card + .organization-setting-card { border-top: 1px solid var(--line); border-left: 0; }
  .organization-events-table,
  .organization-events-table tbody,
  .organization-events-table tr,
  .organization-events-table td { display: block; width: 100%; }
  .organization-events-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .organization-events-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1rem; padding: 0.9rem 1rem; border-top: 1px solid var(--line); }
  .organization-events-table td { padding: 0; border: 0; }
  .organization-events-table td::before { content: attr(data-label); display: block; color: var(--slate); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .organization-events-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .organization-events-table td:nth-child(2)::before,
  .organization-events-table__action::before { display: none; }
  .organization-events-table__action { grid-column: 2; grid-row: 2 / 4; align-self: end; }
}

@media (max-width: 680px) {
  .event-overview { padding-top: 0.8rem; }
  .event-overview__section,
  .form-card { padding: 1rem; }
  .event-settings-grid { border: 0; gap: 0.55rem; }
  .event-setting-card,
  .event-setting-card:nth-child(n + 2) { border: 1px solid var(--line); border-radius: 0.55rem; }
  .welcome-account-card { grid-template-columns: 1fr; margin-bottom: 3rem; }
  .welcome-account-card__access { padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--line); border-left: 0; }
  .welcome-account-card__actions { display: grid; }
  .organization-card__header { gap: 1rem; }
  .organization-overview { padding-top: 0.8rem; }
  .organization-overview__header,
  .organization-overview__section { padding: 1rem; }
  .organization-overview__actions { display: grid; }
  .form-card .event-support-channels .field-help { min-height: 0; }
}

/* ATTENDEE EXPERIENCE.

   Everything below is scoped to `.attendee-page`, the body class
   `attendee_base.html` sets only when a request carries validated Organization
   branding. Scoping is the whole safety argument: the administrator screens
   above keep their established layout untouched, and an attendee page that
   somehow renders without branding falls back to the neutral PandEvent shell
   with none of these rules applied.

   Color is never the only carrier of a state. Every chip, badge and row state
   below pairs its color with words and a distinct shape, because an
   Organization chooses --attendee-primary and this stylesheet cannot know what
   it will be. Brand color is therefore used as a background behind its own
   validated foreground, or as a non-text accent - never as text on paper. */

.attendee-page .site-header,
.attendee-page .site-footer,
.attendee-page main {
  /* An attendee reads one Event, not a workspace. The narrower measure keeps
     headings, prose and the review columns at a comfortable line length; the
     admin surface keeps its 1200px. */
  width: min(68rem, calc(100% - 3rem));
}

.attendee-page .workspace-hero,
.attendee-page .form-hero { margin-bottom: 1.5rem; }
.attendee-page .form-hero { padding-bottom: 1rem; }
.attendee-page .attendee-confirmation-hero h1 { color: var(--emerald-dark); }

/* Public Event website. The landing page is both an Event introduction and a
   booking surface, so its primary decision, schedule, location and optional
   Activities are separated into short cards rather than one long open list. */
.attendee-page .public-event-page { padding: 2rem 0 4rem; }
.attendee-page .public-event-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.72fr);
  gap: 1.5rem;
  align-items: stretch;
  padding: 2rem;
  border: 1px solid var(--line);
  border-top: 0.35rem solid var(--attendee-primary);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow);
}
.attendee-page .public-event-hero__main { min-width: 0; align-self: center; }
.attendee-page .public-event-hero__main h1 {
  max-width: 18ch;
  margin: 0.3rem 0 0;
  font: 600 clamp(2.2rem, 5vw, 3.35rem)/1.02 var(--font-heading);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.attendee-page .public-event-hero__main p {
  max-width: 43rem;
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}
.attendee-page .public-event-reservation {
  min-width: 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface-subtle);
  overflow-wrap: anywhere;
}
.attendee-page .public-event-reservation h2,
.attendee-page .public-event-schedule-card h2,
.attendee-page .public-event-access h2 {
  margin: 0.25rem 0 0;
  font-size: 1.12rem;
  line-height: 1.25;
}
.attendee-page .public-event-reservation p,
.attendee-page .public-event-access p {
  margin: 0.65rem 0 0;
  color: var(--slate);
  font-size: 0.86rem;
}
.attendee-page .public-event-reservation .button {
  width: 100%;
  min-height: 3rem;
  margin-top: 1.1rem;
}
.attendee-page .public-event-reservation .status-badge { display: inline-flex; margin-top: 1rem; }

.attendee-page .public-event-essentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  margin: 1rem 0 3rem;
}
.attendee-page .public-event-schedule-card,
.attendee-page .public-event-essentials > .attendee-location {
  min-width: 0;
  margin: 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--line);
  border-top: 0.3rem solid var(--line);
  border-radius: 0.85rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.attendee-page .public-event-essentials > :only-child { grid-column: 1 / -1; }
.attendee-page .public-event-schedule-card .event-facts {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.attendee-page .public-event-essentials > .attendee-location { border-left-width: 1px; }
.attendee-page .public-event-essentials > .attendee-location .attendee-location__heading {
  margin: 0;
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.attendee-page .public-event-essentials > .attendee-location .attendee-location__name {
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.attendee-page .public-section-heading { max-width: 44rem; margin-bottom: 1.5rem; }
.attendee-page .public-section-heading h2 {
  margin: 0.25rem 0 0;
  font: 600 clamp(1.6rem, 3vw, 2rem)/1.15 var(--font-heading);
  letter-spacing: -0.012em;
}
.attendee-page .public-section-heading p { margin: 0.7rem 0 0; color: var(--slate); }
.attendee-page .public-activity-listing { margin-top: 0; }
.attendee-page .public-browse-controls { margin: 0.5rem 0 3rem; }
.attendee-page .occurrence-row__instructions {
  flex-basis: 100%;
  color: var(--slate);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.attendee-page .occurrence-row__instructions strong { color: var(--ink-soft); }

.attendee-page .public-event-help {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.attendee-page .public-event-help > .support-contact-card,
.attendee-page .public-event-access {
  min-width: 0;
  margin: 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--line);
  border-top: 0.3rem solid var(--attendee-primary);
  border-radius: 0.85rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.attendee-page .public-event-help > :only-child { grid-column: 1 / -1; }
.attendee-page .public-event-access .button { margin-top: 1rem; }

/* Administrator Event preview. The banner remains visually distinct from the
   attendee-branded surface and is the only administrator chrome on the page. */
.attendee-page .admin-attendee-preview { padding-top: 1rem; }
.attendee-page .admin-preview-banner {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  border: 1px solid #a8cfc0;
  border-left: 0.35rem solid var(--emerald);
  border-radius: 0.85rem;
  background: #eef8f4;
  box-shadow: var(--shadow-soft);
}
.attendee-page .admin-preview-banner > div:first-child { max-width: 48rem; }
.attendee-page .admin-preview-banner h2 {
  margin: 0.2rem 0 0;
  font: 600 1.15rem/1.3 var(--font-heading);
}
.attendee-page .admin-preview-banner p {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}
.attendee-page .admin-preview-banner__actions {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 0.65rem;
}
.attendee-page .public-event-page--preview { padding-top: 1rem; }
.attendee-page .public-event-hero--preview { grid-template-columns: minmax(0, 1fr); }
.attendee-page .public-event-hero--preview .public-event-hero__main h1 { max-width: 24ch; }
.attendee-page .preview-agenda { margin-bottom: 3rem; }
.attendee-page .preview-agenda__days { display: grid; gap: 1.25rem; }
.attendee-page .preview-agenda__day > h3 {
  margin: 0 0 0.65rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.attendee-page .preview-agenda__items { display: grid; gap: 0.75rem; }
.attendee-page .preview-agenda-item {
  min-width: 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 0.3rem solid var(--attendee-secondary);
  border-radius: 0.75rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.attendee-page .preview-agenda-item__time {
  color: var(--slate);
  font-size: 0.76rem;
  font-weight: 600;
}
.attendee-page .preview-agenda-item h4 { margin: 0.3rem 0 0; font-size: 1rem; }
.attendee-page .preview-agenda-item > p,
.attendee-page .preview-agenda-item__instructions p {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
  white-space: pre-wrap;
}
.attendee-page .preview-agenda-item .attendee-location { margin: 0.8rem 0 0; }
.attendee-page .preview-agenda-item__instructions { margin-top: 0.8rem; }
.attendee-page .preview-action-state {
  color: var(--slate);
  font-size: 0.76rem;
  font-weight: 600;
}

/* Definition rows on the review and confirmation surfaces. The markup is a
   plain div/dt/dd, which stacked into a tall ragged column; this gives it the
   same label/value grid `.metadata-row` already uses elsewhere so the two read
   alike. */
.attendee-page .booking-record { width: 100%; }
.attendee-page .booking-record > div {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}
.attendee-page .booking-record > div + div {
  margin-top: 0.62rem;
  padding-top: 0.62rem;
  border-top: 1px solid var(--mist);
}
.attendee-page .booking-record dt {
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.attendee-page .booking-record dd {
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Itinerary panels. Two short cards that used to stack full width under the
   hero; side by side they stop the page opening with two near-empty bands. */
.attendee-page .attendee-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 0 0 2rem;
}
.attendee-page .attendee-panel {
  min-width: 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--line);
  border-top: 0.3rem solid var(--line);
  border-radius: 0.85rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  overflow-wrap: anywhere;
}
/* The Event place is the decision this page exists for; the reminder switch is
   a preference somebody changes once. The brand accent marks the first one so
   the pair is not two identical cards competing for the same glance. */
.attendee-page .attendee-panel--lead { border-top-color: var(--attendee-primary); }
.attendee-page .attendee-panel h2 { margin: 0.3rem 0 0; font-size: 1.12rem; line-height: 1.25; }
.attendee-page .attendee-panel p { margin: 0.55rem 0 0; color: var(--slate); font-size: 0.86rem; }
.attendee-page .attendee-panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.attendee-page .attendee-panel__actions .button { min-height: 2.75rem; justify-content: center; }

/* THE ACTIVITY INDEX, and why it carries a state word.

   The availability page renders every Activity collapsed, so nothing below the
   fold announces itself. The index is the compensation: one row per Activity
   with its name, its time count and the same state the section's own summary
   shows. Every value comes from the view model the sections already render, so
   the index costs no read and cannot disagree with what it points at. */
.attendee-page .activity-index {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface-subtle);
}
.attendee-page .activity-index__heading {
  margin: 0 0 0.75rem;
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.attendee-page .activity-index__list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.attendee-page .activity-index__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem 0.9rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
}
.attendee-page .activity-index__link:hover { border-color: var(--control-line); text-decoration: underline; }
.attendee-page .activity-index__name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.attendee-page .activity-index__count { color: var(--slate); font-size: 0.78rem; white-space: nowrap; }

/* The three Activity states. Words first, then a shape, then a color - a
   filled pill, an outlined pill and a dashed pill, so the three stay apart in
   greyscale and for anyone who cannot separate the hues. The contrasts are the
   ones already measured for this stylesheet: --white on --emerald-dark at
   7.38:1, --emerald-dark on --emerald-soft at 6.17:1, and --slate on --paper at
   4.94:1. */
.attendee-page .activity-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.attendee-page .activity-state__mark { font-size: 0.8em; line-height: 1; }
.attendee-page .activity-state--booked { border: 1px solid var(--emerald-dark); color: var(--white); background: var(--emerald-dark); }
.attendee-page .activity-state--open { border: 1px solid var(--emerald); color: var(--emerald-dark); background: var(--emerald-soft); }
.attendee-page .activity-state--full { border: 1px dashed var(--control-line); color: var(--slate); background: var(--paper); }

/* THE ACTIVITY DISCLOSURE. A native details element, so it needs no script and
   works with find-in-page and the keyboard alone. The summary stays visible
   when the Activity is closed, which is what lets the index above anchor on the
   heading inside it: a jump link never lands on hidden content. */
.attendee-page .activity-section { padding-bottom: 1.25rem; }
/* NO `overflow: hidden` HERE. It would keep the summary's hover fill inside
   the rounded corners, and it would also clip the focus ring: the shared
   indicator draws at `outline-offset: 3px` with a white halo outside that, and
   a clipping ancestor erases both on the one control this card exists to be
   operated by. The summary carries its own radii instead. */
.attendee-page .activity-disclosure {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.attendee-page .activity-disclosure[open] { box-shadow: var(--shadow); }
.attendee-page .activity-disclosure__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1rem;
  gap: 0.6rem 1.1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-radius: 0.85rem;
  cursor: pointer;
  list-style: none;
}
.attendee-page .activity-disclosure[open] .activity-disclosure__summary {
  border-radius: 0.85rem 0.85rem 0 0;
}
/* Both spellings: the UA marker is a ::-webkit-details-marker in one engine and
   a list marker in the other, and a grid summary keeps neither in a sensible
   place. The chevron below replaces it. */
.attendee-page .activity-disclosure__summary::-webkit-details-marker { display: none; }
.attendee-page .activity-disclosure__summary::after {
  content: "";
  justify-self: end;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.15s ease;
}
.attendee-page .activity-disclosure[open] .activity-disclosure__summary::after {
  transform: translateY(0.1rem) rotate(-135deg);
}
.attendee-page .activity-disclosure__summary:hover { background: var(--surface-tint); }
.attendee-page .activity-disclosure__main { min-width: 0; }
.attendee-page .activity-disclosure__main h2 {
  margin: 0.2rem 0 0;
  font-size: 1.25rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* A summary takes phrasing content, so the Activity description is a span
   rather than the paragraph the section used to carry. */
.attendee-page .activity-disclosure__description {
  display: block;
  max-width: 44rem;
  margin-top: 0.4rem;
  color: var(--slate);
  font-size: 0.86rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.attendee-page .activity-disclosure__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
  justify-content: flex-end;
}
.attendee-page .activity-disclosure__next { color: var(--ink-soft); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.attendee-page .activity-disclosure__body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--mist); }
.attendee-page .activity-disclosure__body > .listing-note { margin: 1rem 0 1.25rem; }
.attendee-page .activity-disclosure__body .occurrence-day:first-of-type { margin-top: 1.1rem; }
.attendee-page .activity-disclosure__body .presentation-group:first-child { margin-top: 1.1rem; }

/* THE COMPACT OCCURRENCE ROW.

   The same order of meaning as before - time, then what the time uses, then the
   action - but the Resource pills, the capacity caption and the occurrence's
   own effective location now share one wrapping meta cluster instead of taking
   a grid column each plus a full-width location block. A single day of times
   used to be taller than the screen; this fits several.

   The location is each occurrence's exact resolved value and is never merged or
   deduplicated across rows: inheritance and overrides mean two rows can
   legitimately differ. Location instructions are not here - they stay on the
   booking review and confirmation, which keep the full block.

   `--compact` rather than restyling `.occurrence-row` itself, because the same
   class dresses the public listing, whose markup is unchanged.

   The time column is 16.5rem because that is what the long date measures.
   CLAUDE.md records the wrap this avoids: at a narrower column "Tuesday,
   March 9, 2027 at 5:00pm CST" breaks after the month-day and orphans the year
   on its own line. The row has the room at this width - the meta cluster still
   keeps about 620px of a 1088px page - and below 900px the column narrows again
   and the date wraps as it always has. */
.attendee-page .occurrence-row--compact {
  grid-template-columns: minmax(9rem, 16.5rem) minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.7rem 1rem;
}
.attendee-page .occurrence-row--compact .occurrence-row__time { min-width: 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.attendee-page .occurrence-row--compact .occurrence-row__time .record-note { display: block; font-weight: 400; }
.attendee-page .occurrence-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  align-items: center;
  min-width: 0;
}
.attendee-page .occurrence-row__action { display: flex; justify-content: flex-end; min-width: 0; }
.attendee-page .occurrence-row--compact .occurrence-row__book { white-space: nowrap; }

.attendee-page .attendee-location-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
  color: var(--slate);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.attendee-page .attendee-location-inline__name { color: var(--ink-soft); font-weight: 600; }
.attendee-page .attendee-location-inline__link { color: var(--emerald-dark); font-weight: 600; }

/* THE REVIEW LAYOUT. The action belongs beside the facts it acts on, not below
   a column of whitespace. Two columns on a wide screen with the action card
   sticky, one column on a narrow one with the action last - which is the DOM
   order already, so nothing reorders and the tab order never disagrees with the
   visual order. */
.attendee-page .attendee-review {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.85fr);
  gap: 1.5rem;
  align-items: start;
  margin: 0 0 2.5rem;
}
.attendee-page .attendee-review__details { min-width: 0; }
.attendee-page .attendee-review__details .event-facts { width: 100%; }
.attendee-page .attendee-review__details > * + * { margin-top: 1rem; }
.attendee-page .attendee-review__action {
  position: sticky;
  top: 1.25rem;
  min-width: 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--line);
  border-top: 0.3rem solid var(--attendee-primary);
  border-radius: 0.9rem;
  background: var(--white);
  box-shadow: var(--shadow);
}
/* The destructive review wears the danger button's own border color, so the
   card and the control it holds agree about what is about to happen. */
.attendee-page .attendee-review__action--destructive { border-top-color: #b56f52; }
.attendee-page .attendee-action-card__heading { margin: 0; font-size: 1.05rem; }
.attendee-page .attendee-review__action .listing-note { margin: 0.6rem 0 0; }
.attendee-page .attendee-action-card__actions { display: grid; gap: 0.6rem; margin-top: 1.1rem; }
.attendee-page .attendee-action-card__actions .button { min-height: 2.85rem; justify-content: center; }
/* `.form-actions button { border: 0 }` used to flatten the danger control
   wherever it sat inside a form. These action cards do not use `.form-actions`,
   and this keeps the outline explicit so the destructive control never loses
   its shape to a future container rule. */
.attendee-page .button--danger { border: 1px solid #b56f52; }

.attendee-page .attendee-consequence {
  padding: 1rem 1.15rem;
  border: 1px solid var(--note-line);
  border-radius: 0.75rem;
  background: var(--warning-soft);
}
.attendee-page .attendee-consequence p { margin: 0; color: var(--note-fg); font-size: 0.88rem; }
.attendee-page .attendee-consequence p + p { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .attendee-page .activity-disclosure__summary::after { transition: none; }
}

@media (max-width: 900px) {
  .attendee-page .public-event-hero { grid-template-columns: minmax(0, 1fr); }
  .attendee-page .attendee-review { grid-template-columns: minmax(0, 1fr); }
  .attendee-page .attendee-review__action { position: static; }
  .attendee-page .occurrence-row--compact { grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr) auto; }
}

@media (max-width: 680px) {
  .attendee-page .site-header,
  .attendee-page .site-footer,
  .attendee-page main { width: min(100% - 2rem, 68rem); }
  .attendee-page .public-event-page { padding-top: 1rem; }
  .attendee-page .admin-preview-banner { align-items: stretch; flex-direction: column; }
  .attendee-page .admin-preview-banner__actions { display: grid; }
  .attendee-page .admin-preview-banner__actions .button { width: 100%; }
  .attendee-page .public-event-hero { padding: 1.25rem; }
  .attendee-page .public-event-hero__main h1 { font-size: clamp(2rem, 11vw, 2.65rem); }
  .attendee-page .public-event-essentials,
  .attendee-page .public-event-help { grid-template-columns: minmax(0, 1fr); }
  .attendee-page .public-event-essentials > :only-child,
  .attendee-page .public-event-help > :only-child { grid-column: auto; }
  .attendee-page .public-event-access .button { width: 100%; }
  .attendee-page .attendee-panels { grid-template-columns: minmax(0, 1fr); }
  .attendee-page .activity-index { padding: 0.9rem; }
  .attendee-page .activity-index__link { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .attendee-page .activity-index__count,
  .attendee-page .activity-state { justify-self: start; }
  .attendee-page .activity-disclosure__summary { grid-template-columns: minmax(0, 1fr) 1rem; padding: 0.95rem 1rem; }
  .attendee-page .activity-disclosure__facts { grid-column: 1; justify-content: flex-start; }
  .attendee-page .activity-disclosure__body { padding: 0 1rem 1rem; }
  /* One column, and the action goes full width under the facts it applies to
     rather than clinging to a right edge that no longer exists. */
  .attendee-page .occurrence-row--compact { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
  .attendee-page .occurrence-row__action { justify-content: flex-start; }
  .attendee-page .occurrence-row--compact .occurrence-row__book { width: 100%; min-height: 2.75rem; justify-content: center; }
  .attendee-page .attendee-panel__actions .button,
  .attendee-page .attendee-review__action { width: 100%; }
}

/* Shared working-page foundations. New screens can adopt these independently
   while established operational pages retain their current presentation. */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 2rem 0 1.5rem;
}
.page-header__copy { flex: 1 1 24rem; min-width: 0; max-width: 44rem; }
.page-header h1 { margin: 0.28rem 0 0; font-size: clamp(1.85rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.012em; }
.page-header p { max-width: 42rem; margin: 0.75rem 0 0; color: var(--slate); }

.page-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.page-actions > * { margin: 0; }
.page-actions > form { display: flex; }

.action-menu { position: relative; }
.action-menu[open] { z-index: 20; }
.action-menu > summary { cursor: pointer; list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::after { content: "▾"; margin-left: 0.05rem; color: var(--slate); font-size: 0.72rem; }
.action-menu[open] > summary::after { transform: rotate(180deg); }
.action-menu__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  gap: 0.2rem;
  min-width: 16rem;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--white);
  box-shadow: var(--shadow);
}
.action-menu__item { padding: 0.65rem 0.75rem; border-radius: 0.45rem; color: var(--ink); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.action-menu__item:hover { color: var(--emerald-dark); background: var(--surface-tint); }

.section-card {
  min-width: 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.section-card__header .eyebrow { display: block; margin: 0 0 0.42rem; }
.section-card__header h2 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.section-card__header p { max-width: 42rem; margin: 0.35rem 0 0; color: var(--slate); font-size: 0.82rem; }
.section-card__body { min-width: 0; margin-top: 1rem; }
.section-card__copy { margin: 0; color: var(--ink-soft); white-space: pre-wrap; }

.metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0.65rem; min-width: 0; margin: 0; }
.metadata-grid .metadata-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; min-width: 0; padding: 0.78rem 0.85rem; border: 0; border-radius: 0.55rem; background: var(--surface-subtle); }
.metadata-grid .metadata-row + .metadata-row { margin-top: 0; padding-top: 0.78rem; border-top: 0; }
.metadata-grid .metadata-row dt { font-size: 0.65rem; }
.metadata-grid .metadata-row dd { font-size: 0.82rem; line-height: 1.4; }

/* Shared presentation rules for the older admin templates while they move to
   the component macros above. These classes already describe the intended
   content; the rules remove one-off spacing and browser-default list styles. */
.page-heading {
  max-width: 44rem;
  padding: 2rem 0 1.5rem;
}
.page-heading h1,
.section-heading h1 { margin: 0.28rem 0 0; font-size: clamp(1.85rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.012em; }
.page-heading p,
.section-heading > p,
.section-heading > div > p { max-width: 42rem; margin: 0.75rem 0 0; color: var(--slate); }
.section-heading--row { gap: 1.5rem 2rem; }
header.section-heading--row { padding: 2rem 0 1.5rem; margin-bottom: 0; }
.section-heading--row .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }

.inline-actions,
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.pagination { margin: 1rem 0 0; }
.inline-actions > *,
.pagination > * { margin: 0; }

.support-contact-card .section-heading { max-width: none; margin-bottom: 0.85rem; }
.support-contact-card .section-heading h2 { margin-top: 0.42rem; font-size: 1rem; line-height: 1.3; letter-spacing: 0; }

.event-facts > div:not(.metadata-row) { display: grid; grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.event-facts > div:not(.metadata-row) + div { margin-top: 0.62rem; padding-top: 0.62rem; border-top: 1px solid var(--mist); }
.event-facts > div:not(.metadata-row) dt { color: var(--slate); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.event-facts > div:not(.metadata-row) dd { min-width: 0; margin: 0; font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; }

.maintenance-list,
.timeline-list { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.maintenance-list li,
.timeline-list li { min-width: 0; padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--surface-subtle); }
.maintenance-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.maintenance-list li > div,
.timeline-list li { display: grid; gap: 0.2rem; }
.maintenance-list strong,
.maintenance-list span,
.maintenance-list small,
.timeline-list strong,
.timeline-list span { display: block; overflow-wrap: anywhere; }
.maintenance-list span,
.maintenance-list small,
.timeline-list span { color: var(--slate); font-size: 0.76rem; }
.maintenance-list form { flex: 0 0 auto; margin: 0; }

.admin-form.roster-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: none;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: none;
}
.roster-filters .form-field { flex: 1 1 14rem; }
.roster-filters .form-actions { flex: 0 0 auto; padding: 0; border: 0; }

.confirmation-card {
  max-width: 52rem;
  margin: 2rem 0 5rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow);
}
.confirmation-card h1 { margin: 0.35rem 0 0; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.012em; }
.confirmation-card > p { max-width: 44rem; margin: 0.8rem 0 0; color: var(--slate); }
.confirmation-card > .event-facts { margin-top: 1.25rem; }
.confirmation-card > .admin-form { max-width: none; margin: 1.25rem 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.confirmation-card > .hero-actions { flex-direction: row; align-items: center; margin-top: 1.25rem; }

.brand-color-fields { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 0.75rem; }
.brand-color-fields > legend { padding: 0 0.35rem; font-weight: 600; }
.form-subheading { margin: 0.35rem 0 0; font-size: 1rem; line-height: 1.3; }
.resource-inline-row { display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--mist); }
.stacked-form { display: grid; gap: 1.25rem; margin-bottom: 5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); box-shadow: var(--shadow); }
.confirmation-form { max-width: 52rem; }
.communications-boundary { margin-bottom: 2.5rem; }
.communications-boundary .section-card__body p { margin: 0; color: var(--ink-soft); }
.record-detail { display: grid; gap: 1rem; padding-bottom: 5rem; }
.record-detail > .booking-history,
.record-detail > section:not(.section-card) { margin-top: 1.5rem; }
.record-detail .booking-history { max-width: none; }
.record-detail .records-table { min-width: 46rem; }
.record-detail .section-heading { margin-bottom: 1rem; }
.record-detail .section-card__body > :first-child { margin-top: 0; }
.record-detail .section-card__body > :last-child { margin-bottom: 0; }

/* Program Item detail is the first reference page for the shared foundations. */
.program-item-detail { display: grid; gap: 1rem; padding-bottom: 5rem; }
.program-item-detail__header { margin-bottom: 0.15rem; }
.program-item-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.program-item-location-card .location-summary { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.program-item-detail .booking-history { max-width: none; margin: 1.5rem 0 0; }
.program-item-detail .booking-history__list { margin: 0; }

@media (max-width: 900px) {
  .page-header { flex-direction: column; }
  .page-header__copy { flex-basis: auto; }
  .page-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .program-item-support-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .page-header { padding: 1.5rem 0 1rem; }
  .page-actions { width: 100%; align-items: stretch; }
  .page-actions > .button,
  .page-actions > .action-menu,
  .page-actions > form { flex: 1 1 12rem; }
  .page-actions > form > .button { width: 100%; }
  .action-menu > summary { width: 100%; }
  .action-menu__panel { position: static; min-width: 0; margin-top: 0.45rem; box-shadow: var(--shadow-soft); }
  .section-card { padding: 1rem; }
  .metadata-grid { grid-template-columns: minmax(0, 1fr); }
  .section-heading--row { align-items: stretch; flex-direction: column; }
  .section-heading--row .button-row,
  .section-heading--row .hero-actions { width: 100%; justify-content: flex-start; }
  .admin-form.roster-filters { align-items: stretch; }
  .roster-filters .form-field,
  .roster-filters .form-actions { flex: 1 1 100%; }
  .maintenance-list li { align-items: stretch; flex-direction: column; }
  .maintenance-list form .button { width: 100%; }
  .confirmation-card { margin-top: 1.5rem; padding: 1.1rem; }
  .empty-state { align-items: flex-start; flex-direction: column; min-height: 0; }
}
/* Required-Activity and Communications controls share compact, mobile-safe
   lists while preserving ordinary native form behavior. */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-2);
}

.checkbox-grid > label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.stacked-form--embedded {
  margin-top: var(--space-4);
}

.required-activity-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.required-activity-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

/* The obligation panel, compacted. It keeps its place above the timeline -
   a required Activity is enforced by the domain, not a preference - but it now
   states the outstanding count in its heading and gives each requirement one
   row, so being prominent costs a few lines rather than most of a phone
   screen. Outstanding rows carry the warning edge; satisfied ones recede. */
.required-activities { margin: 1.5rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--warn-line); border-radius: 0.85rem; background: var(--warn-bg); }
.required-activities h2 { margin: 0; font-size: 1rem; line-height: 1.3; }
/* Written as a child selector because `.required-activity-list > li` above
   sets the whole border and outranks a lone class on the same element. */
.required-activity-list > li.required-activity--outstanding { border-left: 3px solid var(--warn-fg); }
.required-activity__name { font-weight: 600; }
.required-activity__state { flex: 0 0 auto; color: var(--slate); font-size: 0.82rem; }

@media (max-width: 42rem) {
  .required-activity-list > li {
    align-items: stretch;
    flex-direction: column;
  }
}