:root {
  --lf-primary: #6264a7;
  --lf-primary-dark: #4f5092;
  --lf-purple-light: #ede9f5;
  --lf-bg: #f3f2f1;
  --lf-surface: #ffffff;
  --lf-border: #e1dfdd;
  --lf-text: #242424;
  --lf-text-secondary: #605e5c;
  --lf-muted: #a19f9d;
  --lf-radius: 8px;
  /* The corner on the smaller things - inputs, buttons, the event band, a
     message. Separate from the card's own radius because the two do not move
     together: a card wants more curve than a 40px-high input does. Both are
     set by the Design tab's corner style. */
  --lf-radius-control: 4px;
  --lf-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* How wide the form itself is allowed to get, whatever it is sitting in. */
  --lf-width: 640px;
  /* The ring a focused control draws. A tint of the primary, so it follows
     the form's own color instead of the one this plugin happens to ship. */
  --lf-focus-ring: rgba(98, 100, 167, 0.2);
  --lf-focus-ring-strong: rgba(98, 100, 167, 0.4);
  --lf-font: inherit;
}

/* Fullscreen mode only */
.localform-fullscreen {
  background: var(--lf-bg);
}

.localform-fullscreen #page,
.localform-fullscreen .site-content,
.localform-fullscreen .entry-content,
.localform-fullscreen .hentry,
.localform-fullscreen .post-thumbnail,
.localform-fullscreen .entry-header,
.localform-fullscreen .entry-footer,
.localform-fullscreen .post-navigation,
.localform-fullscreen .comments-area,
.localform-fullscreen .site-header,
.localform-fullscreen .site-footer {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.localform-fullscreen .entry-header,
.localform-fullscreen .post-navigation,
.localform-fullscreen .comments-area,
.localform-fullscreen .entry-footer,
.localform-fullscreen .site-header,
.localform-fullscreen .site-footer {
  display: none !important;
}

.localform-fullscreen .localform-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 16px 80px;
  box-sizing: border-box;
}

/* Theme mode */
.localform-page:not(.localform-fullscreen) .localform-wrapper {
  padding: 24px 0;
}

.localform-wrapper {
  width: 100%;
  background-color: var(--lf-bg);
  font-family: var(--lf-font, inherit);
  /* Breathing room for embeds (block, shortcode, Elementor), which sit
     directly against the surrounding content. The form page's own rules above
     are more specific, so they keep their own spacing. */
  padding: 48px 16px;
  box-sizing: border-box;
}

.localform-logo {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

.localform-logo img {
  max-height: 60px;
  width: auto;
  border: none;
  box-shadow: none;
  outline: none;
}

.localform-form {
  width: 100%;
  max-width: var(--lf-width);
  margin: 0 auto 16px;
  background: var(--lf-surface);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  position: relative;
  overflow: hidden;
  color: var(--lf-text);
}

/* Plain layout: the form without a card of its own.
   For an embed, where the page around it usually has one already and two
   nested panels read as a mistake. The card's own spacing inside stays - what
   goes is the panel it was drawn on, and the wrapper's page background and
   outer padding with it, so the form sits directly on whatever is behind it. */
.localform-wrapper.localform-layout-plain {
  background-color: transparent;
  padding: 0;
}

.localform-page:not(.localform-fullscreen)
  .localform-wrapper.localform-layout-plain {
  padding: 0;
}

.localform-wrapper.localform-layout-plain .localform-form,
.localform-wrapper.localform-layout-plain .localform-closed-notice {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Title header inside the form card, below the accent bar. */
.localform-form-header {
  padding: 34px 32px 22px;
  border-bottom: 1px solid var(--lf-border);
}

.localform-form-title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--lf-text);
}

/* Written in the builder's rich-text editor, so it arrives as real markup
   (wpautop'd) rather than a run of newlines - hence blocks to space rather
   than white-space: pre-line. */
.localform-form-description {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--lf-text);
  opacity: 0.75;
}

.localform-form-description > *:first-child {
  margin-top: 0;
}

.localform-form-description > *:last-child {
  margin-bottom: 0;
}

.localform-form-description p {
  margin: 0 0 0.75em;
}

.localform-form-description ul,
.localform-form-description ol {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
}

/* Event facts: a quiet band inside the form card, above the first question -
   not a card of its own competing with the form for attention. */
.localform-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 1.5rem;
  padding: 10px 14px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-control);
  background: rgba(0, 0, 0, 0.02);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--lf-text-secondary);
}

.localform-event-meta strong {
  font-weight: 600;
  color: var(--lf-text);
}

