/* === Music log ==============================================================
   Loaded only on the music-log category archive.
   ========================================================================== */

.icrt-logpage__log { min-width: 0; }

.icrt-loghour { margin: 0 0 1.75rem; }

/* Sticky hour headings: the log is long, and losing track of which hour you are
   reading is the one way to misidentify a song. */
.icrt-loghour__head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.65rem 0 0.5rem;
  background: var(--icrt-paper);
  color: var(--icrt-ink);
  border-bottom: 1px solid var(--icrt-line);
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.icrt-loghour__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

/* Time, cover, title, artist. The cover has a column of its own: added to
   the row without one it took a flexible track and pushed every title into
   the middle of the page. */
.icrt-play {
  display: grid;
  grid-template-columns: 3.6rem 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0 0.9rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--icrt-line);
}

.icrt-play:last-child { border-bottom: 0; }
.icrt-play:nth-child(odd) { background: var(--icrt-mist); }

.icrt-play__at {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--icrt-accent);
  font-variant-numeric: tabular-nums;
}

.icrt-play__title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--icrt-ink);
}

/* The artist sits under the title on a narrow screen and beside it when there
   is room, so a long title never pushes the artist out of view. */
.icrt-play__artist {
  grid-column: 3;
  font-size: 0.88rem;
  color: var(--icrt-ink-soft);
}

/* Time and cover stand beside the two-line stack on a phone. */
.icrt-play__at, .icrt-play .cw-cover { grid-row: span 2; }

@media (min-width: 40rem) {
  .icrt-play { grid-template-columns: 3.6rem 2.25rem minmax(0, 1.15fr) minmax(0, 1fr); }
  .icrt-play__artist { grid-column: 4; }
  .icrt-play__at, .icrt-play .cw-cover { grid-row: auto; }
}

.icrt-log__none {
  margin: 0;
  padding: 1.4rem 1.2rem;
  background: var(--icrt-mist);
  border-radius: 0.8rem;
  color: var(--icrt-ink-soft);
}

/* --- page layout ---------------------------------------------------------
   The log is long and narrow; the window's figures and repeats belong beside
   it rather than buried under two hundred rows. */

.icrt-logpage__cols {
  display: grid;
  gap: 1.75rem;
  margin: 2rem 0 3rem;
}

@media (min-width: 64rem) {
  .icrt-logpage__cols { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  /* Sticky: the repeats stay in view while the log scrolls past them. */
  .icrt-logpage__side { position: sticky; top: 1rem; }
}

.icrt-logpage__side { display: grid; gap: 1.25rem; min-width: 0; }

/* --- just played ---------------------------------------------------------
   "What was that, just now?" was answered by the first row of a table. */

.icrt-justplayed {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 1.25rem 1.4rem;
  border-radius: 1rem;
  background: var(--icrt-mist);
  border: 1px solid var(--icrt-line);
}

.icrt-justplayed__art {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  background:
    radial-gradient(circle at 78% 26%, rgba(255, 255, 255, .18) 0 1rem, transparent 1.1rem),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 10px),
    linear-gradient(140deg, var(--cw-show-deep, #0b2f6b) 0%, var(--cw-show, #1160d4) 100%);
}

.icrt-justplayed__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--icrt-accent);
}

.icrt-justplayed__title { margin: 0; font-size: 1.45rem; line-height: 1.2; color: var(--icrt-ink); }
.icrt-justplayed__artist { margin: 0.2rem 0 0; font-size: 1rem; color: var(--icrt-ink-soft); }

.icrt-justplayed__at {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--icrt-muted);
  font-variant-numeric: tabular-nums;
}

/* --- on repeat ----------------------------------------------------------- */

.icrt-popular,
.icrt-logaside {
  padding: 1.15rem 1.25rem 1.35rem;
  border-radius: 0.9rem;
  background: var(--icrt-paper);
  border: 1px solid var(--icrt-line);
}

.icrt-popular__head,
.icrt-logaside__head {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--icrt-muted);
  padding-bottom: 0.5rem;
  border-bottom: 0;
}

.icrt-popular__list { list-style: none; margin: 0; padding: 0; }

.icrt-popular__row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--icrt-line);
}

.icrt-popular__row:last-child { border-bottom: 0; }

