/* Jamming.Live Fan Foundation: private My Page and the Favorite heart. Builds on jl-auth.css tokens. */
.fan-wrap { width: 100%; max-width: 1180px; }
.fan-narrow { max-width: 560px; }
.fan-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Fan header: avatar, identity, actions. Actions wrap so nothing overflows at phone width. */
.fan-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fan-avatar { width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden; background: #292d33; }
.fan-avatar img, .fan-avatar svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.fan-id { flex: 1 1 220px; min-width: 0; }
.fan-id h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2rem); }
.fan-name { margin: 2px 0; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.fan-id .muted { margin: 0; }
.fan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.fan-actions form { margin: 0; }
.fan-photo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; }
.fan-photo-form input[type="file"] { max-width: 100%; min-width: 0; color: var(--ink-soft); }
.fan-photo-error, .fan-photo-hint { flex: 0 0 100%; margin: 0; }

/* Dashboard: events (secondary column) first in the DOM for the phone order; main content left on wide screens. */
.fan-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr); grid-template-areas: "main events"; gap: 18px; margin-top: 18px; align-items: start; }
.fan-events { grid-area: events; }
.fan-main { grid-area: main; min-width: 0; }
.fan-layout .panel h2 { font-size: 1.25rem; }
.fan-empty { margin: 0; color: var(--ink-soft); }
.fan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fan-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; min-width: 0; }
.fan-row:first-child { border-top: 0; padding-top: 0; }
.fan-row form { margin: 0; }
.fan-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #292d33; display: block; }
.fan-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fan-title { flex: 1; min-width: 0; font-weight: 800; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.fan-title:hover { color: #fff; text-decoration: underline; }

/* The heart: a real button (or, before sign-in is known, a link) with a clear focus ring. */
.fan-heart { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #e85d68; font-size: 1.7rem; line-height: 1; cursor: pointer; text-decoration: none; }
.fan-heart:hover { background: rgba(255, 255, 255, 0.08); color: #ff7b85; }
.fan-heart[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.fan-favorite { display: inline-block; margin: 4px 0 8px; }
.fan-favorite .fan-heart { border: 1px solid #5a2429; background: rgba(4, 7, 8, 0.55); }

@media (max-width: 760px) {
  .fan-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "events" "main"; }
  .fan-header { align-items: flex-start; }
  .fan-actions, .fan-photo-form { width: 100%; }
}

/* My Events entries: the text block takes the remaining width beside the thumbnail and the remove-heart. */
.fan-event-text { flex: 1; min-width: 0; }
.fan-event-text .fan-title { display: block; }