/* CNL event intake form. Every selector is scoped under .cnl-event-form and
   every class is cnl-ef- prefixed: this widget lands in pages whose CSS we
   don't control, and must neither inherit nor leak.

   Fonts: ff-tisa-web-pro + pragmatica-extended from the CNL Typekit kit,
   Domine from Google Fonts. Loaded here so the widget is self-sufficient on
   pages that don't already include the kit. */
@import url("https://use.typekit.net/kxb6xor.css");
@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400;500;700&display=swap");

.cnl-event-form {
  --cnl-ef-navy: #2c3659;
  --cnl-ef-cream: #fdfbe9;
  --cnl-ef-red: #9f3c39;
  --cnl-ef-red-dark: #531d1b;
  --cnl-ef-ink: #22293f;
  --cnl-ef-line: #c9c4a8;
  font-family: "Domine", Georgia, "Times New Roman", serif;
  color: var(--cnl-ef-ink);
  background: var(--cnl-ef-cream);
  border: 2px solid var(--cnl-ef-red);
  border-radius: 15px;
  box-shadow: 6px 6px 0 var(--cnl-ef-red-dark);
  padding: 28px;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Two-column layout on desktop: the JS builds two .cnl-ef-col stacks —
   column A ends after location/meeting link, column B holds the rest. On
   narrow screens they simply stack. */
@media (min-width: 900px) {
  .cnl-event-form {
    /* The calc keeps a side gutter even in a full-bleed host container. */
    max-width: min(1400px, calc(100% - 48px));
    padding: 34px 40px;
  }
  .cnl-event-form .cnl-ef-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .cnl-event-form .cnl-ef-banner {
    grid-column: 1 / -1;
  }
}

.cnl-event-form *,
.cnl-event-form *::before,
.cnl-event-form *::after {
  box-sizing: border-box;
}

.cnl-event-form .cnl-ef-section {
  font-family: "pragmatica-extended", "Arial Black", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cnl-ef-navy);
  font-size: 1.1em;
  margin: 28px 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-field {
  margin: 16px 0;
}

.cnl-event-form .cnl-ef-label {
  display: block;
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-ef-navy);
  margin-bottom: 4px;
}

.cnl-event-form .cnl-ef-hint {
  font-family: "Domine", Georgia, serif;
  font-size: 0.85em;
  color: #5a5f72;
  margin: 2px 0 6px;
}

.cnl-event-form .cnl-ef-input {
  width: 100%;
  font-family: inherit;
  font-size: 1em;
  color: var(--cnl-ef-ink);
  background: #fff;
  border: 1px solid var(--cnl-ef-navy);
  border-radius: 5px;
  padding: 9px 10px;
}

.cnl-event-form .cnl-ef-input:focus {
  outline: 3px solid rgba(159, 60, 57, 0.45);
  outline-offset: 1px;
}

.cnl-event-form .cnl-ef-file {
  background: transparent;
  border: none;
  padding-left: 0;
}

/* The native "Choose file" button, restyled as a small CNL button. */
.cnl-event-form .cnl-ef-file::file-selector-button {
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-ef-cream);
  background: var(--cnl-ef-navy);
  border: none;
  border-radius: 6px;
  padding: 9px 14px;
  margin-right: 12px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
  transition: transform 0.15s, box-shadow 0.15s;
}

.cnl-event-form .cnl-ef-file::file-selector-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cnl-ef-red);
}

/* Small CNL-styled action button (e.g. "+ Add a co-host"). */
.cnl-event-form .cnl-ef-btn-small {
  display: inline-block;
  justify-self: start;
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-ef-cream);
  background: var(--cnl-ef-navy);
  border: none;
  border-radius: 6px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
  transition: transform 0.15s, box-shadow 0.15s;
}

.cnl-event-form .cnl-ef-btn-small:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-row {
  display: flex;
  gap: 14px;
}

/* Hour / minute / AM-PM trio of the custom time picker. */
.cnl-event-form .cnl-ef-timegroup {
  display: flex;
  gap: 8px;
}

.cnl-event-form .cnl-ef-timegroup .cnl-ef-input {
  width: auto;
  flex: 1;
  min-width: 0;
}

.cnl-event-form .cnl-ef-row .cnl-ef-field {
  flex: 1;
}

.cnl-event-form .cnl-ef-radio-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cnl-event-form .cnl-ef-radio,
.cnl-event-form .cnl-ef-check {
  font-weight: normal;
  cursor: pointer;
}

.cnl-event-form .cnl-ef-check {
  display: block;
  margin: 6px 0 2px;
  font-size: 0.9em;
}

.cnl-event-form .cnl-ef-inline-error {
  color: var(--cnl-ef-red);
  font-size: 0.85em;
  min-height: 0;
  margin: 4px 0 0;
}

