:root {
  /* Force dark color scheme; Pico would otherwise honour OS preference. */
  color-scheme: dark;

  /* Backgrounds */
  --pico-background-color: var(--bg);
  --pico-card-background-color: var(--surface);
  --pico-card-sectioning-background-color: var(--surface);

  /* Text */
  --pico-color: var(--white);
  --pico-h1-color: var(--white);
  --pico-h2-color: var(--white);
  --pico-h3-color: var(--white);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--border);

  /* Primary action — ice color */
  --pico-primary: var(--ice);
  --pico-primary-background: var(--ice);
  --pico-primary-border: var(--ice);
  --pico-primary-hover: var(--ice);
  --pico-primary-hover-background: color-mix(in srgb, var(--ice) 85%, white);
  --pico-primary-focus: var(--ice-glow);
  --pico-primary-inverse: var(--bg);

  /* Forms */
  --pico-form-element-background-color: var(--bg);
  --pico-form-element-border-color: var(--border);
  --pico-form-element-color: var(--white);
  --pico-form-element-placeholder-color: var(--muted);
  --pico-form-element-active-border-color: var(--ice);
  --pico-form-element-focus-color: var(--ice-glow);

  /* Borders */
  --pico-border-color: var(--border);
  --pico-card-border-color: var(--border);

  /* Typography — keep app fonts */
  --pico-font-family: 'DM Sans', sans-serif;
  --pico-font-weight: 300;
  --pico-line-height: 1.5;

  /* Tighter spacing on mobile */
  --pico-spacing: 0.75rem;
  --pico-form-element-spacing-vertical: 0.55rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
  --pico-border-radius: 8px;
}

/* Article margin: parent controls gaps */
article { margin-bottom: 0; }
article > header,
article > footer { padding: 0.65rem 1rem; }
article > header h3 { font-size: var(--fs-s); margin: 0; }

/* Restore individual button styling inside role=group (Pico joins them by default) */
[role="group"] {
  gap: .5rem;
}
[role="group"] > * {
  border-radius: var(--pico-border-radius) !important;
  margin: 0 !important;
}

/* Suppress Pico's <summary> chevron — bespoke select supplies its own */
summary::after { display: none !important; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Button stacks — suppress Pico's button margin-bottom so gap alone controls spacing */
.btn-stack > * { margin: 0 !important; }

/* Datetime-local inputs: keep font small so date+time fits
   beside browser calendar icon */
input[type="datetime-local"] { font-size: var(--fs-mini) !important; min-width: 0; }

/* Event RSVP button — icon SVG supplies the circle; suppress Pico's button border */
button.event-status-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 0 !important;
  outline: none;
}

/* Color swatches — Pico label defaults break the fixed-size circle */
.color-swatch {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

/* Tooltip — suppress Pico's <summary> chrome so surrounding text doesn't jump. */
.tooltip summary {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  list-style: none !important;
}

/* Toggle — Pico's fieldset label styles break the inline-flex toggle */
label.toggle {
  display: inline-flex !important;
  width: 42px !important;
  height: 24px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* ── Standardized form rhythm ── */
fieldset { margin-block: 0 1rem; padding: 0; border: 0; }
fieldset:last-child { margin-bottom: 0; }

fieldset > legend {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: .5rem;
}

fieldset label:not(.toggle):not(.field-label) {
  font-size: var(--fs-l);
  color: var(--white);
  margin-bottom: .25rem;
}

fieldset label > input,
fieldset label > select,
fieldset label > textarea {
  margin-bottom: .75rem;
}

/* Inline label + input row */
.field-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.field-row > label,
.field-row > .field-label {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  width: 90px;
  flex-shrink: 0;
  margin: 0;
}
.field-row > input,
.field-row > select,
.field-row > textarea,
.field-row > [role="group"],
.field-row > div,
.field-row > span.field-readonly {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* `.grid` polyfill — Pico's classless build omits this primitive.
   Scope-narrow on specific pages via more-specific selectors (e.g. .create-form .grid).
*/
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: .75rem;
}

/* Read-only field value */
.field-readonly {
  font-size: var(--fs-s);
  color: var(--white);
  padding: .35rem 0;
}