/* /notes/ — the index and the article pages.
   MUT identity (see style-guide.pdf, CLAUDE.md): white ground, black type,
   Playfair Display for titles, JetBrains Mono for chrome, Inter for body copy.
   Every colour comes from tokens.css; nothing is hard-coded here.

   Text always renders at opacity 1 — de-emphasis is by size, weight and
   colour, never a fade. */

/* Notes pages sit on the same tinted field as the homepage (--color-bg), with
   the sidebar's white planks as the only tonal surface on it. */
body {
  background: var(--color-bg);
}

/* Same 5-column Figma grid as /research/ (see home.css): the header and the
   text sit in columns 1–3; the scenario filter takes columns 4–5. */
.notes,
.note {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--gutter);
  align-content: start;
  min-height: 100vh;
  padding: var(--edge-top) var(--margin) 96px;
}

.notes__title,
.notes__list,
.notes__empty,
.note__back,
.note__title,
.note__meta,
.note__body {
  grid-column: 1 / 4;              /* columns 1–3, matching .home__lede */
  min-width: 0;
}

/* ---- columns 4-5: the filter --------------------------------------------- */
.notes__filter {
  /* Two columns wide on the desktop grid — column 5, otherwise kept clear, is
     given over to the planks so a long label like DIGITAL TRANSFORMATION sits
     comfortably next to its count. */
  grid-column: 4 / 6;
  align-self: start;
  min-width: 0;
}

/* Top-aligned with the first HEADLINE, not the page title. It shares the
   LIST's grid row and repeats the list's own top margin, so the two tops are
   equal by construction — spanning from row 1 instead measured that margin
   from the title's top and left the filter a title-height too high. */
.notes .notes__filter {
  grid-row: 2;
  margin-top: var(--gap-title-body);
}

/* On a post the aside starts level with the BODY instead: it drops into the
   body's own row and repeats the body's top margin so the two tops line up.
   The rows are back/title/body — plus an "Updated" line between title and body
   when the post carries one, which pushes the body down a row. */
.note .notes__filter {
  grid-row: 3;
  margin-top: 18px;              /* == .note__body's margin-top */
}

.note:has(.note__meta) .notes__filter { grid-row: 4; }

.notes__filter-label,
.notes__filter-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  line-height: 1.2;
}

/* Every line of the filter is a PLANK in the interface green — the token whose
   stated job is exactly this (segmented controls, filter pills and selects).
   The heading and the phone's menu are filled; the entries are outlined and
   fill in only when active (below). Ink on a filled plank is BLACK: black on
   Green is 13.4:1, white is 1.6:1. */
.notes__filter-label,
.notes__filter-menu {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
  padding: 0.45rem 0.6rem;
}

/* An entry you are not on: green outline, ink label, page showing through.
   The border is on every entry — transparent-to-green is a colour change, not
   a size change — so filling one in never nudges the text by a pixel. */
.notes__filter-link {
  border: 1px solid var(--ui-accent);
  background: transparent;
  color: var(--color-ink);
  padding: calc(0.45rem - 1px) calc(0.6rem - 1px);
}

.notes__filter-label {
  margin: 0 0 2px;
  font-weight: 700;
}

.notes__filter-item + .notes__filter-item { margin-top: 2px; }

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

/* No colour chip: the scenarios name themselves ("Pause Scenario") and sit in
   one flat list with the themes, so a per-scenario swatch would be labelling a
   distinction the list no longer draws. */
.notes__filter-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Post count per entry, pushed to the plank's right edge. Outside the label
   span, so it takes no hover underline and no active bolding. */
.notes__filter-count {
  font-weight: 400;
  margin-left: auto;
}

/* Underline the label only — not the count — and only on real links
   (zero-count entries render as spans and must not react). */
a.notes__filter-link:hover span:first-of-type,
a.notes__filter-link:focus-visible span:first-of-type { text-decoration: underline; }

