/* =====================================================================
   LISTEN, at the top of every volume (aloud.js does the work; scripts/build_volumes.py
   writes the markup under the title). A file of its own, every class vla-, so it never
   tangles with vol.css. It sits on the dark title page, so it's drawn in paper and gold
   on the cover's dark. In the app's night mode, night.js turns it red with the rest of
   the page, so nothing here needs a night version.
   ===================================================================== */
html:not(.vjs) .vla{display:none}
.vla{position:relative;display:grid;gap:8px;max-width:440px;margin:clamp(14px,2.2vw,24px) 0 clamp(22px,3vw,34px)}
.vla[hidden],.vla [hidden]{display:none!important}
.vla-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* the big button: play the recording, or read aloud where there's no recording, and the reading's own pause */
.vla-main{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;
  padding:8px 20px 8px 8px;border:1px solid var(--line-p2);border-radius:40px;background:rgba(7,6,5,.34);color:var(--paper);
  font:inherit;text-align:left;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s}
@media (hover:hover) and (pointer:fine){ .vla-main:hover{background:rgba(7,6,5,.5);border-color:rgba(237,230,213,.62)} }
.vla-main:focus-visible,.vla-btn:focus-visible,.vla-bar button:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.vla-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold-l);color:#141210}
.vla-ico svg{width:22px;height:22px;display:block}
.vla-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.vla-k{font-family:var(--label);font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l)}
.vla-k .vla-len::before{content:"\00b7";margin-right:.45em;color:var(--dust)}
.vla-n{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.9vw,21px);line-height:1.2;color:var(--paper);overflow-wrap:anywhere}
.vla-txt > .vla-len{font-family:var(--body);font-style:italic;font-size:14.5px;line-height:1.35;color:var(--paper-2)}
.vla-sub,.vla-msg{font-family:var(--body);font-style:italic;font-size:14px;line-height:1.5;color:var(--paper-2);padding:0 8px;max-width:38ch}
.vla-msg{color:var(--gold-l)}
.vla-msg:empty{display:none}

/* the recording's place: its chapter, a scrubber over this volume's part, the time */
.vla-player{display:grid;gap:2px;padding:4px 8px 0}
.vla-place{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--label);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper-2);line-height:1.4}
.vla-ch{color:var(--paper);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vla-of{flex:none;color:var(--dust)}
.vla .v-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--gold-l) calc(var(--p,0) * 100%),var(--line-p2) 0)}
.vla .v-slider::-webkit-slider-thumb{background:linear-gradient(var(--gold-l),var(--gold-l)) content-box,var(--cover-dd) padding-box}
.vla .v-slider::-moz-range-track{background:var(--line-p2)}
.vla .v-slider::-moz-range-progress{background:var(--gold-l)}
.vla .v-slider::-moz-range-thumb{background:var(--gold-l);border-color:var(--cover-dd)}
.vla-times{display:flex;justify-content:space-between;font-family:var(--label);font-size:11px;letter-spacing:.12em;color:var(--dust);
  font-variant-numeric:tabular-nums}

/* the quieter buttons: "Or read it aloud", Next section, Stop */
.vla-btn{-webkit-appearance:none;appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:8px;border:0;background:none;font-family:var(--label);font-weight:500;font-size:11px;line-height:1.4;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-2);text-align:left;-webkit-tap-highlight-color:transparent;justify-self:start}
.vla-btn svg{flex:none;width:18px;height:18px;color:var(--gold-l)}
@media (hover:hover) and (pointer:fine){ .vla-btn:hover{color:var(--paper)} }
.vla-rd{display:grid;gap:4px}
.vla-rd-btns{display:flex;flex-wrap:wrap;gap:0 14px}
.vla-rd .vla-k .vla-rof:not(:empty)::before{content:"\00b7";margin:0 .5em 0 0;color:var(--dust)}

/* the paragraph being read aloud: a tint, carried a little past the text by a crisp shadow of the same colour. In the
   app's night mode, night.js draws a faint tint as the black behind it but keeps a crisp shadow as a dim red edge, and
   that edge is what marks the paragraph at night */
.vla-now{background:rgba(214,169,74,.2);box-shadow:0 0 0 .4em rgba(214,169,74,.2);border-radius:.25em;transition:background .3s,box-shadow .3s}
.vch.ink .vla-now{background:rgba(214,169,74,.15);box-shadow:0 0 0 .4em rgba(214,169,74,.15)}
.vh .vla-now{background:rgba(237,230,213,.12);box-shadow:0 0 0 .3em rgba(237,230,213,.12)}

/* the bar along the bottom, while something plays and the control is off screen */
.vla-bar{position:fixed;left:0;right:0;bottom:0;z-index:850;display:flex;align-items:center;gap:6px;
  padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:rgba(20,18,16,.97);color:var(--paper);border-top:1px solid var(--line-p);box-shadow:0 -12px 30px -14px rgba(0,0,0,.55)}
.vla-bar[hidden],.vla-bar [hidden]{display:none!important}
.vla-bar button{-webkit-appearance:none;appearance:none;border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding:0;
  -webkit-tap-highlight-color:transparent}
.vla-bar-pp{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold-l)!important;color:#141210!important}
.vla-bar-pp svg{width:22px;height:22px}
.vla-bar-t{flex:1;min-width:0;min-height:46px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 6px!important;text-align:left}
.vla-bar-t b{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vla-bar-t span{font-family:var(--label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vla-bar-next,.vla-bar-x{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--paper-2)!important}
.vla-bar-next svg,.vla-bar-x svg{width:20px;height:20px}
body.vla-has-bar > footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
@media (min-width:700px){
  .vla-bar{left:50%;right:auto;bottom:16px;width:min(560px,calc(100% - 32px));transform:translateX(-50%);padding:8px 10px;
    border:1px solid var(--line-p);border-radius:40px}
  body.vla-has-bar > footer{padding-bottom:84px}
}