/* Agape Bible - hymns and sermons (public/media.js): categories, albums, recordings. Uses the iOS layer's colours. */
.md-page { padding-bottom: 8px; }
.md-art { --c1: #8a3a16; --c2: #4e1d08; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff6e6;
  background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 .5px rgba(255, 240, 210, .25), 0 2px 6px rgba(40, 20, 5, .18); }
.md-art[data-cat="tasbeha"], .md-cat[data-cat="tasbeha"] { --c1: #4b4b9a; --c2: #1f2152; }
.md-art[data-cat="liturgy"], .md-cat[data-cat="liturgy"] { --c1: #a3471c; --c2: #5a2008; }
.md-art[data-cat="seasons"], .md-cat[data-cat="seasons"] { --c1: #c9962b; --c2: #7a5212; }
.md-art[data-cat="sermons"], .md-cat[data-cat="sermons"] { --c1: #3f7d5a; --c2: #1b4430; }
.md-art.sm { width: 40px; height: 40px; border-radius: 10px; }
.md-art.lg { width: 104px; height: 104px; border-radius: 22px; box-shadow: inset 0 0 0 .5px rgba(255, 240, 210, .25), 0 12px 28px rgba(40, 20, 5, .25); }

/* the four categories */
.md-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.md-cat { --c1: #8a3a16; --c2: #4e1d08; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 128px; padding: 14px; border: 0; border-radius: 18px;
  text-align: start; color: #fff6e6; font-family: var(--font-ui); cursor: pointer; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 240, 210, .18), transparent 60%), linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: 0 10px 24px rgba(40, 20, 5, .18), inset 0 0 0 .5px rgba(255, 240, 210, .2); transition: transform .18s var(--ease); }
.md-cat:active { transform: scale(.97); }
.md-cat-ico { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 246, 230, .16); margin-bottom: auto; }
.md-cat b { font-size: 17px; font-weight: 700; line-height: 1.25; margin-top: 12px; }
.md-cat small { font-size: 12.5px; opacity: .78; }
body.night .md-cat { box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 0 0 .5px rgba(255, 240, 210, .14); }

/* lists */
.md-gh { margin: 4px 4px 8px; color: var(--label-2); font: 600 13px/1.3 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; }
.md-page .ios-row { gap: 12px; padding-top: 9px; padding-bottom: 9px; }
.md-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; }
.md-row-text b { font-weight: 500; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-row-text small { color: var(--label-2); font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-page .md-album + .ios-row::before, .md-page .md-now + .ios-row::before { inset-inline-start: 68px; }
.md-album.playing .md-row-text b { color: var(--tint); }
.md-now-group { margin-top: -8px; }
.md-now .md-eq { margin-inline-start: 4px; }

/* an album: its picture, who sings or speaks, play */
.md-hero { display: flex; align-items: center; gap: 16px; margin: 2px 0 18px; }
.md-hero-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.md-hero-text b { color: var(--chrome-ink); font-size: 17px; font-weight: 600; }
.md-hero-text small { color: var(--label-2); font-size: 13.5px; line-height: 1.4; }
.md-play { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--tint); color: var(--row); font: 600 15px var(--font-ui); box-shadow: 0 6px 16px rgba(138, 58, 22, .28); transition: transform .15s var(--ease); }
.md-play:active { transform: scale(.95); }
/* voice questions belong to the Bible, not to hymns and sermons */
body[data-page="media"] #pbMic, body[data-page="media"] #npMic { display: none; }

/* the recordings */
.md-track { min-height: 54px; }
.md-n { flex: none; width: 26px; text-align: center; color: var(--label-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.md-d { flex: none; color: var(--label-2); font-size: 13px; font-variant-numeric: tabular-nums; direction: ltr; }
.md-page .md-tracks .ios-row + .ios-row::before { inset-inline-start: 54px; }
.md-track .md-eq { display: none; }
.md-track.playing .md-n { display: none; }
.md-track.playing .md-eq { display: inline-flex; }
.md-track.playing .md-row-text b { color: var(--tint); font-weight: 600; }
.md-src { margin: -6px 4px 0; font-size: 13px; color: var(--label-2); }
.md-src a { color: var(--tint); }

/* the little bars of the recording that plays */
.md-eq { flex: none; width: 26px; height: 16px; display: inline-flex; align-items: flex-end; justify-content: center; gap: 2.5px; color: var(--tint); }
.md-eq i { width: 3px; height: 30%; border-radius: 1.5px; background: currentColor; }
.md-eq.on i { animation: mdEq 1s ease-in-out infinite; }
.md-eq.on i:nth-child(2) { animation-delay: -.35s; }
.md-eq.on i:nth-child(3) { animation-delay: -.7s; }
@keyframes mdEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .md-eq.on i { animation: none; height: 70%; } }

/* phones on their side and wide screens: more categories in a row */
@media (min-width: 640px) { .md-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359px) { .md-cat b { font-size: 15.5px; } .md-art.lg { width: 84px; height: 84px; } }