styles.css

/* Mobile-first. Single column below the wide-desktop breakpoint — wider
   screens up to that point just get more breathing room, same as before.
   At the wide-desktop tier (see "#form-view: two-column layout" further
   down), the form view splits into a form column and a live preview
   column side by side; every other view stays single-column at every
   width. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6ea;
  --border-strong: #c9cdd3;
  --text: #1c2128;
  --muted: #626c77;
  --error: #c4302f;
  --error-bg: #fcf1f1;
  --ok: #1a7f37;
  --accent: #3556c8;
  --accent-hover: #2a46a8;
  --accent-soft: #eef1fb;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(28, 33, 40, 0.06), 0 4px 12px rgba(28, 33, 40, 0.04);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0 auto;
  max-width: 48rem;
  padding: 1rem 1rem 6.5rem; /* room for the sticky action bar */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Matches the two-column form/preview layout's own total width (see
   "#form-view: two-column layout" further down) — every view (header,
   footer, the events list) gets the same wider column at this tier, not
   just the form. */
@media (min-width: 72rem) {
  body {
    max-width: 72rem;
  }
}

/* --- header ------------------------------------------------------------- */

header {
  margin: 0.5rem 0 1rem;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

header h1 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 0;
}

#repo-banner {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.15rem 0 0;
}

.lang-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.lang-switch select {
  min-height: 2rem;
  padding: 0.2rem 1.7rem 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--surface);
  background-position: right 0.55rem center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.lang-switch select:hover {
  border-color: var(--accent);
}

.lang-switch select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- warnings ------------------------------------------------------------ */

#warnings,
.warning-box {
  background: #fff8e1;
  border: 1px solid #e6c65c;
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

#warnings p,
.warning-box p {
  margin: 0.2rem 0;
}

/* --- connect a fork (generator mode) ------------------------------------ */
/* Dialog chrome (border/shadow/padding/width/backdrop/h2 margin+size) is
   shared with #import-dialog/#jsonld-dialog further down. */

#repo-connect-text {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}

#repo-connect-text code {
  font-size: 0.85em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}

#repo-connect-form {
  display: flex;
  gap: 0.5rem;
}

#repo-connect-input {
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
}

#repo-connect-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#repo-connect-form button {
  flex: 0 0 auto;
}

#repo-connect-error {
  margin: 0.5rem 0 0;
}

#repo-connect-help {
  margin: 0.5rem 0 0;
}

#repo-connect-help a {
  color: var(--accent);
  font-weight: 500;
}

/* --- mode / profile bar ------------------------------------------------- */

#mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

/* :not([hidden]) — a plain `display: flex` here would win over the
   `hidden` attribute's UA-stylesheet `display: none`, since author rules
   always beat UA defaults regardless of specificity. */
#profile-switch:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mode-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.mode-toggle label {
  position: relative;
}

.mode-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mode-toggle span {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--muted);
}

.mode-toggle input:checked + span {
  background: var(--accent);
  color: #fff;
}

.mode-toggle input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Form/Preview switch — narrow viewports only, see "#form-view: two-column
   layout" for the wide-breakpoint override that hides this entirely. */
#preview-toggle {
  margin: 0 0 0.75rem;
}

.description-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.4rem 0;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- section nav ---------------------------------------------------------- */
/* Sticks to the top once scrolled past — same visual language as #action-bar
   (blurred translucent band) so the two sticky bars read as one system. */

/* Mobile-first: a hamburger toggle opening a dropdown list. Under 40rem
   there isn't room for 8 section pills without horizontal scrolling. */
#section-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.6rem 0;
  margin: 0 0 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

#section-nav-toggle {
  min-height: 2rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

#section-nav-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Shared dropdown panel: the section-nav hamburger list (mobile) and the
   "+ New event" menu both toggle-open/outside-click-close the same way
   (main.ts's wireDropdown) and share this look. */
.dropdown-panel {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  position: absolute;
  left: 0;
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
}

.dropdown-panel.open {
  display: flex;
}

.dropdown-panel button {
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.dropdown-panel button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

#section-nav-toggle:focus-visible,
#new-event-toggle:focus-visible,
.dropdown-panel button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Full-width under the sticky nav bar — the "+ New event" menu stays
   content-sized (.dropdown-panel's plain `left: 0`). */
#section-nav-list {
  right: 0;
}

@media (min-width: 40rem) {
  #section-nav {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
  }

  #section-nav-toggle {
    display: none;
  }

  #section-nav-list {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: none;
    border: none;
    box-shadow: none;
  }

  #section-nav-list button {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
  }

  #section-nav-list button:hover {
    background: none;
    border-color: var(--accent);
  }
}

/* --- "+ New event" menu ---------------------------------------------------- */

.menu-button:not([hidden]) {
  position: relative;
  display: inline-flex;
}

/* Visually hidden but still a real, focusable-by-script form control. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profile-switch-label {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.9rem;
}

#back-to-list {
  margin: 1rem 0;
}

/* --- events list view (repo mode's landing view) ------------------------- */

.events-list-toolbar {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0;
}

.toolbar-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toolbar-toggle-label {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

#events-search {
  flex: 1;
  min-width: 12rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}

