/* Festival Navigator hand-written styles (Tailwind utilities live in tailwind.css). */
:root { --accent: 16, 185, 129; }
body { font-family: 'Inter', sans-serif; background-color: #111827; }
/* viewport-fit=cover + black-translucent status bar render the page under the
   iPhone notch/Dynamic Island in installed-PWA mode — pad by the real insets. */
body {
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}
.fest-title { font-family: 'Anton', sans-serif; letter-spacing: 0.05em; color: rgb(var(--accent)); }
.fest-year { font-size: 0.45em; vertical-align: super; opacity: 0.7; margin-left: 0.1em; }
.stage-title { font-family: 'Anton', sans-serif; letter-spacing: 0.02em; color: rgb(var(--accent)); }
.accent-text { color: rgb(var(--accent)); }
.artist-card {
    transition: all 0.15s ease-in-out; cursor: pointer;
    border: 1px solid #374151; position: relative; overflow: hidden;
}
.artist-card:active { transform: scale(0.97); }
.artist-text-short { font-size: 0.7rem; line-height: 0.95rem; }
.person-selector.selected { transform: scale(1.08); box-shadow: 0 0 14px rgba(255,255,255,0.25); z-index: 10; }
.day-tab.active { background-color: rgb(var(--accent)); color: #111827; font-weight: 700; }
.day-num { position: absolute; top: 1px; right: 4px; font-size: 0.6rem; font-weight: 700; opacity: 0.55; }
.schedule-container { background-color: #1F2937; padding: 1rem; border-radius: 0.5rem; }
.highlight-artist::after {
    content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
    border: 2px dashed rgba(255,255,255,0.85); border-radius: 0.375rem; pointer-events: none;
}
.schedule-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schedule-grid { display: grid; gap: 4px; min-width: 760px; }
.time-label {
    grid-column: 1; text-align: right; padding-right: 8px; font-size: 11px;
    color: #9CA3AF; position: relative; top: -7px;
}
.modal { transition: opacity 0.2s ease; }
.modal-content { transition: transform 0.2s ease; }
.accent-button {
    background-color: rgb(var(--accent)); color: #062019; font-weight: 700;
    padding: 8px 16px; border-radius: 9999px; transition: filter 0.2s;
}
.accent-button:hover { filter: brightness(1.1); }
.sync-dot { width: 10px; height: 10px; border-radius: 9999px; display: inline-block; }
.sync-online { background-color: #10B981; }
.sync-offline { background-color: #9CA3AF; }
.sync-syncing { background-color: #F59E0B; }
.sync-error { background-color: #EF4444; }
.spotify-badge { position: absolute; top: 1px; right: 3px; font-size: 0.58rem; line-height: 1; font-weight: 700; color: #1DB954; pointer-events: none; z-index: 3; text-shadow: 0 1px 2px rgba(0,0,0,0.85); }
.has-spotify { box-shadow: inset 3px 0 0 #1DB954; }