/* ---------------------------------------------------------------------------
 * favorites.css — heart button, offline card state, /favorites/ page.
 * Loaded sitewide from header.php: the heart is on every card, so this cannot
 * be a $pageCss sheet.
 * ------------------------------------------------------------------------ */

/* ---------- heart ---------- */
.card { position: relative; }          /* the button is absolutely placed */
/* Top-right: the eye lands there first, and it is free now that HD sits beside
   the name instead. */
.fav-btn {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    appearance: none; cursor: pointer; padding: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18);
    color: #fff; opacity: 1;
    transition: opacity .15s, background .15s, transform .15s;
}
/* ALWAYS visible now, not hover-only. Mobile has no hover, so a hover-reveal
   heart was a dead feature for most visitors; on desktop it's a deliberate
   save control that's always there. (The old .card:hover / @media(hover:none)
   reveal rules were removed — opacity is 1 at rest.) */
.fav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.fav-btn:hover { background: rgba(0,0,0,.72); }
.fav-btn.is-on { background: var(--pink, var(--accent)); border-color: var(--pink, var(--accent)); }
.fav-btn.is-on svg { fill: #fff; stroke: #fff; }
.fav-btn.bump { transform: scale(1.22); }

/* HD in the info row rather than on the thumbnail. site.css positions .hd
   absolutely, so that has to be undone here; margin-left:auto pushes it into
   the empty right side of the flex row. */
.info .hd-inline {
    position: static; margin-left: auto; flex: 0 0 auto; align-self: center;
}

/* ---------- offline card ---------- */
.card.is-off .thumb img { filter: grayscale(1) brightness(.55); }
.card.is-off:hover .thumb img { filter: grayscale(.7) brightness(.68); }
.card.is-off .thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,12,22,.15), rgba(8,12,22,.72));
    pointer-events: none;
}
.badge-off {
    position: absolute; top: 7px; left: 7px; z-index: 2;
    background: rgba(0,0,0,.62); color: #b8c0d0;
    border: 1px solid rgba(255,255,255,.16);
    font-size: 10px; font-weight: 800; letter-spacing: .4px;
    padding: 3px 8px; border-radius: 10px;
}
.lastseen {
    position: absolute; bottom: 7px; left: 7px; z-index: 2;
    background: rgba(0,0,0,.6); color: #cfd6e4;
    font-size: 11px; padding: 3px 8px; border-radius: 9px;
}
.card.is-off .name { color: var(--muted, #8A93A8); }

/* ---------- /favorites/ ---------- */
/* Every grid page has the tag bar between the nav and the h1; this one does
   not, so the heading sat right against the nav bar. */
.fav-main h1.page { margin: 14px 0 10px; }

.fav-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 18px; color: var(--muted, #8A93A8); font-size: 13px;
}
.fav-head b { color: var(--text, #E6E9F0); }
.fav-live-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(57,217,138,.12); border: 1px solid rgba(57,217,138,.35);
    color: var(--live); border-radius: 999px; padding: 4px 11px;
    font-size: 12.5px; font-weight: 700;
}
.fav-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }

.fav-empty { text-align: center; padding: 46px 18px 60px; }
.fav-empty svg { width: 54px; height: 54px; stroke: var(--border, #2A3A5C); fill: none; stroke-width: 1.5; }
.fav-empty h2 { font-size: 17px; margin: 14px 0 6px; }
.fav-empty p { color: var(--muted, #8A93A8); font-size: 13.5px; margin: 0 0 18px; line-height: 1.6; }
.fav-empty .btn-ghost { display: inline-block; }
.fav-error { color: var(--muted, #8A93A8); font-size: 13.5px; }

/* count badge, used on the mobile tab and the menu drawer */
/* [hidden] works by setting display:none in the UA stylesheet, so ANY explicit
   display rule beats it — the empty pill rendered as a white dot. */
.fav-count[hidden] { display: none !important; }
.fav-count {
    display: inline-block; min-width: 17px; height: 17px; padding: 0 5px;
    background: var(--pink, var(--accent)); color: #fff; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}

/* desktop header button — heart + count, sits with TOP/NEW/RANDOM */
.btn-fav { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.btn-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn-fav:hover svg { fill: #fff; stroke: #fff; }
.btn-fav .fav-count { background: #fff; color: var(--pink, var(--accent)); }
.btn-fav:hover .fav-count { background: rgba(0,0,0,.25); color: #fff; }

/* Label + separation. TOP / NEW / RANDOM are three orderings of one grid;
   Favorites is a personal destination, not a fourth sort. Sitting unlabelled in
   the same pill row, the bare heart read as a sort button that had lost its
   text — so it gets the word, and a hairline to say it is not one of the three.

   The word does that job on its own. An earlier pass also put a 1px divider
   before the button; it went, because the heart icon, the mixed case against
   TOP/NEW/RANDOM, and the count badge already say "not a sort mode" three
   times over — and at 1px in a busy header a line reads as a smudge rather
   than as structure. Use extra SPACE if this ever needs regrouping, not a rule.

   No .fav-label rule is needed: .btn-fav above is already inline-flex with a
   gap, and the span inherits the button's font. */
/* Between 900 and ~1100px the header carries the logo, the online pill, the
   search form and four buttons — the heart alone survives that squeeze fine.
   Floor stays above 900px because mobilebar.css hides .top-right entirely below
   it and the bottom bar's Favorites tab takes over. */
@media (max-width: 1100px) {
    .fav-label { display: none; }
}

/* The heart FILLS once something is saved. favorites.js drops [hidden] from
   .fav-count only when the list is non-empty, so that attribute is already an
   accurate "has favourites" signal — no new class needed on the JS side.

   The :hover line is not redundant: :has() carries its argument's specificity,
   so the rule above would otherwise outrank `.btn-fav:hover svg` and kill the
   white hover fill. Delete both lines to keep the heart permanently outlined.
   Where :has() is unsupported it stays outlined too, which is today's
   behaviour. */
.btn-fav:has(.fav-count:not([hidden])) svg { fill: currentColor; }
.btn-fav:has(.fav-count:not([hidden])):hover svg { fill: #fff; stroke: #fff; }


/* menu drawer / mobile tab badge */
.mb-menu-body a[href="/favorites/"] { position: relative; }


/* ---------- performer page rail button ---------- */
.fav-rail {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; cursor: pointer; font: inherit;
    background: transparent; color: var(--text, #E6E9F0);
    border: 1px solid var(--border, #2A3A5C); border-radius: 10px;
    padding: 11px 14px; font-size: 14px; font-weight: 700;
    transition: border-color .15s, background .15s, color .15s;
}
.fav-rail svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.fav-rail:hover { border-color: var(--pink, var(--accent)); color: var(--pink, var(--accent)); }
.fav-rail.is-on {
    background: rgba(233,30,99,.12);
    border-color: var(--pink, var(--accent));
    color: var(--pink, var(--accent));
}
.fav-rail.is-on svg { fill: currentColor; }
.fav-rail.bump { transform: scale(1.02); }
.fav-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted, #8A93A8); text-align: center; line-height: 1.5; }
/* ---------------------------------------------------------------------------
 * Foldables / large portrait tablets (iPad ~834px, Galaxy Fold ~884px). Match
 * the site.css tablet type-scale so the /favorites/ page and the offline-card
 * overlays aren't left at phone sizes. The favourite cards themselves reuse
 * .card/.grid, so their size + name come from site.css already; only the
 * favourites-specific bits scale here: the save heart (also a touch bigger on
 * every card, which suits the larger tablet thumbnails), the OFFLINE / last-seen
 * overlays, the live/saved status line, and the empty state. Phones (<700px) and
 * desktop (>900px) untouched.
 * ------------------------------------------------------------------------ */
@media (min-width: 700px) and (max-width: 900px) {
    .fav-btn { width: 34px; height: 34px; }
    .fav-btn svg { width: 18px; height: 18px; }
    .badge-off { font-size: 11px; }
    .lastseen { font-size: 12.5px; }
    .fav-head { font-size: 14.5px; }
    .fav-live-pill { font-size: 13.5px; padding: 5px 13px; }
    .fav-empty h2 { font-size: 19px; }
    .fav-empty p { font-size: 14.5px; }
}