/* An empty filter looks like any other entry — its 0 already says there is
   nothing behind it. It is simply not a link (rendered as a <span>), so it
   takes no hover underline and there is no dead click. */
.notes__filter-link.is-empty {
  cursor: default;
}

/* The filter you are ON is the one that FILLS: solid green, black ink, bold.
   Every other entry stays an outline, so the current state is the only weight
   in the column. */
.notes__filter-link.is-active {
  font-weight: 700;
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
}

/* ---- the phone's filter menu -------------------------------------------- */
/* Both the planks and this <select> are always in the HTML; the breakpoint
   picks one, which keeps the two sets of entries identical by construction. */
.notes__filter-select { display: none; }

.notes__filter-select-label,
.notes__filter-menu {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-kicker);
  line-height: 1.2;
}

.notes__filter-select-label {
  color: var(--color-ink);
  white-space: nowrap;
}

.notes__filter-menu {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  /* Keep the native menu (and the native picker on iOS) but draw our own
     chevron, since the platform's sits on its own grey field. */
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
}

/* The CD NOTES wordmark links back to /notes/ but must look like a plain
   title: inherit ink, no underline, no focus outline. */
.notes__title-link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.notes__title-link:hover,
.notes__title-link:focus,
.notes__title-link:focus-visible {
  text-decoration: none;
  outline: none;
}

.notes__title-scope {
  font-family: var(--font-mono);
  font-size: 0.5em;
  letter-spacing: var(--track-kicker);
  vertical-align: middle;
}

/* ---- index ---------------------------------------------------------- */
.notes__title,
.note__title {
  font-family: var(--font-display, "Playfair Display", serif);
  color: var(--color-ink);
  line-height: 1.1;
  margin: 0;
}

/* Byte-for-byte the same type spec as .home__title on /research/ (home.css).
   These are the same kind of page header, so they must sit at the same height
   and size: with --edge-top identical on both, any difference in font-size or
   line-height moves the headline down the page relative to the other one.
   It was 40px/1.1 here against 36px/1.02 there, which is what showed. */
.notes__title {
  font-size: var(--fs-body);
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

/* --gap-title-body is the Figma title->body gap /research/ uses for its lede;
   reuse it so the two pages breathe the same. */
.notes__list,
.notes__empty {
  margin: var(--gap-title-body) 0 0;
}

.notes__list {
  list-style: none;
  padding: 0;
}

.notes__item + .notes__item {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-rule, rgba(0, 0, 0, 0.12));
}

.notes__link {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.2;
  display: inline-block;
}

.notes__link:hover,
.notes__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.notes__meta,
.note__meta {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted, var(--color-ink));
  /* Same rhythm as a post page: 16px from the headline down to the byline,
     18px from the byline down to the text. */
  margin: 16px 0 0;
}

.notes__excerpt {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  color: var(--color-ink);
  margin: 18px 0 0;              /* == .note__body's margin-top */
  /* Matches .note__body (chart-section intro spec) — see the note there. */
  font-size: 18px;
  line-height: 1.3;
}

/* The index blurb is rendered markdown now (a <div> of blocks), so its inner
   margins are managed here rather than left to browser defaults. */
.notes__excerpt > * { margin: 0; }
.notes__excerpt > * + * { margin-top: 0.75em; }

.notes__excerpt a {
  color: var(--color-ink);
  text-underline-offset: 0.15em;
}

.notes__excerpt ul,
.notes__excerpt ol {
  padding-left: 1.25em;
}

.notes__excerpt blockquote {
  padding-left: 1rem;
  border-left: 2px solid var(--color-rule, rgba(0, 0, 0, 0.2));
}

/* Stock tickers ([PCOR] in the doc) link out to a Google Finance chart. Mono
   marks them as a symbol rather than a word, and the dotted underline says
   "reference" without competing with the solid underline on prose links. */
.note__ticker {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.9em;
  color: var(--color-ink);
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
}

