/* The Library pages — a raga, and the index /ragas/ — in the Player look (docs/28 § 3), in dark and light mode.
   Mode: the device's setting, unless the sun/moon button set data-mr-theme on <html> (assets/theme.js).
   Every --mr-* colour pair is checked for contrast by tests/MelaThemeTest.php. */
/* theme:dark */ .mela-raga-page { --mr-bg: #15110d; --mr-surface: #1c1712; --mr-line: #3a322b; --mr-line-strong: #7d705f; --mr-fg: #ffffff; --mr-muted: #c9bfae; --mr-link: #f2c94c; --mr-nav: #e9e1d3; --mr-gold: #f2c94c; --mr-ink: #1b1407; --mr-focus: #f2c94c; color-scheme: dark; }
@media (prefers-color-scheme: light) {
/* theme:light */ html:not([data-mr-theme="dark"]) .mela-raga-page { --mr-bg: #faf6ef; --mr-surface: #ffffff; --mr-line: #e4d9c7; --mr-line-strong: #8c7b66; --mr-fg: #1f1a14; --mr-muted: #5c5043; --mr-link: #8a4f00; --mr-nav: #3b3229; --mr-gold: #f2c94c; --mr-ink: #1b1407; --mr-focus: #8a4f00; color-scheme: light; }
}
/* theme:light */ html[data-mr-theme="light"] .mela-raga-page { --mr-bg: #faf6ef; --mr-surface: #ffffff; --mr-line: #e4d9c7; --mr-line-strong: #8c7b66; --mr-fg: #1f1a14; --mr-muted: #5c5043; --mr-link: #8a4f00; --mr-nav: #3b3229; --mr-gold: #f2c94c; --mr-ink: #1b1407; --mr-focus: #8a4f00; color-scheme: light; }

body.mela-raga-page { margin: 0; background: var(--mr-bg); color: var(--mr-fg); font: 18px/1.65 Hind, "Segoe UI", system-ui, sans-serif; }
.mela-raga-page a { color: var(--mr-link); }
.mela-raga-page a:focus-visible, .mela-raga-page summary:focus-visible, .mela-raga-page button:focus-visible, .mela-raga-page input:focus-visible { outline: 3px solid var(--mr-focus); outline-offset: 2px; }
.mr-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.mr-header { border-bottom: 1px solid var(--mr-line); }
.mr-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.mr-logo img { display: block; width: 56px; height: 56px; }
.mr-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 16px; }
.mr-nav a { color: var(--mr-nav); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mr-nav a[aria-current="page"] { font-weight: 700; color: var(--mr-fg); }
.mr-nav a.mr-nav-player { padding: 0 16px; border: 1px solid var(--mr-line-strong); border-radius: 22px; color: var(--mr-fg); }
.mr-theme { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mr-line-strong); border-radius: 22px; background: none; color: var(--mr-fg); cursor: pointer; padding: 0; }
.mr-theme .mr-sun { display: none; }
.mr-theme[aria-pressed="true"] .mr-sun { display: block; }
.mr-theme[aria-pressed="true"] .mr-moon { display: none; }

/* the prahar band: its own colour with white text in both modes (contrast: tests/MelaPraharTest.php) */
.mr-band-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 56px; padding-bottom: 48px; }
.mr-title { flex: 1 1 320px; }
.mr-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.mr-eyebrow a { color: inherit !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mr-band h1 { margin: 6px 0; font: 400 clamp(52px, 9vw, 88px)/.95 "Rozha One", Georgia, serif; color: #fff; }
.mr-sub { margin: 0; font-size: 19px; color: rgba(255,255,255,.9); }
.mr-band a:focus-visible { outline-color: #fff; }
.mr-listen { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 18px; background: var(--mr-gold); color: var(--mr-ink) !important; text-decoration: none; font-weight: 700; font-size: 18px; }
.mr-play { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: var(--mr-ink); color: var(--mr-gold); }

.mr-main { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-top: 40px; padding-bottom: 56px; }
.mr-article > p:first-child { font-size: 20px; }
.mr-article { flex: 999 1 560px; min-width: 0; max-width: 70ch; }
.mr-article h2, .mr-facts h2 { font: 400 28px/1.2 "Rozha One", Georgia, serif; margin: 32px 0 12px; }
.mr-facts h2 { margin-top: 0; font: 700 13px/1 Hind, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mr-muted); padding: 16px 18px 6px; }
.mr-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mr-figure { margin: 0; border: 1px solid var(--mr-line); border-radius: 18px; background: var(--mr-surface); overflow: hidden; }
.mr-figure-img { display: block; width: 100%; height: auto; }
.mr-figure figcaption { padding: 10px 16px 12px; font-size: 15px; color: var(--mr-muted); }
.mr-facts { border: 1px solid var(--mr-line); border-radius: 18px; background: var(--mr-surface); overflow: hidden; }
.mr-facts dl { margin: 0; }
.mr-facts dl > div { display: flex; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--mr-line); }
.mr-facts dt { width: 84px; flex: none; font-size: 15px; color: var(--mr-muted); }
/* words with a Term article (Aroha, Thaat, …): a quiet dotted underline, so the facts stay calm */
a.mr-term { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
a.mr-term:hover, a.mr-term:focus-visible { color: var(--mr-link); text-decoration-style: solid; }
.mr-facts dd { margin: 0; font-weight: 600; letter-spacing: .03em; overflow-wrap: anywhere; }
.mr-clips { list-style: none; padding: 0; display: grid; gap: 10px; }
.mr-clips li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--mr-line); border-radius: 14px; background: var(--mr-surface); }
.mr-clips audio { width: 100%; max-width: 420px; }
.mr-clip-text { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1 1 260px; }
.mr-clip-what { font-weight: 700; }
.mr-clip-by { font-size: .88em; color: var(--mr-muted); }
.mr-clip-by a { color: inherit; }
.mr-clip-by > span { white-space: nowrap; }
.mr-help { margin-top: 24px; border: 1px solid var(--mr-line); border-radius: 14px; background: var(--mr-surface); }
.mr-help summary { padding: 14px 18px; cursor: pointer; font-weight: 600; }   /* ~52px tall: a full touch target */
.mr-help-h { margin: 16px 18px 6px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mr-muted); }
.mr-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 12px; }
.mr-table th, .mr-table td { text-align: left; padding: 8px 18px; border-top: 1px solid var(--mr-line); overflow-wrap: anywhere; }
.mr-more { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mr-more a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border: 1px solid var(--mr-line-strong); border-radius: 22px; color: var(--mr-fg); text-decoration: none; font: 22px "Rozha One", Georgia, serif; }
.mr-all { margin: 14px 0 0; font-weight: 600; }
.mr-soon, .mr-locked { font-size: 20px; color: var(--mr-muted); }
.mr-teaser { max-width: 70ch; }
.mr-lede { font-size: 20px; }
.mr-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 24px; background: var(--mr-gold); color: var(--mr-ink) !important; font-weight: 700; text-decoration: none; }
.mr-new { color: var(--mr-muted); }
.mr-footer { border-top: 1px solid var(--mr-line); font-size: 15px; color: var(--mr-muted); }
.mr-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 20px; padding-bottom: 20px; }