.icrt-popular__n {
  flex: 0 0 auto;
  width: 1.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--icrt-accent);
  font-variant-numeric: tabular-nums;
}

.icrt-popular__t { display: flex; flex-direction: column; min-width: 0; }
.icrt-popular__title { font-size: 0.9rem; font-weight: 600; color: var(--icrt-ink); }
/* The song link inherits the theme's dark-mode link colour, which sat nearly
   invisible on the panel; the title's own ink is the readable one. */
.icrt-popular__title a { color: var(--icrt-ink); }
.icrt-popular__artist { font-size: 0.78rem; color: var(--icrt-ink-soft); }

.icrt-popular__plays {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--icrt-muted);
  white-space: nowrap;
}

.icrt-logaside__body { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.6; color: var(--icrt-ink-soft); }

/* --- the figure ----------------------------------------------------------
   An instrument (docs/design-language.md, "Instruments"): the count is a
   reading from the play log, so it may be big. The panel sits on the LED dot
   grid, and the histogram's lit cells are the grid's own cells, so EVERY
   vertical measure in here is a multiple of the grid's 7px pitch — padding,
   line heights, margins — or the lit squares drift off the unlit ones. */

.icrt-logfig {
  --icrt-pitch: 7px;
  display: flex;
  flex-direction: column;
  padding: calc(3 * var(--icrt-pitch));
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
}

.icrt-logfig__label {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: calc(3 * var(--icrt-pitch));
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.62);
}

/* The numeral's size is fluid; its line box is rounded up to the pitch so
   whatever the viewport, the histogram below still lands on the grid. */
.icrt-logfig__n {
  --icrt-logfig-size: clamp(3rem, 8vw, 5.5rem);
  margin: var(--icrt-pitch) 0 0;
  font-size: var(--icrt-logfig-size);
  font-weight: 700;
  line-height: 1;
  line-height: round(up, var(--icrt-logfig-size), var(--icrt-pitch));
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.icrt-logfig__sub,
.icrt-logfig__none {
  margin: 0;
  font-size: 0.9rem;
  line-height: calc(3 * var(--icrt-pitch));
  color: rgba(255, 255, 255, 0.62);
}

.icrt-logfig__none {
  margin-top: var(--icrt-pitch);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: calc(4 * var(--icrt-pitch));
  color: #fff;
}

.icrt-logfig__hist { margin: calc(3 * var(--icrt-pitch)) 0 0; max-width: 100%; }

/* One column per hour, two dots wide with a dark dot between, laid on the
   pitch so every lit square sits exactly on an unlit one. */
.icrt-logfig__grid {
  display: grid;
  grid-template-columns: repeat(var(--icrt-logfig-cols, 12), calc(2 * var(--icrt-pitch)));
  column-gap: var(--icrt-pitch);
  width: max-content;
  max-width: 100%;
  height: calc(var(--icrt-logfig-rows, 8) * var(--icrt-pitch));
}

/* The whole column height carries the tooltip, so a silent hour can still
   say "no songs" on hover; its lit cells stack from the bottom. */
.icrt-logfig__col {
  display: grid;
  grid-auto-rows: var(--icrt-pitch);
  align-content: end;
  height: 100%;
  min-width: 0;
}

/* The glow is a filter on the cell and the dots are a mask on its inner box:
   a filter on the masked element itself would glow the box, then mask the
   glow away. */
.icrt-logfig__cell {
  display: block;
  height: var(--icrt-pitch);
  filter: drop-shadow(0 0 2px var(--icrt-signal-glow, rgba(255, 122, 26, 0.35)));
}

.icrt-logfig__cell::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--icrt-signal, #ff7a1a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='2' y='2' width='3' height='3' rx='.6'/%3E%3C/svg%3E") 0 0 / 7px 7px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='2' y='2' width='3' height='3' rx='.6'/%3E%3C/svg%3E") 0 0 / 7px 7px;
}

/* The window's first and last hour, under the first and last column. */
.icrt-logfig__axis {
  display: flex;
  justify-content: space-between;
  margin: var(--icrt-pitch) 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: calc(2 * var(--icrt-pitch));
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
}

/* Whose plays these are, and how fresh. */
.icrt-logpage__source { margin: .45rem 0 0; font-size: .8125rem; color: var(--icrt-muted); }