#events-search:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#events-search:disabled {
  background: var(--bg);
  color: var(--muted);
}

/* The grid/card rendering itself lives inside the <ote-events> widget's own
   shadow root (apps/embed) — this just places it and matches its accent
   color to the editor's own palette via the widget's documented --ote-*
   custom-property theming hook (see apps/embed/CLAUDE.md). */
#events-widget {
  display: block;
  margin-top: 1rem;
  --ote-accent: var(--accent);
  --ote-accent-soft: var(--accent-soft);
}

/* --- form sections ---------------------------------------------------------- */

#event-form details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.25rem 1rem;
  margin-bottom: 0.9rem;
}

#event-form summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.7rem 0;
  list-style: none; /* the native marker misaligns; we draw our own */
  user-select: none;
}

#event-form summary::-webkit-details-marker {
  display: none;
}

#event-form summary::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); /* ▸ closed */
  transition: transform 0.15s;
}

#event-form details[open] summary::before {
  transform: rotate(45deg); /* ▾ open */
}

#event-form details[open] summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.35rem;
}

/* --- fields ---------------------------------------------------------------- */

.field {
  margin: 0.85rem 0;
}

.field label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.field .req {
  color: var(--error);
}

.field input[type="text"],
.field input[type="url"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field textarea,
.field select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}

/* Custom caret, vertically centered — the native one drifts with our
   padding/min-height. Shared by every select in the app. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1.5 6 6.5 11 1.5" fill="none" stroke="%23626c77" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2.1rem;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Read-only until its own "edit" toggle unlocks it — geo Lat/Lon (text) and
   the Metadata Slug/Id fields (Id is a "url" input) all use this. Reads as
   plain text, not an editable box, until then. Left/right padding drops to
   0 so the value lines up with its own label above it instead of looking
   indented inside an empty box. */
.field input[type="text"][readonly],
.field input[type="url"][readonly] {
  border-color: transparent;
  background: none;
  padding-left: 0;
  padding-right: 0;
  cursor: default;
}

.field input[type="text"][readonly]:focus-visible,
.field input[type="url"][readonly]:focus-visible {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
}

.field .note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
}

.field-error {
  color: var(--error);
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--error);
}

.field-error:not(:empty) {
  background: var(--error-bg);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
}

.field.pair:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.field.pair > div {
  flex: 1;
}

/* Sub-field width hints (`size-s/m/l`, set per control in FIELD_SPECS/
   REPEATER_SPECS) — a Price or Currency shouldn't claim as much row width
   as a Name or URL just because they're neighbors. Unset = default (m). */
.field.pair > div.size-s {
  flex: 0 1 90px;
}

.field.pair > div.size-l {
  flex: 2 1 220px;
}

.field.pair > div.size-full {
  flex: 1 1 100%;
}

/* Checkboxes (Covers travel/accommodation…) size to their own label, never
   stretched or squeezed — a shrunk column is what makes a short label like
   "Covers travel" wrap into two lines for no reason. */
.field.pair > div:has(> input[type="checkbox"]) {
  flex: 0 0 auto;
}

.field.pair > div:has(> input[type="checkbox"]) label {
  white-space: nowrap;
}

/* Every other field stacks its label above the input — wrong for a single
   checkbox, which reads left-to-right as "[x] Label" on one line. Matches
   form.ts appending the checkbox before its label for kind: "checkbox"
   (renderControl, renderRepeaterItemControl) and the bare "All-day event"
   field (renderField's isBareCheckbox branch). */
.field:has(> input[type="checkbox"]),
.field div:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field:has(> input[type="checkbox"]) > label,
.field div:has(> input[type="checkbox"]) label {
  display: inline;
  margin-bottom: 0;
}

.field.pair label {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Map position: the hint, the pin's live coordinates and the "Edit
   manually" toggle collapsed onto one line (ui/form.ts's fieldId ===
   "geo" branch) instead of a separate labeled Latitude/Longitude row. */
.geo-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
}

.geo-coords {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}

/* Overrides the general `.field input[type="text"]` width:100% — these
   sit inline in a running line of text, not a block field of their own.
   No [readonly] guard: stays this compact whether or not "Edit manually"
   has unlocked them. */
.geo-summary .geo-coords input[type="text"] {
  width: 6.5rem;
  min-height: 1.6rem;
  font: inherit;
  font-size: 0.82rem;
}

.geo-summary .link-button {
  margin-top: 0;
}

/* Venue: the text input and its "Find on map" button on one line
   (ui/form.ts's renderOne, id === "venue"). align-items: stretch (rather
   than center) plus .icon-button's own height: auto below make the
   button match the input's actual rendered height exactly, instead of
   guessing a fixed height that has to be kept in sync by hand. */
.venue-search-row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.venue-search-row input {
  flex: 1;
}

.venue-search-row .icon-button {
  height: auto;
  width: 2.6rem;
}

.venue-geocode-hint {
  display: block;
  margin-top: 0.3rem;
}

/* --- Google-Calendar-style single-line date/time — shared by the main
   form's merged Start+End row and each recurrence row's date/time line;
   see renderStartEndRow / renderRow's datetimeRow in ui/form.ts. ------- */