/* the index /ragas/: the prahar clock, search, one section per prahar */
.ml-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; padding-top: 36px; padding-bottom: 12px; }
.ml-intro { flex: 1 1 320px; max-width: 46ch; }
.ml-intro h1 { margin: 0 0 8px; font: 400 clamp(44px, 7vw, 72px)/1 "Rozha One", Georgia, serif; }
.ml-intro p { margin: 0 0 18px; color: var(--mr-muted); }
.ml-clock { flex: 0 1 360px; width: 100%; max-width: 360px; }
.ml-clock svg { display: block; width: 100%; height: auto; }
.ml-clock a path { stroke: var(--mr-bg); stroke-width: 3; }
.ml-clock a:hover path, .ml-clock a:focus-visible path { filter: brightness(1.15); }
.ml-clock a:focus-visible { outline: none; }
.ml-clock a:focus-visible path { stroke: var(--mr-focus); stroke-width: 4; }
.ml-clock .ml-num { fill: #fff; font: 700 17px Hind, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ml-clock .ml-hour { fill: var(--mr-muted); font: 600 11px Hind, sans-serif; text-anchor: middle; dominant-baseline: central; }
.ml-clock .ml-face { fill: var(--mr-surface); stroke: var(--mr-line); }
.ml-clock .ml-hand { stroke: var(--mr-fg); stroke-width: 3; stroke-linecap: round; }
.ml-clock .ml-pin { fill: var(--mr-fg); }
.ml-clock .ml-centre { fill: var(--mr-fg); font: 400 22px "Rozha One", Georgia, serif; text-anchor: middle; dominant-baseline: central; }
.ml-search label { display: block; font-weight: 600; margin-bottom: 6px; }
.ml-search input { width: 100%; max-width: 420px; box-sizing: border-box; min-height: 48px; padding: 0 16px; border: 1px solid var(--mr-line-strong); border-radius: 24px; background: var(--mr-surface); color: var(--mr-fg); font: inherit; }
.ml-none { color: var(--mr-muted); padding: 24px 0; }
.ml-groups { padding-bottom: 56px; }
.ml-group { margin-top: 28px; scroll-margin-top: 16px; }
.ml-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 18px; border-radius: 16px 16px 0 0; color: #fff; }
.ml-group-head h2 { margin: 0; font: 400 28px/1.15 "Rozha One", Georgia, serif; }
.ml-group-head p { margin: 0; color: rgba(255,255,255,.9); font-size: 16px; }
.ml-now { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 12px; background: var(--mr-gold); color: var(--mr-ink); font: 700 13px/1.6 Hind, sans-serif; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.ml-cards { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; border: 1px solid var(--mr-line); border-top: 0; border-radius: 0 0 16px 16px; background: var(--mr-surface); }
.ml-cards a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--mr-line); border-radius: 12px; background: var(--mr-bg); color: var(--mr-fg); text-decoration: none; }
.ml-cards a:hover { border-color: var(--mr-line-strong); }
.ml-name { font: 400 22px/1.2 "Rozha One", Georgia, serif; }
.ml-meta { font-size: 14px; color: var(--mr-muted); }
.ml-soon .ml-name { color: var(--mr-muted); }
.ml-empty { margin: 0; color: var(--mr-muted); grid-column: 1 / -1; }