.cnl-event-form .cnl-ef-has-error .cnl-ef-input {
  border-color: var(--cnl-ef-red);
  border-width: 2px;
}

.cnl-event-form .cnl-ef-banner,
.cnl-event-form .cnl-ef-error-banner {
  background: var(--cnl-ef-red);
  color: var(--cnl-ef-cream);
  padding: 10px 14px;
  margin: 0 0 16px;
}

.cnl-event-form .cnl-ef-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cnl-ef-navy);
  border-top: none;
  border-radius: 0 0 5px 5px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
}

.cnl-event-form .cnl-ef-suggestion {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.95em;
}

.cnl-event-form .cnl-ef-suggestion:hover,
.cnl-event-form .cnl-ef-suggestion.cnl-ef-active {
  background: var(--cnl-ef-navy);
  color: var(--cnl-ef-cream);
}

.cnl-event-form .cnl-ef-picked {
  background: #fff;
  border: 1px dashed var(--cnl-ef-navy);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 6px 0 0;
  font-size: 0.95em;
}

.cnl-event-form .cnl-ef-linklike {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.9em;
  color: var(--cnl-ef-red);
  text-decoration: underline;
  cursor: pointer;
}

.cnl-event-form .cnl-ef-cohost {
  border-left: 3px solid var(--cnl-ef-line);
  padding-left: 12px;
  margin: 14px 0;
}

.cnl-event-form .cnl-ef-crop-canvas {
  display: block;
  max-width: 100%;
  border: 1px solid var(--cnl-ef-navy);
  cursor: grab;
}

.cnl-event-form .cnl-ef-crop-canvas:active {
  cursor: grabbing;
}

.cnl-event-form .cnl-ef-turnstile {
  margin: 18px 0 0;
}

/* Submit matches the CNL site's form buttons (see chapter.css): pragmatica,
   uppercase, hard offset shadow, translate pop on hover, push on press. */
.cnl-event-form .cnl-ef-submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 22px;
  margin-bottom: 16px; /* clears the offset shadow so the note below reads */
  height: 46px;
  font-family: "pragmatica-extended", "Arial Black", sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cnl-ef-cream);
  background: var(--cnl-ef-navy);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--cnl-ef-red);
  transform: translate(0, 0);
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cnl-event-form .cnl-ef-submit:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-submit:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-submit:disabled {
  background: #8a8fa3;
  box-shadow: 5px 5px 0 #c5c1a9;
  cursor: wait;
}

.cnl-event-form .cnl-ef-busy .cnl-ef-input,
.cnl-event-form .cnl-ef-busy .cnl-ef-linklike {
  pointer-events: none;
  opacity: 0.6;
}

.cnl-event-form .cnl-ef-success {
  text-align: center;
  padding: 30px 10px;
}

.cnl-event-form .cnl-ef-success h3 {
  color: var(--cnl-ef-navy);
  font-size: 1.5em;
  margin: 0 0 10px;
}

/* Spam trap wrapper: display:none so it's unfocusable, which every
   browser's autofill skips. (The old off-screen version got autofilled by
   real leads.) Also set inline in the JS, in case this file doesn't load. */
.cnl-event-form .cnl-ef-hp {
  display: none !important;
}

@media (max-width: 480px) {
  .cnl-event-form {
    padding: 18px;
  }
  .cnl-event-form .cnl-ef-row {
    flex-direction: column;
    gap: 0;
  }
}

/* =====================================================================
   Step 2 — announcement email editor (cnl-ee-*). Same scoping rules as
   the rest of the widget: everything under .cnl-event-form, no leaks.
   ===================================================================== */

.cnl-event-form .cnl-ee-head .cnl-ef-section {
  margin-top: 0;
}

.cnl-event-form .cnl-ee-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 18px;
}

@media (min-width: 900px) {
  .cnl-event-form .cnl-ee-editor {
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    column-gap: 40px;
  }
}

.cnl-event-form .cnl-ee-h {
  font-family: "pragmatica-extended", "Arial Black", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cnl-ef-navy);
  font-size: 0.95em;
  margin: 24px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ee-pane > .cnl-ee-h:first-child,
.cnl-event-form .cnl-ee-h--bare {
  margin-top: 0;
}

.cnl-event-form .cnl-ee-h--bare {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cnl-event-form .cnl-ee-group {
  display: grid;
  gap: 12px;
}

.cnl-event-form .cnl-ee-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .cnl-event-form .cnl-ee-row {
    grid-template-columns: 1fr;
  }
}

.cnl-event-form .cnl-ee-field textarea.cnl-ef-input {
  min-height: 120px;
  resize: vertical;
}

/* template picker */
.cnl-event-form .cnl-ee-templates {
  display: grid;
  gap: 6px;
}

