/**
 * Stars (js/stars.js): the save button on show cards and show pages, the
 * header link to My shows, and the My shows page. Outlined when not saved,
 * filled teal when saved.
 */

/* ---- the card is a container; its title link covers the whole card ---- */
.mia-front .ev-card { position:relative; }
.mia-front .ev-card .ev-link { color:inherit; text-decoration:none; }
.mia-front .ev-card .ev-link::after { content:""; position:absolute; inset:0; z-index:1; }
.mia-front .ev-card .ev-link:focus-visible { outline:none; }
.mia-front .ev-card:has(.ev-link:focus-visible) { outline:2px solid var(--acc); outline-offset:2px; }

/* ---- the star button ---- */
.mia-star { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:0; cursor:pointer;
  border:1px solid var(--hair); border-radius:999px; background:var(--panel); color:var(--mut);
  transition:color .15s ease, border-color .15s ease, transform .15s ease; }
.mia-star[hidden] { display:none; }
.mia-star svg { fill:none; }
.mia-star:hover { color:var(--acc-ink); border-color:var(--acc); }
.mia-star:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.mia-star[aria-pressed="true"] { color:var(--acc-ink); border-color:var(--acc); }
.mia-star[aria-pressed="true"] svg { fill:currentColor; }
.mia-star:active { transform:scale(.92); }

/* On a card: top right, over the picture, above the card's link. */
.mia-star--card { position:absolute; top:.55rem; right:.55rem; z-index:2; width:2.1rem; height:2.1rem;
  background:color-mix(in srgb, var(--panel) 88%, transparent); box-shadow:0 1px 4px rgba(0,0,0,.12); }

/* On a show page: beside the title, with a word. */
.mia-star--page { margin-top:1rem; padding:.4rem .9rem .4rem .7rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; }
@media (min-width:768px) {
  .ev-page--event .ev-head { position:relative; }
  .mia-star--page { position:absolute; top:0; right:0; margin:0; }
}

/* ---- header: link to My shows, beside Instagram (dark.css has the circle) ---- */
.mia-mine svg { fill:none; }
/* Saved shows: only the star turns teal; the circle stays pale like its neighbors'. */
.mia-mine.has-stars { color:var(--mia-acc); }
.mia-mine.has-stars svg { fill:currentColor; }

/* ---- My shows page ---- */
.mia-myshows .ms-group { margin-top:2rem; }
.mia-myshows .ms-group--past .ev-card { opacity:.55; }
.mia-myshows .ev-card.is-unstarred { opacity:.35; }
.mia-myshows .ms-note { margin:1rem 0 0; font-family:var(--mono); font-size:.78rem; color:var(--acc-ink); }
.mia-myshows .ms-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--hair); }
.mia-myshows .ms-button { display:inline-block; padding:.55rem 1rem; border:1px solid var(--acc); border-radius:3px; background:transparent;
  color:var(--acc-ink); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.mia-myshows .ms-button[hidden] { display:none; }
.mia-myshows .ms-button--primary { background:var(--acc-ink); border-color:var(--acc-ink); color:#fff; }
[data-bs-theme="dark"] .mia-myshows .ms-button--primary { color:#111417; }
.mia-myshows .ms-button:hover { text-decoration:none; filter:brightness(1.08); }
.mia-myshows .ms-copied { font-family:var(--mono); font-size:.75rem; color:var(--mut); }
.mia-myshows .ms-fine { margin:.8rem 0 0; max-width:42rem; font-size:.85rem; color:var(--mut); }