.datetime-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem;
}

.datetime-row > div {
  flex: 1 1 130px;
}

.datetime-row > .field {
  margin: 0;
}

.datetime-to {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding-bottom: 0.5rem;
}

/* Recurrence rows sit inside a .repeater-item, much narrower than the main
   form's own Start+End row — 130px per field (4-5 of them) doesn't fit on
   one line there. Tighter, scoped sizing: dates keep enough room for
   "dd/mm/yyyy", times (shorter content, and there are two of them) get
   less. flex-grow: 0 (unlike the main form's row) — letting all 5 items
   grow to fill the row's extra width was exactly what pushed the 5th one
   onto its own line; better to leave unused space at the row's end than
   to inflate 4 fields past what they need and starve the 5th. */
.recurrence-rows .datetime-row > div {
  flex: 0 1 130px;
}

.recurrence-rows .datetime-row > div.dt-time {
  flex: 0 1 90px;
}

.info-wrap {
  position: relative;
  display: inline-block;
}

.info {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--accent);
  font-weight: 400;
  /* The glyph itself stays small; the tappable area doesn't (WCAG 2.5.8). */
  min-width: 1.5rem;
  min-height: 1.5rem;
}

.info[aria-expanded="true"] {
  color: var(--accent-hover);
}

.info-popover {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  margin-top: 0.3rem;
  width: max-content;
  max-width: 20rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
}

/* --- chips (languages, tags) ------------------------------------------------ */

.chips {
  position: relative;
}

.chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
}

.chips-list:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.15rem 0.3rem 0.15rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 500;
}

.chip-remove {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
  /* 24x24 CSS px minimum touch target (WCAG 2.2 SC 2.5.8) — the glyph stays
     small, the hit area doesn't. Compact by design: it sits inline in a
     pill, unlike .repeater-remove which has room to go bigger. */
  min-width: 1.5rem;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
}

.chip-remove:hover {
  background: rgba(53, 86, 200, 0.15);
}

.chips-input {
  flex: 1;
  min-width: 8rem;
  border: none !important;
  box-shadow: none !important;
  min-height: 1.8rem !important;
  padding: 0.1rem !important;
}

.chips-input:focus-visible {
  outline: none;
}

.chips-suggest {
  position: absolute;
  z-index: 500;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 14rem;
  overflow-y: auto;
}

.chips-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.chips-suggest button:hover,
.chips-suggest li.active button {
  background: var(--accent-soft);
}

/* Category shown after a tag suggestion's label, muted and pushed right. */
.chips-cat {
  margin-left: 0.75rem;
  float: right;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.chips-explore {
  display: block;
}

/* --- tag explorer dialog ----------------------------------------------------- */

.tag-explorer {
  position: relative;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(28, 33, 40, 0.25);
  padding: 1.25rem;
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 4rem));
}

.tag-explorer::backdrop {
  background: rgba(28, 33, 40, 0.45);
}

.tag-explorer h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

/* Shared by every dialog's corner close button (tag explorer, image lightbox). */
.dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  min-width: 2rem;
  min-height: 2rem;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}

.dialog-close:hover {
  background: var(--error-bg);
  color: var(--error);
}

.tag-explorer-body {
  overflow-y: auto;
  max-height: calc(min(34rem, calc(100vh - 4rem)) - 4rem);
}

.tag-explorer-group {
  margin-bottom: 1rem;
}

.tag-explorer-group h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.tag-explorer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag-explorer-tag {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.tag-explorer-tag:hover {
  border-color: var(--accent);
}

.tag-explorer-tag.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.tag-explorer-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
}

.tag-explorer-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: inherit;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.tag-explorer-category:hover {
  border-color: var(--accent);
}

