/* The add-event editor (event-editor.js), for both of its hosts.
 *
 * Written against the custom properties the app (app.css) and /admin
 * (admin.html) both define — --text, --border, --accent and friends — with a
 * fallback wherever the two name a thing differently, so it reads as part of
 * whichever page it is in, light or dark.
 *
 * Inputs are 16px: iOS Safari zooms the page on focus for anything smaller,
 * and a parish priest adds a feast from a phone. */

.ee {
  --ee-muted: var(--text-secondary, var(--muted, #6b7280));
  --ee-field: var(--surface-2, var(--soft-bg, #f3f4f6));
  --ee-warn: var(--warn, #b45309);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
}
.ee [hidden] { display: none !important; }

/* ── The parish ──
   A draft can move until it is published: a poster dropped at the wrong
   parish says whose it is, and the suggestion moves it in one tap. */
.ee-parish { display: flex; align-items: center; gap: 10px; }
.ee-parish label { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ee-muted); }
.ee-parish select { flex: 1; min-width: 0; }
.ee-suggest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: color-mix(in srgb, var(--ee-warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ee-warn) 35%, var(--border));
  border-radius: 10px;
}
.ee-suggest span { flex: 1 1 220px; }
.ee-btn-small {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg, var(--surface, #fff));
  border: 1px solid var(--border);
}
/* Until a parish is chosen there is nowhere to put a poster or a card. */
.ee.ee-no-parish > :not(.ee-parish) { display: none; }

/* ── The poster ── */
.ee-drop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 16px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 12px;
  cursor: pointer;
}
.ee-drop:hover, .ee.is-dragging .ee-drop { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ee.is-dragging { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 12px; }
.ee-drop-title { font-size: 15px; font-weight: 600; }
.ee-drop-sub { font-size: 12.5px; line-height: 1.45; color: var(--ee-muted); }

.ee-poster-card { display: flex; gap: 12px; align-items: flex-start; }
.ee-thumb-btn { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ee-thumb {
  display: block;
  width: 84px;
  max-height: 120px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--ee-field);
}
.ee-poster-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ee-status { font-size: 13px; line-height: 1.45; }
.ee-status-busy { color: var(--accent-text, var(--accent)); }
.ee-status-busy::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
  animation: ee-pulse 1s ease-in-out infinite alternate;
}
@keyframes ee-pulse { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ee-status-busy::before { animation: none; } }
.ee-status-done { color: var(--success); }
.ee-status-error { color: var(--danger); }
.ee-status-note { color: var(--ee-muted); }
.ee-poster-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* The reader's notes on the poster as a whole, each its own line under the
   status — quieter than the status, and never run on into it. */
.ee-read-notes { display: flex; flex-direction: column; gap: 4px; }
.ee-read-notes .ee-note { margin: 0; font-size: 12px; }

/* On a wide screen the poster sits beside the cards, so the two can be
   compared without scrolling — checking them against it is the whole job. */
@media (min-width: 900px) {
  .ee.has-poster {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    align-items: start;
    gap: 14px 22px;
  }
  .ee.has-poster .ee-strip, .ee.has-poster .ee-parish, .ee.has-poster .ee-suggest { grid-column: 1 / -1; }
  .ee.has-poster .ee-poster { position: sticky; top: 0; }
  .ee.has-poster .ee-poster-card { flex-direction: column; }
  .ee.has-poster .ee-thumb { width: 100%; max-height: 62vh; object-fit: contain; }
}
.ee-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── Saved drafts at this parish ── */
.ee-strip { display: flex; flex-direction: column; gap: 6px; }
.ee-strip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ee-strip-thumb { width: 34px; height: 44px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: var(--ee-field); }
.ee-strip-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.ee-strip-text small { display: block; color: var(--ee-muted); font-size: 11.5px; }

/* ── Cards ── */
.ee-head { font-size: 13px; font-weight: 600; }
.ee-cards { display: flex; flex-direction: column; gap: 8px; }
.ee-card { border: 1px solid var(--border); border-radius: 12px; }
.ee-card.is-open { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ee-card.is-published { opacity: .5; }
.ee-cards > .ee-card:only-child { border: 0; }
.ee-cards > .ee-card:only-child .ee-body { padding: 0; }
/* Collapsed, a card is drawn as its row in the feed will be (next.css .erow):
   the time with its day under it, the kind's roundel, the title in bold and
   its subtitle in italics, so a poster's worth can be run down for what is
   wrong. What is missing says so in red where it would be. */
.ee-sum {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.ee-sum-when {
  flex: none; width: 68px; display: flex; flex-direction: column; gap: 1px;
  font-size: 14.5px; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ee-sum-mer { margin-left: 1px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ee-muted); }
.ee-sum-day { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ee-muted); }
.ee-sum-kind {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--k-bg, var(--ee-field)); color: var(--k-fg, var(--ee-muted));
  font-size: 11.5px; font-weight: 800;
}
.ee-sum-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ee-sum-title { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.ee-sum-feast { font-size: 12.5px; line-height: 1.3; font-style: italic; color: var(--ee-muted); }
.ee-sum-none { color: var(--danger); font-weight: 600; font-size: 12.5px; letter-spacing: 0; }
.ee-sum-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ee-sum-foot:has(.ee-chips:not(:empty)) { margin-top: 3px; }
.ee-sum-foot .ee-saved { margin-left: 0; }
/* Shut, a card says only that it is saving or could not be: a "Saved ✓" on
   every row is a line apiece of nothing to check. */
.ee-card:not(.is-open) .ee-saved-ok { display: none; }
.ee-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ee-chip { font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.ee-chip-block { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.ee-chip-warn { color: var(--ee-warn); background: color-mix(in srgb, var(--ee-warn) 14%, transparent); }
.ee-chip-info { color: var(--ee-muted); background: var(--ee-field); }
.ee-saved { margin-left: auto; font-size: 11px; color: var(--ee-muted); white-space: nowrap; }
.ee-saved-bad { color: var(--danger); }
.ee-body { padding: 4px 12px 12px; }

/* What a collapsed card keeps of its form (event-editor.js refreshPeek): the
   fields still to answer and a service's first two languages, under the
   title, with nothing else of the form. The chips above already say what is
   missing, so the notes that say it again go. */
.ee-card.is-peek .ee-body { padding: 0 12px 4px 92px; }
.ee-card.is-peek .ee-body > :not(.ee-peek-on),
.ee-card.is-peek .ee-grid > :not(.ee-peek-on) { display: none; }
.ee-card.is-peek .ee-grid { grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; }
.ee-card.is-peek .ee-row { max-width: 360px; margin-bottom: 8px; }
.ee-card.is-peek .ee-row[data-row="languages"] > label,
.ee-card.is-peek .ee-mark,
.ee-card.is-peek .ee-note-block,
.ee-card.is-peek .ee-note-info,
.ee-card.is-peek [data-row="languages"] .ee-note-read,
.ee-card.is-peek .lp-more { display: none; }

.ee-row { margin-bottom: 12px; }
.ee-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ee-muted);
}
/* Until a person has looked at it: this value is what the model read. */
.ee-mark {
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--accent-text, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
}
.ee input, .ee select, .ee textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
  background: var(--ee-field);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.ee input[type="checkbox"] { width: auto; min-height: 0; padding: 0; -webkit-appearance: checkbox; appearance: auto; }
.ee input[type="file"] { display: none; }
.ee textarea { min-height: 72px; resize: vertical; }
.ee select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b8f98' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 38px;
}
.ee input:focus, .ee select:focus, .ee textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(44, 108, 180, .22));
}
.ee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ee-grid .ee-row { margin-bottom: 0; }
.ee-hint { margin: -4px 0 12px; font-size: 12px; line-height: 1.4; color: var(--ee-muted); }
.ee-grid + .ee-hint { margin-top: 6px; }
.ee-row .ee-hint { margin: 6px 0 0; }
.ee-note { margin-top: 5px; font-size: 12.5px; line-height: 1.4; }
.ee-note-block { color: var(--danger); }
.ee-note-warn { color: var(--ee-warn); font-weight: 600; }
.ee-note-info { color: var(--ee-muted); }
.ee-note-read { color: var(--ee-muted); font-style: italic; }
.ee-note-read::before { content: 'Reader: '; font-style: normal; font-weight: 600; }

/* ── The combine ── */
.ee-combine { margin: 4px 0 12px; }
.ee-combine summary { cursor: pointer; font-size: 13px; color: var(--accent-text, var(--accent)); padding: 4px 0 8px; }
.ee-section-title {
  margin: 8px 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ee-muted);
}
.ee-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ee-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1.4; }
.ee-item:hover { background: var(--ee-field); }
.ee-item input { margin-top: 3px; flex-shrink: 0; }
.ee-item small { display: block; font-size: 11px; color: var(--ee-muted); }
.ee-group {
  position: sticky;
  top: -4px;
  z-index: 1;
  padding: 5px 8px 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ee-muted);
  background: var(--bg, var(--surface));
}
.ee-tag { margin-left: 6px; font-size: 10.5px; font-style: normal; color: var(--ee-muted); }
.ee-tag-ask { color: var(--ee-warn); }
.ee-empty { padding: 8px; font-size: 12px; text-align: center; color: var(--ee-muted); }

