/**
 * @file
 * Forms — exposed filters, the event submission form, and the subscribe form.
 *
 * The outgoing theme styled Select2 to look like a native select, then styled
 * the native select to look like Select2, and had 600 lines of ID-scoped rules
 * (#edit-field-venue-wrapper, #edit-field-price-wrapper, …) that broke whenever
 * a field was renamed. Nothing here is ID-scoped: native controls are styled
 * directly, and `<select multiple>` replaces Select2 entirely.
 */

.form-item {
  display: grid;
  gap: var(--space-3xs);
  margin-block-end: var(--space-s);
  min-inline-size: 0;
}

.form-item:last-child {
  margin-block-end: 0;
}

label,
.form-item__label {
  color: var(--text-secondary);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.form-required::after {
  content: "*";
  margin-inline-start: 0.25em;
  color: var(--me-magenta-300);
}

.form-item__description,
.description {
  color: var(--text-muted);
  font-size: var(--step--2);
  line-height: var(--leading-normal);
}

/* Text-ish inputs and selects share one skin. */
.form-text,
.form-email,
.form-tel,
.form-url,
.form-number,
.form-date,
.form-time,
.form-search,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="password"],
textarea,
select {
  inline-size: 100%;
  min-block-size: var(--input-height);
  padding: 0.6rem var(--space-xs);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  appearance: none;
}

textarea {
  min-block-size: 8rem;
  line-height: var(--leading-normal);
}

::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--me-magenta) 35%, transparent);
}

/* Native select gets its own chevron so no JS widget is needed. */
select {
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2399A1A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: 1rem;
  cursor: pointer;
}

select[multiple] {
  padding-inline-end: var(--space-xs);
  background-image: none;
  min-block-size: 9rem;
}

select[multiple] option {
  padding: 0.35rem var(--space-2xs);
  border-radius: var(--radius-xs);
}

/* Date inputs: force the native picker icon to be visible on dark. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

:root[data-me-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-me-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* Checkboxes and radios */
.form-check,
.form-item--checkbox,
.form-item--radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-block-end: var(--space-2xs);
}

/**
 * `appearance: none` — WITHOUT IT NONE OF THIS EVER PAINTED.
 *
 * It was on the text inputs and not on these, so every border, background and
 * `::before` below was being computed and then thrown away: the browser drew
 * its own native control instead, which is why a ticked genre came out as the
 * operating system's BLUE box with a white tick on a magenta site. Two rounds
 * of "the checked state should look like…" were about a stylesheet the browser
 * was never using.
 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  min-block-size: 0;
  margin: 0.2em 0 0;
  padding: 0;
  flex: none;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  cursor: pointer;
  display: grid;
  place-content: center;
}

input[type="checkbox"] { border-radius: var(--radius-xs); }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  scale: 0;
  transition: scale var(--duration-fast) var(--ease-out);
  background: var(--me-white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="radio"]::before {
  content: "";
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  scale: 0;
  transition: scale var(--duration-fast) var(--ease-out);
  background: var(--me-white);
}

/**
 * CHOSEN: A SOLID MAGENTA FILL INSIDE A PALE RING.
 *
 * It used to be a magenta box with a magenta border and a white tick inside.
 * At 20px the tick is four white pixels on a saturated ground: legible when
 * you are looking for it, invisible when you are scanning sixteen genres for
 * the two you picked.
 *
 * The ring is what makes this read from across the page. Unchosen is a dark
 * box with a grey edge; chosen is a bright block with a white edge — a change
 * in fill AND in edge, so the difference survives a glance, a small screen and
 * a colour-blind viewer, none of which the tick did much for.
 *
 * The shapes stay as they are: a square is one of many, a circle is one of
 * these. That distinction is older than this site and does real work — "Free
 * event / Paid event" must not look like a pair of boxes you can both tick.
 */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--me-magenta);
  border-color: color-mix(in srgb, var(--me-white) 92%, transparent);
}

/* The glyph goes: the fill is the statement now, and a tick on top of it is a
   second one that only muddies the block. */
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  scale: 0;
}

/* In light mode the ring is drawn the other way: white on white is no ring at
   all, so the edge is the accent's own darker shade. */
:root[data-me-theme="light"] input[type="checkbox"]:checked,
:root[data-me-theme="light"] input[type="radio"]:checked {
  border-color: var(--me-magenta-700);
}

@media (prefers-color-scheme: light) {
  :root:not([data-me-theme="dark"]) input[type="checkbox"]:checked,
  :root:not([data-me-theme="dark"]) input[type="radio"]:checked {
    border-color: var(--me-magenta-700);
  }
}

