/* ==========================================================================
   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;
  /* A real height, so the cover size setting always changes it (a max
     alone did nothing to a cover already under it); contain keeps it
     whole if the screen's width squeezes it. */
  height: calc(96px * var(--cover-scale, 1));
  max-width: calc(100% - 40px);
  width: auto;
  object-fit: contain;
  object-position: left;
  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;
}
/* "Tiny picture before each title": the post's first picture, about a
   letter tall, in front of the title like a list's bullet. */
.track-thumb {
  flex: none;
  align-self: center;
  width: 1.3em;
  height: 1.05em;
  object-fit: cover;
  margin-right: 0.5em;
  cursor: pointer;
}
.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. */
/* --bar: the title bar, the lines and the open ≡ (the "Bar and lines
   colour" option, templates/player/index.html); black when not set. */
.player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--page-bg, #fff);
  border-top: 1px solid var(--bar, #000);
}
.player[hidden] { display: none; }

.player-title {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px; /* whole pixels, like every row under it: the player sits on the window's bottom, so one fractional height puts the bar between pixels (a white seam, the fill off by one) */
  color: #fff;
  background: var(--bar, #000);
  border: 0;
  padding: 8px 0;
  text-align: left;
  cursor: pointer;
}
/* Moved by the page's script (runMarquee): in at the bar's right edge,
   out at its left. Waits off to the right until it starts. */
.marquee {
  display: inline-block;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(100vw, 0, 0);
}
.marquee-text {
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .marquee { transform: none; padding-left: 14px; }
}

.player-controls {
  display: flex;
  height: 44px;
  border-bottom: 1px solid var(--bar, #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 var(--bar, #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 var(--bar, #000);
}
.player-link[hidden] { display: none; }
.player-play,
.player-fold {
  flex: none;
  width: 44px;
  font: inherit;
  font-size: 12px;
  letter-spacing: -2px;
  color: var(--page-text, #000);
  background: var(--page-bg, #fff);
  border: 0;
  cursor: pointer;
}
.player-play { border-right: 1px solid var(--bar, #000); }
/* The track list's button (a post with several audio files), beside the fold
   arrow, and the list it opens under the bar: one row per file, the one
   playing in bold with a ▶. */
.player-list { flex: none; align-self: stretch; width: 44px; margin: 0; padding: 0; font: inherit; font-size: 20px; line-height: 1; color: var(--page-text, #000); background: var(--page-bg, #fff); border: 0; border-left: 1px solid var(--bar, #000); border-radius: 0; cursor: pointer; } /* no browser margin or padding: the black fills the bar's full height when open */
.player-list[hidden] { display: none; }
.player-list.is-open { background: var(--bar, #000); } /* the ≡ keeps its color: only the square fills */
.player-tracklist { list-style: none; margin: 0; padding: 0; max-height: 40vh; max-height: round(down, 40vh, 1px); overflow-y: auto; border-bottom: 1px solid var(--bar, #000); }
.player-tracklist[hidden] { display: none; }
.player-tracklist li + li { border-top: 1px solid var(--bar, #ddd); }
.player-tracklist-row { display: flex; gap: 12px; width: 100%; padding: 9px 14px; font: inherit; font-size: 15px; line-height: 20px; text-align: left; color: var(--page-text, #000); background: var(--page-bg, #fff); border: 0; cursor: pointer; }
.player-tracklist-row:hover { background: var(--accent, #0FFF50); }
.player-tracklist-n { flex: none; min-width: 1.5em; color: #888; font-variant-numeric: tabular-nums; }
.player-tracklist .is-current .player-tracklist-row { font-weight: 700; background: var(--accent, #0FFF50); }
/* The ▶ in place of its number, in the same spot: the names stay lined up. */
/* visibility, not a transparent colour: the Text colour option (_page_colors.html) repaints every colour, which brought the number back under the ▶. */
.player-tracklist .is-current .player-tracklist-n { position: relative; visibility: hidden; }
.player-tracklist .is-current .player-tracklist-n::before { content: "\25B6\FE0E"; visibility: visible; position: absolute; left: 0; top: 0.2em; font-size: 10px; }
.player-fold { border-left: 1px solid var(--bar, #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 var(--bar, #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 .post-caption { margin: 0 0 0.6em; } /* the picture's caption, first */
.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;
}