.cnl-event-form .cnl-ee-tpl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 10px;
  border: 2px solid var(--cnl-ef-navy);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1em;
  color: var(--cnl-ef-ink);
}

.cnl-event-form .cnl-ee-tpl[aria-pressed="true"] {
  border-color: var(--cnl-ef-red);
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-ee-tpl__name {
  font-weight: 700;
  font-size: 0.9em;
}

.cnl-event-form .cnl-ee-tpl__blurb {
  font-size: 0.75em;
  opacity: 0.8;
  margin: 1px 0 0;
  line-height: 1.3;
}

.cnl-event-form .cnl-ee-tpl__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--cnl-ef-navy);
  margin-top: 4px;
}

.cnl-event-form .cnl-ee-tpl[aria-pressed="true"] .cnl-ee-tpl__dot {
  background: var(--cnl-ef-red);
  border-color: var(--cnl-ef-red);
}

/* logo picker */
.cnl-event-form .cnl-ee-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
}

.cnl-event-form .cnl-ee-logo {
  display: grid;
  gap: 3px;
  padding: 3px;
  font-family: inherit;
  color: var(--cnl-ef-ink);
  text-align: center;
  border: 2px solid var(--cnl-ef-navy);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.cnl-event-form .cnl-ee-logo[aria-pressed="true"] {
  border-color: var(--cnl-ef-red);
  box-shadow: 2px 2px 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-ee-logo__thumb {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 3px;
  overflow: hidden;
  padding: 3px;
}

.cnl-event-form .cnl-ee-logo__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cnl-event-form .cnl-ee-logo__text {
  font-family: "pragmatica-extended", "Arial Black", sans-serif;
  font-weight: 700;
  font-size: 0.7em;
  letter-spacing: 0.1em;
}

.cnl-event-form .cnl-ee-logo__label {
  font-size: 0.65em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* footer link toggles */
.cnl-event-form .cnl-ee-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.cnl-event-form .cnl-ee-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  min-height: 30px;
  font-weight: normal;
  cursor: pointer;
}

/* colour roles */
.cnl-event-form .cnl-ee-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.cnl-event-form .cnl-ee-color {
  display: grid;
  gap: 4px;
}

.cnl-event-form .cnl-ee-color .cnl-ef-label {
  font-size: 11px;
  margin-bottom: 0;
}

.cnl-event-form .cnl-ee-color__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cnl-event-form .cnl-ee-color input[type="color"] {
  width: 44px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--cnl-ef-navy);
  border-radius: 4px;
  background: #fff;
}

.cnl-event-form .cnl-ee-color code {
  font-size: 0.75em;
}

.cnl-event-form .cnl-ee-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cnl-event-form .cnl-ee-swatch {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
}

.cnl-event-form .cnl-ee-swatch:focus-visible {
  outline: 3px solid var(--cnl-ef-red);
  outline-offset: 2px;
}

/* preview */
.cnl-event-form .cnl-ee-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cnl-event-form .cnl-ee-seg {
  display: inline-flex;
  border: 2px solid var(--cnl-ef-navy);
  border-radius: 6px;
  overflow: hidden;
}

.cnl-event-form .cnl-ee-seg button {
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  background: #fff;
  color: var(--cnl-ef-navy);
  border: 0;
  cursor: pointer;
  min-height: 38px;
}

.cnl-event-form .cnl-ee-seg button[aria-pressed="true"] {
  background: var(--cnl-ef-navy);
  color: var(--cnl-ef-cream);
}

.cnl-event-form .cnl-ee-preview-frame {
  display: block;
  width: 100%;
  height: 760px;
  border: 1px solid var(--cnl-ef-navy);
  border-radius: 8px;
  background: #edf1f2;
  margin: 0 auto;
  transition: width 120ms;
}

.cnl-event-form .cnl-ee-preview-frame.is-mobile {
  width: 390px;
  max-width: 100%;
}

.cnl-event-form .cnl-ee-subject {
  font-size: 0.9em;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--cnl-ef-navy);
  border-radius: 6px;
}

.cnl-event-form .cnl-ee-subject strong {
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnl-ef-navy);
  margin-right: 8px;
}

.cnl-event-form .cnl-ee-subject .cnl-ee-pre {
  opacity: 0.6;
}

/* "When should it go out?" + reminders */
.cnl-event-form .cnl-ee-sched {
  margin-bottom: 4px;
}

.cnl-event-form .cnl-ee-sched__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0;
}

.cnl-event-form .cnl-ee-sched__row .cnl-ef-input {
  width: auto;
  padding: 5px 8px;
  font-size: 0.95em;
}

.cnl-event-form .cnl-ee-sched__note {
  color: #5a5f72;
  font-size: 0.92em;
}

.cnl-event-form .cnl-ee-sched__row.is-off {
  opacity: 0.55;
  cursor: default;
}