.tag-explorer-category-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  background: var(--bg);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.tag-explorer-back {
  display: block;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.tag-explorer-back:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --- image preview + lightbox ------------------------------------------------ */

.repeater-item-fields > .image-preview {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}

.image-preview-trigger {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
}

.image-preview-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-lightbox {
  position: relative;
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  width: min(90vw, 60rem);
  max-height: 90vh;
}

.image-lightbox::backdrop {
  background: rgba(20, 22, 26, 0.8);
}

.image-lightbox img {
  display: block;
  width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.image-lightbox .dialog-close {
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(20, 22, 26, 0.6);
  color: #fff;
}

.image-lightbox .dialog-close:hover {
  background: var(--error);
  color: #fff;
}

/* --- repeaters (organizers, image, offers) ---------------------------------- */

.repeater .note {
  margin-top: -0.1rem;
}

.repeater-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Right padding leaves room for .repeater-remove's larger touch target. */
  padding: 0.6rem 2.75rem 0.6rem 0.6rem;
  margin: 0.5rem 0;
  background: var(--bg);
}

.repeater-item-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.repeater-item-fields > div,
.repeater-item-fields > input,
.repeater-item-fields > select {
  flex: 1 1 130px;
}

/* Same size-s/m/l hint as .field.pair (see there for why). */
.repeater-item-fields > div.size-s {
  flex: 0 1 90px;
}

.repeater-item-fields > div.size-l {
  flex: 2 1 200px;
}

.repeater-item-fields > div.size-full {
  flex: 1 1 100%;
}

.repeater-item-fields label {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.repeater-item-fields input,
.repeater-item-fields select,
.repeater-item-fields textarea {
  width: 100%;
  min-height: 2.3rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: inherit;
}

.repeater-item-fields textarea {
  resize: vertical;
}

.repeater-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  /* A standalone corner button has room, unlike .chip-remove — sized close
     to the 44x44 CSS px touch-target guidance (WCAG 2.5.5, AAA). */
  min-width: 2.25rem;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}

.repeater-remove:hover {
  background: var(--error-bg);
  color: var(--error);
}

.repeater-add {
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
}

/* --- chippable sections (What/Where/Who/File & metadata's optional fields) - */

.advanced-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* No reserved padding here (unlike .repeater-item) — the field keeps its
   full width and the "×" just floats over the corner, low-key until
   hovered, since it lands on the label row rather than the input itself. */
.advanced-block {
  position: relative;
}

.advanced-block > .repeater-remove {
  min-width: 1.75rem;
  min-height: 1.75rem;
  font-size: 1rem;
  opacity: 0.55;
}

.advanced-block > .repeater-remove:hover {
  opacity: 1;
}

/* A nudge, not a different affordance — same shape/size as a plain
   .repeater-add chip, just colored to stand out among purely optional ones. */
.repeater-add.recommended {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* The bulk show/hide toggle isn't a specific field like its sibling chips —
   dashed and muted so it doesn't compete with them for attention. */
.repeater-add.show-all-fields {
  border-style: dashed;
  color: var(--muted);
}

/* --- translations ------------------------------------------------------------ */
/* Language cards reuse .repeater-item/.repeater-item-fields as-is; these are
   the bits specific to a translation slot. */

.translation-lang {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
}

.translation-original {
  font-style: italic;
}

/* The "add a language" picker sits inside the card list, styled like a
   chips-input but without a chip list above it (the cards below play that
   role). */
.repeater .chips {
  margin: 0.5rem 0;
  max-width: 20rem;
}

/* --- combobox (timezone) ---------------------------------------------------- */

.combo-field {
  position: relative;
}

.combo-suggest {
  position: absolute;
  z-index: 500;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 14rem;
  overflow-y: auto;
}

.combo-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  min-height: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
}

.combo-suggest button:hover,
.combo-suggest li.active button {
  background: var(--accent-soft);
}

/* --- Leaflet location picker ------------------------------------------------ */

.geo-search {
  display: flex;
  gap: 0.5rem;
  margin: 0.4rem 0;
}

.geo-search input {
  flex: 1;
}

.geo-results {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.geo-results li {
  padding: 0;
}

.geo-results button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.geo-results button:hover {
  background: var(--accent-soft);
}

.geo-map {
  height: 14rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 0.25rem;
  /* Contain Leaflet's own stacking (panes, controls at z-index 1000, and the
     GPU-composited tile pane) inside the map. Without a stacking context here,
     those layers leak into the root context and paint over the fixed
     #action-bar — its backdrop-filter layer otherwise loses to the map's
     composited tiles regardless of z-index. */
  position: relative;
  z-index: 0;
}

@media (min-width: 40rem) {
  .geo-map {
    height: 17rem;
  }
}

/* In-map search control (ui/map.ts's SearchControl) — a corner control
   like Leaflet's own zoom buttons, collapsed to just the icon until
   clicked, so it doesn't compete with the map for space by default. */
.geo-map-search {
  position: relative;
}

.geo-map-search-toggle {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.geo-map-search-panel {
  position: absolute;
  top: 0;
  left: calc(100% + 0.4rem);
  z-index: 1000;
  width: 15rem;
  max-width: calc(100vw - 3rem);
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.geo-map-search-panel .geo-search {
  margin: 0;
}

.geo-map-search-panel .geo-results {
  margin: 0.4rem 0 0;
}

/* A button that should read as a link, not a bordered control — e.g. the
   rarely-needed "enter coordinates manually" fallback under the map. */
.link-button {
  border: none;
  background: none;
  min-height: 0;
  padding: 0;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
}

.link-button:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* "Select all"/"Select none" above an occurrence checklist (Delete series)
   — its .link-buttons need their own top margin cancelled since they're
   already spaced by this row's own margin. */
.occurrence-select-all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.occurrence-select-all .link-button {
  margin-top: 0;
}

/* "Edit series": a field whose value already differs across the series
   (mountBulkEditDivergence in main.ts) gets a small clickable badge next to
   its label — click opens #bulk-edit-divergence-dialog to see which
   occurrences and their values. */
.bulk-edit-divergence-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid #e6c65c;
  border-radius: 999px;
  background: #fff8e1;
  color: #7a5b00;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
}

.bulk-edit-divergence-badge:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Undo just this field's edit back to the template's original value —
   distinct from the whole-form Reset button. Sits inline next to the label,
   so .link-button's own top margin (meant for a block-level fallback link)
   would misalign it here. */
.bulk-edit-field-reset.link-button {
  display: inline;
  margin-top: 0;
  margin-left: 0.5rem;
}

.geo-pin {
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: rotate(-45deg);
  cursor: grab;
}

/* geo: hint sits between the map and the coordinate inputs */
[data-field-id="geo"] .note {
  margin: 0.35rem 0;
}

/* Venue and its map are one block: the geo field nests under the venue
   input (ui/form.ts renders it inside), visually a continuation. */
[data-field-id="venue"] [data-field-id="geo"] {
  margin: 0.6rem 0 0.25rem;
}

[data-field-id="venue"] [data-field-id="geo"] > label {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
}

/* --- document errors ---------------------------------------------------------- */

#document-errors {
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid #eccfcf;
  border-radius: var(--radius);
  font-size: 0.88rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem 0.6rem 2rem;
}

/* --- form/preview layout ---------------------------------------------------- */

/* Mobile-first default: the live preview column is off-screen entirely,
   and #preview-toggle (in #form-column) switches which one of
   #form-column/#preview-column is shown. Below the wide-desktop tier this
   stays a single column throughout, same as every other view in the app. */
#preview-column {
  display: none;
}

#form-view[data-mobile-tab="preview"] #form-column {
  display: none;
}