/**
 * Windows high contrast keeps its tick.
 *
 * Forced-colours mode throws every background and border away and paints from
 * the system palette, so a state told by fill alone stops being told at all.
 * The glyph comes back for exactly that case.
 */
@media (forced-colors: active) {
  input[type="checkbox"]:checked::before,
  input[type="radio"]:checked::before {
    scale: 1;
    background: CanvasText;
  }
}

.form-check label,
.form-item--checkbox label,
.form-item--radio label {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
  cursor: pointer;
}

/**
 * Fieldsets.
 *
 * The fieldset element carries NO box — no border, background or padding. Its
 * legend is a plain heading above, and `.fieldset-wrapper` is the panel that
 * holds the fields (see templates/form/fieldset.html.twig for why).
 *
 * This is what fixes fields overflowing the panel: padding now belongs to an
 * ordinary <div>, not to a fieldset whose legend was being floated out of flow.
 */
fieldset {
  display: block;
  margin: 0 0 var(--space-m);
  padding: 0;
  border: 0;
  background: none;
  min-inline-size: 0;
}

legend {
  display: block;
  inline-size: 100%;
  margin: 0 0 var(--space-2xs);
  padding: 0;
  color: var(--me-magenta-300);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/**
 * The panel.
 *
 * `--space-m` left the inputs all but touching the panel's edge — a 100%-wide
 * field inside 16px of padding reads as an unpadded box, especially with the
 * input's own border a shade lighter than the panel's. `--space-l` on a
 * desktop, dropping back to `--space-m` on a phone where the gutter is already
 * taking most of the width.
 */
.fieldset-wrapper {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  background: var(--surface-1);
}

@media (min-width: 34rem) {
  .fieldset-wrapper {
    padding: var(--space-l);
  }
}

/* A nested fieldset is a group inside a panel, not a second panel. */
.fieldset-wrapper fieldset > .fieldset-wrapper {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.fieldset-wrapper fieldset {
  margin-block: var(--space-m) 0;
}

.fieldset-wrapper fieldset > legend {
  color: var(--text-secondary);
}

/* Bare grouping — the subscribe band's "How often?", the exposed form's
   Buttons — keeps the label and drops the panel. */
.fieldset--plain > .fieldset-wrapper,
.subscribe fieldset > .fieldset-wrapper,
.exposed-form fieldset > .fieldset-wrapper {
  padding: 0;
  border: 0;
  background: none;
}

/* Date range pair */
.form-daterange {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}

/* Actions row */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-m);
}

/* Validation */
.form-item--error input,
.form-item--error textarea,
.form-item--error select,
input.error,
textarea.error,
select.error {
  border-color: var(--me-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--me-error) 30%, transparent);
}

/* Note the double underscore: this is the element, not a modifier. The rule
   was previously written `.form-item--error-message` and matched nothing, so a
   validation message rendered as full-size white body text. */
.form-item__error-message,
.form-item--error-message,
.form-item--error .description {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-block-start: var(--space-3xs);
  color: var(--me-error);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.form-item__error-message::before,
.form-item--error-message::before {
  content: "!";
  display: grid;
  place-items: center;
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  border-radius: 50%;
  background: var(--me-error);
  color: var(--me-navy-deep);
  font-size: 0.7rem;
  font-weight: var(--weight-black);
}

/* Managed file / image upload */
.form-managed-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-s);
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  background: var(--surface-well);
}

input[type="file"] {
  min-block-size: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--step--1);
}

input[type="file"]::file-selector-button {
  margin-inline-end: var(--space-2xs);
  padding: 0.45rem var(--space-s);
  border: 1px solid var(--me-magenta);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--me-magenta-300);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

/* Multi-step event submission form: progress. */
.form-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
  counter-reset: step;
}

.form-progress__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.form-progress__item::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: var(--step--2);
}

.form-progress__item[aria-current="step"] {
  color: var(--me-magenta-300);
}

.form-progress__item.is-complete {
  color: var(--me-success);
}

/* ===========================================================================
 * Long editorial forms — "Submit an event", the Webform, node edit
 *
 * The submission form is the longest page on the site and the one an outside
 * organiser is most likely to abandon. Three things were wrong with it:
 *
 *  1. The CKEditor body sat as a bright white slab in the middle of a dark
 *     page, because the editor's chrome and editing surface are styled by
 *     CKEditor itself, not by the form CSS.
 *  2. The sixteen Genre checkboxes ran down a single column roughly 600px
 *     tall, so the fields after it were pushed below the fold.
 *  3. Every fieldset was full page width, giving line lengths of 1300px for
 *     single-line inputs.
 * ======================================================================== */