.cnl-event-form .cnl-ee-sched + .cnl-ef-field .cnl-ef-inline-error:empty {
  margin: 0;
}

/* actions */
.cnl-event-form .cnl-ee-dl {
  margin-top: 12px;
}

.cnl-event-form .cnl-ee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.cnl-event-form .cnl-ee-skip {
  text-align: center;
  margin: 4px 0 0;
  font-size: 0.9em;
}

/* =====================================================================
   Step indicator (cnl-ef-step*) — above every step.
   ===================================================================== */

.cnl-event-form .cnl-ef-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 22px;
  padding: 0;
}

.cnl-event-form .cnl-ef-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7084;
}

/* the rule between steps */
.cnl-event-form .cnl-ef-step + .cnl-ef-step::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--cnl-ef-line);
}

.cnl-event-form .cnl-ef-step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
}

.cnl-event-form .cnl-ef-step--current,
.cnl-event-form .cnl-ef-step--done {
  color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-step--current .cnl-ef-step-num {
  background: var(--cnl-ef-navy);
  border-color: var(--cnl-ef-navy);
  color: var(--cnl-ef-cream);
}

.cnl-event-form .cnl-ef-step--done .cnl-ef-step-num {
  background: var(--cnl-ef-red);
  border-color: var(--cnl-ef-red);
  color: var(--cnl-ef-cream);
}

.cnl-event-form .cnl-ef-step--skipped .cnl-ef-step-label {
  text-decoration: line-through;
}

.cnl-event-form .cnl-ef-step-note {
  display: none;
  font-family: "Domine", Georgia, serif;
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.cnl-event-form .cnl-ef-step--skipped .cnl-ef-step-note {
  display: inline;
}

/* Cover image: build it on the graphic step, or upload one. */
.cnl-event-form .cnl-ef-cover-choice {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.cnl-event-form .cnl-ef-cover-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--cnl-ef-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cnl-event-form .cnl-ef-cover-opt--on {
  border-color: var(--cnl-ef-navy);
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-cover-opt:focus-within {
  outline: 3px solid rgba(159, 60, 57, 0.45);
  outline-offset: 1px;
}

.cnl-event-form .cnl-ef-cover-opt input {
  flex: none;
  margin: 4px 0 0;
  accent-color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-cover-opt strong {
  display: block;
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-cover-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.85em;
  color: #5a5f72;
}

/* The past event's cover, on the "Reuse the cover from …" choice. */
.cnl-event-form .cnl-ef-cover-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  margin-left: auto;
  object-fit: cover;
  border: 1px solid var(--cnl-ef-line);
  border-radius: 6px;
}

/* "Start from a past event": the link, its list of the chapter's Luma
   events, and the note left after copying one. */
.cnl-event-form .cnl-ef-past-lead {
  margin: -4px 0 14px;
  font-size: 0.92em;
}

.cnl-event-form .cnl-ef-past-open {
  font-size: 1em;
  font-weight: 700;
}

.cnl-event-form .cnl-ef-past-panel {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--cnl-ef-line);
  border-radius: 8px;
}

.cnl-event-form .cnl-ef-past-status {
  margin: 0 0 6px;
}

.cnl-event-form .cnl-ef-past-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
}

.cnl-event-form .cnl-ef-past-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  font: inherit;
  font-size: 0.95em;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid #eee9d2;
  cursor: pointer;
}

.cnl-event-form .cnl-ef-past-item:hover,
.cnl-event-form .cnl-ef-past-item:focus-visible {
  color: var(--cnl-ef-cream);
  background: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-past-item:disabled {
  opacity: 0.6;
  cursor: progress;
}

.cnl-event-form .cnl-ef-past-date {
  flex: none;
  min-width: 7.5em;
  font-weight: 700;
  color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-past-name {
  flex: 1;
}

.cnl-event-form .cnl-ef-past-tag {
  flex: none;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-past-item:hover .cnl-ef-past-date,
.cnl-event-form .cnl-ef-past-item:hover .cnl-ef-past-tag,
.cnl-event-form .cnl-ef-past-item:focus-visible .cnl-ef-past-date,
.cnl-event-form .cnl-ef-past-item:focus-visible .cnl-ef-past-tag {
  color: inherit;
}

.cnl-event-form .cnl-ef-past-note {
  margin: 0 0 16px;
  padding: 8px 10px;
  font-size: 0.92em;
  background: #fff;
  border-left: 3px solid var(--cnl-ef-red);
}

/* =====================================================================
   Graphic step (cnl-eg-*) — the tools site's event graphics builder,
   framed. Same scoping rules as the rest of the widget.
   ===================================================================== */

.cnl-event-form .cnl-eg-box {
  position: relative;
  margin-top: 14px;
  background: var(--cnl-ef-cream);
  border: 1.5px solid var(--cnl-ef-navy);
  border-radius: 8px;
  overflow: hidden;
}

/* Wide, the builder fits its three panes into this height (its side panels
   scroll inside). Narrow, it stacks and reports its content height, which
   the script sets inline so the page scrolls once. */
.cnl-event-form .cnl-eg-frame {
  display: block;
  width: 100%;
  height: clamp(640px, calc(100vh - 160px), 900px);
  border: 0;
}

/* Covers the frame while it loads, or with the error if it doesn't. */
.cnl-event-form .cnl-eg-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: var(--cnl-ef-cream);
}

.cnl-event-form .cnl-eg-loading p {
  max-width: 440px;
  margin: 0;
}

.cnl-event-form .cnl-eg-loading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* The actions stay in reach while a tall frame scrolls past. */
.cnl-event-form .cnl-eg-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 14px;
  margin-top: 14px;
  padding: 12px 0;
  background: var(--cnl-ef-cream);
  border-top: 1px solid var(--cnl-ef-line);
}

.cnl-event-form .cnl-eg-bar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.cnl-event-form .cnl-eg-bar .cnl-ef-submit {
  width: auto;
  margin: 0;
  padding: 0 24px;
}

.cnl-event-form .cnl-eg-btn-outline {
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-ef-navy);
  background: transparent;
  border: 1.5px solid var(--cnl-ef-navy);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
  transition: transform 0.15s, box-shadow 0.15s;
}

.cnl-event-form .cnl-eg-btn-outline:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-eg-btn-outline:disabled {
  opacity: 0.55;
  cursor: default;
}

.cnl-event-form .cnl-eg-status {
  min-height: 1.3em;
  margin: 6px 0 0;
  text-align: right;
}

.cnl-event-form .cnl-eg-foot {
  margin: 2px 0 0;
  text-align: right;
}

@media (max-width: 480px) {
  .cnl-event-form .cnl-eg-bar-end,
  .cnl-event-form .cnl-eg-bar .cnl-ef-submit {
    width: 100%;
  }
  .cnl-event-form .cnl-eg-status,
  .cnl-event-form .cnl-eg-foot {
    text-align: left;
  }
}

/* =====================================================================
   Recurring events (cfg.series): the chapter's list, and the form's
   Repeats block. See SERIES in cnl-event-form.js.
   ===================================================================== */
.cnl-event-form .cnl-ef-input--inline {
  display: inline-block;
  width: auto;
  padding: 5px 8px;
  margin: 2px 0;
}

.cnl-event-form .cnl-ef-repeat {
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--cnl-ef-line);
  border-radius: 8px;
}

