/* Developer's Notebook — article and index typography.
 *
 * A SEPARATE FILE, NOT A CHANGE TO index2styles.css. That stylesheet is the
 * marketing site's, loaded by every page on it, and a rule added there to fix
 * a line length here would apply to pages nobody asked to touch. This one is
 * loaded only by the two generated pages under this directory.
 *
 * WHAT IT IS FOR. The site's .centered is a flex helper, not a measure, so an
 * article inherited the full viewport width - measured at 1280px on a desktop,
 * which is roughly 200 characters a line. That is the one thing a page of
 * prose has to get right.
 *
 * Colours are inherited deliberately: the site sets a dark background and light
 * text, and restating either here is how the two drift apart the next time the
 * site is restyled.
 *
 * NOTE FOR ANYONE EDITING A GENERATED PAGE: don't. The articles in this
 * directory are written by engine/guide.py and rewritten on every publish. The
 * templates live there; this stylesheet is the part that is safe to edit by
 * hand.
 */

.notebook-article,
.notebook-index-wrap {
  /* ~70 characters at this font size. */
  max-width: 44rem;
  margin: 0 auto;
  /* THE TOP PADDING CLEARS THE NAVBAR, and the number is not arbitrary. The
     site's .navbar is position: fixed and its <header> computes to ZERO height,
     so page content starts underneath it. Every other page hides this because
     it opens with a hero that has its own top spacing; the notebook opens with
     a heading, so the logo landed on top of it.
     Measured on this page: the nav box bottoms out at 70px on desktop and 50px
     on mobile, but the LOGO overflows it - 103px and 111px respectively. The
     logo is what has to be cleared, not the nav. 7rem covers both with a little
     air, and it is stated here rather than in index2styles.css because fixing
     it there would move every page on the site. */
  padding: 7rem 1.25rem 3rem;
  text-align: left;
  line-height: 1.65;
}

.notebook-article h1.title,
.notebook-index-wrap h1.title {
  text-align: left;
  margin-bottom: 0.25rem;
}

.notebook-article h2 {
  margin-top: 2rem;
}

.notebook-article h3 {
  margin-top: 1.5rem;
}

.notebook-article__meta {
  opacity: 0.7;
  font-size: 0.9rem;
  margin-top: 0;
}

.notebook-article ol,
.notebook-article ul {
  padding-left: 1.5rem;
}

.notebook-article li {
  margin-bottom: 0.4rem;
}

/* A nested list is the "why" under a step. Tighter, and set back a little, so
   the numbered sequence still reads as the spine of the page. */
.notebook-article li > ul,
.notebook-article li > ol {
  margin-top: 0.35rem;
  opacity: 0.88;
}

.notebook-article code {
  /* No background colour named here on purpose - see the header. A subtle
     tint that works on both a light and a dark site is what currentColor at a
     low alpha gives, without asserting what the site's background is. */
  background: rgba(127, 127, 127, 0.22);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.92em;
}

.notebook-article pre {
  background: rgba(127, 127, 127, 0.18);
  padding: 0.85rem 1rem;
  border-radius: 6px;
  /* A long command must scroll INSIDE its block. Without this the page itself
     scrolls sideways, which breaks every other line on it. */
  overflow-x: auto;
}

.notebook-article pre code {
  background: none;
  padding: 0;
}

.notebook-article blockquote {
  margin: 1.25rem 0;
  padding-left: 1rem;
  border-left: 3px solid rgba(127, 127, 127, 0.5);
  opacity: 0.9;
}

.notebook-breadcrumb {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.notebook-lede {
  font-size: 1.05rem;
  max-width: 40rem;
}

.notebook-lede--quiet {
  opacity: 0.75;
  font-size: 0.95rem;
}

.notebook-empty {
  opacity: 0.75;
  padding: 1.5rem 0;
}

.notebook-index {
  list-style: none;
  padding-left: 0;
  margin-top: 2rem;
}

/* GRID, NOT FLEX, and the reason is the summary line. In a flex row the date
   and the title are siblings of the description, so the description either
   squeezes into the same line or forces a wrap that puts the date under the
   title. A two-column grid lets the date sit on the title's baseline and the
   summary span the full width underneath it, which is the shape this list
   actually has. */
.notebook-index__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

.notebook-index__link {
  font-size: 1.15rem;
  font-weight: 600;
}

.notebook-index__date {
  opacity: 0.65;
  font-size: 0.9rem;
  white-space: nowrap;
}

.notebook-index__summary {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  opacity: 0.8;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Below this the date under the title reads better than a cramped two-column
   row. This is the ONE media query in this file and it is about the column,
   not the device. */
@media (max-width: 30rem) {
  .notebook-index__item {
    grid-template-columns: 1fr;
  }

  .notebook-index__date {
    order: -1;
  }
}