/* Day-score ring on a reflection photo. The markup is the sidebar meter, scaled down. */

.insight-media,
.story.is-feature .story-media,
.reflection-photo {
  position: relative;
}

.reflection-film .reflection-photo {
  align-self: start;
  width: 100%;
}

.reflection-score {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 25, 22, 0.32);
  pointer-events: none;
}

.reflection-score,
.reflection-score * {
  pointer-events: none;
}

.reflection-score .day-meter {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #1c1916;
}

.reflection-score .day-meter > svg {
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
}

.reflection-score .day-meter-track {
  stroke: #e6dfd6;
}

/* Center the digit ink on the ring. The grid centers the number's box.
   line-height:1 and text-box trim drop the font's extra ascent and descent
   so that box is the cap-to-baseline of the figures, not the em square.
   Tabular lining figures share one width. letter-spacing stays 0: a trailing
   gap would shift the ink off the horizontal center. Measured on JUST Sans
   at 52, 64, and 84px, the ink sits on the ring center. */
.reflection-score .day-meter strong {
  grid-area: 1 / 1;
  place-self: center;
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: block;
  width: max-content;
  height: auto;
  margin: 0;
  padding: 0;
  color: #1c1916;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  text-box: trim-both cap alphabetic;
  transform: none;
}

.reflection-score .day-meter.is-over strong {
  font-size: 12px;
}

.reflection-score .day-meter span {
  display: none;
}

.book-hero-cover .reflection-score {
  top: 10px;
  right: 10px;
  width: 64px;
  height: 64px;
  padding: 5px;
}

.book-hero-cover .reflection-score .day-meter strong {
  font-size: 18px;
}

.book-hero-cover .reflection-score .day-meter.is-over strong {
  font-size: 15px;
}

.story.is-feature .reflection-score {
  width: 64px;
  height: 64px;
  padding: 5px;
}

.story.is-feature .reflection-score .day-meter strong {
  font-size: 18px;
}

.habit-collage-shot .reflection-score,
.habit-photos a .reflection-score {
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  padding: 3px;
}

.habit-collage-shot .reflection-score .day-meter strong,
.habit-photos a .reflection-score .day-meter strong {
  font-size: 13px;
}

@media (min-width: 992px) {
  .book-hero-cover .reflection-score {
    top: 16px;
    right: 16px;
    width: 84px;
    height: 84px;
    padding: 6px;
  }

  .book-hero-cover .reflection-score .day-meter strong {
    font-size: 24px;
  }

  .book-hero-cover .reflection-score .day-meter.is-over strong {
    font-size: 18px;
  }
}

/* The white disc stays white in dark mode so the number keeps the sidebar's dark type. */
#reflection-note[data-reader="dark"] .reflection-score,
#reflection-note[data-reader="dark"] .reflection-more .reflection-score {
  background: #fff;
}

#reflection-note[data-reader="dark"] .reflection-score .day-meter,
#reflection-note[data-reader="dark"] .reflection-score .day-meter strong,
#reflection-note[data-reader="dark"] .reflection-more .reflection-score .day-meter,
#reflection-note[data-reader="dark"] .reflection-more .reflection-score .day-meter strong {
  color: #1c1916;
}

#reflection-note[data-reader="dark"] .reflection-score .day-meter-track,
#reflection-note[data-reader="dark"] .reflection-more .reflection-score .day-meter-track {
  stroke: #e6dfd6;
}