.localform-event-meta-item + .localform-event-meta-item::before {
  content: "|";
  margin-right: 12px;
  color: var(--lf-border);
}

/* Several amounts inside the price fact read as one list. */
.localform-event-meta-price + .localform-event-meta-price::before {
  content: "\00b7";
  margin: 0 6px;
  color: var(--lf-muted);
}

.localform-event-meta-price strong {
  font-variant-numeric: tabular-nums;
}

/* "+2 dates": a count, not a heading - the form's own question lists them. */
.localform-event-meta-more {
  color: var(--lf-muted);
}

.localform-form {
  padding: 0;
}

.localform-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--lf-primary);
}

/* Cover photo: a banner across the top of the card, above the title.

   The accent bar and the cover both want the card's top edge, and the picture
   is the stronger statement of the two - so a form that has one drops the bar
   rather than laying 8px of primary over the image. */
.localform-form.localform-has-cover::before {
  display: none;
}

.localform-cover {
  display: block;
  line-height: 0;
}

.localform-cover img {
  display: block;
  width: 100%;
  /* Tall enough to be a picture, short enough that the first question is
     still on screen when the page opens. A wider image is cropped rather
     than letterboxed: a cover is scenery, and the middle of it is the part
     worth keeping. */
  height: clamp(120px, 28vw, 240px);
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

/* The closed notice pads its content; the banner is the one thing in there
   that runs to the edge. Its own corners are clipped by the card. */
.localform-closed-notice .localform-cover {
  margin: -2rem -2rem 1.5rem;
}

.localform-form-inner {
  padding: 28px 32px 32px;
}

.localform-fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.localform-field {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--lf-border);
}

.localform-field:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.localform-field > label,
.localform-field > .localform-field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--lf-text);
  line-height: 1.4;
}

.localform-field > label .required,
.localform-field > .localform-field-label .required {
  color: #d13438;
  margin-left: 0.25rem;
}

.localform-text-block-heading {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--lf-text);
  line-height: 1.4;
}

.localform-text-block-content {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lf-text-secondary);
}

.localform-text-block-content p {
  margin: 0 0 1em;
}

.localform-text-block-content p:last-child {
  margin-bottom: 0;
}

.localform-section {
  padding: 1.5rem 0 0.25rem;
  border-top: 2px solid var(--lf-primary);
  margin-top: 0.5rem;
}

.localform-fields > .localform-section:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.localform-section-title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lf-text);
  line-height: 1.3;
}

.localform-section-description {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--lf-text-secondary);
}

.localform-section-description p {
  margin: 0 0 0.75em;
}

.localform-section-description p:last-child {
  margin-bottom: 0;
}

.localform-image-block-grid {
  display: grid;
  gap: 0.75rem;
}

.localform-image-block--single .localform-image-block-grid {
  grid-template-columns: 1fr;
}

.localform-image-block--gallery .localform-image-block-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.localform-image-block-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lf-radius-control);
  object-fit: cover;
}

.localform-image-block--gallery .localform-image-block-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Default (fullscreen) input styling */
.localform-wrapper:not(.localform-use-theme) .localform-input,
.localform-wrapper:not(.localform-use-theme) input[type="text"],
.localform-wrapper:not(.localform-use-theme) input[type="email"],
.localform-wrapper:not(.localform-use-theme) input[type="tel"],
.localform-wrapper:not(.localform-use-theme) input[type="number"],
.localform-wrapper:not(.localform-use-theme) textarea,
.localform-wrapper:not(.localform-use-theme) select {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-control);
  background: #fff;
  color: var(--lf-text);
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.localform-wrapper:not(.localform-use-theme) .localform-input:focus,
.localform-wrapper:not(.localform-use-theme) input:focus,
.localform-wrapper:not(.localform-use-theme) textarea:focus,
.localform-wrapper:not(.localform-use-theme) select:focus {
  outline: none;
  border-color: var(--lf-primary);
  box-shadow: 0 0 0 3px var(--lf-focus-ring);
}

/* Theme mode: inherit theme inputs, only add subtle borders/spacing */
.localform-use-theme .localform-input,
.localform-use-theme input[type="text"],
.localform-use-theme input[type="email"],
.localform-use-theme input[type="tel"],
.localform-use-theme input[type="number"],
.localform-use-theme textarea,
.localform-use-theme select {
  width: 100%;
  box-sizing: border-box;
}

.localform-input[aria-invalid="true"] {
  border-color: #d13438;
}

.localform-field-error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #d13438;
  min-height: 1.25rem;
}