.note__ticker:hover,
.note__ticker:focus-visible { text-decoration: underline solid; }

/* Sign-off riding on the end of the prose: *BB-8/24/26. Mono, like every other
   piece of chrome; it is the byline and the date in one mark. It wraps with
   the text like any other word, but never breaks INSIDE itself — the initials,
   the hyphen and the date always travel together. */
.note__sig {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  white-space: nowrap;
}

.notes__more {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.8em;
}

.notes__empty {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  color: var(--color-ink);
}

/* ---- article -------------------------------------------------------- */
/* The header matches the single-chart pages under /research/ (phases-tech.html
   and friends): a bold Inter back link sitting tight above an ALL-CAPS
   Playfair title, then the text. Same spec, so the two page types read as one
   family. */
.note__back {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 4px;
}

.note__back a {
  color: var(--color-ink);
  text-decoration: none;
}

.note__back a:hover,
.note__back a:focus-visible {
  text-decoration: underline;
}

/* .section-title's spec on those pages: Playfair 700, ALL CAPS, 32px/1.1. */
.note__title {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.note__meta {
  margin-top: 0;
}


.note__body {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  /* Same type spec as the chart-section intros on /research/ (charts.css
     `.chart-section .section-intro`): 18px/1.3. The index excerpts match
     exactly — deliberately NO size hierarchy between list and article. */
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-ink);
  margin-top: 18px;
}

.note__body > * + * {
  margin-top: 1.25em;
}

.note__body h1,
.note__body h2,
.note__body h3 {
  /* An H1 in the source starts a new POST, so anything here is H2 or deeper. */
  font-family: var(--font-display, "Playfair Display", serif);
  line-height: 1.2;
  margin-top: 2.5em;
}

.note__body h2 { font-size: 1.5rem; }
.note__body h3 { font-size: 1.2rem; }

.note__body a {
  color: var(--color-ink);
  text-underline-offset: 0.15em;
}

.note__body ul,
.note__body ol {
  padding-left: 1.25em;
}

.note__body li + li {
  margin-top: 0.4em;
}

.note__body blockquote {
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-rule, rgba(0, 0, 0, 0.2));
}

.note__body code,
.note__body pre {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.875em;
}

/* Wide content scrolls inside its own box — the page body must never scroll
   sideways. Google Docs tables come through as real <table>s. */
.note__body pre,
.note__body .note__scroll {
  overflow-x: auto;
}

.note__body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.note__body th,
.note__body td {
  border: 1px solid var(--color-rule, rgba(0, 0, 0, 0.15));
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.note__body th {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- phones: one column; the filter sits right under the header ------- */
@media (max-width: 768px) {
  .notes,
  .note {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 72px;
  }
  .notes__title,
  .notes__list,
  .notes__empty,
  .note__back,
  .note__title,
  .note__meta,
  .note__body,
  .notes__filter { grid-column: 1; }
  /* Explicit rows re-order the DOM (title, list, filter) so the filter lands
     between the CD NOTES header and the list. Index pages only — on a post
     (.note) the sidebar keeps its natural place after the body. */
  .notes__title { grid-row: 1; }
  .notes .notes__filter {
    grid-row: 2;
    margin-top: 1.25rem;
  }
  .notes__list,
  .notes__empty { grid-row: 3; }
  .note .notes__filter {
    grid-row: auto;             /* undo the desktop 1/span 3 pin */
    margin-top: 2.5rem;
  }
  /* The seven-row column costs more height than it is worth on a phone, so
     the planks give way to the menu — one control, same entries. The post
     page keeps its planks: they describe the piece, they are not a filter. */
  .notes .notes__filter-label,
  .notes .notes__filter-list { display: none; }
  .notes .notes__filter-select {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  /* Narrow, a title has no sidebar beside it to separate it from the text
     below, so weight does that work instead. */
  .notes__link { font-weight: 700; }
}