#form-view[data-mobile-tab="preview"] #preview-column {
  display: block;
}

@media (min-width: 72rem) {
  /* Two-column layout: form on the left, live preview on the right, both
     always visible — #preview-toggle is hidden below (nothing to switch
     between anymore). 44rem + 2rem gap + 26rem = 72rem, matching this
     tier's own min-width and this file's widened `body` max-width, so the
     grid never renders cramped right at the breakpoint edge. */
  #form-view:not([hidden]) {
    display: grid;
    grid-template-columns: 44rem 26rem;
    gap: 2rem;
    align-items: start;
  }

  #preview-toggle {
    display: none;
  }

  /* Matches the specificity of the mobile-tab rules above
     (#form-view[data-mobile-tab="…"] #form-column/#preview-column) so this
     override actually wins by source order — a plain `#form-column,
     #preview-column { display: block }` here would lose to those rules
     whenever data-mobile-tab happens to still be "preview" from a narrower
     viewport (main.ts doesn't reset it on resize). */
  #form-view[data-mobile-tab="form"] #form-column,
  #form-view[data-mobile-tab="preview"] #form-column,
  #form-view[data-mobile-tab="form"] #preview-column,
  #form-view[data-mobile-tab="preview"] #preview-column {
    display: block;
  }

  #preview-column {
    position: sticky;
    top: 1rem;
  }

  #preview-column h2 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: var(--muted);
  }
}

/* --- action bar ------------------------------------------------------------- */

/* :not([hidden]) — bulk-edit mode toggles this off in favor of
   #bulk-edit-banner; an unconditional `display:` here would silently win
   over that (see apps/editor/CLAUDE.md). */
#action-bar:not([hidden]) {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem max(1rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}

#action-bar > * {
  flex: 0 0 auto;
}

#repo-output-actions:not([hidden]),
#generator-output-actions:not([hidden]) {
  display: inline-flex;
  gap: 0.6rem;
}

#valid-badge {
  margin-right: auto;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  background: none;
  min-height: 0;
  padding: 0;
  cursor: default;
}

#valid-badge.invalid {
  cursor: pointer;
  text-decoration: underline;
}

#valid-badge.ok {
  color: var(--ok);
}

#valid-badge.invalid {
  color: var(--muted);
}

@media (min-width: 52rem) {
  /* :not([hidden]) needed here too — otherwise this has lower specificity
     than the base #action-bar:not([hidden]) rule above, so its left/right
     silently lose against that rule's left:0/right:0 despite coming later
     in the cascade, leaving width:48rem anchored at left:0 and then shoved
     off-screen by translateX(-50%) (half its own width, not centered). */
  #action-bar:not([hidden]) {
    left: 50%;
    z-index: 9999;
    right: auto;
    transform: translateX(-50%);
    width: 48rem;
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

@media (min-width: 72rem) {
  /* Same centering mechanism as the 52rem tier above, just spanning the
     wider two-column content width (form + gap + preview, see "#form-view:
     two-column layout") instead of the single form column — the action bar
     reads as applying to the whole page, not just the form side. */
  #action-bar:not([hidden]) {
    width: 72rem;
  }
}

/* --- buttons -------------------------------------------------------------- */

button {
  font: inherit;
  font-weight: 500;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.primary:hover {
  background: var(--accent-hover);
}

button.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

button.danger {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

button.danger:hover {
  opacity: 0.9;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- review dialog ------------------------------------------------------------ */

#review {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(28, 33, 40, 0.25);
  padding: 1.25rem;
  width: min(34rem, calc(100vw - 2rem));
}

#review::backdrop {
  background: rgba(28, 33, 40, 0.45);
}

#review h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

#review-json {
  background: #22272e;
  color: #adbac7;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  max-height: 50vh;
  margin: 0 0 0.5rem;
}

/* JSON syntax highlight (tokens from lib/highlight.ts) */
.j-key {
  color: #6cb6ff;
}

