/* 🎉 My Events (web/my-events.js): the events you host and the ones you're going to. Uses
   choreboy.css's tokens (light and dark); the 🧭 Route me button and its menu are event-ui.css's. */

.mev .list-sub { margin: .2rem 0 0; }
.mev-note { margin: 0 0 .6rem; }
.mev-sec { margin: 0 0 1.2rem; }
.mev-k { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.mev-n { font-weight: 500; color: var(--text-3); }

.mev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.mev-card { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .7rem .8rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.mev-card.past { background: var(--surface-2); box-shadow: none; }
.mev-card.cancelled .mev-title { text-decoration: line-through; color: var(--text-3); }
.mev-title { margin: 0; font-size: 1rem; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.mev-whose, .mev-when, .mev-soon, .mev-where { margin: 0; font-size: .86rem; color: var(--text-2); overflow-wrap: anywhere; }
.mev-soon { color: var(--text-3); }
.mev-soon.on { color: var(--good); font-weight: 600; }
.mev-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.mev-chips, .mev-acts { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; min-width: 0; }
.mev-acts { margin-left: auto; }
.mev-rsvp.yes, .mev-page.on { color: var(--good); }
.mev-rsvp.no { color: var(--text-2); }

.mev-past { margin-top: .4rem; }
.mev-past > summary { cursor: pointer; padding: .3rem 0; list-style-position: inside; }
.mev-past > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mev-past[open] > summary { margin-bottom: .5rem; }
.mev-empty p { margin: .2rem 0; }
.mev-empty .btn-row { margin-top: .5rem; }

@media (max-width: 520px) {
  .mev-acts .btn { min-height: 2.25rem; }
}

/* 👥 The host page (my-events.js hostHtml): its rows are event-ui.css's .ev-rsvp-row. */
#mev-h:focus { outline: none; }
.mev-h { min-width: 0; }
.mev-h-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.mev-h-title { outline: none; overflow-wrap: anywhere; margin: 0 0 .2rem; }
.mev-h h3:focus { outline: none; }
.mev-h-days { margin: .6rem 0 .25rem; flex-wrap: wrap; }
.mev-h-closed { margin: .6rem 0; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface-2); color: var(--text-2); font-size: .9rem; }
.mev-h-counts { list-style: none; margin: .8rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.mev-h-count { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .55rem .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.mev-h-n { font-size: 1.6rem; font-weight: 750; line-height: 1.1; color: var(--text); }
.mev-h-count.yes .mev-h-n { color: var(--good); }
.mev-h-w { font-size: .8rem; color: var(--text-2); overflow-wrap: anywhere; }
.mev-h-link { margin: 0 0 1rem; }
.mev-h-link .btn-row { flex-wrap: wrap; }
.mev-h-link a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.mev-h-url { width: 100%; margin: 0 0 .4rem; font-size: 16px; }
.mev-h .ev-rsvp-row { flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.mev-h .ev-rsvp-row:last-child { border-bottom: 0; }
.mev-h .ev-rsvp-row .btn { min-width: 2.75rem; min-height: 2.75rem; }
.mev-h-at { flex: 1 0 100%; order: 10; min-width: 0; }
.mev-h-things, .mev-h-whos { list-style: none; margin: 0; padding: 0; }
.mev-h-thing { padding: .35rem 0; overflow-wrap: anywhere; }
.mev-h-whos { margin: .15rem 0 0 .8rem; font-size: .92rem; color: var(--text-2); }
.mev-h-who { font-weight: 600; color: var(--text); }

@media (max-width: 520px) {
  .mev-h-top .btn, .mev-h .btn-row .btn { min-height: 2.75rem; }
}