.localform-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0.625rem;
  cursor: pointer;
  color: var(--lf-text);
}

.localform-checkbox-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--lf-primary);
  cursor: pointer;
}

/* A choice something has taken out of circulation - an event date with no
   places left, say. Still readable, and still there, because a choice that
   vanished would leave the visitor wondering what they had misremembered. */
.localform-choice-unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}

.localform-choice-unavailable input {
  cursor: not-allowed;
}

/* A consent statement is a sentence, not an option label, so it wraps and the
   tick box stays aligned to its first line. */
.localform-consent-label {
  align-items: flex-start;
}

.localform-consent-label input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

.localform-consent-text a {
  color: inherit;
  text-decoration: underline;
}

.localform-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.localform-rating-option {
  margin-bottom: 0;
  width: auto;
}

.localform-rating-value {
  font-size: 1rem;
}

.localform-rating--stars .localform-rating-value {
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--lf-primary);
}

.localform-date-range {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.localform-date-range .localform-input {
  width: auto;
  flex: 1 1 0;
}

.localform-date-range-sep {
  color: var(--lf-text);
  opacity: 0.6;
  flex: 0 0 auto;
}

.localform-actions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lf-border);
}

/* Multi-step: progress bar */
.localform-progress {
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.localform-progress-bar {
  height: 100%;
  background: var(--lf-primary);
  border-radius: 2px;
  width: 0%;
  transition: width 0.35s ease;
}

/* Multi-step: step counter */
.localform-step-counter {
  font-size: 0.8125rem;
  color: var(--lf-text-secondary);
  margin: 0 0 1.25rem;
}

/* Multi-step: step header (section title used as page title) */
.localform-step-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lf-border);
}

/* Multi-step: step nav */
.localform-step-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lf-border);
}

.localform-wrapper:not(.localform-use-theme) .localform-btn-next {
  min-width: 120px;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--lf-primary);
  border: none;
  border-radius: var(--lf-radius-control);
  cursor: pointer;
  transition: background 0.15s ease;
}

.localform-wrapper:not(.localform-use-theme) .localform-btn-next:hover {
  background: var(--lf-primary-dark);
}

.localform-wrapper:not(.localform-use-theme) .localform-btn-next:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--lf-focus-ring-strong);
}

.localform-wrapper:not(.localform-use-theme) .localform-btn-back {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  color: var(--lf-text-secondary);
  background: transparent;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-control);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  margin-right: auto;
}

.localform-wrapper:not(.localform-use-theme) .localform-btn-back:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--lf-text-secondary);
}

/* Default (fullscreen) button styling */
.localform-wrapper:not(.localform-use-theme) .localform-submit {
  width: auto;
  min-width: 140px;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--lf-primary);
  border: none;
  border-radius: var(--lf-radius-control);
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.localform-wrapper:not(.localform-use-theme) .localform-submit:hover {
  background: var(--lf-primary-dark);
}

.localform-wrapper:not(.localform-use-theme) .localform-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--lf-focus-ring-strong);
}

.localform-wrapper:not(.localform-use-theme) .localform-submit:disabled {
  background: #a7aaad;
  cursor: not-allowed;
}

/* Theme mode: submit button uses theme styling, but keep a class hook */
.localform-use-theme .localform-submit {
  cursor: pointer;
}

.localform-messages {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--lf-radius-control);
  font-weight: 500;
  display: none;
}

.localform-messages.localform-success,
.localform-messages.localform-error {
  display: block;
}

.localform-messages.localform-success {
  background: #f0f9f1;
  color: #0f5132;
  border: 1px solid #9fd89f;
}

.localform-messages.localform-error {
  background: #fdf3f3;
  color: #8a2424;
  border: 1px solid #ffb3b3;
}

/* The success message is written in the builder's rich-text editor, so it can
   arrive as paragraphs, a list, or a link to a ticket. */
.localform-messages > *:first-child {
  margin-top: 0;
}

.localform-messages > *:last-child {
  margin-bottom: 0;
}

.localform-messages p {
  margin: 0 0 0.75em;
}

.localform-messages ul,
.localform-messages ol {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
  font-weight: 400;
}

.localform-messages a {
  color: inherit;
}

.localform-messages.localform-processing {
  display: block;
  background: #f3f2f1;
  color: var(--lf-text-secondary);
  border: 1px solid var(--lf-border);
}

.localform-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

@media (max-width: 720px) {
  .localform-fullscreen .localform-wrapper {
    padding: 24px 12px 60px;
  }

  .localform-form-inner {
    padding: 20px 20px 24px;
  }
}