.j-string {
  color: #96d0a0;
}

.j-number {
  color: #daaa7d;
}

.j-literal {
  color: #dcbdfb;
}

#review .actions {
  justify-content: flex-end;
}

/* --- detected-events list (shared by both import dialogs) ------------------------ */

#jsonld-warnings {
  background: #fff8e1;
  border: 1px solid #e6c65c;
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

#jsonld-warnings p {
  margin: 0.2rem 0;
}

#jsonld-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 14rem;
  overflow-y: auto;
}

#jsonld-list label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

#jsonld-list label:hover {
  background: var(--accent-soft);
}

#jsonld-list input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

#jsonld-dialog .actions {
  justify-content: flex-end;
}

#jsonld-fallback .actions {
  justify-content: flex-start;
}

/* --- feedback footer -------------------------------------------------------------- */

footer {
  margin-top: 2rem;
  text-align: center;
}

#feedback-link {
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}

#feedback-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --- ICS import ----------------------------------------------------------------- */

#import-dialog,
#jsonld-dialog,
#repo-connect,
#delete-dialog,
#delete-series-dialog,
#recurrence-dialog,
#recurrence-custom-dialog,
#series-dialog {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(28, 33, 40, 0.25);
  padding: 1.25rem;
  width: min(34rem, calc(100vw - 2rem));
}

#import-dialog::backdrop,
#jsonld-dialog::backdrop,
#repo-connect::backdrop,
#delete-dialog::backdrop,
#delete-series-dialog::backdrop,
#recurrence-dialog::backdrop,
#recurrence-custom-dialog::backdrop,
#series-dialog::backdrop {
  background: rgba(28, 33, 40, 0.45);
}

#import-dialog h2,
#jsonld-dialog h2,
#repo-connect h2,
#delete-dialog h2,
#delete-series-dialog h2,
#recurrence-dialog h2,
#recurrence-custom-dialog h2,
#series-dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

/* --- "Edit series" bulk edit: wider than the shared 34rem dialog group
   above (it lists ~24 fields), with its own scrollable body so the
   Cancel/Review & submit actions stay reachable without the whole page
   scrolling. --------------------------------------------------------------- */

/* --- description "expand" dialog: deliberately larger than the shared
   34rem dialog group above — the whole point is seeing a long description
   as a whole, not a compact confirmation. ---------------------------------- */

#description-editor-dialog {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(28, 33, 40, 0.25);
  padding: 1.25rem;
  width: min(46rem, calc(100vw - 2rem));
  height: min(75vh, 42rem);
}

/* Native <dialog> relies on the UA stylesheet's dialog:not([open]) {
   display: none } — an unconditional `display:` here would win over that
   (same author-vs-UA-stylesheet pitfall as [hidden], see CLAUDE.md), so
   the flex layout only applies once the dialog is actually open. */
#description-editor-dialog[open] {
  display: flex;
  flex-direction: column;
}

#description-editor-dialog::backdrop {
  background: rgba(28, 33, 40, 0.45);
}

#description-editor-dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

#description-editor-mode {
  align-self: flex-start;
  margin-bottom: 0.75rem;
}

/* Toggled via .hidden in main.ts — must stay scoped to :not([hidden]), or
   this display: rule silently wins over the [hidden] attribute (see
   apps/editor/CLAUDE.md). */
#description-editor-textarea:not([hidden]),
#description-editor-preview:not([hidden]) {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#description-editor-textarea {
  resize: none;
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

.description-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
}

/* Toggled via .hidden — see the CLAUDE.md note above for why this stays
   scoped to :not([hidden]) instead of a bare selector. */
[data-role="description-inline-preview"]:not([hidden]) {
  display: block;
  min-height: 4.5rem;
}

.description-preview :first-child {
  margin-top: 0;
}

.description-preview :last-child {
  margin-bottom: 0;
}

.description-preview h1,
.description-preview h2,
.description-preview h3 {
  margin: 1em 0 0.4em;
}

.description-preview p,
.description-preview ul,
.description-preview ol,
.description-preview blockquote {
  margin: 0 0 0.8em;
}

.description-preview blockquote {
  border-left: 3px solid var(--border-strong);
  padding-left: 0.75rem;
  color: var(--muted);
}

.description-preview code {
  background: var(--bg);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

.description-preview pre code {
  display: block;
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
}

#description-editor-dialog .actions {
  justify-content: flex-end;
}

/* --- feed settings view -------------------------------------------------- */

#feed-settings-view {
  max-width: 34rem;
}

#feed-settings-view h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

#feed-settings-view h3 {
  margin: 1.5rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
}

#feed-settings-view h3:first-of-type {
  margin-top: 1rem;
  padding-top: 0;
  border-top: none;
}

#feed-settings-view h3 + .hint {
  margin-bottom: 1rem;
}

/* Note/warning/quick-fill inserted after the (reused, event-form) organizers
   repeater's own label — see main.ts's renderFeedOrganizers. */
.organizers-feed-note {
  margin: 0.3rem 0 0.75rem;
}

.organizers-quick-fill {
  margin-bottom: 0.75rem;
}

