/* 0.19 Events panel. One printed card per event: solid fill, ink outline,
   hard offset shadow, the way every other card in the drawer is drawn. The
   event in use wears the yellow tab and sits first to the eye. The only
   motion is that tab nudging out on hover; theme.css and the drawer's Motion
   setting (--fx-amp) take it away, and nothing here needs it to read. */
#admin .events { display: grid; gap: 14px; margin: 12px 0 18px; }

#admin .event {
  position: relative;
  background: var(--surface); color: var(--ink);
  border: 3px solid var(--ink-line); border-radius: var(--r);
  box-shadow: var(--pop); padding: 12px 14px 14px;
}
#admin .event.current { background: var(--surface-2); box-shadow: var(--pop-lg); }

#admin .event-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
#admin .event-head h3 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .5px; line-height: 1.1;
}
#admin .event-now {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  background: var(--yellow); color: var(--ink-line);
  border: 2px solid var(--ink-line); border-radius: 999px; padding: 2px 10px;
  transform: translateX(0); transition: transform .18s var(--ease);
}
#admin .event.current:hover .event-now { transform: translateX(calc(3px * var(--fx-amp, 1))); }

#admin .event-fields { display: grid; gap: 6px; }
#admin .event-fields .row { margin: 0; }
#admin .event-dir, #admin .event-count { margin: 8px 0 0; word-break: break-all; }
#admin .event-count { font-weight: 700; color: var(--ink-2); }
#admin .event-preset { margin-top: 10px; }
#admin .event-preset .hint { margin: 0 0 6px; }
#admin .event-preset .actions { margin: 0; }
#admin .event .actions { margin-top: 12px; flex-wrap: wrap; }

/* The drawer header says which event the booth is on, next to the version.
   It gives way before anything else does: a long event name shrinks to an
   ellipsis rather than pushing Quit and Close off the end of the header. */
#admin-event {
  flex: 0 1 auto; min-width: 0;
  font-weight: 800; font-size: 13px; line-height: 1;
  background: var(--yellow); color: var(--ink-line);
  border: 2px solid var(--ink-line); border-radius: 999px;
  padding: 4px 10px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#admin-event[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #admin .event-now { transition: none; }
  #admin .event.current:hover .event-now { transform: none; }
}

/* 0.19 Export photos: the progress line and, when the zip is written, what
   Windows can do with it. It sits inside the card so a long export stays
   next to its event; the only motion is the bar, which Motion off and
   reduced motion both still. */
#admin .event-export {
  margin-top: 10px; padding: 8px 10px;
  background: var(--surface-2); color: var(--ink);
  border: 2px solid var(--ink-line); border-radius: calc(var(--r) / 2);
}
#admin .event-export .hint { margin: 0; font-weight: 700; color: var(--ink); }
#admin .event-export .actions { margin: 8px 0 0; flex-wrap: wrap; }
#admin .event-export.bad { background: var(--danger-soft); border-color: var(--danger); }