/* OudMajed audience portal.
   External rather than inline so the CloudFront CSP can refuse unsafe-inline
   entirely — the same standard oudsolo.art holds. */

/* ============================================================ typography ===
   One family across both scripts. The Arabic and its transliteration sit on
   top of each other constantly, and two unrelated typefaces there read as two
   different voices saying the same thing. */

@font-face{font-family:Plex;src:url(/fonts/plex-latin-400.woff2)format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Plex;src:url(/fonts/plex-latin-600.woff2)format('woff2');
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Plex;src:url(/fonts/plex-arabic-400.woff2)format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/fonts/plex-arabic-600.woff2)format('woff2');
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

/* ================================================================ tokens === */
:root{
  /* Warm and low — a candlelit room, not an office. */
  --bg:#0e0c0b;
  --surface:#181413;
  --raised:#221c19;
  --line:#2c2422;
  --line-soft:#211b19;

  --ink:#f6f1e9;
  --ink-2:#b3a79a;
  --ink-3:#786c62;

  --gold:#e0ac57;
  --gold-deep:#8a6a31;
  --gold-wash:rgba(224,172,87,.12);

  --pad:max(20px, env(safe-area-inset-left));
  --radius-lg:22px;

  /* One easing everywhere. Motion that varies without reason reads as noise. */
  --ease:cubic-bezier(.22,.8,.24,1);
  --fast:180ms;
  --base:320ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100dvh}
body{
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.55 Plex,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}
button,input,textarea{font-family:inherit}
[hidden]{display:none!important}

/* ================================================================ header === */
header{
  display:flex;align-items:center;gap:13px;flex:none;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 13px;
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
}
.avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  display:grid;place-items:center;
  font-weight:600;font-size:16px;color:#14100d;
}
.who{flex:1;min-width:0}
.who b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.who span{
  display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ig{
  flex:none;text-decoration:none;white-space:nowrap;
  border:1px solid var(--gold-deep);color:var(--gold);
  border-radius:99px;padding:9px 15px;font-size:13px;font-weight:600;
  transition:background var(--fast) var(--ease);
}
.ig:active{background:var(--gold-wash)}

/* ======================================================= language switch === */
.langs{
  display:none;gap:4px;flex:none;
  margin:10px var(--pad) 0;padding:3px;
  background:var(--raised);border-radius:11px;
}
body[data-state="playing"] .langs,
body[data-state="paused"] .langs{display:flex}
.langs button{
  flex:1;border:none;background:none;color:var(--ink-2);
  border-radius:9px;padding:9px 0;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.langs button[aria-pressed="true"]{background:var(--gold);color:#14100d}

/* ============================================================== progress === */
.progress{
  display:none;align-items:center;gap:11px;flex:none;
  padding:12px var(--pad) 4px;
}
body[data-state="playing"] .progress,
body[data-state="paused"] .progress{display:flex}
.progress .t{
  font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  min-width:2.7em;letter-spacing:.01em;
}
.progress .t:last-child{text-align:right}
.progress .bar{
  flex:1;height:3px;border-radius:99px;background:var(--line);overflow:hidden;
}
.progress .fill{
  height:100%;background:var(--gold);border-radius:99px;
  /* scaleX rather than width: the compositor handles it, so updating every
     frame costs no layout. */
  transform:scaleX(0);transform-origin:left center;
}
body[data-state="paused"] .progress .fill{background:var(--gold-deep)}

/* ================================================================ lyrics === */
main{
  flex:1;min-height:0;display:none;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:26vh var(--pad) 22vh;
  scroll-behavior:smooth;
  /* Lines dissolve at the edges instead of being guillotined by the header. */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 76%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 76%,transparent);
}
body[data-state="playing"] main,
body[data-state="paused"] main{display:block}

.ln{
  padding:14px 0;
  opacity:.26;
  transform:scale(.97);
  transform-origin:right center;
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease);
}
.ln.on{opacity:1;transform:scale(1)}
.ln.done{opacity:.16}

.ar{
  font-size:clamp(25px,6.6vw,34px);line-height:1.6;font-weight:600;
  /* Stops a long line dropping one orphaned word onto its own row, which is
     what a sung line looks worst as. */
  text-wrap:balance;
}
.tr{font-size:clamp(15px,4.1vw,19px);line-height:1.45;color:var(--gold);margin-top:6px;font-weight:400;text-wrap:balance}
.en{font-size:clamp(14px,3.8vw,16px);line-height:1.45;color:var(--ink-3);margin-top:5px}
.instr{
  font-size:13px;color:var(--gold-deep);letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;
}

/* ============================================= card: no song in progress === */
.card{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:0 34px;
}
body[data-state="playing"] .card,
body[data-state="paused"] .card{display:none}
.card h2{font-size:22px;font-weight:600;letter-spacing:-.015em}
.card p{font-size:15px;color:var(--ink-2);max-width:31ch;line-height:1.55}
.pulse{
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  animation:pulse 2.1s var(--ease) infinite;
}
body[data-state="ended"] .pulse,body[data-state="none"] .pulse{display:none}
@keyframes pulse{
  0%,100%{opacity:.2;transform:scale(.8)}
  50%{opacity:1;transform:scale(1)}
}
.ig-big{
  margin-top:4px;background:var(--gold);color:#14100d;text-decoration:none;
  font-weight:600;font-size:15px;padding:14px 24px;border-radius:99px;
  transition:transform var(--fast) var(--ease);
}
.ig-big:active{transform:scale(.97)}

/* =============================================================== up next === */
.upnext{
  display:none;align-items:center;gap:9px;flex:none;
  margin:0 var(--pad) 8px;padding:11px 14px;
  background:var(--gold-wash);border:1px solid rgba(224,172,87,.28);
  border-radius:12px;color:var(--ink);text-align:left;width:calc(100% - var(--pad)*2);
  font-family:inherit;cursor:pointer;
  transition:transform var(--fast) var(--ease);
}
body[data-state="playing"] .upnext:not([hidden]),
body[data-state="paused"] .upnext:not([hidden]),
body[data-state="idle"] .upnext:not([hidden]){display:flex}
.upnext:active{transform:scale(.99)}
.upnext .label{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);flex:none;
}
.upnext .title{
  flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.upnext .count{font-size:12.5px;color:var(--gold-deep);flex:none;font-variant-numeric:tabular-nums}
/* A change of winner should be noticed without being watched for. */
.upnext[data-changed]{animation:bump .5s var(--ease)}
@keyframes bump{
  0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}
}