/**
 * Measure. A form is read one field at a time, so it does not want the full
 * content width. Applied to the wrappers Drupal actually emits.
 */
.node--type-webform .node__content,
.webform-submission-form,
.node-form,
form.node-events-form {
  /* 60rem, and CENTRED.
     Without `margin-inline: auto` the measure cap pinned the whole form to the
     left of a 1320px content column, leaving a third of the page empty beside
     it — which is what "the /add layout doesn't look good" was. The cap itself
     is right: a form is read one field at a time and does not want a 1300px
     line length. Centring it is what was missing. */
  max-inline-size: 60rem;
  margin-inline: auto;
}

/**
 * The panel a fieldset renders as must fill the form, not its own content.
 *
 * A fieldset's default width is shrink-to-fit in some layout contexts, and with
 * the form itself a grid or flex parent that produced panels narrower than the
 * legends sitting above them — the ragged right edge visible on /add.
 */
.webform-submission-form fieldset,
.node-form fieldset,
.webform-submission-form .fieldset-wrapper,
.node-form .fieldset-wrapper {
  inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

/* Top-level sections get more air between them. */
.webform-submission-form > fieldset,
.node-form > fieldset,
.webform-submission-form > div > fieldset,
.node-form > div > fieldset {
  margin-block-end: var(--space-l);
}

/* A details element used as a form section matches the fieldset panel. */
.webform-submission-form > details,
.node-form > details {
  padding: 0;
  border: 0;
  background: none;
}

.webform-submission-form legend,
.node-form legend {
  font-size: var(--step--1);
  color: var(--me-magenta-300);
}

/* Details elements used as form sections should not look like the filter
   disclosure they share a class with. */
.webform-submission-form > details,
.node-form > details {
  margin-block-end: var(--space-l);
}

/* One rhythm for every field in a panel, whatever wrapper Drupal put round it
   — .form-item, .js-form-item, .field--type-*, or a bare div. */
.fieldset-wrapper > :is(.form-item, .js-form-item, .form-wrapper, .field) {
  margin-block-end: var(--space-m);
}

.fieldset-wrapper > :last-child {
  margin-block-end: 0;
}

/**
 * Nothing inside a panel may exceed it.
 *
 * Inputs are `inline-size: 100%` with border-box sizing, but a field can still
 * escape when Drupal gives it a `size` attribute or a widget sets its own
 * width. Capping every descendant is cheap insurance against a control running
 * past the panel edge.
 */
.fieldset-wrapper *,
.form-item > * {
  max-inline-size: 100%;
}

/**
 * Option lists.
 *
 * Sixteen genres, seven day-of-week boxes, a list of venues — any group past
 * about five wraps into responsive columns instead of one long ladder.
 */
.form-checkboxes,
.form-radios,
.form-item--checkboxes > div,
.form-item--radios > div,
.js-form-type-checkboxes > div,
.js-form-type-radios > div {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}

/**
 * A short set of options is a row, not a column.
 *
 * Yes / No / N/A stacked vertically down a full-width panel on the live form.
 * Radios are almost always a short set, so they get a tighter track than the
 * checkbox grid and sit inline until they genuinely need to wrap.
 */
.form-radios,
.form-item--radios > div,
.js-form-type-radios > div {
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), auto));
  justify-content: start;
  gap: var(--space-3xs) var(--space-l);
}

/* Date + time pairs sit side by side rather than stacking. */
.form-item--datetime > div,
.js-form-type-datetime > div,
.container-inline.form-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: end;
}

.form-item--datetime input,
.js-form-type-datetime input,
.js-form-type-datetime select {
  inline-size: auto;
  min-inline-size: 9rem;
  flex: 1 1 9rem;
}

/**
 * CKEditor.
 *
 * DARK CHROME, PAPER SHEET.
 *
 * The toolbar, dropdowns and panels are the theme's: they belong to the form
 * around them, and they are what the variables below paint. The WRITING AREA is
 * not. It is a light sheet with dark text, here and in the Drupal admin alike,
 * because that is the one arrangement that cannot come out white-on-white.
 *
 * It used to be dark with white text, matching the form. That works only while
 * this theme's CSS is the last word on the editor — and it is not: CKEditor
 * ships its own white editable surface, Claro adds more on the admin side, and
 * whichever loaded last decided the background while `color: #fff` stayed put.
 * The result was white text on a white sheet, in the /add form and in the
 * backend. A sheet that is light on purpose is legible whoever wins.
 *
 * The colours are set on the editable itself AND as CKEditor's own variables
 * scoped to it, so anything inside the content that reads `--ck-color-text`
 * gets the ink rather than the page's white. See css/theme/editor.css for the
 * copy of these values that Drupal loads inside the editor.
 */