.localform-checkbox-label input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--lf-primary);
  cursor: pointer;
}

/* Shown instead of the form when registration is closed, full, or not yet open. */
.localform-closed-notice {
  width: 100%;
  max-width: var(--lf-width);
  margin: 0 auto 16px;
  padding: 2rem;
  background: var(--lf-surface);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  /* So a cover photo pulled out to the edges is clipped by the corners. */
  overflow: hidden;
  color: var(--lf-text);
  text-align: center;
}

.localform-closed-notice .localform-form-title {
  margin: 0 0 0.75rem;
}

.localform-closed-message > *:first-child {
  margin-top: 0;
}

.localform-closed-message > *:last-child {
  margin-bottom: 0;
}

.localform-closed-message p {
  margin: 0 0 0.75em;
}

/* Shown above a restricted form to someone who is only seeing it because they
   manage forms - so "it works for me" is never mistaken for "it works". */
.localform-preview-notice {
  width: 100%;
  max-width: var(--lf-width);
  margin: 0 auto 12px;
  padding: 0.75rem 1rem;
  border-left: 4px solid #d98300;
  border-radius: var(--lf-radius-control);
  background: #fff6e5;
  color: #4a3200;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Sign-in prompt shown instead of a form that is only open to members. */
.localform-login-action {
  margin: 1.25rem 0 0;
}

.localform-wrapper:not(.localform-use-theme)
  .localform-login-action
  .localform-button {
  display: inline-block;
  min-width: 140px;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--lf-primary);
  border-radius: var(--lf-radius-control);
  text-decoration: none;
  transition: background 0.15s ease;
}

.localform-wrapper:not(.localform-use-theme)
  .localform-login-action
  .localform-button:hover {
  background: var(--lf-primary-dark);
  color: #fff;
}

.localform-wrapper:not(.localform-use-theme)
  .localform-login-action
  .localform-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--lf-focus-ring-strong);
}

.localform-footer {
  width: 100%;
  max-width: var(--lf-width);
  margin: 0 auto;
  padding: 12px 0 4px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--lf-text);
  opacity: 0.55;
}

.localform-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.localform-footer a:hover {
  opacity: 1;
}

/*
 * The credit line a site can switch on under Settings > General. Quieter than
 * the site's own footer text on purpose: it is our line on somebody else's
 * page, so it sits below whatever they wrote and never competes with it.
 */
.localform-credit {
  width: 100%;
  max-width: var(--lf-width);
  margin: 0 auto;
  padding: 4px 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--lf-text);
  opacity: 0.45;
}

.localform-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.localform-credit a:hover {
  opacity: 1;
}

/* ── Font size modifiers ─────────────────────────────────────────────────── */

/* Small */
.localform-font-sm .localform-form-title {
  font-size: 1.375rem;
}
.localform-font-sm .localform-form-description {
  font-size: 0.8125rem;
}
.localform-font-sm .localform-field > label,
.localform-font-sm .localform-field > .localform-field-label {
  font-size: 0.9375rem;
}
.localform-font-sm .localform-text-block-heading {
  font-size: 1rem;
}
.localform-font-sm .localform-text-block-content {
  font-size: 0.875rem;
}
.localform-font-sm .localform-event-meta {
  font-size: 0.8125rem;
}
.localform-font-sm:not(.localform-use-theme) input,
.localform-font-sm:not(.localform-use-theme) textarea,
.localform-font-sm:not(.localform-use-theme) select {
  font-size: 0.875rem;
}

/* Large */
.localform-font-lg .localform-form-title {
  font-size: 2.25rem;
}
.localform-font-lg .localform-form-description {
  font-size: 1.0625rem;
}
.localform-font-lg .localform-field > label,
.localform-font-lg .localform-field > .localform-field-label {
  font-size: 1.25rem;
}
.localform-font-lg .localform-text-block-heading {
  font-size: 1.5rem;
}
.localform-font-lg .localform-text-block-content {
  font-size: 1.125rem;
}
.localform-font-lg .localform-event-meta {
  font-size: 0.9375rem;
}
.localform-font-lg:not(.localform-use-theme) input,
.localform-font-lg:not(.localform-use-theme) textarea,
.localform-font-lg:not(.localform-use-theme) select {
  font-size: 1.125rem;
}

/* ---------------------------------------------------------------------------
   Quiz result

   Appended to the success message after a graded submission, inside the same
   .localform-messages box - so it inherits the success colours and only has to
   set out the score and the review of the answers.
   ------------------------------------------------------------------------ */