.warning-box.organizers-warning {
  margin: 0.5rem 0 0.75rem;
}

#feed-settings-view .actions {
  margin-top: 1.25rem;
}

#delete-dialog-event-name {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.import-sources {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.75rem 0;
}

#import-url-form {
  display: flex;
  gap: 0.5rem;
}

#import-url-form input,
#jsonld-url-form input {
  flex: 1;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
}

#jsonld-url-form {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

#jsonld-fallback {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

#jsonld-fallback p {
  margin: 0 0 0.5rem;
}

#jsonld-fallback textarea {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.5rem;
}

#import-warnings {
  background: #fff8e1;
  border: 1px solid #e6c65c;
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

#import-warnings p {
  margin: 0.2rem 0;
}

#import-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 14rem;
  overflow-y: auto;
}

#import-list label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

#import-list label:hover {
  background: var(--accent-soft);
}

#import-list input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

/* --- recurrence: results dialog + shared .recurrence-fields (also used by
   the custom dialog's monthly ordinal+weekday pair) ------------------------ */

.recurrence-fields:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0;
}

.recurrence-field:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.recurrence-field select,
.recurrence-field input {
  min-height: 2.3rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
}

.recurrence-field select {
  /* Same caret-overlap fix as .recurrence-custom-row select above — right
     padding must match the global select{} rule's reserved space. */
  padding-right: 2.1rem;
}

#recurrence-warnings {
  background: #fff8e1;
  border: 1px solid #e6c65c;
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

#recurrence-warnings p {
  margin: 0.2rem 0;
}

.warning-ack-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e6c65c;
}

.warning-ack {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  cursor: pointer;
}

.warning-ack-row .hint {
  margin: 0;
}

/* Reads as a real inline hyperlink (underlined, accent color) rather than
   the muted/hover-only treatment .link-button uses elsewhere — it's sitting
   mid-sentence here, not next to a labelled control, so it needs to look
   clickable without a hover to prove it. */
.warning-ack-row .link-button {
  margin-top: 0;
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline;
}

.warning-ack input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

#recurrence-list,
#bulk-edit-list,
#delete-series-list,
#bulk-edit-divergence-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 14rem;
  overflow-y: auto;
}

#bulk-edit-divergence-list li {
  padding: 0.4rem 0.5rem;
  font-size: 0.9rem;
}

#bulk-edit-divergence-list li + li {
  border-top: 1px solid var(--border);
}

#bulk-edit-divergence-list .occurrence-name {
  font-weight: 500;
}

#bulk-edit-divergence-list pre {
  margin: 0.2rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  color: var(--muted);
}

#recurrence-list label,
#bulk-edit-list label,
#delete-series-list label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

#recurrence-list label:hover,
#bulk-edit-list label:hover,
#delete-series-list label:hover {
  background: var(--accent-soft);
}

#recurrence-list input[type="checkbox"],
#bulk-edit-list input[type="checkbox"],
#delete-series-list input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

#recurrence-dialog .actions,
#delete-series-dialog .actions {
  justify-content: flex-end;
}

/* --- recurrence: inline row list in "Cuándo" -------------------------------- */

.recurrence-rows .repeater-item-fields label {
  display: block;
}

.recurrence-rows > .hint {
  margin-top: 0.5rem;
}

/* --- recurrence: "Custom recurrence" dialog --------------------------------- */

.recurrence-custom-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.recurrence-custom-row input[type="number"] {
  width: 4.5rem;
  min-height: 2.3rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
}

.recurrence-custom-row select {
  min-height: 2.3rem;
  /* Right padding matches the global select{} rule's reserved caret
     space (styles.css:606) — this rule's higher specificity would
     otherwise shrink it to 0.6rem, letting the dropdown arrow overlap
     longer option text like "semana"/"último". */
  padding: 0.4rem 2.1rem 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
}

#recurrence-custom-weekdays-field {
  margin: 0 0 1rem;
}

#recurrence-custom-weekdays {
  display: flex;
  gap: 0.4rem;
}

.weekday-toggle {
  /* Overrides the global button{}'s min-height: 2.5rem and horizontal
     padding (styles.css:1491) — left in place, a 2.2rem height loses to
     the taller min-height, rendering an oval instead of a circle, and
     the default padding leaves almost no room for flex-centering to
     work with on a single letter. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.weekday-toggle:hover {
  background: var(--accent-soft);
}

.weekday-toggle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#recurrence-custom-monthly-field {
  margin: 0 0 1rem;
}

#recurrence-custom-ends {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin: 0.75rem 0;
}

#recurrence-custom-ends legend {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0 0.3rem;
}

#recurrence-custom-ends label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

#recurrence-custom-ends-date,
#recurrence-custom-ends-count {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
}

#recurrence-custom-ends-count {
  width: 4rem;
}

#recurrence-custom-dialog .actions {
  justify-content: flex-end;
}

/* --- "Link to a series" (When section entry point + dialog) ---------------- */

/* The recurrence rows' own entry point/summary — same "hint text plus an
   inline link-styled button" treatment as .geo-summary. :not([hidden]):
   an author display: rule beats the UA [hidden] { display: none } rule
   regardless of specificity — see apps/editor/CLAUDE.md. */
.series-link:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
}

