/* Story Listen: one page per recording, each with its own colour. */
:root{
  --bg:#FFFFFF;
  --text:#26262A;
  --muted:#6B6B72;
  --track:#E3E3E7;
  --card:#F6F6F8;
  --vinyl-a:#1C1C1E;
  --vinyl-b:#28282B;
  --arm:#A3A3A8;
  --arm-head:#2E2E33;
  --serif:ui-serif,'New York','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:-apple-system,system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;

  /* per-recording colours, set by the body class below */
  --accent:#3B6FD9;    /* record label + background glow */
  --glow:#3B6FD9;
  --ink:#2A55B0;       /* play button, played part of the waveform */
  --on-ink:#FFFFFF;
  --mark:#FFFFFF;      /* writing on the label */
}
.t-blue {--accent:#3B6FD9;--glow:#3B6FD9;--ink:#2A55B0;--on-ink:#FFF;--mark:#FFF;}
.t-plum {--accent:#9B4B9D;--glow:#B25CB4;--ink:#7E3480;--on-ink:#FFF;--mark:#FFF;}
.t-teal {--accent:#138A80;--glow:#1BA597;--ink:#0D6E66;--on-ink:#FFF;--mark:#FFF;}
.t-gold {--accent:#E7B53C;--glow:#E7B53C;--ink:#2B2B30;--on-ink:#FFF;--mark:#2B2B30;}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#141415;
    --text:#F2F2F3;
    --muted:#A1A1A6;
    --track:#323235;
    --card:#1E1E20;
    --vinyl-a:#0B0B0C;
    --vinyl-b:#18181A;
    --arm:#8C8C92;
    --arm-head:#E6E6E8;
  }
  .t-blue {--ink:#86A9F5;--on-ink:#141415;}
  .t-plum {--ink:#DDA2DF;--on-ink:#141415;}
  .t-teal {--ink:#5FD1C5;--on-ink:#141415;}
  .t-gold {--ink:#F0C55A;--on-ink:#141415;}
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  position:relative;
}
/* Soft light from the label's colour, brighter while playing. */
body::before{
  content:"";
  position:fixed;
  inset:-20vh -30vw auto;
  height:85vh;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--glow) 34%, transparent), transparent);
  opacity:.55;
  transition:opacity 1.2s ease, transform 1.2s ease;
  transform:scale(.92);
  pointer-events:none;
  z-index:0;
}
.is-playing::before{opacity:1;transform:scale(1);}

main{
  position:relative;
  z-index:1;
  flex:1;
  width:100%;
  max-width:440px;
  margin:0 auto;
  padding:48px 16px calc(32px + env(safe-area-inset-bottom));
  justify-content:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ---------- the record ---------- */
.deck{
  position:relative;
  width:min(74vw, 300px);
  aspect-ratio:1;
  margin:6px auto 30px;
}
.disc{
  all:unset;
  position:absolute;
  inset:0;
  border-radius:50%;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    0 34px 60px -26px color-mix(in srgb, var(--glow) 70%, transparent),
    0 18px 40px -12px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.06);
  transition:transform .25s ease;
}
.disc:active{transform:scale(.985);}
.disc:focus-visible{outline:3px solid var(--ink);outline-offset:6px;}
.spin{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.07) 31.4%, transparent 32.4%),
    radial-gradient(circle, transparent 0 46%, rgba(255,255,255,.05) 46.3%, transparent 47%),
    repeating-radial-gradient(circle, var(--vinyl-a) 0 1.4px, var(--vinyl-b) 1.4px 2.8px);
  animation:spin 3.6s linear infinite;
  animation-play-state:paused;
}
.is-playing .spin{animation-play-state:running;}
@keyframes spin{to{transform:rotate(360deg);}}
.label{
  position:absolute;
  inset:31%;
  border-radius:50%;
  background:var(--accent);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -8px 18px rgba(0,0,0,.10);
}
/* label writing: the language (or a book) above the spindle, "side a" below */
.deck{container-type:inline-size;}
.label::before{ /* fine printed ring */
  content:"";
  position:absolute;
  inset:7%;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--mark) 35%, transparent);
}
.label b{
  position:absolute;
  top:17%;
  left:0;
  right:0;
  text-align:center;
  font-family:var(--serif);
  font-weight:600;
  font-size:8.6cqw;
  line-height:1;
  letter-spacing:.04em;
  color:var(--mark);
}
.label b svg{width:10cqw;height:10cqw;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;}
[lang="ar"] .label b{font-family:system-ui,-apple-system,'Geeza Pro',sans-serif;font-weight:700;font-size:9cqw;top:6%;}
[lang="ar"] .label small{letter-spacing:0;font-size:3.2cqw;}
.label small{
  position:absolute;
  bottom:20%;
  left:0;
  right:0;
  text-align:center;
  font-size:2.5cqw;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--mark) 75%, transparent);
}
.label::after{ /* spindle */
  content:"";
  position:absolute;
  width:7%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--bg);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
