/* The event form tool's page. The widget's own styles live in cnl-event-form.css (scoped under
   .cnl-event-form, copied verbatim from cnl-event-intake/form/, the source of truth: copy it over,
   don't edit it here).

   The page wears the tools home's rail and header (assets/rail.js, assets/tool-page.css), and the
   rules below dress the widget in the home's look on this page (.landing.ef-page) only: a home card, HQ's
   fields (serif, bold, sentence case), badge-headed sections, the three steps in the home's tile
   colours, choice tiles, and the site's serif buttons. They reach into the widget's markup (its
   class names, the order of its sections), so check the page after copying a new widget over.
   In an embed (no rail) the widget keeps its own look. */

.event-form-intro { margin: 0; font-size: 14px; }

.landing.ef-page .cnl-event-form {
  max-width: none;
  margin: 0 6px 6px 0;
  padding: 26px 30px 30px;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  background: var(--cream);
  font-family: var(--font-serif);
  font-size: 15px;
}
@media (min-width: 900px) {
  .landing.ef-page .cnl-event-form { max-width: none; padding: 26px 34px 34px; }
  .landing.ef-page .cnl-event-form .cnl-ef-form { column-gap: 44px; }
}

/* The steps: the home's three tiles, small. */
.landing.ef-page .cnl-event-form .cnl-ef-steps { gap: 10px; margin: 0 0 8px; }
.landing.ef-page .cnl-event-form .cnl-ef-step + .cnl-ef-step::before { display: none; }
.landing.ef-page .cnl-event-form .cnl-ef-step {
  flex: 1 1 0; min-width: 180px;
  gap: 10px; padding: 9px 14px 9px 10px;
  border: 1.5px solid rgba(44, 54, 89, 0.22); border-radius: 12px; background: #fff;
  font-family: var(--font-serif); font-size: 14.5px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--home-meta);
}
.landing.ef-page .cnl-event-form .cnl-ef-step-num {
  width: 30px; height: 30px; border: 0; border-radius: 9px; background: rgba(44, 54, 89, 0.08); color: var(--navy);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 14px;
}
.landing.ef-page .cnl-event-form .cnl-ef-step--current { color: var(--cream); box-shadow: 4px 4px 0 var(--navy); }
.landing.ef-page .cnl-event-form .cnl-ef-step--current:nth-child(1) { background: var(--red); border-color: var(--red); }
.landing.ef-page .cnl-event-form .cnl-ef-step--current:nth-child(2) { background: var(--navy); border-color: var(--navy); box-shadow: 4px 4px 0 var(--red); }
.landing.ef-page .cnl-event-form .cnl-ef-step--current:nth-child(3) { background: var(--home-blue); border-color: var(--navy); color: var(--navy); }
.landing.ef-page .cnl-event-form .cnl-ef-step--current .cnl-ef-step-num { background: rgba(253, 251, 233, 0.18); color: inherit; border: 0; }
.landing.ef-page .cnl-event-form .cnl-ef-step--done { color: var(--navy); }
.landing.ef-page .cnl-event-form .cnl-ef-step--done .cnl-ef-step-num { background: var(--navy); color: var(--cream); }

/* Sections: a badge and a serif title, hairlines between (the home card's rows). */
.landing.ef-page .cnl-event-form .cnl-ef-section {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 4px; padding: 22px 0 0; border-bottom: 0; border-top: 1px solid var(--home-rule);
  font-family: var(--font-serif); font-size: 19px; font-weight: 700; line-height: 1.25;
  text-transform: none; letter-spacing: 0; color: var(--navy);
}
.landing.ef-page .cnl-event-form .cnl-ef-section::before {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--navy) center / 17px 17px no-repeat;
}
.landing.ef-page .cnl-ef-col:has(#cnl-ef-submitter_name) .cnl-ef-section:nth-of-type(1)::before { background-color: var(--red); background-image: var(--ic-user-cream); }
.landing.ef-page .cnl-ef-col:has(#cnl-ef-submitter_name) .cnl-ef-section:nth-of-type(2)::before { background-image: var(--ic-calendar-cream); }
.landing.ef-page .cnl-ef-col:has(.cnl-ef-submit) .cnl-ef-section:nth-of-type(1)::before { background-color: var(--home-blue); background-image: var(--ic-tag-navy); }
.landing.ef-page .cnl-ef-col:has(.cnl-ef-submit) .cnl-ef-section:nth-of-type(2)::before { background-image: var(--ic-image-cream); }
.landing.ef-page .cnl-ef-col:has(.cnl-ef-submit) .cnl-ef-section:nth-of-type(3)::before { background-color: var(--red); background-image: var(--ic-users-cream); }
.landing.ef-page .cnl-ef-col:has(.cnl-ef-submit) .cnl-ef-section:nth-of-type(4)::before { background-color: var(--home-blue); background-image: var(--ic-dollar-navy); }
.landing.ef-page .cnl-ef-col:has(.cnl-ef-submit) .cnl-ef-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 18px; }

/* The kind picker's heading: no top rule (it opens the form), a flag badge. */
.landing.ef-page .cnl-event-form .cnl-ef-kindpicker .cnl-ef-section { border-top: 0; padding-top: 0; margin-top: 18px; }
.landing.ef-page .cnl-event-form .cnl-ef-kindpicker .cnl-ef-section::before { background-color: var(--home-blue); background-image: var(--ic-flag-navy); }

/* Fields: HQ's. */
.landing.ef-page .cnl-event-form .cnl-ef-label {
  font-family: var(--font-serif); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.landing.ef-page .cnl-event-form .cnl-ef-hint { font-family: var(--font-serif); font-size: 13px; color: var(--home-meta); }
.landing.ef-page .cnl-event-form .cnl-ef-input { border: 1.5px solid rgba(44, 54, 89, 0.55); border-radius: 8px; padding: 10px 12px; font-family: var(--font-serif); }
.landing.ef-page .cnl-event-form .cnl-ef-input:hover { border-color: var(--navy); }
.landing.ef-page .cnl-event-form .cnl-ef-input:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--navy); }
.landing.ef-page .cnl-event-form .cnl-ef-radio, .landing.ef-page .cnl-event-form .cnl-ef-check { font-family: var(--font-serif); font-size: 14.5px; }