:root {
  --ck-color-base-background: var(--input-bg);
  --ck-color-base-foreground: var(--surface-2);
  --ck-color-base-border: var(--border-subtle);
  --ck-color-base-text: var(--text-primary);
  --ck-color-text: var(--text-primary);
  --ck-color-toolbar-background: var(--surface-3);
  --ck-color-toolbar-border: var(--border-subtle);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--surface-2);
  --ck-color-button-on-background: var(--surface-2);
  --ck-color-button-on-color: var(--me-magenta-300);
  --ck-color-dropdown-panel-background: var(--surface-2);
  --ck-color-dropdown-panel-border: var(--border-subtle);
  --ck-color-panel-background: var(--surface-2);
  --ck-color-panel-border: var(--border-subtle);
  --ck-color-input-background: var(--input-bg);
  --ck-color-input-border: var(--border-subtle);
  --ck-color-input-text: var(--input-text);
  --ck-color-focus-border: var(--me-magenta);
  --ck-color-list-background: var(--surface-2);
  --ck-color-list-button-hover-background: var(--surface-3);
  --ck-border-radius: var(--radius-s);
}

/* The writing surface itself, named directly rather than through a variable. */
.ck.ck-editor__editable,
.ck.ck-editor__editable_inline,
.ck.ck-content,
.ck-source-editing-area textarea {
  /* Scoped, so descendants of the content read the ink and not the page. */
  --ck-color-text: var(--editor-ink);
  --ck-color-base-text: var(--editor-ink);
  --ck-color-base-background: var(--editor-paper);

  background-color: var(--editor-paper);
  color: var(--editor-ink);
  border-color: var(--input-border);
  min-block-size: 12rem;
}

/* The ring is drawn on the widget (see .ck.ck-editor:focus-within below), so
   the sheet must not draw a second one inside it. */
.ck.ck-editor__editable.ck-focused,
.ck.ck-editor__editable_inline.ck-focused {
  box-shadow: none;
}

/* The darker magenta, because these sit on the paper sheet, not on navy. */
.ck.ck-editor__editable a,
.ck.ck-content a { color: var(--me-magenta-700); }

.ck.ck-editor__editable :is(h1, h2, h3, h4, h5, h6),
.ck.ck-content :is(h1, h2, h3, h4, h5, h6) { color: var(--editor-ink); }

.ck.ck-editor__editable blockquote,
.ck.ck-content blockquote {
  border-inline-start: 3px solid var(--me-magenta);
  padding-inline-start: var(--space-s);
}

/* The placeholder CKEditor shows in an empty field. */
.ck.ck-editor__editable .ck-placeholder::before,
.ck.ck-editor__editable.ck-placeholder::before {
  color: var(--me-slate);
}

/**
 * One control, not two stacked rectangles.
 *
 * The widget is the frame — border, radius, clipping — and the toolbar and the
 * sheet inside it lose their own corners, so a dark bar sits flush on top of a
 * light sheet with a single rounded outline around both.
 */
.ck.ck-editor {
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  overflow: hidden;
}

.ck.ck-toolbar {
  background: var(--surface-3);
  border-color: var(--border-subtle);
  border-radius: 0;
  border-inline: 0;
  border-block-start: 0;
}

.ck.ck-editor .ck.ck-editor__editable,
.ck.ck-editor .ck.ck-editor__editable_inline {
  border: 0;
  border-radius: 0;
}

/* The focus ring belongs to the whole widget now, not to the sheet inside it. */
.ck.ck-editor:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--me-magenta) 35%, transparent);
}

.ck.ck-button,
.ck.ck-button .ck-icon,
.ck.ck-toolbar .ck-button__label {
  color: var(--text-primary);
}

.ck.ck-dropdown__panel,
.ck.ck-list {
  background: var(--surface-2);
  border-color: var(--border-subtle);
}

/**
 * CKEditor 4, if the site is still on it.
 *
 * CKEditor 4 puts the editing surface in an IFRAME, which page CSS cannot
 * reach at all — that is why a white body persists no matter what is written
 * here. The fix is the `ckeditor_stylesheets` entry in the .info.yml, which
 * loads css/theme/editor.css inside that iframe. These rules only handle the
 * chrome around it.
 */
.cke_chrome { border-color: var(--border-subtle) !important; }

.cke_top,
.cke_bottom,
.cke_contents {
  background: var(--surface-3) !important;
  border-color: var(--border-subtle) !important;
}

