/* Chip list of child approaches on a parent topic detail page lives further
   down (.topic-chip-list); /topics itself no longer renders the old
   hierarchical <ul> — the heatmap below is the single browse surface. */

/* Topics heatmap — calendar grid spanning the full row width. One row per
   top-level topic; columns = last 52 weeks; cell intensity = weekly count.
   Labels overlay the leftmost cells with an opaque background so the chart
   stays right-flushed (most recent weeks at the right edge) without losing
   label legibility. Click any row to read its description; clicking a parent
   also reveals its child approach rows. Scrolls horizontally on narrow
   viewports so cell columns and month ticks stay readable. */
.topics-heatmap-wrap {
  margin: 0.5rem 0 1.25rem;
  padding: 0;
}
.topics-heatmap-wrap figcaption {
  margin: 0.5rem 0 0;
  color: light-dark(#555, #aaa);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.topics-heatmap-scroll { display: block; }
.topics-heatmap { display: block; }
.heatmap-row {
  display: grid;
  /* Label and cells share the same grid track ("stack") so the 52-week
     strip spans the full row width — rightmost cell is flush to the right
     edge for "most recent first" reading — and the label overlays the
     leftmost cells with an opaque background. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stack";
  align-items: center;
  padding: 0.1rem 0;
  /* Each row is its own horizontal scroll container so description panels
     (siblings of rows in .topics-heatmap) stay outside the scroll context
     and don't drift with the cells. JS syncs scrollLeft across all rows so
     columns stay aligned by week. */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.heatmap-row::-webkit-scrollbar { display: none; }
/* Author rule must repeat [hidden]'s display:none because .heatmap-row's
   display:grid has equal specificity to the UA [hidden] rule and would
   otherwise win as the later-loaded stylesheet. */
.heatmap-row[hidden] { display: none; }
.heatmap-row.heatmap-row-expandable { cursor: pointer; }
.heatmap-row.heatmap-row-expandable:hover .heatmap-label { color: light-dark(#1d3557, #9cc3ea); }
.heatmap-row-child .heatmap-label {
  padding-left: 1.5rem;
  font-size: 0.88rem;
  color: light-dark(#444, #bcbcbc);
}
.heatmap-label {
  grid-area: stack;
  justify-self: start;
  /* Sticky-left keeps the topic name anchored to the visible edge of the
     scroll container while the cells and month ticks slide beneath it. */
  position: sticky;
  left: 0;
  z-index: 1;
  /* Opaque page-coloured background sized to the text masks the cells that
     sit underneath, so labels stay readable while the heatmap continues
     edge-to-edge. */
  background: light-dark(#fff, #111);
  padding: 0 0.4rem 0 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  max-width: 100%;
}
.heatmap-label a, .heatmap-label a:visited {
  color: inherit;
  text-decoration: none;
}
.heatmap-label a:hover { text-decoration: underline; }
.heatmap-marker {
  display: inline-block;
  width: 0.8rem;
  font-size: 0.75rem;
  color: light-dark(#555, #aaa);
}
.heatmap-marker::before { content: "▸"; }
.heatmap-row-expandable.is-expanded .heatmap-marker::before { content: "▾"; }
.heatmap-marker-spacer {
  display: inline-block;
  width: 0.8rem;
}
.heatmap-cells {
  grid-area: stack;
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  gap: 1px;
  /* min-width drives horizontal overflow inside .heatmap-row; below this
     width the cell strip extends past the row and the row scrolls. */
  min-width: 38rem;
}
.heatmap-cells .cell {
  display: block;
  aspect-ratio: 1;
  border-radius: 1px;
  background: light-dark(#ebedf0, #20242c);
}
.heatmap-cells .cell-l1 { background: light-dark(#cfdbe9, #2b3a55); }
.heatmap-cells .cell-l2 { background: light-dark(#9ab5d6, #4366a0); }
.heatmap-cells .cell-l3 { background: light-dark(#5079b3, #6d96cf); }
.heatmap-cells .cell-l4 { background: light-dark(#1d3557, #9cc3ea); }

/* Month-tick header row — non-interactive, labels float in the grid above
   the columns where each month starts. */
.heatmap-row.heatmap-months {
  padding-bottom: 0.15rem;
  margin-bottom: 0.1rem;
}
.heatmap-ticks {
  position: relative;
  height: 0.95rem;
}
.heatmap-ticks > span {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  color: light-dark(#555, #aaa);
  line-height: 1;
}
.heatmap-ticks > span.tick {
  position: relative;
  white-space: nowrap;
  overflow: visible;
}

.heatmap-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.heatmap-legend .cell {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 1px;
}
.heatmap-legend .cell-l0 { background: light-dark(#ebedf0, #20242c); }
.heatmap-legend .cell-l1 { background: light-dark(#cfdbe9, #2b3a55); }
.heatmap-legend .cell-l2 { background: light-dark(#9ab5d6, #4366a0); }
.heatmap-legend .cell-l3 { background: light-dark(#5079b3, #6d96cf); }
.heatmap-legend .cell-l4 { background: light-dark(#1d3557, #9cc3ea); }

/* Description panel revealed when a row is expanded. Lives outside the
   per-row horizontal scroll context (rows scroll, descs don't), so it stays
   anchored to the body content area without needing sticky positioning. */
.heatmap-desc {
  margin: 0.2rem 0 0.5rem;
  padding: 0.35rem 0.75rem;
  border-left: 3px solid light-dark(#ddd, #333);
  background: light-dark(#fff, #111);
  color: light-dark(#444, #bcbcbc);
  font-size: 0.88rem;
  font-style: italic;
  max-width: 100%;
}
.heatmap-desc[hidden] { display: none; }
.heatmap-desc p { margin: 0; }
.heatmap-desc-child { margin-left: 1.5rem; font-size: 0.85rem; }

/* Narrow viewports: tighten label gap and description indent. The chart
   still spans the full row width with labels overlaid on the leftmost
   cells; horizontal scroll handles the 30rem min-width overflow. */
@media (max-width: 32rem) {
  .heatmap-label { font-size: 0.82rem; }
  .heatmap-row-child .heatmap-label { padding-left: 1rem; }
  .heatmap-cells { gap: 1px; min-width: 30rem; }
  .heatmap-desc { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
  .heatmap-desc-child { margin-left: 1rem; }
}
ul.topic-chip-list {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.3rem;
}
ul.topic-chip-list li { margin: 0; }
ul.topic-chip-list .chip { margin: 0; }