/* Choice tiles (cover image). */
.landing.ef-page .cnl-event-form .cnl-ef-cover-opt { border: 1.5px solid rgba(44, 54, 89, 0.22); border-radius: 12px; padding: 14px 16px; }
.landing.ef-page .cnl-event-form .cnl-ef-cover-opt:hover { border-color: var(--navy); }
.landing.ef-page .cnl-event-form .cnl-ef-cover-opt--on { border: 2px solid var(--navy); box-shadow: 4px 4px 0 var(--b-rail, var(--red)); }
.landing.ef-page .cnl-event-form .cnl-ef-cover-opt strong { font-size: 15.5px; text-transform: none; letter-spacing: 0; font-weight: 700; }

/* Buttons: the site's (serif, sentence case, rounded, the stamp shadow). */
.landing.ef-page .cnl-event-form :is(.cnl-ef-submit, .cnl-ef-btn-small, .cnl-eg-btn-outline, .cnl-ee-seg button),
.landing.ef-page .cnl-event-form .cnl-ef-file::file-selector-button {
  font-family: var(--font-serif); font-stretch: normal; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.landing.ef-page .cnl-event-form .cnl-ef-submit { height: 48px; font-size: 16px; border-radius: var(--radius-btn); box-shadow: 4px 4px 0 var(--red); }
.landing.ef-page .cnl-event-form .cnl-ef-submit:hover:not(:disabled) { transform: none; box-shadow: 5px 5px 0 var(--red); }
.landing.ef-page .cnl-event-form .cnl-ef-submit:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red); }
.landing.ef-page .cnl-event-form :is(.cnl-ef-btn-small, .cnl-eg-btn-outline) { font-size: 14.5px; border-radius: var(--radius-btn); padding: 8px 16px; }
.landing.ef-page .cnl-event-form .cnl-ee-seg button { font-size: 13.5px; }

/* Recurring events: each series a card of month tiles (the home's On deck dates). */
/* (the page header says what the widget's own head says) */
.landing.ef-page.is-series .cnl-event-form .cnl-ef-series-head { display: none; }
.landing.ef-page.is-series .cnl-event-form .cnl-ef-series-card { background: #fff; border: 1.5px solid rgba(44, 54, 89, 0.2); border-radius: 12px; padding: 16px 18px; }
.landing.ef-page.is-series .cnl-event-form .cnl-ef-series-name { font-family: var(--font-serif); font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.landing.ef-page.is-series .cnl-event-form .cnl-ef-series-month { border-radius: 10px; border-color: rgba(44, 54, 89, 0.25); background: var(--cream); }
.landing.ef-page.is-series .cnl-event-form .cnl-ef-series-badge { border-radius: 999px; font-family: var(--font-display); font-stretch: 125%; font-size: 9.5px; letter-spacing: 0.1em; padding: 3px 9px; }
.landing.ef-page.is-series .cnl-event-form .cnl-ef-series-new { display: inline-flex; align-items: center; width: auto; padding: 0 22px; margin: 0 0 22px; }
@media (max-width: 640px) {
  .landing.ef-page .cnl-event-form { padding: 16px 14px 20px; }
  .landing.ef-page .cnl-event-form .cnl-ef-step { min-width: 0; flex-basis: 100%; }
}

/* The details step, in one flow (the widget's own rules do the layout; these dress the compact bits
   in the home's look): the pill buttons, the When control's suggestions and chips, the folded More details. */
.landing.ef-page .cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt { padding: 7px 16px; border-radius: 999px; }
.landing.ef-page .cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt:has(.cnl-ef-kind-icon) { padding: 6px 16px 6px 6px; }
.landing.ef-page .cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt strong { font-size: 14.5px; }
.landing.ef-page .cnl-event-form .cnl-ef-when-sug,
.landing.ef-page .cnl-event-form .cnl-ef-when-panel { border-radius: 12px; font-family: var(--font-serif); }
.landing.ef-page .cnl-event-form .cnl-ef-when-sug--on { border: 2px solid var(--navy); box-shadow: 4px 4px 0 var(--b-rail, var(--red)); }
.landing.ef-page .cnl-event-form .cnl-ef-chip { font-family: var(--font-serif); }
.landing.ef-page .cnl-event-form .cnl-ef-chip--on { background: var(--navy); border-color: var(--navy); }
.landing.ef-page .cnl-event-form .cnl-ef-more { border-radius: 12px; }
.landing.ef-page .cnl-event-form .cnl-ef-more-title { font-family: var(--font-serif); font-size: 14.5px; text-transform: none; letter-spacing: 0; }
.landing.ef-page .cnl-event-form .cnl-ef-callout { font-family: var(--font-serif); font-size: 14px; border-radius: 0 10px 10px 0; }

@media (max-width: 480px) {
  .landing.ef-page .cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt strong { font-size: 13px; }
  .landing.ef-page .cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt { padding: 6px 12px; }
  .landing.ef-page .cnl-event-form .cnl-ef-pills .cnl-ef-cover-opt:has(.cnl-ef-kind-icon) { padding: 5px 12px 5px 5px; }
  .landing.ef-page .cnl-event-form .cnl-ef-pills { gap: 6px; }
}