.localform-quiz-result {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  /* The rule is a divider, not a line to read; the message's own colour at
     full strength would draw the eye away from the score under it. */
  border-top-color: color-mix(in srgb, currentColor 25%, transparent);
  text-align: left;
}

.localform-quiz-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.localform-quiz-score-label {
  font-size: 0.9em;
  opacity: 0.8;
}

.localform-quiz-score-value {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.2;
}

.localform-quiz-outcome {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.06);
}

.localform-quiz-score.is-passed .localform-quiz-outcome {
  background: #dff6dd;
  color: #0b6a0b;
}

.localform-quiz-score.is-failed .localform-quiz-outcome {
  background: #fde7e9;
  color: #a4262c;
}

/* A form that shows the review but not the score still needs the list to
   start clear of the message above it. */
.localform-quiz-review {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.localform-quiz-review-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.localform-quiz-review-item:first-child {
  border-top: 0;
}

.localform-quiz-review-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

.localform-quiz-review-item.is-correct .localform-quiz-review-mark {
  background: #107c10;
}

.localform-quiz-review-item.is-incorrect .localform-quiz-review-mark {
  background: #a4262c;
}

.localform-quiz-review-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.localform-quiz-review-question {
  font-weight: 600;
}

.localform-quiz-review-answer,
.localform-quiz-review-expected,
.localform-quiz-review-feedback {
  font-size: 0.9em;
}

.localform-quiz-review-answer,
.localform-quiz-review-expected {
  opacity: 0.85;
}

.localform-quiz-review-feedback {
  margin-top: 4px;
  font-style: italic;
  opacity: 0.9;
}

/* Where a challenge is put when a form asks for one. Empty and invisible
   until then, which is the ordinary case on every page. */
.localform-captcha-slot:not(:empty) {
  margin: 16px 0;
}

/*
 * Likert grid.
 *
 * Two layouts, one markup. Wide enough and it is a table: the scale is written
 * once across the top and each statement is a row under it. Narrow and the
 * header row is hidden and every row becomes its own block with the point
 * labels beside their buttons - a five-column table on a phone is a table
 * nobody can read. The hidden header still names each button to a screen
 * reader, because `aria-labelledby` reads the element it points at whether or
 * not that element is displayed.
 */
.localform-matrix {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  /* On the same scale as a choice question's options, which is what the
     statements and their answers are - not the theme's base size, which on a
     theme that sets a large one left the grid shouting over its own question. */
  font-size: 1rem;
}

.localform-matrix th,
.localform-matrix td {
  padding: 0.5rem;
  vertical-align: middle;
}

.localform-matrix-head {
  font-weight: 500;
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.3;
  opacity: 0.85;
}

.localform-matrix-statement {
  font-weight: 400;
  padding-left: 0;
  width: 40%;
}

.localform-matrix tbody tr + tr {
  border-top: 1px solid var(--lf-border);
}

.localform-matrix-cell {
  text-align: center;
}

.localform-matrix-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  cursor: pointer;
}

.localform-matrix-answer {
  display: none;
}

@media (max-width: 640px) {
  .localform-matrix,
  .localform-matrix tbody,
  .localform-matrix tr,
  .localform-matrix td,
  .localform-matrix th {
    display: block;
  }

  .localform-matrix thead {
    display: none;
  }

  .localform-matrix-statement {
    width: auto;
    font-weight: 600;
    padding: 0.75rem 0 0.25rem;
  }

  .localform-matrix-cell {
    text-align: left;
    padding: 0.25rem 0 0.25rem 0.5rem;
  }

  .localform-matrix-answer {
    display: inline;
    font-size: 0.9375rem;
  }
}

/* An NPS scale says which end is which under the row of numbers. */
.localform-rating-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* Slider: the track, with the value it is on beside it. */
.localform-slider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.localform-slider-input {
  flex: 1 1 auto;
  accent-color: var(--lf-primary);
}

.localform-slider-value {
  flex: 0 0 auto;
  min-width: 3ch;
  font-size: 1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--lf-primary);
}

/* Constant sum: a number beside each item, and a running total underneath. */
.localform-allocation .localform-matrix-statement {
  width: auto;
}

.localform-allocation-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.localform-allocation-input {
  width: 8ch;
  text-align: right;
}

.localform-allocation-unit {
  opacity: 0.7;
  font-size: 0.875rem;
}

.localform-allocation-total {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.localform-allocation-total.is-complete {
  opacity: 1;
  color: var(--lf-primary);
  font-weight: 600;
}

.localform-allocation-total.is-over {
  opacity: 1;
  font-weight: 600;
}