/* The ask, where the combine reaches somebody else's parish. Accent, not
   danger: nothing is wrong, there is somebody else to ask. */
.ee-ask {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--accent-ring, var(--border));
  border-radius: 12px;
}
.ee-ask-what { font-size: 12.5px; line-height: 1.45; }
.ee-card-error { margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; color: var(--danger); }

/* ── Buttons ── */
.ee-link {
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent-text, var(--accent));
  background: none;
  border: 0;
  cursor: pointer;
}
.ee-link:hover { text-decoration: underline; }
.ee-link-danger { color: var(--danger); }
.ee-add {
  align-self: flex-start;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  color: var(--accent-text, var(--accent));
  background: none;
  border: 0;
  cursor: pointer;
}
.ee-add:disabled { opacity: .5; cursor: default; }
.ee-readiness { font-size: 12.5px; color: var(--ee-muted); min-height: 0; }
.ee-readiness:empty { display: none; }
.ee-message { padding: 9px 12px; font-size: 12.5px; line-height: 1.45; border-radius: 10px; }
.ee-message-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.ee-message-note { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ee-message-busy { color: var(--ee-muted); background: var(--ee-field); }
/* Stuck to the bottom of the scrolling dialog: on a phone a poster's worth of
   cards runs well past the fold, and Publish should not be a scroll away. */
.ee-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  /* Its own bottom padding, as the dialog around it has none (app.css
     .new-event-modal, /admin's #add-event-backdrop): a sticky bar stops short
     of a scroller's padding, and the cards showed in the gap below it. */
  padding: 10px 0 max(16px, env(safe-area-inset-bottom));
  background: var(--bg, var(--surface, #fff));
  border-top: 1px solid var(--border-light, var(--border));
}
.ee-actions-gap { flex: 1; }
.ee-btn {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 9px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}
.ee-btn:disabled { opacity: .45; cursor: default; }
.ee-btn-primary { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
.ee-btn-ghost { color: var(--text); background: none; border: 1px solid var(--border); }
.ee-btn-danger { color: var(--danger); border-color: transparent; padding-left: 2px; padding-right: 2px; }

/* ── A programme's Sunday: a change to the service already on file ──
   Where the combine would be. Accent, like the ask: nothing is wrong, it is
   saying where this goes. */
.ee-occ {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--accent-ring, var(--border));
  border-radius: 12px;
}
.ee-chip-occ { color: var(--accent-text, var(--accent)); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ── A church sign: weekly services and the parish's details ──
   Set beside what is on file; each is added on its own. */
.ee-sign { display: flex; flex-direction: column; gap: 8px; }
.ee-sign .ee-section-title { margin: 4px 0 0; }
.ee-sign > .ee-btn-small { align-self: flex-start; }
/* Its buttons say what they do in full ("Mark the timetable as checked
   against this sign"), so on a phone they wrap rather than run off the edge. */
.ee-sign .ee-btn-small { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; }
.ee-sign > .ee-hint { margin: 0; }
.ee-svcs, .ee-details { display: flex; flex-direction: column; gap: 6px; }
.ee-svc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ee-svc.is-on { background: var(--ee-field); border-color: transparent; }
.ee-svc.is-open { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ee-svc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ee-svc-sum {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}
.ee-svc-sum::after { content: ' ▾'; color: var(--ee-muted); font-size: 11px; }
.ee-svc.is-open .ee-svc-sum::after { content: ' ▴'; }
.ee-svc-line { font-size: 13.5px; line-height: 1.4; }
.ee-svc.is-new .ee-svc-line { font-weight: 600; }
.ee-svc-state { font-size: 12.5px; line-height: 1.4; color: var(--ee-muted); }
.ee-svc.is-on .ee-svc-state { color: var(--success, var(--ee-muted)); }
.ee-svc > .ee-btn-small { align-self: flex-start; }
.ee-btn-add { flex: 0 0 auto; color: #fff; background: var(--accent); border-color: var(--accent); }
.ee-svc-form { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.ee-svc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ee-svc-field > span, .ee-svc-weeks > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ee-muted);
}
.ee-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .ee-grid-3 { grid-template-columns: 1fr 1fr; } .ee-grid-3 > :first-child { grid-column: 1 / -1; } }
.ee-svc-weeks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; }
.ee-svc-weeks > span { flex: 1 0 100%; }
.ee-svc-weeks label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ee-svc-weeks small { flex: 1 0 100%; font-size: 12px; color: var(--ee-muted); }
.ee-missing { font-size: 13px; }
.ee-missing summary { cursor: pointer; color: var(--accent-text, var(--accent)); padding: 2px 0 6px; }
.ee-missing .ee-svc-line { display: block; padding: 3px 0; color: var(--ee-muted); }
.ee-missing .ee-hint { margin: 6px 0 0; }
.ee-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ee-detail-label {
  flex: 0 0 70px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ee-muted);
}
.ee-detail-value { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.ee-detail .ee-svc-state { flex: 1 0 100%; }

/* A sign's draft: the one card it was made with is empty and not what this is
   for, so it and Publish stay out of the way until somebody asks to add an
   event as well. */
.ee.ee-sign-only .ee-cards,
.ee.ee-sign-only .ee-head,
.ee.ee-sign-only .ee-readiness,
.ee.ee-sign-only [data-ee="publish"] { display: none; }

/* One event over several days: the tick under Starts / Ends, and the last day
   it brings out. The end time above is the time it ends on that day. */
.ee-multiday {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, var(--ee-muted));
  cursor: pointer;
}
.ee-multiday[hidden] { display: none; }
.ee-multiday input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent, #2b6cb0); }

/* ── Where it is held: the venue picker (public/shared/venue-picker.js) ──
   Used in the add-event card here and in the app's rule and event forms, so
   its look lives with the editor's, which both hosts load. */
.vp { display: flex; flex-direction: column; gap: 8px; }
.vp-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-modes button {
  flex: 1 1 auto;
  padding: 8px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text, inherit);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.vp-modes button.on { background: var(--accent, #2b6cb0); border-color: var(--accent, #2b6cb0); color: #fff; }
.vp-pane[hidden] { display: none; }
.vp-pane { display: flex; flex-direction: column; gap: 6px; }
.vp-search, .vp-text { width: 100%; box-sizing: border-box; }
.vp, .vp-search { scroll-margin-top: 12px; }
.vp-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-light, var(--border, #e5e7eb));
  border-radius: 10px;
  max-height: 260px; overflow-y: auto;
}
/* The name first and whole; where it is and how far, small, under it. */
.vp-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--border-light, #eee);
  background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.vp-item:last-child { border-bottom: 0; }
.vp-item.on { background: color-mix(in srgb, var(--accent, #2b6cb0) 12%, transparent); font-weight: 600; }
.vp-item.on .vp-name::before { content: '✓ '; color: var(--accent, #2b6cb0); }
.vp-meta { font-size: 12px; font-weight: 400; color: var(--ee-muted, #6b7280); }
.vp-meta:empty { display: none; }
.vp-empty { padding: 10px 12px; font-size: 13px; color: var(--ee-muted, #6b7280); }
.vp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-btn {
  padding: 7px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 999px;
  background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.vp-btn:disabled { opacity: 0.5; }
.vp-status { font-size: 12px; color: var(--ee-muted, #6b7280); }

/* ── The kind picker (public/shared/kind-picker.js) ─────────────────────
   Every form's Kind/Type field: the select stays, hidden, holding the value;
   this is what a person sees and taps. Each kind in the colours the feed
   paints it, so picking "Youth" looks like the Youth on a card. */
.kp-native { display: none !important; }
.kp { position: relative; min-width: 0; }
.kp-btn {
  display: flex; align-items: center;
  width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 6px 38px 6px 7px;
  font: inherit; text-align: left; color: var(--text, #111);
  background-color: var(--surface-2, var(--ee-field, #f3f4f6));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b8f98' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
  border: 1px solid var(--border, #d1d5db); border-radius: 12px;
  cursor: pointer;
}
.kp-btn:focus-visible, .kp.open .kp-btn {
  outline: none; border-color: var(--accent, #2b6cb0);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(44, 108, 180, .22));
}
.kp-placeholder { padding: 0 7px; font-size: 16px; color: var(--text-muted, #6b7280); }
.kp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 12px 3px 3px; border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.kp-dot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
}
.kp-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto; padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d1d5db); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.kp.kp-up .kp-list { top: auto; bottom: calc(100% + 4px); }
/* `display: flex` above outranks the UA's [hidden], so a closed list was an
   empty bordered box under every picker outside the add-event editor (whose
   `.ee [hidden]` happened to cover it). */
.kp-list[hidden] { display: none; }
.kp-item {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 40px; padding: 4px 8px 4px 5px;
  font: inherit; text-align: left; color: inherit;
  background: none; border: 0; border-radius: 9px; cursor: pointer;
}
.kp-item:hover, .kp-item:focus-visible { outline: none; background: var(--surface-2, rgba(0, 0, 0, .05)); }
.kp-item.on::after { content: '✓'; font-weight: 700; color: var(--accent, #2b6cb0); }

/* The buttons form (data-kind-picker="buttons"): every kind on show. */
.kp-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.kp-tap {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 3px 12px 3px 4px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--text, #111);
  background: var(--surface-2, var(--ee-field, #f3f4f6));
  border: 1px solid var(--border, #d1d5db); border-radius: 999px;
  cursor: pointer;
}
.kp-tap.on { box-shadow: inset 0 0 0 1px currentColor; }
.kp-tap:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring, rgba(44, 108, 180, .22)); }

/* ── The languages picker (public/shared/lang-picker.js) ─────────────────
   Every form's Languages field: the input stays, hidden, holding
   "Greek, English"; these are the fixed list's chips, tapped on and off. */
.lp { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lp-chip {
  min-height: 34px; padding: 4px 12px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--text, #111);
  background: var(--surface-2, var(--ee-field, #f3f4f6));
  border: 1px solid var(--border, #d1d5db); border-radius: 999px;
  cursor: pointer;
}
.lp-chip.on {
  color: #fff; background: var(--accent, #2b6cb0); border-color: var(--accent, #2b6cb0);
}
.lp-chip.lp-extra { text-decoration: line-through; }
.lp-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring, rgba(44, 108, 180, .22)); }
.lp-chip.lp-more { min-width: 44px; letter-spacing: 1px; }