/* Labaran Hausa v6 – feed refresh, YouTube-style watch page, magazine /home, Spotify-style Rediyo.
   Loads after feed.css and uses the same tokens (light + dark). */

/* ===== Front feed: refresh ===== */
#lhfFeed.is-refreshing{opacity:.45;transition:opacity .2s}
.lhf-h .lhf-h__btn{margin-left:auto}

/* ===== Watch page (YouTube style) ===== */
.lhf-yt{max-width:1400px;margin:0 auto;padding:0 0 24px;display:grid;gap:12px}
.lhf-yt__stage{background:#000;aspect-ratio:16/9;width:100%;position:relative}
.lhf-yt__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.lhf-yt__missing{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;color:#fff;padding:16px}
.lhf-yt__missing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}
.lhf-yt__missing p{position:relative;margin:0}
.lhf-yt__admin{font-size:13px;color:var(--gold)}
.lhf-yt__article>*:not(.lhf-yt__stage){margin-left:12px;margin-right:12px}
.lhf-yt__title{font-size:19px;line-height:1.3;margin:12px 12px 8px}
.lhf-yt__row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.lhf-yt__chan{display:flex;align-items:center;gap:10px;min-width:0}
.lhf-yt__av img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--ink);display:block}
.lhf-yt__chan strong{display:block;font-size:15px;line-height:1.2}
.lhf-yt__chan span:not(.lhf-yt__av){font-size:12px;color:var(--muted)}
.lhf-yt__sub{background:var(--text);color:var(--bg);border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;margin-left:6px}
.lhf-yt__acts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.lhf-yt__acts::-webkit-scrollbar{display:none}
.lhf-yt__btn{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--chip);color:var(--text);font:600 14px/1 inherit;font-family:inherit;padding:11px 16px;cursor:pointer;min-height:40px}
.lhf-yt__btn:hover{background:var(--line)}
.lhf-yt__btn--wa{background:var(--wa);color:#04210f}
.lhf-yt__desc{background:var(--chip);border-radius:12px;padding:12px 14px;margin-top:12px}
.lhf-yt__stats{margin:0;font-size:14px}
.lhf-yt__tag{color:var(--gold-ink);font-weight:600;margin-left:4px}
.lhf-yt__text{margin-top:8px;font-size:15px;max-height:3.2em;overflow:hidden;position:relative}
.lhf-yt__desc.is-open .lhf-yt__text{max-height:none}
.lhf-yt__more{background:none;border:0;font:700 14px inherit;font-family:inherit;color:var(--text);padding:6px 0 0;cursor:pointer}
.lhf-yt__auto{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-top:10px}
.lhf-yt__h{font-size:18px;margin:16px 12px 8px}
.lhf-yt__comments{margin:12px;padding:12px}
.lhf-yt__side{padding:0 12px;display:grid;gap:12px;align-content:start}
.lhf-yt__side .lhf-yt__h{margin:4px 0}
.lhf-yt__up{display:grid;grid-template-columns:168px 1fr;gap:10px;align-items:start}
.lhf-yt__thumb{position:relative;aspect-ratio:16/9;background:var(--ink);border-radius:10px;overflow:hidden;display:block}
.lhf-yt__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lhf-yt__thumb i{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;padding-left:2px;opacity:0;transition:opacity .15s}
.lhf-yt__up:hover .lhf-yt__thumb i{opacity:1}
.lhf-yt__info{display:grid;gap:2px;min-width:0}
.lhf-yt__info strong{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lhf-yt__info em{font-style:normal;font-size:12px;color:var(--muted)}
@media (min-width:700px){.lhf-yt__title{font-size:22px}.lhf-yt__up{grid-template-columns:200px 1fr}}
@media (min-width:1000px){
  .lhf-yt{grid-template-columns:minmax(0,1fr) 400px;gap:24px;padding:16px 24px 32px}
  .lhf-yt__stage{border-radius:14px;overflow:hidden}
  .lhf-yt__article>*:not(.lhf-yt__stage),.lhf-yt__h,.lhf-yt__comments{margin-left:0;margin-right:0}
  .lhf-yt__side{padding:0}
  .lhf-yt__comments{margin:16px 0 0}
}
body.lhf-watch .lhf-yt__stage{max-height:78vh}

/* ===== Magazine /home ===== */
.lhf-mag{max-width:1240px;margin:0 auto;padding:12px}
.lhf-mag__h{font-size:20px;margin:26px 0 12px;display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--text);padding-bottom:6px}
.lhf-mag__h a{display:flex;align-items:baseline;gap:10px;width:100%}
.lhf-mag__h span{background:var(--text);color:var(--bg);padding:4px 12px;margin-bottom:-8px;border-radius:6px 6px 0 0}
.lhf-mag__h small{margin-left:auto;font-size:13px;color:var(--muted)}
.lhf-mag__hero{display:grid;gap:8px}
.lhf-mag__big,.lhf-mag__mini{position:relative;display:block;overflow:hidden;border-radius:14px;background:var(--ink);color:#fff}
.lhf-mag__big{aspect-ratio:4/3}
.lhf-mag__big img,.lhf-mag__mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lhf-mag__big:hover img,.lhf-mag__mini:hover img{transform:scale(1.04)}
.lhf-mag__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,12,28,.92),rgba(8,12,28,.05) 65%)}
.lhf-mag__txt{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:grid;gap:6px}
.lhf-mag__txt em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.lhf-mag__txt strong{font-size:21px;line-height:1.25}
.lhf-mag__minis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lhf-mag__mini{aspect-ratio:4/3}
.lhf-mag__mini .lhf-mag__txt{padding:10px}.lhf-mag__mini strong{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lhf-mag__trend ol{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:n}
.lhf-mag__trend a{display:flex;gap:14px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.lhf-mag__trend b{font-size:34px;font-weight:800;line-height:1;color:var(--gold-ink);min-width:36px;text-align:center}
.lhf-mag__trend span{font-weight:700;line-height:1.35}
.lhf-mag__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.lhf-mag__card{display:grid;gap:6px;align-content:start}
.lhf-mag__card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:var(--chip)}
.lhf-mag__card strong{font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lhf-mag__card:hover strong{color:var(--gold-ink)}
.lhf-mag__card em{font-style:normal;font-size:12px;color:var(--muted)}
.lhf-mag__dark{background:var(--ink);color:#fff;border-radius:16px;padding:4px 14px 16px;margin-top:26px}
.lhf-mag__dark .lhf-mag__h{border-color:var(--gold)}.lhf-mag__dark .lhf-mag__h span{background:var(--gold);color:#000}.lhf-mag__dark small{color:var(--on-dark)}
.lhf-mag__follow{margin:24px 0}
.lhf-mag__all{text-align:center;margin:24px 0}
@media (min-width:700px){
  .lhf-mag__hero{grid-template-columns:1.6fr 1fr}
  .lhf-mag__big{aspect-ratio:auto;min-height:420px}
  .lhf-mag__txt strong{font-size:28px}
  .lhf-mag__minis{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .lhf-mag__trend ol{grid-template-columns:1fr 1fr;column-gap:32px}
  .lhf-mag__grid{grid-template-columns:repeat(4,1fr);gap:16px}
}

/* ===== Rediyo (Spotify style – always dark) ===== */
.lhf-sp-wrap{max-width:1100px;margin:0 auto;padding:12px}
.lhf-sp{--sp-bg:#121212;--sp-2:#181818;--sp-3:#282828;--sp-g:#1db954;--sp-t:#fff;--sp-m:#b3b3b3;
  background:linear-gradient(#1f4d36 0,#162e24 220px,var(--sp-bg) 420px);color:var(--sp-t);border-radius:16px;overflow:hidden;padding-bottom:24px}
.lhf-sp button,.lhf-sp input{font-family:inherit}
.lhf-sp :focus-visible{outline:2px solid #fff;outline-offset:2px}
.lhf-sp__hero{display:flex;gap:18px;align-items:flex-end;padding:28px 18px 18px}
.lhf-sp__cover{flex:none;width:112px;height:112px;border-radius:8px;overflow:hidden;background:#0e1530;box-shadow:0 8px 32px rgba(0,0,0,.5);display:grid;place-items:center}
.lhf-sp__cover img{width:80%;height:80%;object-fit:contain}
.lhf-sp__head{min-width:0}
.lhf-sp__kind{font-size:12px;font-weight:700}
.lhf-sp__head h1{font-size:28px;line-height:1.1;margin:4px 0 8px;font-weight:800;letter-spacing:-.02em}
.lhf-sp__head p{margin:0;font-size:14px;color:#e0e0e0}
.lhf-sp__bar{display:flex;align-items:center;gap:14px;padding:6px 18px 14px}
.lhf-sp__go{width:56px;height:56px;border-radius:50%;border:0;background:var(--sp-g);color:#000;font-size:22px;padding-left:4px;cursor:pointer;transition:transform .12s}
.lhf-sp__go:hover{transform:scale(1.06);background:#3be477}
.lhf-sp__ico{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--sp-m);font-size:20px;cursor:pointer}
.lhf-sp__ico:hover{color:#fff}
.lhf-sp__search{margin-left:auto;flex:1;max-width:260px}
.lhf-sp__search input{width:100%;border:0;border-radius:6px;background:var(--sp-3);color:#fff;padding:10px 14px;font-size:15px}
.lhf-sp__search input::placeholder{color:var(--sp-m)}
.lhf-sp__thead{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:6px 22px;margin:0 8px;border-bottom:1px solid #ffffff1f;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--sp-m)}
.lhf-sp__list{list-style:none;margin:8px 0 0;padding:0 8px}
.lhf-sp-row{display:grid;grid-template-columns:44px 44px 1fr auto;gap:12px;align-items:center;padding:6px 14px;border-radius:6px}
.lhf-sp-row:hover{background:#ffffff1a}
.lhf-sp-row[hidden]{display:none}
.lhf-sp-row__play{position:relative;width:44px;height:44px;background:none;border:0;color:var(--sp-m);cursor:pointer;display:grid;place-items:center}
.lhf-sp-row__ic,.lhf-sp-row__eq{position:absolute;display:none;color:#fff}
.lhf-sp-row:hover .lhf-sp-row__n{display:none}.lhf-sp-row:hover .lhf-sp-row__ic{display:block}
.lhf-sp-row__eq{gap:2px;align-items:flex-end;height:14px}
.lhf-sp-row__eq b{width:3px;background:var(--sp-g);height:100%;animation:lhfEq 1s ease-in-out infinite}
.lhf-sp-row__eq b:nth-child(2){animation-delay:.25s}.lhf-sp-row__eq b:nth-child(3){animation-delay:.5s}
@keyframes lhfEq{0%,100%{transform:scaleY(.3);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}}
.lhf-sp-row.is-playing .lhf-sp-row__n,.lhf-sp-row.is-playing:hover .lhf-sp-row__ic{display:none}
.lhf-sp-row.is-playing .lhf-sp-row__eq{display:flex}
.lhf-sp-row.is-playing strong{color:var(--sp-g)}
.lhf-sp-row__art img{width:44px;height:44px;border-radius:4px;object-fit:cover;display:block;background:#0e1530}
.lhf-sp-row__art{display:none}
.lhf-sp-row__txt{display:grid;min-width:0}
.lhf-sp-row__txt strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lhf-sp-row__txt em{font-style:normal;font-size:13px;color:var(--sp-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lhf-sp-row__acts{display:flex}
.lhf-sp__none{padding:16px 24px;color:var(--sp-m)}
.lhf-sp__shelf{padding:22px 18px 0}
.lhf-sp__shelf h2{font-size:22px;font-weight:800;display:flex;justify-content:space-between;align-items:baseline;margin:0 0 12px}
.lhf-sp__shelf h2 a{font-size:13px;color:var(--sp-m);font-weight:700}
.lhf-sp__cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin}
.lhf-sp-card{flex:none;width:158px;scroll-snap-align:start;background:var(--sp-2);border-radius:8px;padding:12px;display:grid;gap:4px;align-content:start;transition:background .2s}
.lhf-sp-card:hover{background:var(--sp-3)}
.lhf-sp-card__play{background:none;border:0;padding:0;cursor:pointer;display:block;width:100%}
.lhf-sp-card__art{position:relative;display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#0e1530;margin-bottom:6px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.lhf-sp-card__art img{width:100%;height:100%;object-fit:contain;padding:14%}
.lhf-sp-card__art i{position:absolute;right:8px;bottom:8px;width:42px;height:42px;border-radius:50%;background:var(--sp-g);color:#000;display:grid;place-items:center;font-style:normal;padding-left:3px;opacity:0;transform:translateY(8px);transition:.2s}
.lhf-sp-card:hover i,.lhf-sp-card__play:focus-visible i,.lhf-sp-card.is-playing i{opacity:1;transform:none}
.lhf-sp-card strong{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lhf-sp-card.is-playing strong{color:var(--sp-g)}
.lhf-sp-card em{font-style:normal;font-size:12px;color:var(--sp-m)}
.lhf-sp__cta{margin:26px 18px 0;background:linear-gradient(90deg,#1db954,#0f7a37);color:#000;border-radius:12px;padding:18px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lhf-sp__cta h2{font-size:18px;margin:0 0 2px}.lhf-sp__cta p{margin:0;font-size:14px}
.lhf-sp__pill{background:#000;color:#fff;border:0;border-radius:999px;padding:12px 24px;font-weight:700;cursor:pointer;font-size:15px}
.lhf-sp .lhf-radio{padding:0 18px}
/* player bar on the radio page */
body.lhf-sp-page .lhf-player{background:#181818;box-shadow:0 -1px 0 #282828}
body.lhf-sp-page #lhfToggle{background:#1db954;color:#000;border-radius:50%;width:40px;height:40px;padding:0}
body.lhf-sp-page #lhfPlayerBar{accent-color:#1db954}
@media (min-width:700px){
  .lhf-sp__hero{padding:44px 28px 22px;gap:24px}.lhf-sp__cover{width:200px;height:200px}
  .lhf-sp__head h1{font-size:54px}.lhf-sp__bar,.lhf-sp__shelf{padding-left:28px;padding-right:28px}
  .lhf-sp-row{grid-template-columns:44px 52px 1fr auto}.lhf-sp-row__art{display:block}
  .lhf-sp__thead{grid-template-columns:44px 1fr}.lhf-sp__cta{margin-left:28px;margin-right:28px}
  .lhf-sp-card{width:176px}
}
@media (prefers-reduced-motion:reduce){.lhf-sp-row__eq b{animation:none}}