/* fixed light reflection: it stays put while the grooves turn */
.disc::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 20deg,
    transparent 0 6%, rgba(255,255,255,.13) 11%, transparent 18% 50%,
    rgba(255,255,255,.09) 57%, transparent 64%);
  -webkit-mask:radial-gradient(circle, transparent 0 31%, #000 31.5%);
  mask:radial-gradient(circle, transparent 0 31%, #000 31.5%);
  pointer-events:none;
}

/* tonearm: rests beside the record, swings onto it while playing */
.arm{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.arm .swing{
  transform-box:view-box;
  transform-origin:98px 6px;
  transform:rotate(-15deg);
  transition:transform .9s cubic-bezier(.5,.05,.2,1);
}
.is-playing .arm .swing{transform:rotate(0deg);}
.arm .rod{stroke:var(--arm);stroke-width:1.5;stroke-linecap:round;fill:none;}
.arm .head{stroke:var(--arm-head);stroke-width:3.4;stroke-linecap:round;}
.arm .tip{fill:var(--ink);}
.arm .base{fill:var(--card);stroke:var(--arm);stroke-width:1;}
.arm .pin{fill:var(--arm);}
.arm .weight{stroke:var(--arm-head);stroke-width:4.4;stroke-linecap:round;}

/* ---------- text ---------- */
.kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.kicker .dot{width:4px;height:4px;border-radius:50%;background:var(--ink);}
h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(30px, 8.6vw, 42px);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 26px;
  text-wrap:balance;
}
[lang="ar"] .kicker{letter-spacing:0;font-size:14px;}
[lang="ar"] h1{font-family:system-ui,-apple-system,'Geeza Pro','Segoe UI',sans-serif;font-weight:700;line-height:1.35;letter-spacing:0;}

/* ---------- waveform ---------- */
.wave{
  position:relative;
  width:100%;
  height:58px;
  cursor:pointer;
  touch-action:pan-y;
  border-radius:6px;
  -webkit-tap-highlight-color:transparent;
}
.wave:focus-visible{outline:2px solid var(--ink);outline-offset:6px;}
.bars{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:3px;
}
.bars span{
  flex:1;
  min-width:2px;
  border-radius:2px;
  background:var(--track);
}
.bars.fill span{background:var(--ink);}
.bars.fill{clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0);}
[dir="rtl"] .bars.fill{clip-path:inset(0 0 0 calc(100% - var(--p, 0%)));}

.times{
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  margin-top:8px;
}

/* ---------- buttons ---------- */
.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  margin-top:18px;
}
.controls button{
  all:unset;
  cursor:pointer;
  display:grid;
  place-items:center;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background-color .2s ease;
}
.controls button:active{transform:scale(.94);}
.controls button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}
.controls .play{
  width:78px;
  height:78px;
  background:var(--ink);
  color:var(--on-ink);
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--ink) 80%, transparent);
}
.play svg{width:34px;height:34px;fill:currentColor;}
.play .i-pause{display:none;}
.is-playing .play .i-play{display:none;}
.is-playing .play .i-pause{display:block;}
.loading .play{animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb, var(--ink) 18%, transparent);}}
.controls .skip{
  position:relative;
  width:52px;
  height:52px;
  color:var(--text);
}
.controls .skip:hover{background:var(--card);}
.skip svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.skip b{position:absolute;font-size:9.5px;font-weight:700;margin-top:2px;}
[dir="rtl"] .skip svg{transform:scaleX(-1);}

.hint{
  margin:22px 0 0;
  font-size:14px;
  color:var(--muted);
  transition:opacity .6s ease;
}
.has-played .hint{opacity:0;}

/* Without JavaScript only the phone's own player shows. */
.deck,.wave,.times,.controls,.hint{display:none;}
.js .deck{display:block;}
.js .wave{display:block;}
.js .times,.js .controls{display:flex;}
.js .hint{display:block;}
.js main > audio{display:none;}
main > audio{width:100%;margin-top:8px;}


/* ---------- list of all recordings (/) ---------- */
.list{width:100%;display:grid;gap:12px;margin-top:8px;text-align:start;}
.item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  background:var(--card);
  color:inherit;
  text-decoration:none;
  transition:transform .15s ease;
}
.item:active{transform:scale(.985);}
.item:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.mini{
  flex:none;
  width:52px;
  height:52px;
  border-radius:50%;
  background:repeating-radial-gradient(circle, var(--vinyl-a) 0 1px, var(--vinyl-b) 1px 2px);
  display:grid;
  place-items:center;
}
.mini span{width:40%;aspect-ratio:1;border-radius:50%;background:var(--accent);}
.item strong{display:block;font-family:var(--serif);font-size:19px;font-weight:600;}
.item small{display:block;color:var(--muted);font-size:13px;margin-top:2px;}
.item[lang="ar"] strong{font-family:system-ui,-apple-system,'Geeza Pro',sans-serif;}

@media (prefers-reduced-motion: reduce){
  .spin{animation:none;}
  .arm .swing,body::before{transition:none;}
}