/* ================================================================ stream === */
.stream{
  display:none;flex-direction:column;justify-content:flex-end;gap:7px;flex:none;
  padding:0 var(--pad);max-height:24vh;overflow:hidden;
  /* Older messages fade out at the top rather than being clipped. */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%);
  mask-image:linear-gradient(to bottom,transparent,#000 42%);
  pointer-events:none;
}
body[data-state="playing"] .stream,
body[data-state="paused"] .stream,
body[data-state="idle"] .stream{display:flex}
.stream .msg{
  align-self:flex-start;max-width:88%;
  background:rgba(24,20,19,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line-soft);
  border-radius:15px;padding:8px 13px;
  animation:msgIn 420ms var(--ease);
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.stream .msg b{
  display:inline;font-size:12.5px;font-weight:600;color:var(--gold);margin-inline-end:7px;
}
.stream .msg span{font-size:14.5px;color:var(--ink);line-height:1.4}

/* ================================================================ footer === */
footer{
  flex:0 0 auto;display:none;gap:9px;
  padding:11px var(--pad) calc(env(safe-area-inset-bottom) + 11px);
  border-top:1px solid var(--line-soft);
  background:var(--surface);
}
body[data-state="playing"] footer,
body[data-state="paused"] footer,
body[data-state="idle"] footer{display:flex}
footer button.icon{
  flex:none;width:46px;min-height:46px;
  border:1px solid var(--line);background:var(--raised);color:var(--ink);
  border-radius:12px;font-size:17px;cursor:pointer;
  transition:transform var(--fast) var(--ease);
}
footer button.icon:active{transform:scale(.95)}

/* Always present, the way a live broadcast keeps its comment box up. Opening a
   sheet to say one sentence is enough friction to stop most people bothering. */
#quick{flex:1;display:flex;align-items:center;gap:8px;
  background:var(--raised);border:1px solid var(--line);border-radius:12px;
  padding:0 6px 0 14px;min-height:46px;
  transition:border-color var(--fast) var(--ease);
}
#quick:focus-within{border-color:var(--gold-deep)}
#quick input{
  flex:1;background:none;border:none;color:var(--ink);
  /* 16px keeps iOS from zooming the page when the field takes focus. */
  font-size:16px;padding:0;min-width:0;
}
#quick input:focus{outline:none}
#quick input::placeholder{color:var(--ink-3)}
#quick button{
  flex:none;width:34px;height:34px;border:none;border-radius:50%;
  background:var(--gold);color:#14100d;font-size:17px;font-weight:700;
  cursor:pointer;transition:transform var(--fast) var(--ease),opacity var(--fast);
}
#quick button:active{transform:scale(.9)}
#quick button:disabled{opacity:.3}