.cnl-event-form .cnl-ef-repeat-line {
  margin: 4px 0 8px;
  line-height: 2;
}

.cnl-event-form .cnl-ef-repeat-dates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
  gap: 2px 12px;
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.cnl-event-form .cnl-ef-repeat-dates .is-off span {
  color: #8a8d99;
  text-decoration: line-through;
}

.cnl-event-form .cnl-ef-repeat-count {
  margin: 0;
}

.cnl-event-form .cnl-ef-series-formhead {
  margin: 0 0 8px;
}

.cnl-event-form .cnl-ef-series-head .cnl-ef-section {
  margin-top: 0;
}

.cnl-event-form .cnl-ef-series-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: 0.95em;
  background: #fff;
  border-left: 3px solid var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-series-notice.is-error {
  color: var(--cnl-ef-cream);
  background: var(--cnl-ef-red);
  border-left-color: var(--cnl-ef-red-dark);
}

.cnl-event-form .cnl-ef-series-new {
  margin: 4px 0 20px;
}

.cnl-event-form .cnl-ef-series-new:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cnl-event-form .cnl-ef-series-list {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
}

.cnl-event-form .cnl-ef-series-card {
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--cnl-ef-navy);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-series-card--ended,
.cnl-event-form .cnl-ef-series-card--declined {
  border-color: var(--cnl-ef-line);
  box-shadow: none;
}

.cnl-event-form .cnl-ef-series-name {
  margin: 0 0 2px;
  font-size: 1.1em;
}

.cnl-event-form .cnl-ef-series-badge {
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 0.7em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--cnl-ef-cream);
  background: #6b6f80;
  border-radius: 4px;
}

.cnl-event-form .cnl-ef-series-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr));
  gap: 6px;
  list-style: none;
  margin: 10px 0 6px;
  padding: 0;
}

.cnl-event-form .cnl-ef-series-month {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px 9px;
  font-size: 0.9em;
  background: var(--cnl-ef-cream);
  border: 1px solid var(--cnl-ef-line);
  border-radius: 6px;
}

.cnl-event-form .cnl-ef-series-month.is-past {
  opacity: 0.6;
}