/* the artist page (docs/29 § 3): round portrait or initials, the gold instrument chip, albums */
.mr-artist-band { align-items: center; }
.mr-portrait { width: 168px; height: 168px; flex: none; border-radius: 50%; border: 4px solid var(--mr-gold); object-fit: cover; object-position: 50% 10%; box-sizing: border-box; }   /* the face: upper part of a portrait */
.mr-initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 400 64px/1 "Rozha One", Georgia, serif; }
.mr-chip { display: inline-block; margin-right: 10px; padding: 3px 14px; border-radius: 16px; background: var(--mr-gold); color: var(--mr-ink); font-size: 14px; font-weight: 700; letter-spacing: .1em; vertical-align: middle; }
.mr-albums { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.mr-albums a { display: flex; flex-direction: column; gap: 8px; color: var(--mr-fg); text-decoration: none; font: 20px/1.2 "Rozha One", Georgia, serif; }
.mr-albums img, .mr-album-blank { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--mr-line); background: var(--mr-surface); }

/* the artists index /artists/ */
.ml-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.ml-letters a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border: 1px solid var(--mr-line-strong); border-radius: 18px; color: var(--mr-fg); text-decoration: none; font-weight: 700; }
.ml-letter { margin: 0 0 10px; font: 400 36px/1 "Rozha One", Georgia, serif; }
.ml-top-plain { justify-content: flex-start; }
.ml-artist-cards { border-top: 1px solid var(--mr-line); border-radius: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ml-artist-cards a { flex-direction: row; align-items: center; gap: 12px; }
.ml-artist-cards a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ml-artist-cards .ml-name { font-size: 20px; overflow-wrap: anywhere; }
.ml-face-small { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 10%; }
.ml-face-small.mr-initials { font-size: 22px; }

@media (max-width: 760px) { .mr-portrait { width: 112px; height: 112px; } .mr-initials { font-size: 44px; } .mr-band-row { padding-top: 28px; padding-bottom: 28px; } .mr-main { gap: 24px; } .mr-table th, .mr-table td { padding: 8px 10px; } .ml-clock { flex-basis: 100%; } }

/* Artist Photos and the full-size view (docs/30 § 4) */
.mr-photos { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0 0 24px; padding: 0; }
.mr-photo { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.mr-photo img { width: 140px; height: 140px; object-fit: cover; object-position: 50% 20%; display: block; }
.mr-photo:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.mr-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.mr-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.mr-lightbox figure { margin: 0; text-align: center; }
.mr-lightbox img { max-width: 92vw; max-height: 82vh; display: block; margin: 0 auto; border-radius: 6px; }
.mr-lightbox-caption { color: #fff; margin-top: 8px; font-size: 15px; }
.mr-lightbox button { position: fixed; color: #fff; background: rgba(0, 0, 0, .4); border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 24px; cursor: pointer; }
.mr-lightbox-close { top: 16px; right: 16px; }
.mr-lightbox-prev { left: 12px; top: 50%; }
.mr-lightbox-next { right: 12px; top: 50%; }
/* Term pages (docs/31 § 2) */
.mela-raga-page a.mr-topic { color: var(--mr-ink); text-decoration: none; }   /* the gold chip: dark text in both modes */
.mr-topic:hover, .mr-topic:focus-visible { text-decoration: underline; }
.mr-videos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.mr-videos figure { margin: 0; }
.mr-videos video { display: block; width: 100%; max-height: 70vh; border-radius: 14px; background: #000; }
.mr-videos figcaption { margin-top: 6px; color: var(--mr-muted); font-size: 15px; }
.mr-term-more { flex: 1 1 100%; }
.mr-term-more h2 { font: 400 28px/1.2 "Rozha One", Georgia, serif; margin: 8px 0 12px; }
.mr-term-more ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mr-term-more ul a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--mr-line); border-radius: 12px; background: var(--mr-surface); color: var(--mr-fg); text-decoration: none; }
.mr-term-more ul a:hover { border-color: var(--mr-line-strong); }
/* /terms/: By topic | A–Z (docs/31 § 3) */
.ml-view { display: inline-flex; margin-top: 16px; border: 1px solid var(--mr-line-strong); border-radius: 22px; overflow: hidden; }
.ml-view button { min-height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--mr-fg); font: 600 16px Hind, sans-serif; cursor: pointer; }
.ml-view button[aria-pressed="true"] { background: var(--mr-fg); color: var(--mr-bg); }
.ml-view button:focus-visible { outline: 3px solid var(--mr-focus); outline-offset: -3px; }
#a-z .ml-letters { margin: 0 0 20px; }