/* ==========================================================================
   Player - a list of titles; clicking one plays its audio in a
   player that pops up from the bottom of the screen (templates/player/
   index.html), all in the browser's monospace: the title scrolling by in a black bar, play and a progress
   bar, then the post's picture beside its text. Folded, only the title bar
   and the controls stay, docked at the bottom.

   Links, the progress bar and the current title read var(--accent, #0FFF50),
   set in the page's <head> when the site has an accent colour.
   ========================================================================== */

body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.15;
  color: #000;
  background: #fff;
  overflow-wrap: break-word;
}

a { color: var(--accent, #0FFF50); }

/* The site's cover as in CV: whole, its height set by Cover image size,
   never wider than the screen. Covers open whole on a click. */
.avatar {
  display: block;
  max-height: calc(96px * var(--cover-scale, 1));
  max-width: calc(100% - 40px);
  width: auto;
  height: auto;
  margin: 20px 20px 0;
}
.zoomable { cursor: zoom-in; }

.intro {
  margin: 20px;
}
.site-title {
  margin: 0;
  font-weight: 700;
}
/* The same gap above the description and above the links (the links are
   smaller text, so px rather than em). */
.site-description {
  margin: 5px 0 0;
}
.social-links {
  display: block;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}
.social-links li {
  display: inline;
  margin-right: 0.75em;
}

/* The list of titles. */
.tracks {
  margin: 34px 20px 20px;
  padding: 0;
  list-style: none;
}
/* Each entry on its own, with room between them; the prefix (theme
   settings) in its own column, so a long title wraps beside it. */
.track {
  display: flex;
  align-items: baseline;
  margin: 0 0 0.7em;
}
.track-prefix {
  flex: none;
  margin-right: 0.5em;
}
.track-link {
  color: var(--accent, #0FFF50);
  text-decoration: none;
}
.track-title {
  padding: 0 2px;
  /* Every line of a wrapped title gets the padding, so they line up. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  cursor: pointer;
}
.track-title:hover {
  text-decoration: underline;
}
.track.is-current .track-title {
  background: var(--accent, #0FFF50);
}
.track-date {
  color: #888;
}

/* The player. */
.player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
  border-top: 1px solid #000;
}
.player[hidden] { display: none; }

.player-title {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: #000;
  border: 0;
  padding: 8px 0;
  text-align: left;
  cursor: pointer;
}
/* --from (the bar's width) and --to (minus the title's width) are set by
   the page's script: right edge in, left edge out. */
.marquee {
  display: inline-block;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(var(--from, 100vw), 0, 0);
}
.marquee-text {
  display: inline-block;
}
@keyframes player-marquee {
  from { transform: translate3d(var(--from), 0, 0); }
  to { transform: translate3d(var(--to), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none !important; transform: none; padding-left: 14px; }
}

.player-controls {
  display: flex;
  height: 44px;
  border-bottom: 1px solid #000;
}
/* Where the track is, in its own box after play: as wide as the time
   needs ("1:02:05" too), the same room on each side as the 44px squares
   have around their sign. */
.player-time {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-right: 1px solid #000;
}
.player-time:empty { display: none; }
/* The entry's #, in its own square at the right. */
.player-link {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border-left: 1px solid #000;
}
.player-link[hidden] { display: none; }
.player-play,
.player-fold {
  flex: none;
  width: 44px;
  font: inherit;
  font-size: 12px;
  letter-spacing: -2px;
  color: #000;
  background: #fff;
  border: 0;
  cursor: pointer;
}
.player-play { border-right: 1px solid #000; }
.player-fold { border-left: 1px solid #000; font-size: 16px; letter-spacing: 0; }
.player-play:disabled { color: #bbb; cursor: default; }
.player-bar {
  flex: 1;
  position: relative;
  cursor: pointer;
  touch-action: none;
}
.player-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--accent, #0FFF50);
}

.player-details {
  display: none;
  height: 160px;
}
.player.has-details:not(.is-folded) .player-details {
  display: flex;
}
.player-picture {
  flex: none;
  width: 160px; /* the row's height: square */
  height: 100%;
  object-fit: cover;
  border-right: 1px solid #000;
}
.player-picture[hidden] { display: none; }
.player-text {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
}
.player-text p { margin: 0 0 0.6em; }
.player-text img { max-width: 100%; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  object-fit: contain;
}