.cnl-event-form .cnl-ef-series-date {
  font-weight: 700;
  color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-series-state {
  font-size: 0.85em;
  color: #5a5f72;
}

.cnl-event-form .is-live .cnl-ef-series-state {
  font-weight: 700;
  color: var(--cnl-ef-red);
}

.cnl-event-form .is-skipped .cnl-ef-series-date,
.cnl-event-form .is-declined .cnl-ef-series-date,
.cnl-event-form .is-missed .cnl-ef-series-date {
  text-decoration: line-through;
  color: #8a8d99;
}

.cnl-event-form .is-error .cnl-ef-series-state {
  color: var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-series-month .cnl-ef-linklike {
  margin-left: auto;
}

.cnl-event-form .cnl-ef-series-legend {
  margin: 0 0 10px;
  font-size: 0.82em;
}

.cnl-event-form .cnl-ef-series-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.cnl-event-form .cnl-ef-series-actor {
  max-width: 420px;
}

.cnl-event-form .cnl-ef-sameday {
  margin: 10px 0 0;
}

/* Kind of event: the first screen's cards reuse the cover-choice look. The
   line under it ("Planning: Canvass launch. Change") sits above the form. */
.cnl-event-form .cnl-ef-kindpicker {
  margin-bottom: 24px;
}

.cnl-event-form .cnl-ef-kindbar {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 16px;
  color: var(--cnl-ef-navy);
  font-weight: 700;
}

.cnl-event-form .cnl-ef-modenote {
  margin-top: 6px;
}

/* The kind picker: a grid of cards, each with a coloured icon badge on top.
   The radio stays in the card (hidden) so keyboards and screen readers work. */
.cnl-event-form .cnl-ef-kindcards {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.cnl-event-form .cnl-ef-kindcards .cnl-ef-cover-opt {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  min-height: 150px;
}

.cnl-event-form .cnl-ef-kindcards .cnl-ef-cover-opt:hover {
  border-color: var(--cnl-ef-navy);
  transform: translateY(-2px);
}

.cnl-event-form .cnl-ef-kindcards .cnl-ef-cover-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.cnl-event-form .cnl-ef-kind-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--red, #9f3c39);
  color: var(--cream, #fdfbe9);
}

.cnl-event-form .cnl-ef-kindcards .cnl-ef-cover-opt:nth-child(2n) .cnl-ef-kind-icon {
  background: var(--navy, #2c3659);
}

.cnl-event-form .cnl-ef-kindcards .cnl-ef-cover-opt:nth-child(3n) .cnl-ef-kind-icon {
  background: var(--home-blue, #cfd8ef);
  color: var(--navy, #2c3659);
}

.cnl-event-form .cnl-ef-kindcards .cnl-ef-kind-text {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .cnl-event-form .cnl-ef-kindcards .cnl-ef-cover-opt:hover {
    transform: none;
  }
}

/* On a phone the cards go one per row, icon beside the words. */
@media (max-width: 640px) {
  .cnl-event-form .cnl-ef-kindcards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cnl-event-form .cnl-ef-kindcards .cnl-ef-cover-opt {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 14px;
  }

  .cnl-event-form .cnl-ef-kind-icon {
    width: 40px;
    height: 40px;
  }
}

/* =====================================================================
   The essentials on one screen. The details step used to be two tall
   columns; it is now one flow: the kind chips, the name, When, Where and
   the description, the cost question, a folded "More details", and who is
   submitting beside the button. Long explanations sit behind a "?" beside
   their label (read aloud either way).
   ===================================================================== */
.cnl-event-form .cnl-ef-form {
  display: block;
}

.cnl-event-form .cnl-ef-labelrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cnl-event-form .cnl-ef-labelrow .cnl-ef-label {
  margin-bottom: 0;
}

.cnl-event-form .cnl-ef-why {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cnl-ef-navy);
  background: #fff;
  color: var(--cnl-ef-navy);
  font: 700 12px/1 Georgia, serif;
  cursor: pointer;
}

.cnl-event-form .cnl-ef-why:hover,
.cnl-event-form .cnl-ef-why[aria-expanded="true"] {
  background: var(--cnl-ef-navy);
  color: var(--cnl-ef-cream);
}

.cnl-event-form .cnl-ef-why:focus-visible {
  outline: 3px solid rgba(159, 60, 57, 0.45);
  outline-offset: 2px;
}

.cnl-event-form .cnl-ef-help {
  display: none;
}

.cnl-event-form .cnl-ef-help.cnl-ef-help--open {
  display: block;
}

/* Out of sight and out of the tab order, but still in the page (the date inputs the When control drives). */
.cnl-event-form .cnl-ef-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pill buttons: Format and Where is it? (the kind cards, small). Each keeps its description, read aloud. */
.cnl-event-form .cnl-ef-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 7px 16px;
  border-radius: 999px;
}

.cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt:has(.cnl-ef-kind-icon) {
  padding: 6px 16px 6px 6px;
}

.cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.cnl-event-form .cnl-ef-pills .cnl-ef-kind-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy, #2c3659);
  color: var(--cream, #fdfbe9);
}

.cnl-event-form .cnl-ef-pills .cnl-ef-kind-icon svg {
  width: 16px;
  height: 16px;
}

.cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt strong {
  font-size: 13.5px;
}

.cnl-event-form .cnl-ef-pills .cnl-ef-cover-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The chapter-email request: a callout, not fine print. */
.cnl-event-form .cnl-ef-callout {
  margin: 8px 0 4px;
  padding: 11px 14px;
  border-left: 5px solid var(--cnl-ef-red);
  border-radius: 0 8px 8px 0;
  background: #fff4d6;
  color: #3f3200;
  font-size: 0.92em;
  line-height: 1.45;
}

.cnl-event-form .cnl-ef-callout strong {
  color: var(--cnl-ef-red-dark);
}

/* Hosts: one line (the first host as text, "change", the co-host button); co-host rows are compact. */
.cnl-event-form .cnl-ef-hostline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 12px 0 6px;
}

.cnl-event-form .cnl-ef-hostlabel {
  margin: 0;
}

.cnl-event-form .cnl-ef-hostsum {
  font-size: 0.95em;
}

.cnl-event-form .cnl-ef-btn-tiny {
  padding: 6px 12px;
  font-size: 12px;
}

.cnl-event-form .cnl-ef-cohost--collapsed {
  display: none;
}

.cnl-event-form .cnl-ef-hostblock .cnl-ef-cohost {
  margin: 6px 0;
  padding-left: 10px;
}

.cnl-event-form .cnl-ef-hostblock .cnl-ef-field {
  margin: 2px 0 4px;
}

/* The venue: a title row with the small manual link beside it, then the chapter's previous venues as cards. */
.cnl-event-form .cnl-ef-venuehead {
  margin-top: 14px;
}

.cnl-event-form .cnl-ef-manuallink {
  font-size: 12.5px;
}

.cnl-event-form .cnl-ef-venuecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 2px 0 10px;
}

.cnl-event-form .cnl-ef-venuecard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--cnl-ef-line);
  border-radius: 10px;
  cursor: pointer;
}

