/* The styles every page shares: the theme tokens, the frame, the home page, the player bar, the work page's layout.
   One file for the whole site (linked from web/templates/base.html with its content hash, so browsers keep it until it changes):
   a change here reaches every page at once, without rebuilding the pages. A page's own styles stay inside that page. */
:root{--f-body:"Noto Sans","Noto Sans Hebrew","Noto Sans Arabic",sans-serif;--f-ar:"Noto Sans Arabic",sans-serif;--f-head:"Noto Naskh Arabic",serif;--f-mono:"Noto Sans Mono","Noto Sans","Noto Sans Hebrew","Noto Sans Arabic",monospace;   /* the fonts: Noto (tools/fonts.py) */
  --sbg0:#0e191f;--sbg:#0b1418;--sbg2:#13232b;--sline:#24363f;--sink:#f3efe6;--smuted:#9fb0b6;--gold:#d8b46a;--gold2:#b8924a;
  --shover:#1b2c34;--scur:#1b2f38;--sgrp:#0f1c23;--slife:rgba(255,255,255,.12);--srow:rgba(255,255,255,.03);--stip:#0b1418ee;--barh:72px;color-scheme:dark}
/* the light theme: the artist page paper palette; follows the system setting until chosen with the theme button (kept in localStorage) */
:root[data-theme=light]{--sbg0:#f5f6f3;--sbg:#ffffff;--sbg2:#ffffff;--sline:#dde1dc;--sink:#1b1f24;--smuted:#5d6670;--gold:#7d5f1e;--gold2:#b8924a;
  --shover:#eceeea;--scur:#e3ecf4;--sgrp:#eef0ec;--slife:rgba(0,0,0,.14);--srow:rgba(0,0,0,.04);--stip:#fffffff2;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--sbg0);color:var(--sink);font-family:var(--f-body)}
body{display:flex;flex-direction:column}
/* the top bar's box before web/nav.js draws it (its measured size), so the page does not move when it appears */
tarab-nav:not(:defined){display:inline-block;width:220px;height:30px}   /* the bar's room before it loads: five icons and the account button (web/nav.js) */
body.has-bar{padding-bottom:calc(var(--barh) + env(safe-area-inset-bottom,0px))}
#view{flex:1 1 auto;min-height:0}
#view .vhost{display:block;height:100%}
/* ---- home: the cards ---- */
.home{background:var(--sbg0);color:var(--sink);min-height:100%}
.home .wrap{max-width:1280px;margin:0 auto;padding:22px 24px 40px}
.home header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
/* Hebrew: the Arabic title stays at the top right, the controls at the left */
[dir=rtl] .home header{flex-direction:row-reverse}
@media (max-width:760px){.home header,[dir=rtl] .home header{flex-direction:column;align-items:stretch;gap:14px}.home .who{margin-left:0}}   /* phones: the bar has its own row, the title starts below it */
.home .who{text-align:right;min-width:0;margin-left:auto}
.home h1{font-family:var(--f-head);font-weight:700;font-size:clamp(34px,5vw,42px);line-height:1.1;margin:0}
.home h1 .h1-tl{display:block;font-family:var(--f-body);font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--smuted);margin-top:6px}   /* the reader's title under the Arabic one, as the artist page's .lat (artist.css) */
[dir=rtl] .home h1 .h1-tl{letter-spacing:0}
.home .sub{color:var(--gold);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:13px;margin-top:22px;text-align:start}
[dir=rtl] .home .sub{letter-spacing:0;text-transform:none;font-size:15px}
.home .lede{color:var(--smuted);max-width:820px;line-height:1.55;font-size:15px;margin:8px 0 0;text-align:start}
.home .lede.ar{font-family:var(--f-ar);font-size:15.5px;color:var(--sink);margin:10px 0 0 auto}
.alt{font-size:13px;color:var(--smuted);text-decoration:none;border:1px solid var(--sline);border-radius:8px;padding:6px 10px}
.alt:hover{color:var(--gold);border-color:var(--gold2)}
.figures{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;font-variant-numeric:tabular-nums}
.figures div{display:flex;flex-direction:column}
.figures b{font:500 24px var(--f-mono);color:var(--gold)}
.figures span{font-size:12px;color:var(--smuted);letter-spacing:.04em;text-transform:uppercase}
[dir=rtl] .figures span{letter-spacing:0;text-transform:none;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:26px}
.card{background:var(--sbg2);border:1px solid var(--sline);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--sink);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.card:hover,.card:focus-visible{border-color:var(--gold);transform:translateY(-2px);outline:none}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(.15);display:block}
.card .noimg{width:100%;aspect-ratio:1/1;background:var(--shover);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .noimg .sil{width:100%;height:100%;fill:var(--smuted);opacity:.28}   /* no portrait yet */
.card .ph{position:relative}
.card .city{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;background:rgba(12,12,12,.52);color:#f2efe8;text-align:center;font:500 10px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;pointer-events:none}
[dir=rtl] .card .city{letter-spacing:0;text-transform:none;font:500 13px/1 var(--f-body)}
.card.feat .city{padding:9px 8px;font-size:12px}
[dir=rtl] .card.feat .city{font-size:15px}
.card .t{padding:10px 12px 12px}
.card .ar{font-family:var(--f-head);font-weight:700;font-size:22px;line-height:1.2}
.card .en{font-size:13px;color:var(--smuted);margin-top:2px}
.card .n{font:500 12px var(--f-mono);color:var(--gold);margin-top:8px}
.card .n span{color:var(--smuted)}
.home footer{color:var(--smuted);font-size:12px;margin-top:28px;line-height:1.6}
.home footer a,.credits a{color:var(--gold)}
.home footer .build{margin-top:6px;font:11px var(--f-mono);text-align:start}
.crp{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px 22px}
.crp li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--sline)}
.crp .th img{width:56px;height:56px;object-fit:cover;border-radius:10px;display:block;filter:grayscale(.15)}
.crp .nm{color:var(--sink);text-decoration:none;font-size:14px}
.crp .nm .ar{font-family:var(--f-head);font-weight:700;font-size:18px}
.crp .meta{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12.5px;color:var(--smuted);margin-top:3px;line-height:1.5}
.crp .meta i{font-style:normal;color:var(--sink);opacity:.7;margin-inline-end:4px}
.crp .meta.unk{font-style:italic}
.crs{border-collapse:collapse;margin-top:14px;font-size:13.5px;min-width:min(520px,100%)}
.crs th,.crs td{padding:6px 18px 6px 0;text-align:start;border-bottom:1px solid var(--sline)}
[dir=rtl] .crs th,[dir=rtl] .crs td{padding:6px 0 6px 18px}
.crs th{font-weight:600;color:var(--smuted);font-size:12px}
.crs td:nth-child(n+2){font-variant-numeric:tabular-nums}
@media (max-width:760px){.credits h1{font-size:28px}.crp{grid-template-columns:1fr}}
.cards{grid-auto-flow:dense}
.sech{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--smuted);margin:30px 0 -12px}
[dir=rtl] .sech{letter-spacing:0;text-transform:none;font-size:14px}
.secdiv{margin-top:40px;padding-top:22px;border-top:1px solid var(--sline)}
.alsoon{display:grid;gap:18px}
.alsoon .mline h3{margin:0 0 8px;font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--smuted)}
[dir=rtl] .alsoon .mline h3{letter-spacing:0;text-transform:none;font-size:14px}
.alsoon .mline p{margin:0;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px;line-height:1.5}
.alsoon .mline a{color:var(--sink);text-decoration:none;white-space:nowrap}
.alsoon .mline a:hover{color:var(--gold)}
.alsoon .mline a span{color:var(--smuted);font-size:12.5px}
.card.feat{grid-column:span 2;grid-row:span 2}
.card.feat .ph{flex:1;position:relative;min-height:0}
.card.feat .ph img,.card.feat .ph .noimg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.card.feat .t{padding:14px 16px 16px}
.card.feat .ar{font-size:32px}
.card.feat .en{font-size:15px}
@media (max-width:760px){.cards{grid-template-columns:repeat(2,1fr);gap:10px}.card.feat{grid-row:auto}.card.feat .ph{flex:none;aspect-ratio:4/3}.card.feat .ar{font-size:24px}.card .ar{font-size:18px}.home .wrap{padding:16px 14px 40px}.home .lede{font-size:14px}}
/* ---- the player bar: fixed, survives navigation ---- */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sbg);color:var(--sink);border-top:1px solid var(--gold2);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));min-height:var(--barh)}
#bar[hidden]{display:none}
#ytwrap{position:relative;width:112px;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;flex:none;transition:width .2s}
#ytwrap iframe,#yt{position:absolute;inset:0;width:100%;height:100%;border:0}
#ytwrap{grid-column:1}.np{grid-column:2}.ctl{grid-column:3}   /* fixed places: the title and the controls stay put whatever the video does */
#bar.big #ytwrap{position:fixed;inset-inline-start:12px;bottom:calc(var(--barh) + 10px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100vw - 24px));box-shadow:0 10px 30px #0008;border:1px solid var(--gold2)}
#bar.big,#bar.docked{grid-template-columns:0 minmax(0,1fr) auto}   /* the video above the bar (enlarged) or over the page (docked): its column empties */
/* ---- the page of one work ---- */
.wk{background:var(--sbg0);color:var(--sink);min-height:100%}
.wk .wrap{max-width:1180px;margin:0 auto;padding:22px 24px 72px}
.wk a{color:var(--gold);text-decoration:none}
.wk a:hover{text-decoration:underline;text-underline-offset:3px}
.wk a:focus-visible,.wk button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wk-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
[dir=rtl] .wk-top{flex-direction:row-reverse}
.wk-back{display:inline-flex;align-items:center;gap:10px;font-size:14px}
.wk .wk-back{color:var(--smuted)}
.wk .wk-back:hover{color:var(--gold);text-decoration:none}
.wk-back img{width:34px;height:34px;border-radius:50%;object-fit:cover;filter:grayscale(.2)}
.wk-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,42%);grid-template-areas:"head play" "credits play";column-gap:56px;margin-top:44px;align-items:start}
.wk-head{grid-area:head;min-width:0}
.wk h1{font-family:var(--f-head);font-weight:700;font-size:clamp(34px,4.2vw,58px);line-height:1.3;margin:0;overflow-wrap:anywhere}
.wk .ar{font-family:var(--f-ar)}
.wk-second{font-size:clamp(20px,2.4vw,32px);color:var(--smuted);margin:6px 0 0;line-height:1.35}
.wk-also{font-size:14px;color:var(--smuted);margin:8px 0 0;line-height:1.5}
.wk-date{margin:30px 0 0;display:flex;flex-direction:column;gap:2px}
.wk-date b{font-size:30px;font-weight:500;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1}
.wk-date span{font-size:14px;color:var(--smuted)}
.wk-date.none b{font-size:18px;color:var(--smuted);font-weight:400}
.wk-credits{grid-area:credits;margin:28px 0 0;display:flex;flex-direction:column}
.wk dl div{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);gap:16px;padding:9px 0;border-top:1px solid var(--sline)}
.wk dl div:last-child{border-bottom:1px solid var(--sline)}
.wk dt{font-size:13px;color:var(--smuted);padding-top:2px}
.wk dd{margin:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.wk dd .ar{font-size:16px}
.wk-play{grid-area:play;position:relative}
.wk-screen{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wk-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-screen[role=button]{cursor:pointer}
.wk-screen p{position:relative;color:#d9d9d9;font-size:14px;padding:0 24px;text-align:center}
.wk-screen[data-on="1"]>*{visibility:hidden}
.wk-qbtns{display:flex;gap:8px;margin-top:18px}
.wk-qbtns button{background:none;border:1px solid var(--sline);border-radius:8px;color:var(--smuted);font:inherit;font-size:13px;padding:6px 12px;cursor:pointer}
.wk-qbtns button:hover{color:var(--gold);border-color:var(--gold2)}
.wk-qbtns .fav-row{border:0;padding:0 4px;margin:0}   /* the song's heart, first in its row (6 Nov 2026) */
.wk h2{font-size:18px;font-weight:600;margin:0 0 6px;line-height:1.3}
.wk section{margin-top:56px}
.wk-facts{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;row-gap:40px}
.wk-hint{font-size:14px;color:var(--smuted);margin:0 0 18px;line-height:1.5}
.wk-details h2{margin-bottom:18px}
.wk-record ol{list-style:none;margin:0;padding:0;position:relative}
.wk-record ol::before{content:"";position:absolute;inset-block:8px;inset-inline-start:5px;width:1px;background:var(--sline)}
.wk-record li{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;padding-block:6px;padding-inline:26px 0}
.wk-record li::before{content:"";position:absolute;inset-inline-start:1px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--sbg0);border:1px solid var(--smuted)}
.wk-record time{font-variant-numeric:tabular-nums;font-size:15px}
.wk-record span{font-size:15px;color:var(--smuted);line-height:1.45}
.wk-record li.lead::before{background:var(--gold);border-color:var(--gold)}
.wk-record li.lead time{color:var(--gold);font-weight:600}
.wk-record li.lead span{color:var(--sink)}
.wk-notes h2{margin-bottom:14px}
.wk-notes h2:not(:first-child){margin-top:36px}
.wk-notes p{font-size:16px;line-height:1.75;margin:0 0 16px;color:var(--sink)}
.wk-recs ul{list-style:none;margin:14px 0 0;padding:0}
.rec{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;background:none;border:0;border-top:1px solid var(--sline);padding:10px 0;color:var(--sink);font:inherit;text-align:start;cursor:pointer}
.wk-recs li:last-child .rec{border-bottom:1px solid var(--sline)}
.rec>bdi{font-size:15px;line-height:1.4}
.rec small{font-size:13px;color:var(--smuted)}
.rec small b{font-weight:500;font-variant-numeric:tabular-nums;margin-inline-start:6px}
.rec:hover>bdi{color:var(--gold)}
.rec[aria-current=true]>bdi{color:var(--gold);font-weight:600}
.wk-sources dl{margin:14px 0 0}
.wk-sources dd{font-size:14px}
.wk-sources dd a bdi{color:var(--smuted)}
.wk-sources .sep{color:var(--smuted)}
.wk-pages p{display:flex;flex-wrap:wrap;gap:8px 24px;margin:10px 0 0;font-size:16px}
.wk footer{margin-top:72px;padding-top:24px;border-top:1px solid var(--sline);color:var(--smuted);font-size:13px;line-height:1.65}
.wk footer h2{font-size:14px;color:var(--sink)}
.wk footer p{margin:6px 0 12px}
.wk footer p a{text-decoration:underline;text-underline-offset:2px}   /* links inside a sentence are underlined, not told apart by colour alone */
@media (max-width:860px){
  .wk .wrap{padding:16px 16px 56px}
  .wk-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "play" "credits";margin-top:28px}
  .wk-play{margin-top:24px}
  .wk-facts{grid-template-columns:minmax(0,1fr)}
  .wk section{margin-top:44px}
  .wk-date b{font-size:26px}
}
/* docked: the player laid over the 16:9 box at the top of a work page (position set by app.js) */
#bar.docked #ytwrap{z-index:60;border-radius:12px;transition:none;box-shadow:0 8px 28px #0006}
.np{min-width:0;display:flex;flex-direction:column;gap:2px}
.np b{font-family:var(--f-head);font-size:19px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np span{font-size:12px;color:var(--smuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
/* the notice (app.flash): a word above the bar's end for a moment, «Link copied», «Added to Rast · Undo»; the bar's own lines are never written over */
#notice{position:fixed;inset-inline-end:12px;bottom:calc(var(--barh) + 10px + env(safe-area-inset-bottom,0px));z-index:62;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100vw - 24px));padding:9px 14px;background:var(--sbg);color:var(--sink);border:1px solid var(--gold2);border-radius:10px;box-shadow:0 10px 30px #0008;font-size:13px;line-height:1.3}
#notice[hidden]{display:none}
body:not(.has-bar) #notice{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
#notice .undo{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}
.ctl{display:flex;align-items:center;gap:4px;flex:none}
.ctl button,.ctl a{background:none;border:0;color:var(--sink);width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;text-decoration:none;font:inherit}
.ctl button:hover,.ctl a:hover{background:var(--shover)}
.ctl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rep .r1,.rep.one .r0{display:none}
.rep.one .r1{display:block}
#b-play #i-pause,#b-play.playing #i-play{display:none}   /* play / pause is one toggle */
#b-play.playing #i-pause{display:block}
#b-play.nudge{color:var(--gold);animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.ctl button[aria-pressed=true]{color:var(--gold)}
.ctl .big svg{width:26px;height:26px}
.ctl .cnt{position:absolute;top:2px;inset-inline-end:2px;font:600 10px var(--f-mono);background:var(--gold);color:var(--sbg);border-radius:999px;padding:0 5px;line-height:1.5}
.ctl .rel{position:relative}
.ctl .fav[aria-pressed=true] svg{fill:currentColor}
/* "Add to list" (the owner, 7 Nov 2026): a menu of our own above its control (8 Nov: the browser's dropdown drew a second mark); the control reads «Add to list» or «✓ list», gold when the song is in a list */
#b-addbox{position:relative;display:inline-flex;align-items:center}
#b-addbox[hidden]{display:none}
.ctl #b-add{width:auto;max-width:150px;height:30px;gap:4px;padding:0 6px 0 10px;border:1px solid var(--sline);font-size:13px}
[dir=rtl] .ctl #b-add{padding:0 10px 0 6px}
.ctl #b-add .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ctl #b-add svg{width:16px;height:16px;flex:none}
.ctl #b-add.on{color:var(--gold);border-color:var(--gold2)}
.addmenu{min-width:210px;max-width:min(300px,calc(100vw - 24px));background:var(--sbg);border:1px solid var(--gold2);border-radius:12px;box-shadow:0 10px 30px #0008;padding:6px;z-index:61;display:flex;flex-direction:column}
.addmenu[hidden]{display:none}
#b-addbox .addmenu{position:absolute;bottom:calc(100% + 10px);inset-inline-end:0}   /* the bar's: above its control */
.clip-savebox .addmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:62}   /* the clip's: a pulldown under its control, above the docked video (z 60), which hid it when it opened upward (the owner, 8 Nov 2026) */
#rowmenu{position:fixed;z-index:70}   /* the row controls' one menu, placed by the button pressed (app.js rowMenu) */
.addmenu .h{padding:6px 10px 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--smuted)}
[dir=rtl] .addmenu .h{letter-spacing:0;text-transform:none;font-size:12px}
.addmenu button{display:flex;align-items:center;width:100%;height:34px;justify-content:flex-start;gap:8px;padding:0 10px;font-size:14px;background:none;border:0;border-radius:8px;color:var(--sink);font:inherit;cursor:pointer;text-align:start}
.addmenu button:hover{background:var(--shover)}
.addmenu button .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addmenu .ck{width:16px;flex:none;color:var(--gold);text-align:center}
.addmenu [data-list=new]{color:var(--gold);border-top:1px solid var(--sline);border-radius:0 0 8px 8px;margin-top:4px;height:38px}
@media (max-width:760px){.ctl{min-width:0}.ctl>button{flex:none}#b-addbox{flex:1 1 auto;min-width:0}.ctl #b-add{width:100%;max-width:110px;min-width:58px;padding:0 4px 0 6px}[dir=rtl] .ctl #b-add{padding:0 6px 0 4px}}   /* the phone: with the docked video the bar has 374px for 112 + the controls; the control gives up width down to its ✓ so the chevron stays on screen */
/* the person's playlists page (/me/lists): rows like the home page's playlists, the controls like the bar's (icons, no boxes) */
.ml-handle{margin:14px 0 0;font-size:14px;color:var(--smuted)}
.ml-handle b{color:var(--gold)}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ml-rows{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--sline)}
.ml-rows li{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--sline)}
.ml-pics{position:relative;flex:none;width:84px;height:56px;display:block;isolation:isolate}   /* its own stacking context: the pictures behind the first stay inside it */
.ml-pics img{position:absolute;top:0;left:0;width:72px;height:54px;object-fit:cover;border-radius:6px;background:var(--sbg2);box-shadow:0 0 0 1px var(--sbg)}
.ml-pics img:nth-child(2){left:6px;top:1px;z-index:-1;filter:brightness(.85)}
.ml-pics img:nth-child(3){left:12px;top:2px;z-index:-2;filter:brightness(.7)}
[dir=rtl] .ml-pics img{left:auto;right:0}[dir=rtl] .ml-pics img:nth-child(2){right:6px}[dir=rtl] .ml-pics img:nth-child(3){right:12px}
.ml-pics:empty{width:0;margin-inline-end:-12px}
.ml-txt{flex:1 1 auto;min-width:0}
.ml-txt .nm{display:block;font-weight:600;font-size:16px;color:var(--sink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-txt .nm:hover{color:var(--gold)}
.ml-m{display:block;font-size:12px;color:var(--smuted);margin-top:2px}
.ml-act{display:flex;flex:none;gap:2px}
.ml-act button,.ml-add{background:none;border:0;color:var(--sink);width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font:inherit}
.ml-act button:hover,.ml-add:hover{background:var(--shover)}
.ml-act svg,.ml-add svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ml-act [data-del]:hover{color:#c0392b}
.ml-newbox{margin-top:12px}
.ml-add{width:auto;gap:8px;padding:0 12px 0 8px;color:var(--gold)}
.ml-add[hidden]{display:none}
.ml-new{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ml-new[hidden]{display:none}
.ml-new input,.nm-edit{height:36px;border:1px solid var(--sline);border-radius:8px;background:var(--sbg2);color:var(--sink);font:inherit;padding:0 10px;min-width:0;flex:1 1 200px}
.nm-edit{display:block;width:100%;max-width:420px;font-weight:600;font-size:16px;box-sizing:border-box}
.ml-new button[type=submit]{height:36px;border:0;border-radius:8px;background:var(--gold);color:var(--sbg);font:inherit;font-weight:600;padding:0 14px;cursor:pointer}
.ml-new .lnk{height:auto;background:none;border:0;color:var(--smuted);font:inherit;padding:0;cursor:pointer}
/* a question or a name asked on the page (app.sheet): a small sheet in the bar's style, the choices text pills, the one that acts in gold */
dialog.sheet{border:1px solid var(--sline);border-radius:12px;background:var(--sbg);color:var(--sink);padding:18px 20px;max-width:400px;width:calc(100vw - 32px);box-shadow:0 10px 30px #0008;font:inherit}
dialog.sheet::backdrop{background:#0006}
dialog.sheet h3{margin:0 0 10px;font-size:16px;font-weight:600}
dialog.sheet p{margin:0 0 4px;font-size:14px;line-height:1.5}
dialog.sheet input,dialog.sheet select{display:block;width:100%;box-sizing:border-box;height:36px;border:1px solid var(--sline);border-radius:8px;background:var(--sbg2);color:var(--sink);font:inherit;padding:0 10px;margin-top:6px}
dialog.sheet input:focus,dialog.sheet select:focus,.nm-edit:focus{outline:none;border-color:var(--gold2)}
dialog.sheet .acts{display:flex;justify-content:flex-end;gap:4px;margin-top:14px}
dialog.sheet .acts button{height:30px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:none;color:var(--smuted);font:inherit;font-size:13px;cursor:pointer}
dialog.sheet .acts button:hover{background:var(--shover);color:var(--sink)}
dialog.sheet .acts .ok{color:var(--gold);border-color:var(--gold2)}
dialog.sheet .acts .ok.danger{color:#c0392b;border-color:#c0392b}
dialog.sheet .hrow{display:flex;align-items:center;gap:6px;margin-top:4px}
dialog.sheet .hrow .at{color:var(--smuted);font-size:16px}
dialog.sheet .hrow input{margin:0;flex:1 1 auto;min-width:0}
dialog.sheet .hrow .ic{flex:none;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--sink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
dialog.sheet .hrow .ic:hover{background:var(--shover);color:var(--gold)}
dialog.sheet .hrow .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
dialog.sheet small{display:block;color:var(--smuted);font-size:12px;margin-top:6px}
dialog.sheet .err{color:#c0392b;font-size:13px;min-height:0}
dialog.sheet .err:not(:empty){margin-top:6px}
@media (max-width:760px){.ml-pics{width:70px;height:48px}.ml-pics img{width:60px;height:45px}.ml-act button{width:32px;height:32px}.ml-act svg{width:18px;height:18px}.ml-rows li{gap:8px}}
[dir=rtl] .ctl .flip svg{transform:scaleX(-1)}
@media (max-width:760px){
  #bar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding-inline:8px}
  .np b{font-size:16px}
  .ctl .hide-m{display:none}
}
/* ---- queue drawer ---- */
#queue{position:fixed;inset-inline-end:12px;bottom:calc(var(--barh) + 10px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100vw - 24px));max-height:min(70vh,640px);background:var(--sbg);border:1px solid var(--gold2);border-radius:12px;z-index:61;display:flex;flex-direction:column;box-shadow:0 10px 30px #0008}   /* above the docked video (z 60): its buttons were covered */
#queue[hidden]{display:none}
#queue .qh{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--sline);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--smuted)}
[dir=rtl] #queue .qh{letter-spacing:0;text-transform:none;font-size:13px}
#queue .qh #q-share:not([hidden])+#q-clear{margin-inline-start:0}
#queue .qh button{margin-inline-start:auto;background:none;border:1px solid var(--sline);color:var(--smuted);border-radius:6px;font:inherit;font-size:12px;padding:3px 8px;cursor:pointer}
#queue .ql{overflow:auto;padding:6px 8px 10px}
#queue h4{margin:10px 6px 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--smuted);font-weight:600}
[dir=rtl] #queue h4{letter-spacing:0;text-transform:none;font-size:12px}
.qi{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px}
.qi:hover{background:var(--shover)}
.qi.cur{background:var(--scur)}
.qi.done{opacity:.55}   /* already played: still there, to go back to */
.qi b{font-size:14px;font-weight:600;display:block;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* as a list page's rows (the owner: the drawer's type was larger) */
.qi small{display:block;color:var(--smuted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi button{background:none;border:0;color:var(--smuted);cursor:pointer;font-size:16px;width:28px;height:28px;border-radius:6px}
.qi button:hover{color:var(--sink);background:var(--shover)}
.qempty{color:var(--smuted);font-size:13px;padding:14px 10px}
/* a playlist's page (app.js mountList); every name of its own begins plst- */
.plst-crumb{font-size:13px;margin-top:22px}
.plst-crumb a{color:var(--gold);text-decoration:none}
.plst-title{font-family:var(--f-head);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.15;margin:8px 0 0}
.plst-title bdi{display:block;font-family:var(--f-ar)}
[dir=ltr] .plst-title bdi{text-align:left}
.plst-tl{display:block;font-family:var(--f-body);font-weight:500;font-size:.55em;color:var(--smuted);margin-top:14px}
.plst-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px;color:var(--smuted)}
.plst-meta a{color:var(--sink)}
/* the list on the reading side, the video box on the other: the list comes first, so English puts it left, Hebrew right */
.plst-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:start;margin-top:24px}
/* ---- one row of a list of songs (app.js songRow), every list on the site: number · picture · title and its line in the reader's language, the line under · length ---- */
.sr{display:grid;grid-template-columns:1.6em 72px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-width:0;padding:7px 4px;text-align:start;color:var(--sink);text-decoration:none;font:inherit;background:none;border:0;cursor:pointer}
.sr-n{color:var(--smuted);font-size:12px;font-variant-numeric:tabular-nums;text-align:end}
.sr-th{display:block;width:72px;height:40px;border-radius:4px;object-fit:cover;background:#000}
.sr-s{grid-template-columns:1.6em 54px minmax(0,1fr) auto;padding:3px 0}
.sr-s .sr-th{width:54px;height:30px;border-radius:3px}
.sr-body{display:block;min-width:0}
.sr-t{display:block;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.sr-tl{color:var(--smuted);font-size:13px;margin-inline-start:8px}
.sr-sub{display:block;color:var(--smuted);font-size:12px;margin-top:2px}
.sr-d{color:var(--smuted);font-size:12px;font-variant-numeric:tabular-nums}
.sr:hover .sr-t{color:var(--gold)}
.plst-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--sline)}
.plst-stage{position:sticky;top:16px}
.plst-now{margin-top:12px;font-size:15px;line-height:1.4}
.plst-now small{display:block;color:var(--smuted);font-size:12.5px;margin-top:2px}
@media (max-width:760px){.plst-body{grid-template-columns:1fr}.plst-stage{position:static;order:-1}}
.plst-list li{border-bottom:1px solid var(--sline);display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:4px;align-items:start}   /* the heart first, before the number (the owner, 6 Nov 2026) */
.plst-list li>.fav-row{margin:13px 0 0 4px}
.plst-list li>.plst-sl{grid-column:2}
.plst-list .plst-sl{display:flex;align-items:center;gap:8px}
.plst-rm{margin-inline-start:auto;background:none;border:0;padding:0;width:28px;height:28px;border-radius:8px;color:var(--smuted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.plst-rm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plst-rm:hover{color:#c0392b;background:var(--shover)}
.plst-list li>button{padding:10px 4px}
.plst-list li[aria-current] .sr-t{color:var(--gold)}
.plst-list li[aria-current]{background:var(--sbg2)}   /* the whole row, heart and song line included (the owner, 7 Nov 2026) */
.md-lst{display:flex;flex-direction:column;gap:8px;margin:4px 0 16px}
/* the maqam's playlist and its family's, each a narrow rectangle (the owner, 10 Nov 2026: «or even a narrow rectangle?»; «go with two» pictures): the
   /lists card laid on its side, its first recordings' pictures in a row, then the name in Arabic, its line in the reader's language, the tradition and count */
.md-pl{display:flex;align-items:center;gap:12px;max-width:420px;padding:6px;border:1px solid var(--sline);border-radius:10px;background:var(--sbg2);color:var(--sink);text-decoration:none;transition:border-color .2s}
.md-pics{display:flex;gap:2px;flex:none;border-radius:6px;overflow:hidden;background:#000}
.md-pics img{width:52px;height:52px;object-fit:cover;display:block}
.md-plt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.md-plt bdi{font-family:var(--f-ar);font-size:15px;font-weight:600}
[dir=ltr] .md-plt bdi{text-align:left}   /* the Arabic name at the line's start beside the reader's English, as /lists */
.md-plt .md-tl{font-size:13px;color:var(--smuted)}
.md-plt small{font-size:12px;color:var(--smuted);margin-top:2px}
.md-pl:hover{border-color:var(--gold2)}.md-pl:hover bdi{color:var(--gold)}
.plst-sl{padding:0 4px 10px 42px}
[dir=rtl] .plst-sl{padding:0 42px 10px 4px}
.plst-song{font-size:12.5px;color:var(--gold);text-decoration:none}
.plst-song:hover{text-decoration:underline}
.fav-row{background:none;border:0;padding:0;margin-inline-start:10px;vertical-align:-3px;color:var(--smuted);cursor:pointer;line-height:0}
.fav-row svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.fav-row:hover,.fav-row[aria-pressed=true]{color:var(--gold)}
.fav-row[aria-pressed=true] svg{fill:currentColor}
/* «Add to list» beside every heart (the owner, 8 Nov 2026): the same quiet icon, under the heart where the heart has a column of its own */
.addto-row{background:none;border:0;padding:0;margin-inline-start:10px;vertical-align:-3px;color:var(--smuted);cursor:pointer;line-height:0}
.addto-row svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.addto-row:hover{color:var(--gold)}
/* «Suggest a maqam» on the song page (app.js suggestCtl): the pencil beside the maqam, a row control like the heart and «Add to list»; on a song without a maqam, the pencil with its words */
.sugg-row{background:none;border:0;padding:0;margin-inline-start:10px;vertical-align:-3px;color:var(--smuted);cursor:pointer;line-height:0}
.sugg-row svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sugg-row:hover{color:var(--gold)}
.sugg-row.txt{margin:0;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;line-height:1.5;vertical-align:baseline}
.sugg-note{font-size:13px;color:var(--smuted);line-height:1.5}   /* «Suggested (awaiting review): Rast»: the person's own pick, said in the row until it is reviewed */
.claim~.sugg-note{display:block;margin-top:4px}
.plst-list li>.addto-row{grid-column:1;grid-row:2;margin:2px 0 8px 4px}
.wk-qbtns .addto-row{margin:0;padding:0 4px}
/* the clip strip under a video frame (app.js clipStrip; the owner, 7 Nov 2026: «an horizontal timeline bar… a start and end inputs below along with a save clip button») */
.clip{margin-top:10px}
.clip[hidden]{display:none}
.clip-bar{position:relative;height:6px;border-radius:3px;background:var(--sline);cursor:pointer;margin:6px 0 10px}
.clip-rng{position:absolute;top:0;bottom:0;background:var(--gold);border-radius:3px}
.clip-head{position:absolute;top:-4px;width:2px;height:14px;margin-left:-1px;background:var(--sink);border-radius:1px}
.clip-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--smuted)}
.clip-row label{display:inline-flex;align-items:center;gap:6px}
.clip-row input{width:64px;height:30px;border:1px solid var(--sline);border-radius:8px;background:var(--sbg2);color:var(--sink);font:inherit;font-size:13px;text-align:center;padding:0 4px}
.clip-row input:focus{outline:none;border-color:var(--gold2)}
.clip-len{font-variant-numeric:tabular-nums}
.clip-savebox{position:relative;margin-inline-start:auto}
.clip-save{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 6px;background:none;border:0;border-radius:8px;color:var(--gold);font:inherit;font-size:13px;cursor:pointer}
[dir=rtl] .clip-save{padding:0 6px 0 10px}
.clip-save:hover{background:var(--shover)}
.clip-save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qi .qa{display:flex;align-items:center;justify-content:center}
.qi .fav-row{margin:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
/* the home page's search, sort, countries and playlist column (app.js mountHome); every name of its own begins hm- */
.hm-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}
.hm-search{flex:1 1 260px;max-width:420px;font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--sline);border-radius:8px;background:var(--sbg2);color:var(--sink)}
.hm-sort{font:inherit;font-size:13px;padding:7px 34px 7px 12px;border:1px solid var(--sline);border-radius:8px;background:var(--sbg2);color:var(--sink);appearance:none;-webkit-appearance:none;cursor:pointer}
[dir=rtl] .hm-sort{padding:7px 12px 7px 34px}
/* our own arrow, the Details button's chevron (two borders turned), with room on the end side; the browser's is hidden */
.hm-sortw{position:relative;display:inline-flex}
.hm-sortw::after{content:"";position:absolute;inset-inline-end:14px;top:50%;width:.4em;height:.4em;border:solid var(--smuted);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.hm-sort:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.hm-countries{display:flex;gap:4px 18px;flex-wrap:wrap;margin-top:16px;padding-bottom:12px;border-bottom:1px solid var(--sline);font-size:14px}
.hm-countries button{font:inherit;background:none;border:0;padding:4px 0;color:var(--smuted);cursor:pointer;border-bottom:2px solid transparent}
.hm-countries button b{font-weight:400;font-size:12px;opacity:.75;margin-inline-start:4px}
.hm-countries button[aria-pressed=true]{color:var(--sink);border-bottom-color:var(--gold)}
.hm-countries button:hover{color:var(--sink)}
.hm-songs a.sr{border-bottom:1px solid var(--sline)}   /* the found songs: songRow, a row linking to the song's page (or the list at a video) */
.hm-songs h2{margin-bottom:8px}
.hm-more{display:block;margin:10px 0 0;padding:6px 0;border:0;background:none;color:var(--gold);font:inherit;font-size:14px;cursor:pointer}
.hm-more:hover{text-decoration:underline}
.hm-body{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start}
.hm-body:has(.hm-lists[hidden]){grid-template-columns:minmax(0,1fr)}
.hm-main .alsoon:not(.secdiv){margin-top:22px}
.hm-lists{position:sticky;top:16px;margin-top:30px}
.hm-lh{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--smuted);margin:0}
[dir=rtl] .hm-lh{letter-spacing:0;text-transform:none;font-size:14px}
.hm-lists ol{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--sline)}
.hm-lists li{border-bottom:1px solid var(--sline)}
.hm-lists a{display:block;padding:10px 2px;text-decoration:none;color:var(--sink)}
.hm-lists a:hover .hm-lt bdi{color:var(--gold)}
.hm-lt bdi{display:block;font-family:var(--f-ar);font-size:15.5px}
[dir=ltr] .hm-lt bdi{text-align:left}
.hm-tl,.hm-lt bdi[dir=auto]{display:block;font-family:var(--f-body);font-size:13px;color:var(--smuted);margin-top:1px}   /* a list's name in the reader's language; a name a person gave (app.js own) and «My favourites» are that same line, by this one rule, so the two cannot differ */
.hm-lm{display:block;font-size:12px;color:var(--smuted);margin-top:2px}
.hm-ls+.hm-ls{margin-top:24px}   /* the panel's sections: my playlists, recently played, the community's (9 Nov 2026) */
.hm-lists .hm-all{display:inline-block;margin-top:8px;padding:2px;font-size:13px;color:var(--gold);text-decoration:none}
.hm-lists .hm-all:hover{text-decoration:underline}
[dir=rtl] .hm-lt bdi{text-align:right}   /* a list's own name in Latin letters lines up with the rest in Hebrew and Arabic */
.hm-lists.hm-tall{position:static}
/* ---- every artist, /artists (9 Nov 2026): names in plain alphabetical order, in columns ---- */
.aa-list{list-style:none;margin:22px 0 0;padding:0;columns:3 240px;column-gap:32px}
.aa-list li{break-inside:avoid;padding:5px 0;border-bottom:1px solid var(--sline)}
.aa-list a{text-decoration:none;color:var(--sink);display:block}
.aa-list a:hover .aa-n{color:var(--gold)}
.aa-n{font-size:15px}
.aa-list bdi{font-family:var(--f-ar);font-size:15px;color:var(--smuted);margin-inline-start:6px}
.hm-moreart{margin:26px 0 0;padding-top:18px;font-size:15.5px;line-height:1.6;color:var(--sink)}   /* the home's sentence to every artist, where the lines of names were (9 Nov 2026) */
.hm-moreart a{color:var(--gold);text-decoration:none;white-space:nowrap}
.hm-moreart a:hover{text-decoration:underline}
/* ---- the community's playlists, /lists (9 Nov 2026): cards like the home's, a mosaic of each list's first four recordings ---- */
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:22px}
.lc-row{margin-top:30px}.lc-row .lc-grid{margin-top:12px}
.lc-rh{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--smuted);margin:0}   /* a row's name, as the home panel's (.hm-lh) */
.lc-grid.lc-slide{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:220px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}   /* the maqam rows slide sideways (the owner, 10 Nov 2026) */
.lc-slide::-webkit-scrollbar{display:none}
.lc-car{position:relative}   /* a carousel: the row and an arrow at each edge while there is more that way */
.lc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;padding:0;border:1px solid var(--sline);border-radius:999px;background:var(--sbg2);color:var(--sink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.lc-nav[hidden]{display:none}
.lc-nav:hover{color:var(--gold);border-color:var(--gold2)}
.lc-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lc-l{left:-12px}.lc-r{right:-12px}
.lc-slide .lc{scroll-snap-align:start}
.lc{display:flex;flex-direction:column;background:var(--sbg2);border:1px solid var(--sline);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--sink);transition:border-color .2s}
.lc:hover{border-color:var(--gold2)}
.lc-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:16/9;background:#000}
.lc-mosaic.lc-one{grid-template-columns:1fr;grid-template-rows:1fr}
.lc-mosaic img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.lc-t{display:block;padding:10px 12px 0}
.lc-t bdi{display:block;font-family:var(--f-ar);font-size:16px;font-weight:600;line-height:1.35}
[dir=ltr] .lc-t bdi{text-align:left}
.lc-tl{display:block;font-size:13px;color:var(--smuted);margin-top:2px}
.lc-m{display:block;font-size:12px;color:var(--smuted);padding:6px 12px 12px;margin-top:auto}
.lc:hover .lc-t bdi{color:var(--gold)}
@media (max-width:760px){.lc-grid{grid-template-columns:1fr 1fr;gap:10px}.lc-grid.lc-slide{grid-template-columns:none;grid-auto-columns:42%}.lc-t bdi{font-size:14.5px}}   /* taller than the window: it scrolls with the page, every row reachable */
@media (max-width:760px){
  .hm-body{grid-template-columns:1fr}
  .hm-lists{position:static}
  .hm-countries{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
}
/* the map of the modes (app.js mountModes): the ajnas at the centre, one ring per tradition; every name of its own begins md- */
.md-wrap{position:relative;margin:10px 0 0;padding:0 10px}
.md-board{position:relative;overflow:hidden;border-block:1px solid var(--sline);background:var(--sbg2)}
.md-zoom{width:100%}
/* the switch between the wheels (app.js mountModes) */
.md-trq{margin:-6px 0 10px;color:var(--smuted);font-size:12.5px;line-height:1.5}   /* a quote's translation, under the quote (app.js trq) */
.md-seg{position:absolute;top:10px;inset-inline-start:14px;z-index:4;display:flex;gap:4px;padding:3px;border:1px solid var(--sline);border-radius:999px;background:var(--sbg2)}
.md-seg button{font:inherit;font-size:12.5px;border:0;background:none;color:var(--smuted);border-radius:999px;padding:5px 12px;cursor:pointer}
.md-seg button.md-cur{background:var(--gold);color:#fff}
.md-seg button:hover:not(.md-cur){color:var(--sink)}
.md-c{display:block;width:min(100%,calc((100vh - 200px) * var(--md-ar,1)));height:auto;margin:0 auto;font-family:var(--f-body);user-select:none;direction:ltr}   /* cropped to the wheel, fitted to the window's height (app.js mountModes) */
.md-rn{font-size:17px;font-weight:600;fill:var(--smuted)}
.md-gn{font-size:22px;font-weight:600}
.md-sp{stroke:var(--sline);stroke-width:1}
.md-cell{stroke:var(--sbg2);stroke-width:1.2;cursor:pointer}
.md-m text{font-size:13.5px;fill:#fff;pointer-events:none;font-weight:500}
.md-jd circle{stroke:var(--smuted);stroke-width:1.2;cursor:pointer}
.md-jd text{font-size:15px;fill:var(--sink);cursor:pointer}
.md-jd.md-jroot text{font-weight:600}
/* the connectors: hairlines (the owner), the same thickness on the screen at any zoom (--zk: app.js zoomable) */
.md-l{fill:none;stroke:var(--gold);stroke-width:calc(1.3px / var(--zk,1))}
.md-l.md-same_name{stroke:#8d97a3}
.md-jn{fill:none;stroke:var(--sink);stroke-opacity:.55;stroke-width:calc(1.3px / var(--zk,1))}
.md-focus .md-m{opacity:.18}
.md-focus .md-m.md-on{opacity:1}
.md-focus .md-m.md-on .md-cell{stroke:var(--sink);stroke-width:calc(2px / var(--zk,1))}
.md-focus .md-jd{opacity:.3}
.md-focus .md-jd.md-on{opacity:1}
.md-card{position:fixed;top:16px;inset-inline-end:16px;z-index:20;width:350px;border:1px solid var(--sline);border-radius:12px;padding:14px 16px;background:var(--sbg2);font-size:13.5px;max-height:calc(100vh - 110px);overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.md-card h3{margin-block:0 4px;margin-inline:0 24px;font-size:20px}
.md-card h3 bdi{display:block;font-family:var(--f-ar)}
.md-card h3 .md-tl{display:block;font-size:14px;color:var(--smuted);font-weight:500}
.md-card h4{margin:14px 0 6px;font-size:12px;color:var(--smuted);font-weight:600}
.md-x{position:absolute;inset-inline-end:10px;top:8px;background:none;border:0;font-size:20px;color:var(--smuted);cursor:pointer}
.md-meta{color:var(--smuted);font-size:12.5px}
.md-meta i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:4px;vertical-align:-1px}
.md-why{margin:0}
.md-says{margin:2px 0 4px;font-style:italic;color:var(--smuted);overflow-wrap:anywhere}
.md-aj,.md-ls,.md-src{margin:0;padding-inline-start:18px}
.md-aj li,.md-ls li,.md-src li{margin:3px 0}
.md-aj .md-tl,.md-ls .md-tl,.md-why .md-tl{margin-inline-start:5px;color:inherit}
.md-go,.md-gj{font:inherit;background:none;border:0;padding:0;color:var(--gold);cursor:pointer;text-align:start}
.md-src a{color:var(--gold);overflow-wrap:anywhere}
.md-ls small,.md-why small{color:var(--smuted)}
.md-scale{position:relative;height:18px;border-bottom:1px solid var(--sline);margin:4px 2px 2px}
.md-scale i{position:absolute;bottom:0;width:2px;height:14px;background:var(--gold);transform:translateX(-1px)}
.md-cents{font:11px var(--f-mono);color:var(--smuted)}
.md-card.md-card-l{left:16px;right:auto}
.md-card.md-card-r{right:16px;left:auto}
.md-card.md-wide{width:max-content;max-width:calc(100vw - 32px)}   /* as wide as its drawings and its text column, no wider (the owner) */
.md-split{display:grid;grid-template-columns:minmax(0,max-content) minmax(180px,340px);gap:16px;align-items:start;margin-top:12px}   /* the drawings' column, then the text at a reading width; a wide staff scales down when the viewport is narrower */
.md-split .md-txt>h4:first-child{margin-top:0}
.md-ladw h4{margin-top:0}
.md-lad{display:block;overflow:visible;direction:ltr}
.md-lad-rail{stroke:var(--sline);stroke-width:2}
.md-lad-rung{stroke:var(--sink);stroke-width:1.6}
.md-lad-deg{font-size:10px;fill:var(--smuted)}
.md-lad-note{font-size:12.5px;font-weight:600;fill:var(--sink)}
.md-lad-int{font-size:12px;font-weight:600;fill:var(--sink)}
.md-lad-c{font-size:9.5px;font-weight:400;fill:var(--smuted)}
.md-lad-v{font-size:10.5px;font-weight:400;fill:var(--smuted)}
.md-lad-note.md-lad-out,.md-lad-int.md-lad-out{fill:var(--smuted);font-weight:400}
.md-lad-rung.md-lad-out{stroke:var(--smuted)}
.md-lad-j{cursor:pointer}
.md-lad-j path{fill:none;stroke:var(--gold);stroke-width:2}
.md-lad-j text{font-size:12px;fill:var(--gold)}
/* the map of the masters (web/map.js): the page is .home's, as /modes; the drawing in a panel as .md-wrap/.md-board */
.am{--am-singer:var(--gold);--am-composer:#3fa79a;--am-lyricist:#9a7fd1}
.am-wrap{position:relative;margin:10px 0 0;padding:0 10px}
.am-panel{border-block:1px solid var(--sline);background:var(--sbg2);padding:12px 0 18px}
.am-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--smuted);margin:0 0 8px;padding:0 14px}
.am-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid;margin-inline-end:6px;vertical-align:-2px}
.am-scroll{position:relative;overflow:hidden}
.am-zoom{width:100%}
.am-board{position:relative;width:min(100%,1040px,calc(100vh - 220px));aspect-ratio:1/1;margin:0 auto;direction:ltr}   /* the circle fills the window's height, no scrolling to see it whole */   /* a drawing: the same circle in both languages */
.am-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.am-ring{fill:none;stroke:var(--sline);stroke-width:1}
.am-arc{fill:none;stroke:var(--sline);stroke-width:4;stroke-linecap:round}
.am-cn{font-size:15px;font-weight:600;fill:var(--sink)}
.am-gl{font-size:11px;fill:var(--smuted);font-family:var(--f-mono)}
.am-tie{fill:none;stroke:var(--smuted);stroke-width:.8px;vector-effect:non-scaling-stroke;opacity:.4;transition:opacity .15s}   /* a hairline, every tie (the owner) */
.am-dim .am-tie{opacity:.05}.am-dim .am-tie.am-hl{opacity:1}
.am-hov .am-tie.am-hl:not(.am-hl2){opacity:.25}
.am-p{position:absolute;padding:0;border:2px solid var(--am-singer);border-radius:50%;overflow:hidden;background:var(--sbg2);cursor:pointer;transition:opacity .15s,transform .15s;box-sizing:border-box}
.am-p img{width:100%;height:100%;object-fit:cover;display:block}
.am-p .am-sil{width:100%;height:100%;fill:var(--smuted);opacity:.55;display:block}
.am-p.am-est{border-style:dashed}
.am-p:hover,.am-p.am-on{transform:scale(1.35);z-index:3}
.am-dim .am-p:not(.am-on){opacity:.22}
.am-tip{position:absolute;pointer-events:none;background:var(--stip, var(--sbg2));border:1px solid var(--gold2);border-radius:10px;padding:6px 10px;font-size:12.5px;line-height:1.35;white-space:nowrap;z-index:6;display:none;transform:translate(-50%,-100%) scale(calc(1 / var(--zk, 1)));transform-origin:50% 100%}   /* the same size at any zoom */
.am-tip b{font-family:var(--f-head);font-size:16px;display:block}
.am-tip span{color:var(--smuted)}
.am-card{position:fixed;top:16px;inset-inline-end:16px;z-index:20;width:380px;max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);overflow:auto;border:1px solid var(--sline);border-radius:12px;padding:14px 16px;background:var(--sbg2);font-size:13.5px;box-shadow:0 8px 40px #0006;box-sizing:border-box}
.am-card[hidden]{display:none}
.am-card.am-l{inset-inline-end:auto;left:16px}.am-card.am-r{left:auto;right:16px}
.am-x{position:absolute;top:8px;inset-inline-end:10px;background:none;border:0;color:var(--smuted);font-size:20px;cursor:pointer}
.am-ch{display:flex;gap:12px;align-items:center;margin-inline-end:24px}
.am-ch .am-pic{width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--am-singer);box-sizing:border-box;background:var(--sbg0)}
.am-ch .am-pic img{width:100%;height:100%;object-fit:cover}
.am-ch .am-pic .am-sil{width:100%;height:100%;fill:var(--smuted);opacity:.55}
.am-ch h3{margin:0;font-size:20px;line-height:1.2}
.am-ch h3 bdi{display:block;font-family:var(--f-head)}
.am-ch h3 small{display:block;font-size:14px;color:var(--smuted);font-weight:500}
.am-meta{color:var(--smuted);font-size:12.5px;margin:10px 0 4px}
.am-meta i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:5px}
.am-meta small{display:block;margin-top:2px}
.am-go{color:var(--gold);text-decoration:none;font-size:13px}
.am-card h4{margin:16px 0 6px;font-size:12px;color:var(--smuted);font-weight:600}
.am-ls{list-style:none;margin:0;padding:0}
.am-ls li{border-top:1px solid var(--sline)}
.am-pt{display:flex;justify-content:space-between;gap:10px;width:100%;background:none;border:0;padding:7px 2px;color:var(--sink);font:inherit;cursor:pointer;text-align:start}
.am-pt:hover{color:var(--gold)}
.am-pt bdi{font-family:var(--f-head);font-size:15px}
.am-pt small{color:var(--smuted);white-space:nowrap}
.am-songs{margin:0 0 8px;padding-inline-start:20px;font-size:13px}
.am-songs li{border:0;margin:2px 0}
.am-sg{background:none;border:0;padding:2px 0;color:var(--sink);font:inherit;cursor:pointer;text-align:start}
.am-sg:hover{color:var(--gold)}
.am-sg small{color:var(--smuted)}
.am-sg.am-norec{color:var(--smuted)}
@media (max-width:760px){.am-card{top:auto;bottom:0;left:0;right:0;width:100vw;max-width:100vw;max-height:70vh;border-radius:16px 16px 0 0}}
/* zoom into a drawing (app.js zoomable): the button that puts the whole drawing back */
.zm-reset{position:absolute;top:10px;inset-inline-end:10px;z-index:5;width:34px;height:34px;border-radius:50%;border:1px solid var(--sline);background:var(--sbg2);color:var(--sink);font-size:18px;line-height:1;cursor:pointer;box-shadow:0 2px 8px #0003}
.zm-reset[hidden]{display:none}
/* the ladder's notes on a staff (app.js staff): «Tarab Notation», Bravura cut to its signs (tools/notation_font.py, SIL OFL) */
@font-face{font-family:"Tarab Notation";src:url(/media/fonts/tarab-notation.woff2) format("woff2");font-display:block}
.md-staff{display:block;overflow:visible;direction:ltr;margin-top:10px;max-width:100%;height:auto}
.md-staff-l{stroke:var(--smuted);stroke-width:.9}
.md-staff-g{font-family:"Tarab Notation";font-size:32px;fill:var(--sink)}
.md-staff-v{fill:var(--smuted)}
.md-staff-j path{fill:none;stroke:var(--gold);stroke-width:1.5}
.md-staff-j text{font-size:9.5px;fill:var(--gold)}
.md-lad-j text.md-lad-or{font-size:10px;fill:var(--smuted)}
.md-ladw{width:max-content;max-width:100%}   /* the column is as wide as its widest drawing, the ladder or the staff, and no wider (the owner) */
.md-ladw .md-says,.md-ladw .md-trq{width:0;min-width:100%}   /* the quote and its translation add no width of their own: they wrap to the drawing's */
.md-ladf{margin-top:8px}
.md-lads{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-start;margin-top:12px}
.md-lads+div .md-txt{margin-top:4px}
.md-meta .md-sys{color:var(--gold)}
.md-dt{margin-top:12px}
.md-dt summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--smuted)}
.md-dt[open] summary{margin-bottom:4px}
@media (max-width:620px){.md-split{grid-template-columns:1fr}.md-ladw{width:auto}}
@media (max-width:900px){
  .md-card{position:static;width:auto;max-height:none;box-shadow:none;margin-top:10px}
  .md-card.md-wide{width:auto}
}

/* a maqam system's page (/modes/<system>, web/templates/system.html) */
.sys .sys-lede{font-size:18px;line-height:1.7;color:var(--sink)}
.sys .sys-map{color:var(--gold);font-weight:600}
.sys .sys-ref{font-size:11px;margin-inline-start:2px}
.sys .sys-ref a{color:var(--gold);text-decoration:none}
.sys .sys-ar{font-family:var(--f-ar);color:var(--smuted)}
.sys .sys-list{margin:0 0 20px;display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:15px}
.sys .sys-list dt{font-weight:600;color:var(--sink)}
.sys .sys-list dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--sink)}
.sys .sys-src{font-size:14px;line-height:1.7;padding-inline-start:22px}
.sys .sys-src a{color:var(--gold);overflow-wrap:anywhere}
@media (max-width:620px){.sys .sys-list{grid-template-columns:1fr}.sys .sys-list dd{margin-bottom:8px}}