/* Books roadmap page (/books/roadmap), on top of books-landing.css. Statuses use the shelf colors. */
.books-roadmap {
  --roadmap-shipped: #00bba7; /* finished */
  --roadmap-now: var(--orange-50); /* currently reading */
  --roadmap-next: var(--interactive-text); /* want to read */
  --roadmap-later: var(--interactive-text);
  --roadmap-notyet: var(--text-tertiary); /* did not finish */
  --roadmap-muted: #66635d; /* same as .books-faq-answer */
  --roadmap-rule: #d9d5ca; /* same as .books-faq-item */
  gap: 0;
  padding-top: 72px;
  color: var(--ink);
}

.books-roadmap h1, .books-roadmap h2, .books-roadmap h3 {
  font-weight: 600;
}

.books-roadmap-intro {
  max-width: 760px;
  padding-bottom: 56px;
}

.books-roadmap-intro h1 {
  font-size: 64px;
  line-height: 70px;
  letter-spacing: -1.8px;
}

.books-roadmap-intro .books-roadmap-lede {
  margin-top: 24px;
  color: var(--roadmap-muted);
  font-size: 20px;
  line-height: 30px;
}

.books-roadmap-intro .books-roadmap-lede + .books-roadmap-lede {
  margin-top: 12px;
}

.books-roadmap .books-roadmap-updated {
  margin-top: 20px;
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 22px;
}

/* a shelf ribbon per status */
.books-roadmap-ribbon {
  flex: none;
  fill: var(--ribbon);
  stroke: var(--ribbon);
  stroke-width: 1px;
}

.books-roadmap [data-status="shipped"] {
  --ribbon: var(--roadmap-shipped);
}

.books-roadmap [data-status="now"] {
  --ribbon: var(--roadmap-now);
}

.books-roadmap :is([data-status="next"], [data-status="soon"]) {
  --ribbon: var(--roadmap-next);
}

.books-roadmap [data-status="later"] {
  --ribbon: var(--roadmap-later);
}

.books-roadmap [data-status="notyet"] {
  --ribbon: var(--roadmap-notyet);
}

.books-roadmap [data-status="later"] .books-roadmap-ribbon {
  fill: none;
  stroke-width: 1.5px;
}

.books-roadmap-section {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 48px;
  padding-block: 56px;
  border-top: 1px solid var(--roadmap-rule);
  scroll-margin-top: 76px;
}

.books-roadmap-head {
  align-self: start;
  position: sticky;
  top: 100px;
}

.books-roadmap-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.64px;
}

.books-roadmap-head p {
  margin-top: 8px;
  color: var(--roadmap-muted);
  font-size: 17px;
  line-height: 26px;
}

.books-roadmap :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.books-roadmap h3 {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
}

.books-roadmap li p {
  color: var(--roadmap-muted);
  font-size: 17px;
  line-height: 26px;
}

.books-roadmap li h3 + p {
  margin-top: 6px;
}

.books-roadmap a:not(.books-button) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* recently shipped: a dated log, like the FAQ rows */
.books-roadmap-log li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--roadmap-rule);
}

.books-roadmap-log li:first-child {
  padding-top: 4px;
}

.books-roadmap-log time {
  color: var(--roadmap-muted);
  font-size: 17px;
  line-height: 28px;
  font-variant-numeric: tabular-nums;
}

.books-roadmap-log .books-roadmap-same-day {
  visibility: hidden;
}

.books-roadmap .books-roadmap-footnote {
  margin-top: 20px;
  color: var(--roadmap-muted);
  font-size: 17px;
  line-height: 26px;
}

/* now / next / later: cards */
.books-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.books-roadmap-card {
  padding: 24px 24px 26px;
  border-radius: var(--books-radius-card);
  background: var(--surface-secondary);
}

.books-roadmap .books-roadmap-area {
  margin-bottom: 10px;
  color: var(--roadmap-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.books-roadmap-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.books-roadmap-grid-compact .books-roadmap-card {
  padding: 20px 20px 22px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--roadmap-rule);
}

.books-roadmap-grid-compact h3 {
  font-size: 18px;
  line-height: 26px;
}

.books-roadmap-grid-compact li p {
  font-size: 16px;
  line-height: 24px;
}

/* not yet: title and reason side by side */
.books-roadmap-deferred li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--roadmap-rule);
}

.books-roadmap-deferred li:first-child {
  padding-top: 4px;
}

.books-roadmap-deferred li h3 + p {
  margin-top: 0;
}

.books-roadmap-closing {
  margin-top: 24px;
  padding: 40px;
  border-radius: var(--books-radius-card);
  background: var(--surface-secondary);
}

.books-roadmap-closing h2 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.64px;
}

.books-roadmap-closing p {
  max-width: 640px;
  margin-top: 12px;
  color: var(--roadmap-muted);
  font-size: 20px;
  line-height: 30px;
}

@media (max-width: 1000px) {
  .books-roadmap-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .books-roadmap-head {
    position: static;
  }

  .books-roadmap-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .books-roadmap {
    padding-top: 32px;
  }

  .books-roadmap-intro {
    padding-bottom: 40px;
  }

  .books-roadmap-intro h1 {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.8px;
  }

  .books-roadmap-intro .books-roadmap-lede {
    margin-top: 16px;
    font-size: 18px;
    line-height: 28px;
  }

  .books-roadmap-section {
    padding-block: 40px;
  }

  .books-roadmap-head h2, .books-roadmap-closing h2 {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.56px;
  }

  .books-roadmap-grid, .books-roadmap-grid-compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .books-roadmap-log li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .books-roadmap-log .books-roadmap-same-day {
    display: none;
  }

  .books-roadmap-log time {
    font-size: 15px;
    line-height: 22px;
  }

  .books-roadmap-deferred li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .books-roadmap-closing {
    padding: 28px 24px;
  }

  .books-roadmap-closing p {
    font-size: 18px;
    line-height: 28px;
  }
}