.cnl-event-form .cnl-ef-venuecard:hover {
  border-color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-venuecard:focus-visible {
  outline: 3px solid rgba(159, 60, 57, 0.45);
  outline-offset: 1px;
}

.cnl-event-form .cnl-ef-venuecard strong {
  font-size: 14px;
}

.cnl-event-form .cnl-ef-venuecard span {
  overflow: hidden;
  font-size: 12px;
  color: #5a5f72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnl-event-form .cnl-ef-venuecard--on {
  border-color: var(--cnl-ef-navy);
  background: #eef2fa;
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
}

/* ---- the layout ---- */
.cnl-event-form .cnl-ef-eventblock > .cnl-ef-field {
  margin: 14px 0;
}

.cnl-event-form .cnl-ef-sample {
  display: inline-block;
  margin: 4px 0 0;
}

.cnl-event-form .cnl-ef-more {
  margin: 18px 0 6px;
  border: 1.5px dashed var(--cnl-ef-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.cnl-event-form .cnl-ef-more > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.cnl-event-form .cnl-ef-more > summary::-webkit-details-marker {
  display: none;
}

.cnl-event-form .cnl-ef-more-title {
  font-family: "pragmatica-extended", "Arial Black", sans-serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-more-title::before {
  content: "\25B8\00a0";
}

.cnl-event-form .cnl-ef-more[open] .cnl-ef-more-title::before {
  content: "\25BE\00a0";
}

.cnl-event-form .cnl-ef-more-sum {
  font-size: 13px;
  color: #5a5f72;
}

.cnl-event-form .cnl-ef-more-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 40px;
  padding: 0 14px 12px;
}

@media (min-width: 900px) {
  .cnl-event-form .cnl-ef-more-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.cnl-event-form .cnl-ef-group {
  margin: 12px 0;
}

.cnl-event-form .cnl-ef-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 24px;
  align-items: end;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--cnl-ef-line);
}

@media (min-width: 900px) {
  .cnl-event-form .cnl-ef-footer {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  }

  .cnl-event-form .cnl-ef-footer .cnl-ef-hint {
    grid-column: 1 / -1;
    margin: 0;
  }
}

.cnl-event-form .cnl-ef-footer .cnl-ef-submit {
  margin: 0;
}

.cnl-event-form .cnl-ef-who .cnl-ef-field {
  margin: 0;
}

.cnl-event-form .cnl-ef-who-sum {
  margin: 0;
  font-size: 0.95em;
}

.cnl-event-form .cnl-ef-costblock .cnl-ef-field {
  margin: 14px 0;
}

/* ---- the When control ---- */
.cnl-event-form .cnl-ef-when-sugs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.cnl-event-form .cnl-ef-when-sug {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 9px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1.5px solid var(--cnl-ef-line);
  border-radius: 10px;
  cursor: pointer;
}

.cnl-event-form .cnl-ef-when-sug:hover {
  border-color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-when-sug:focus-visible,
.cnl-event-form .cnl-ef-chip:focus-visible,
.cnl-event-form .cnl-ef-when-day:focus-visible {
  outline: 3px solid rgba(159, 60, 57, 0.45);
  outline-offset: 1px;
}

.cnl-event-form .cnl-ef-when-sug--on {
  border-color: var(--cnl-ef-navy);
  box-shadow: 3px 3px 0 var(--cnl-ef-red);
  background: #eef2fa;
}

.cnl-event-form .cnl-ef-when-sug strong {
  font-size: 15px;
}

.cnl-event-form .cnl-ef-when-sug-t {
  font-size: 13px;
}

.cnl-event-form .cnl-ef-when-sug-n {
  font-size: 12px;
  color: #5a5f72;
}

.cnl-event-form .cnl-ef-when-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1.5px solid var(--cnl-ef-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.cnl-event-form .cnl-ef-when-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
}

.cnl-event-form .cnl-ef-when-row:last-child {
  margin-bottom: 0;
}

.cnl-event-form .cnl-ef-when-l {
  min-width: 54px;
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-chip {
  padding: 6px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--cnl-ef-navy);
  background: #fff;
  border: 1.5px solid var(--cnl-ef-line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.cnl-event-form .cnl-ef-chip:hover {
  border-color: var(--cnl-ef-navy);
}

.cnl-event-form .cnl-ef-chip--on {
  background: var(--cnl-ef-navy);
  border-color: var(--cnl-ef-navy);
  color: var(--cnl-ef-cream);
  font-weight: 700;
}

.cnl-event-form .cnl-ef-when-t {
  width: 100px;
  padding: 6px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--cnl-ef-ink);
  background: #fff;
  border: 1px solid var(--cnl-ef-navy);
  border-radius: 5px;
}

.cnl-event-form .cnl-ef-when-t:focus {
  outline: 3px solid rgba(159, 60, 57, 0.45);
  outline-offset: 1px;
}

.cnl-event-form .cnl-ef-when-t--err {
  border-color: var(--cnl-ef-red);
  background: #fdeeee;
}

.cnl-event-form .cnl-ef-when-sum {
  margin: 10px 0 0;
}

.cnl-event-form .cnl-ef-when-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #5a5f72;
}

.cnl-event-form .cnl-ef-when-note--warn {
  padding: 6px 10px;
  color: #6f4a00;
  background: #fff4d6;
  border-radius: 6px;
}

.cnl-event-form .cnl-ef-when-note--err {
  color: var(--cnl-ef-red);
}

.cnl-event-form .cnl-ef-when-cal {
  max-width: 320px;
  margin: 0 0 10px 62px;
}

.cnl-event-form .cnl-ef-when-cal-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cnl-event-form .cnl-ef-when-cal-g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cnl-event-form .cnl-ef-when-cal-g b {
  text-align: center;
  font-size: 11px;
  color: #5a5f72;
}

.cnl-event-form .cnl-ef-when-day {
  padding: 6px 0;
  font: inherit;
  font-size: 14px;
  color: var(--cnl-ef-navy);
  background: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.cnl-event-form .cnl-ef-when-day:hover:not(:disabled) {
  background: #e3eaf7;
}

.cnl-event-form .cnl-ef-when-day--on {
  background: var(--cnl-ef-navy);
  color: var(--cnl-ef-cream);
}

.cnl-event-form .cnl-ef-when-day:disabled {
  color: rgba(34, 41, 63, 0.3);
  background: transparent;
  cursor: default;
}

@media (max-width: 480px) {
  .cnl-event-form .cnl-ef-when-cal {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cnl-event-form .cnl-ef-when-sug,
  .cnl-event-form .cnl-ef-chip {
    transition: none;
  }
}


/* A helper (Globert) is saying the field help: the "?" steps aside, and the folded explanation stays folded
   (it is still in the page for screen readers, named by the field). */
html[data-field-help="helper"] .cnl-event-form .cnl-ef-why {
  display: none;
}

html[data-field-help="helper"] .cnl-event-form .cnl-ef-help.cnl-ef-help--open {
  display: none;
}
.cnl-event-form .cnl-ef-who {
  margin-bottom: 14px;
}