/* ================================================================ sheets === */
.sheet{
  position:fixed;inset:0;z-index:20;
  display:none;align-items:flex-end;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.sheet[data-open]{display:flex;animation:fade var(--fast) var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-inner{
  background:var(--surface);width:100%;max-height:82vh;overflow-y:auto;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  border-top:1px solid var(--line);
  padding:8px var(--pad) calc(env(safe-area-inset-bottom) + 20px);
  animation:rise var(--base) var(--ease);
}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
/* The grabber says "this came from the bottom and goes back there". */
.sheet-inner::before{
  content:"";display:block;width:38px;height:4px;border-radius:99px;
  background:var(--line);margin:0 auto 14px;
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sheet-head h3{font-size:18px;font-weight:600;letter-spacing:-.015em}
.sheet-head button{
  background:none;border:none;color:var(--gold);font-size:15px;font-weight:600;
  cursor:pointer;padding:8px 0 8px 12px;
}
.sheet-note{font-size:13.5px;color:var(--ink-2);margin-bottom:14px;line-height:1.5}
.sheet-fine{font-size:12.5px;color:var(--gold);margin-top:10px;line-height:1.5}

/* ================================================================= forms === */
.sheet-inner input[type="text"],.sheet-inner input[type="email"],
.sheet-inner input[type="tel"],.sheet-inner input:not([type]),
.sheet-inner textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:14px;color:var(--ink);
  /* 16px keeps iOS from zooming the page when a field takes focus. */
  font-size:16px;margin-bottom:10px;
  transition:border-color var(--fast) var(--ease);
}
.sheet-inner input:focus,.sheet-inner textarea:focus{
  outline:none;border-color:var(--gold-deep);
}
.sheet-inner textarea{resize:none;height:92px;line-height:1.5}
.sheet-inner button.primary{
  width:100%;background:var(--gold);color:#14100d;border:none;
  border-radius:12px;min-height:50px;font-size:15.5px;font-weight:600;
  cursor:pointer;transition:transform var(--fast) var(--ease),opacity var(--fast);
}
.sheet-inner button.primary:active{transform:scale(.985)}
.sheet-inner button.primary:disabled{opacity:.45}
.check{
  display:flex;align-items:center;gap:12px;margin:2px 0 16px;
  font-size:14px;color:var(--ink-2);line-height:1.4;cursor:pointer;
}
.check input{width:22px;height:22px;accent-color:var(--gold);flex:none}

/* ============================================================== playlist === */
#playlist{list-style:none}
#playlist li{
  display:flex;align-items:center;gap:13px;
  padding:13px 0;border-bottom:1px solid var(--line-soft);
}
#playlist li:last-child{border-bottom:none}
#playlist li{transition:transform var(--base) var(--ease)}
#playlist li .rank{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep);display:block;margin-top:2px;
}
#playlist .n{
  color:var(--ink-3);font-size:12.5px;min-width:1.5em;
  font-variant-numeric:tabular-nums;
}
#playlist .t{flex:1;min-width:0}
#playlist .t b{display:block;font-weight:500;font-size:16px;letter-spacing:-.01em}
#playlist .t span{display:block;font-size:13px;color:var(--ink-3);margin-top:1px}
#playlist li[data-played] .t b{color:var(--ink-3)}
#playlist li[data-now]{
  background:var(--gold-wash);border-radius:12px;
  padding-left:12px;padding-right:12px;border-bottom-color:transparent;
}
#playlist li[data-now] .t b{color:var(--gold)}
#playlist li[data-now] .t span{color:var(--gold-deep)}

.vote{
  flex:none;min-height:38px;padding:0 14px;
  background:none;border:1px solid var(--line);color:var(--ink-2);
  border-radius:99px;font-size:13.5px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:transform var(--fast) var(--ease),background var(--fast) var(--ease),
             border-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.vote:active{transform:scale(.92)}
.vote[data-mine]{border-color:var(--gold);color:var(--gold);background:var(--gold-wash)}

/* ============================================================== messages === */
#comments{list-style:none;margin-top:18px}
#comments li{padding:13px 0;border-bottom:1px solid var(--line-soft)}
#comments li:last-child{border-bottom:none}
#comments b{display:block;font-size:13px;color:var(--gold);font-weight:600}
#comments p{font-size:15.5px;margin-top:3px;line-height:1.5}
#comments .empty{color:var(--ink-3);font-size:14px;padding:10px 0;line-height:1.5}

/* ================================================================= toast === */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 88px);
  transform:translateX(-50%) translateY(6px);
  background:var(--gold);color:#14100d;
  font-size:14px;font-weight:600;padding:11px 20px;border-radius:99px;
  opacity:0;pointer-events:none;z-index:40;white-space:nowrap;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease);
}
.toast[data-show]{opacity:1;transform:translateX(-50%) translateY(0)}

/* ======================================================== accessibility === */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:1ms!important;animation-duration:1ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important;
  }
}