/* Follow buttons, Mes favoris, the home favourites block and the alerts prompt. */
.fav-home[hidden], .fav-nudge[hidden], .fav-empty[hidden], .fav-alerts [hidden] { display: none; }
.follow-button {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-block-size: 40px; padding-inline: 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer;
}
.follow-button .icon { inline-size: 18px; block-size: 18px; }
.follow-button:hover { border-color: var(--ink-2); }
.follow-button[aria-pressed="true"] { background: var(--flag-red); border-color: var(--flag-red); color: #FFFFFF; }
.follow-button[aria-pressed="true"] .icon { fill: currentColor; }
.follow-button:focus-visible { outline: 2px solid var(--atlas-green); outline-offset: 2px; }
.follow-button--compact { min-block-size: 36px; padding-inline: 10px; }
/* In page headers the button is the row's last item, on the far side and at the top (one place on every club,
   player and competition page); a fighter's sits in the hero's top corner. */
.page-head__row > .follow-button, .player-hero__row > .follow-button { margin-inline-start: auto; align-self: flex-start; }
.fighter-hero { position: relative; }
.fighter-hero > .follow-button { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); z-index: 1; }
.hub-hero .follow-button:not([aria-pressed="true"]), .fighter-hero .follow-button:not([aria-pressed="true"]),
.theme-sport .page-head .follow-button:not([aria-pressed="true"]) { background: #FFFFFF; border-color: #FFFFFF; color: #111111; }
.follow-button:not([aria-pressed="true"]) .icon { color: var(--flag-red); }
@media (max-width: 559px) { /* on a phone the name keeps the width; the button gets its own line below it */
  .page-head__row:has(> .follow-button), .player-hero__row:has(> .follow-button) { flex-wrap: wrap; }
  .page-head__row > div, .player-hero__row > .player-hero__text { flex: 1 1 0; min-inline-size: 0; }
  .page-head__row > .follow-button, .player-hero__row > .follow-button { flex-basis: 100%; justify-content: center; margin-inline-start: 0; min-block-size: 40px; }
  .fighter-hero > .follow-button { position: static; justify-self: start; }
}

.fav-cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fav-page .fav-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-block-start: var(--space-4); }
.fav-home .fav-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.fav-card { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.fav-page .fav-card { box-shadow: var(--shadow-card); border: 0; }
.fav-card__head { display: flex; align-items: center; gap: var(--space-3); }
.fav-card__who { display: grid; min-inline-size: 0; flex: 1; }
.fav-card__name { font-weight: 800; text-decoration: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-card__meta { font-size: 0.75rem; color: var(--ink-2); }
.fav-card__events { display: grid; gap: 4px; margin: 0; font-size: var(--step--1); }
.fav-card__events div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-2); }
.fav-card__events dt { color: var(--ink-2); }
.fav-card__events dd { margin: 0; min-inline-size: 0; }
.fav-card__events a { color: var(--ink); font-weight: 600; text-decoration: none; }
.fav-card__events time { display: block; font-size: 0.75rem; color: var(--ink-2); }
.fav-card__nothing, .fav-card__article { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.fav-card__article span { font-weight: 700; color: var(--flag-red); }
.fav-card__article a { color: var(--ink); }

.fav-empty { margin-block-start: var(--space-4); }
.fav-empty__title { margin-block: var(--space-4) var(--space-2); font-size: var(--step-1); }
.fav-suggestions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.fav-suggestions li { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; padding: 4px; padding-inline-start: 10px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); font-size: var(--step--1); font-weight: 600; }
.fav-suggestions li > span { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fav-home { margin-block-end: var(--space-5); }
.fav-home .card__title .icon, .fav-alerts .card__title .icon, .page-head__title > .icon { inline-size: 22px; block-size: 22px; color: var(--flag-red); }
.fav-nudge { position: relative; display: grid; gap: var(--space-2); }
.fav-nudge__title { margin: 0; font-weight: 800; font-size: var(--step-0); }
.fav-nudge__text p { margin: 0; }
.fav-nudge__text p + p { color: var(--ink-2); font-size: var(--step--1); }
.fav-nudge__close { position: absolute; inset-block-start: -8px; inset-inline-end: -8px; }

.fav-alerts { margin-block-start: var(--space-4); }
.fav-alerts .card__body { display: grid; gap: var(--space-3); }
.fav-alerts .card__body p { margin: 0; }
.fav-alerts .button .icon { inline-size: 18px; block-size: 18px; margin-inline-end: 6px; }
.fav-alerts__on { font-weight: 700; color: var(--atlas-green); }
.fav-alerts__topics { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); }
.fav-alerts__topics legend { padding-inline: 4px; font-weight: 700; font-size: var(--step--1); }
.fav-alerts__topics label { display: flex; align-items: center; gap: var(--space-2); min-block-size: 36px; }
.fav-alerts__topics input { inline-size: 20px; block-size: 20px; accent-color: var(--atlas-green); }
.fav-alerts__quiet, .fav-alerts__status { font-size: var(--step--1); color: var(--ink-2); }

.alerts-prompt {
  position: fixed; inset-inline: var(--space-3); inset-block-end: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2) var(--space-3);
  max-inline-size: 420px; margin-inline: auto; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-l); background: var(--surface); box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); border: 1px solid var(--line);
}
.alerts-prompt[hidden] { display: none; }
.alerts-prompt > .icon { inline-size: 24px; block-size: 24px; color: var(--flag-red); }
.alerts-prompt p { margin: 0; font-weight: 600; font-size: var(--step--1); }
.alerts-prompt__actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); justify-content: flex-end; }
@media (min-width: 900px) { .alerts-prompt { inset-block-end: var(--space-5); inset-inline: auto var(--space-5); } }

.fav-card--live { border-color: color-mix(in srgb, var(--flag-red) 45%, var(--line)); box-shadow: inset 0 2px 0 var(--flag-red); }
.fav-card__live dt { display: inline-flex; align-items: center; gap: 6px; color: var(--flag-red); font-weight: 700; }
.fav-news { margin-block-start: var(--space-4); }
.fav-news__title { margin: 0 0 var(--space-2); font-size: var(--step--1); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.fav-news ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fav-news li { display: grid; gap: 2px; padding-block-end: var(--space-2); border-block-end: 1px solid var(--line); }
.fav-news a { font-weight: 700; color: var(--ink); text-decoration: none; }
.fav-news time { font-size: 0.75rem; color: var(--ink-2); }
.fav-suggestions__label { margin: var(--space-3) 0 0; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.fav-nudge__text { margin: 0; padding-inline-end: 40px; color: var(--ink-2); }
.fav-settings, .fav-account { margin-block-start: var(--space-4); }
.fav-settings .card__body, .fav-account .card__body { display: grid; gap: var(--space-3); }
.fav-settings .card__body p, .fav-account .card__body p { margin: 0; }
.fav-settings__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fav-settings__item { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); }
.fav-settings__name { font-weight: 800; }
.fav-settings__name a { color: var(--ink); text-decoration: none; }
.fav-settings__form { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.fav-settings__form label { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 36px; font-size: var(--step--1); }
.fav-settings__form input[type="checkbox"] { inline-size: 20px; block-size: 20px; accent-color: var(--atlas-green); }
.fav-settings__digest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fav-account__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.alerts-prompt__actions { flex-wrap: wrap; }
.alerts-prompt p span[hidden] { display: none; }