.series-link .link-button {
  margin-top: 0;
}

#series-search-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 14rem;
  overflow-y: auto;
}

#series-search-list button {
  display: block;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#series-search-list button:hover {
  background: var(--accent-soft);
}

/* Compact "Series id (URL): https://… ⓘ · Edit" line — hidden until a
   name exists (nothing to suggest an id from yet), then sits on one row
   instead of its own label/input/hint/button stack. Same flex-row-of-
   inline-bits treatment as .geo-summary. */
/* :not([hidden]): an author display: rule beats the UA [hidden] {
   display: none } rule regardless of specificity — see
   apps/editor/CLAUDE.md. Bitten by this once already in this file
   (.series-link) — same fix here. */
.series-id-summary:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
  margin-top: 0.5rem;
}

.series-id-summary input[type="url"] {
  flex: 1 1 12rem;
  width: auto;
  min-height: 1.6rem;
  font: inherit;
  font-size: 0.82rem;
}

.series-id-summary .link-button {
  margin-top: 0;
}

#series-dialog .actions {
  justify-content: flex-end;
}

/* --- feed settings: default-profile field checklist ------------------------- */

.field-checklist {
  margin: 0.5rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 18rem;
  overflow-y: auto;
}

.field-checklist label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.field-checklist label:hover {
  background: var(--accent-soft);
}

.field-checklist input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

.field-checklist-section {
  margin: 0.6rem 0 0.15rem;
  padding: 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.field-checklist-section:first-child {
  margin-top: 0.15rem;
}

/* --- "Connect a feed": recently-connected + adopters lists -------------------- */

#repo-connect-recent,
#repo-connect-adopters {
  margin: 0.75rem 0;
}

.picker-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 12rem;
  overflow-y: auto;
}

.picker-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
}

.picker-list li:hover {
  background: var(--accent-soft);
}

.picker-list-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.picker-list-info strong {
  font-size: 0.88rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-list-info span {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-list li button {
  flex: none;
  min-height: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
}

.picker-list li a {
  flex: none;
  font-size: 0.82rem;
}

.picker-list-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
}

/* "×" to forget a recently-connected entry — same visual language as
   .repeater-remove, but a normal flex item rather than absolutely
   positioned, since this list's rows have room for it inline. */
.picker-list-remove {
  flex: none;
  min-width: 1.75rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}

.picker-list-remove:hover {
  background: var(--error-bg);
  color: var(--error);
}

#feed-profile-toggle {
  margin: 0.25rem 0;
}

#feed-profile-fields-wrap {
  margin-top: 0.5rem;
}

.import-past {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

#import-dialog .actions {
  justify-content: flex-end;
}

#import-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

#import-banner p {
  margin: 0;
  font-weight: 500;
}

#import-banner ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.84rem;
}

#import-banner .actions {
  flex-wrap: wrap;
}

/* Docked at the bottom, centered on wide viewports — same fixed-position
   treatment as #action-bar (mutually exclusive with it: bulk-edit mode
   hides #action-bar), since this banner's Cancel/Review & submit actions
   are exactly what #action-bar's own buttons would be otherwise, and
   should stay reachable without scrolling back up past the occurrence
   checklist. :not([hidden]) needed on BOTH this rule and the media-query
   one below — see the media query's own comment for why (same
   left/right-losing-to-higher-specificity bug already hit on #action-bar). */
#bulk-edit-banner:not([hidden]) {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--accent-soft);
  border-top: 1px solid var(--accent);
  padding: 0.75rem max(1rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  font-size: 0.9rem;
}

@media (min-width: 52rem) {
  #bulk-edit-banner:not([hidden]) {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 48rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

#bulk-edit-banner p {
  margin: 0 0 0.5rem;
  font-weight: 500;
}

#bulk-edit-banner .actions {
  flex-wrap: wrap;
}

.occurrence-date-inputs {
  margin-left: auto;
  display: inline-flex;
  gap: 0.3rem;
}

/* Higher specificity than `#bulk-edit-list label` (id + type), which would
   otherwise force this nested label to full-width block-flex like the
   row's own top-level checkbox label. */
#bulk-edit-list .occurrence-allday {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}

#import-submitted {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-top: 0.6rem;
}

#import-submitted p {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
}

#import-check-result:not(:empty) {
  font-size: 0.84rem;
}

/* Fields the imported ICS did not carry (markImportGaps in ui/form.ts). */
.field.import-gap input,
.field.import-gap textarea,
.field.import-gap select,
.field.import-gap .chips-list {
  border-color: #e6c65c;
  background: #fffdf4;
}

.import-gap-tag {
  color: #8a6d1a;
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
}

.import-gap-tag::before {
  content: "⚠ ";
}

/* --- shared bits --------------------------------------------------------------- */

.actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0.75rem 0 0;
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
}

#fallback {
  background: #fff8e1;
  border: 1px solid #e6c65c;
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}

#fallback h3 {
  margin-top: 0;
}

#fallback textarea {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.5rem;
}