/* event-points.css — Event points (Live Event Phase 2): the map markers and the
   editor (assets/js/event-points.js). Dark, like the event form and the live
   dashboard that host it. */

/* A point on any map: the GPX waypoint icon, its title under it. No position on
   the element itself: MapLibre makes markers absolute (see the live pages). The
   title hangs under the icon outside the element's box, so a marker anchored at
   its bottom puts the pin's tip on the place. */
.ep-marker { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.ep-marker img { width:30px; height:30px; display:block; filter:drop-shadow(0 2px 3px #0009); }
.ep-marker span { position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:2px; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:#111827e0; color:#fff; font:600 11px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; padding:0 6px; border-radius:6px; }
/* Not shown yet. On the children: MapLibre sets the marker's own opacity inline. */
.ep-marker.dim img, .ep-marker.dim span { opacity:.45; }
.ep-marker.editing img { width:36px; height:36px; }
.ep-marker.editing span { background:#2563eb; }

/* The editor */
.ep { color:#e5e7eb; font-size:15px; }
.ep-map { position:relative; height:360px; border-radius:12px; overflow:hidden; border:1px solid #2e3239; background:#0b0f14; }
.ep-hint { position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:3; display:none; background:#111827e8; color:#fff;
  border:1px solid #3b82f6; border-radius:18px; padding:5px 14px; font-size:14px; white-space:nowrap; pointer-events:none; }
.ep-hint.on { display:block; }
.ep-bar { display:flex; align-items:center; gap:10px; margin:12px 0 8px; }
.ep-count { color:#9ca3af; font-size:14px; flex:1; }
.ep-btn { display:inline-flex; align-items:center; gap:5px; border:1px solid #3a3f48; background:#1f232b; color:#e5e7eb; border-radius:9px;
  padding:6px 12px; font-size:14px; font-weight:600; cursor:pointer; line-height:1.3; }
.ep-btn:hover:not([disabled]) { border-color:#60a5fa; }
.ep-btn[disabled] { opacity:.45; cursor:default; }
.ep-btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.ep-btn.danger { color:#f87171; }
.ep-list { display:flex; flex-direction:column; gap:8px; }
.ep-empty { color:#9ca3af; font-size:14px; line-height:1.5; border:1px dashed #3a3f48; border-radius:10px; padding:12px 14px; }
.ep-row { display:flex; align-items:center; gap:10px; background:#181b21; border:1px solid #2e3239; border-radius:11px; padding:8px 10px; cursor:pointer; }
.ep-row.on { border-color:#3b82f6; }
.ep-icon { width:30px; height:30px; flex:none; }
.ep-main { flex:1; min-width:0; }
.ep-title { font-weight:700; color:#f3f4f6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-type { font-weight:500; color:#9ca3af; font-size:13px; margin-left:4px; }
.ep-when { color:#9ca3af; font-size:13px; }
.ep-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.ep-chip { font-size:12px; font-weight:600; color:#cbd5e1; border:1px solid #3a3f48; border-radius:999px; padding:0 8px; }
.ep-chip.due { color:#fbbf24; border-color:#b45309; }
.ep-chip.later { color:#93c5fd; border-color:#1d4ed8; }

.ep-form { background:#14171c; border:1px solid #3b82f6; border-radius:12px; padding:12px 14px; margin:4px 0 12px; }
.ep-form-title { font-weight:800; font-size:15px; margin-bottom:8px; color:#fff; }
.ep-types { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:6px; margin-bottom:10px; }
.ep-type-btn { display:flex; flex-direction:column; align-items:center; gap:2px; background:#1f232b; border:1px solid #2e3239; border-radius:9px;
  padding:6px 2px; color:#cbd5e1; font-size:12px; cursor:pointer; }
.ep-type-btn img { width:26px; height:26px; }
.ep-type-btn.on { border-color:#3b82f6; background:#1e293b; color:#fff; }
.ep-label { display:block; font-size:13px; font-weight:600; color:#9ca3af; margin-bottom:10px; }
.ep-label small, .ep-check small { display:block; font-weight:400; color:#7c8594; font-size:12px; margin-top:3px; line-height:1.4; }
.ep-input { display:block; width:100%; margin-top:4px; background:#0f1217; border:1px solid #3a3f48; border-radius:8px; color:#f3f4f6;
  padding:7px 10px; font-size:15px; box-sizing:border-box; color-scheme:dark; }
.ep-input:focus { outline:none; border-color:#60a5fa; }
.ep-input[disabled] { opacity:.5; }
.ep-where { margin-top:4px; color:#e5e7eb; font-weight:500; font-size:14px; }
.ep-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 600px) { .ep-grid { grid-template-columns:1fr; } .ep-map { height:300px; } }
.ep-check { display:flex; gap:8px; align-items:flex-start; font-size:14px; font-weight:600; color:#e5e7eb; margin:2px 0 12px; cursor:pointer; }
.ep-check input { margin-top:3px; }
.ep-form-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ep-err { color:#f87171; font-size:14px; }

/* A programme: the points as a list (event page, public live page) */
.ep-prog { display:flex; flex-direction:column; gap:8px; }
.ep-prog-row { display:flex; gap:10px; align-items:flex-start; }
.ep-prog-row img { width:28px; height:28px; flex:none; margin-top:2px; }
.ep-prog-when { color:#93c5fd; font-size:13px; font-weight:600; }
.ep-prog-title { color:#f3f4f6; font-weight:700; }
.ep-prog-desc { color:#cbd5e1; font-size:14px; white-space:pre-wrap; word-break:break-word; margin-top:1px; }
.ep-prog-due { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fbbf24;
  border:1px solid #b45309; border-radius:999px; padding:0 7px; margin-left:6px; vertical-align:1px; }