/* The character counter under the editor. */
.ck-word-count,
.js-text-count-wrapper,
.counter {
  color: var(--text-muted);
  font-size: var(--step--2);
  text-align: end;
}

/* CKEditor 4, if the site is still on it. */
.cke_chrome { border-color: var(--border-subtle) !important; }
.cke_top,
.cke_bottom {
  background: var(--surface-3) !important;
  border-color: var(--border-subtle) !important;
}

/**
 * The "About text formats" block Drupal appends under a rich-text field. It
 * rendered as a bare bulleted list of tips in the middle of the form.
 */
.filter-wrapper,
.filter-guidelines,
.text-format-wrapper .description {
  margin-block-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-s);
  background: var(--surface-well);
  color: var(--text-muted);
  font-size: var(--step--2);
}

.filter-wrapper ul,
.filter-guidelines ul {
  margin: 0;
  padding-inline-start: var(--space-m);
}

.filter-wrapper select {
  min-block-size: 2.25rem;
  inline-size: auto;
}

/**
 * The submit row.
 *
 * It used to be `position: sticky`, pinned near the foot of the viewport so it
 * was reachable at any scroll position. On a form as long as this one that put
 * a solid bar permanently across the genre checkboxes and the date fields —
 * visible in every screenshot of /add, and read as a bug rather than a
 * convenience. It sits at the end of the form now, where the visitor arrives at
 * it having filled the fields above it.
 */
.webform-submission-form .form-actions,
.node-form .form-actions {
  position: static;
  margin-block-start: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  /* Opaque. This panel was sticky in an earlier build, which is why it had a
     blur; it is `position: static` now and the blur was doing nothing but
     keeping a second filtered surface on the page. */
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
}

/* Required-field legend and inline help. */
.form-required-note,
.js-form-required-note {
  color: var(--text-muted);
  font-size: var(--step--2);
}

/* Image upload preview inside the form. */
.image-preview,
.image-widget-data {
  margin-block-start: var(--space-2xs);
}

.image-preview img {
  max-inline-size: 16rem;
  border-radius: var(--radius-s);
}

/* ===========================================================================
 * Third-party form widgets
 *
 * The theme itself loads none of these. But a *module* can attach them to an
 * exposed filter — Better Exposed Filters offers Select2 and Chosen widgets —
 * and when it does, the widget ships its own light stylesheet that the theme's
 * `select` rules never touch. That is why the Genre and Venue controls on the
 * search form rendered as white bars in a dark panel while the native selects
 * elsewhere on the same page were correct.
 *
 * These rules re-skin the widgets to the palette. If none is installed nothing
 * here matches and nothing is loaded — they cost only their bytes.
 * ======================================================================== */

/* --- Select2 ------------------------------------------------------------ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-block-size: var(--input-height);
  padding: 0.35rem var(--space-2xs);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--input-text);
  font-weight: var(--weight-medium);
  line-height: 2rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--input-placeholder);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--text-muted);
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--me-magenta) 35%, transparent);
}

.select2-dropdown {
  border: 1px solid var(--border-subtle);
  border-radius: var(--input-radius);
  background: var(--surface-2);
  color: var(--text-primary);
}

.select2-container--default .select2-results__option {
  background: transparent;
  color: var(--text-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--accent-solid);
  color: var(--me-white);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--input-text);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 1px solid color-mix(in srgb, var(--me-magenta) 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--me-magenta) 16%, transparent);
  color: var(--text-primary);
}

/* --- Chosen ------------------------------------------------------------- */

.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
  min-block-size: var(--input-height);
  padding: 0.55rem var(--space-xs);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  box-shadow: none;
  color: var(--input-text);
}

.chosen-container .chosen-drop {
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-primary);
}

.chosen-container .chosen-results li.highlighted {
  background: var(--accent-solid);
  color: var(--me-white);
}

.chosen-container .chosen-search input[type="text"] {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border-subtle);
}

/**
 * Native controls, stated explicitly.
 *
 * `background` alone can be undone by a stray `background-color` from another
 * stylesheet — a module's, or a leftover from the old theme — leaving a white
 * control on a dark panel. Naming background-color, color and color-scheme
 * separately makes each one its own declaration to beat, and color-scheme is
 * what tells the browser to paint the native dropdown chrome dark too.
 */
.exposed-form select,
.exposed-form input,
.exposed-form textarea,
.search-panel select,
.search-panel input,
.search-panel textarea,
.webform-submission-form select,
.node-form select {
  background-color: var(--input-bg);
  color: var(--input-text);
}

:root:not([data-me-theme="light"]) select,
:root:not([data-me-theme="light"]) input,
:root:not([data-me-theme="light"]) textarea {
  color-scheme: dark;
}