/* Ticketholder portal touches on top of /app/styles.css. */
.my-event { margin-bottom: 18px; }
.my-event.is-past { opacity: 0.85; }
.my-event-head { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; }
.my-event-head > div:only-child { grid-column: 1 / -1; }
.my-cover { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.my-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.my-title { margin: 2px 0 6px; font-size: 22px; line-height: 1.25; }
.my-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-weight: 700; }
.my-links a, .my-order-meta a { color: var(--accent); text-decoration: none; }
.my-links a:hover, .my-order-meta a:hover { text-decoration: underline; }
.my-note { margin-top: 14px; }
.my-pre { white-space: pre-wrap; }

.my-order { margin-top: 18px; }
.my-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.my-ticket { display: flex; gap: 14px; align-items: center; border: 1px solid var(--grid-line); border-radius: var(--radius); padding: 12px; background: #fff; }
.my-ticket.is-void { opacity: 0.6; }
.my-qr { flex: none; line-height: 0; }
.my-qr img { width: 140px; height: 140px; image-rendering: pixelated; }
.my-ticket-info { min-width: 0; }
.my-ticket-n { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.my-ticket-type { font-size: 17px; font-weight: 800; }
.my-ticket-id { font-size: 11.5px; margin: 4px 0; word-break: break-all; }
.my-wallet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.my-wallet a { text-decoration: none; }
.my-order-meta { margin-top: 8px; font-size: 13px; }

.my-past { margin-top: 26px; }
.my-past summary { cursor: pointer; font-weight: 800; color: var(--ink-soft); margin-bottom: 14px; }

.my-host { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

.my-card { text-decoration: none; color: inherit; }
.my-card-foot { margin-top: 10px; }
.topbar a.btn { text-decoration: none; }

@media (max-width: 560px) {
  .my-event-head { grid-template-columns: 1fr; }
  .my-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .my-tickets { grid-template-columns: 1fr; }
  .my-qr img { width: 120px; height: 120px; }
}