/*
 * Trends: the index, the weekly report pages and long-form article bodies. Propshaft emits one
 * <link> per file in this directory sorted by filename, so this loads after every 0N- file and can
 * retune what they set. That is also why it must not restyle `.data-table`: it would win the tie.
 *
 * Everything here uses the Terminal tokens from application.css — no new colors, no new fonts.
 *
 * Why a `.prose` scope exists at all: application.css is tuned for MARKETING pages, where h1 runs to
 * 66px and h2 to 40px, and where `p { max-width: 640px }` is deliberately global. Those are right
 * for a hero and wrong for a 2,000-word article, and nothing in the base sheet styles ul/ol/
 * blockquote/pre/table/inline code, because marketing pages never needed them. `.prose` is that
 * missing layer, and it only applies inside rendered post bodies.
 */

/* ------------------------------------------------------------ Article ------ */
.entry__title { font-size: clamp(32px, 4.5vw, 46px); letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }

.entry__meta {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line1);
}


/* ------------------------------------------------------------- Prose ------- */
/* 1.55 to match body copy everywhere else. The old 1.75 was set before the type scale existed
   and made a post read looser than the page around it. */
.prose { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.prose p, .prose li { text-wrap: pretty; }
.prose h2, .prose h3, .prose h4 { text-wrap: balance; }

/* Reset the marketing heading ramp to article proportions, and give headings room above so a long
   post reads as sections rather than one wall. */
.prose h2 {
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 2.2em 0 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line1);
}

.prose h3 { font-size: 20px; margin: 1.8em 0 0.5em; }
.prose h4 { font-size: 16px; margin: 1.6em 0 0.5em; }

/* The global `p { max-width: 640px }` would leave a ragged right edge in this column. */
.prose p { max-width: none; margin: 0 0 1.15em; }

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--accent-text); }

.prose a { text-decoration: underline; text-underline-offset: 2px; }

.prose strong { color: var(--text); font-weight: 600; }

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent-35);
  color: var(--text-3);
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr { border: 0; border-top: 1px solid var(--line1); margin: 2.4em 0; }

.prose img { border-radius: var(--r-card); margin: 1.6em 0; }

.prose figcaption {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  margin-top: -0.8em;
}

/* Inline code. Distinguished from a code block by weight and tint, not by a border. */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg);
  border: 1px solid var(--line1);
  border-radius: var(--r-btn);
  padding: 1px 5px;
}

/* Code blocks: the same "well" surface the terminal mocks use. Scrolls inside itself so a long
   line can never force the page to scroll sideways on a phone. */
.prose pre {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--bg);
  border: 1px solid var(--line1);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin: 1.4em 0;
  overflow-x: auto;
}

.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* Markdown tables render as the house `.data-table` (MarkdownRenderer::HighlightedHTML#table), so
   this file must NOT restyle `.prose table`, `.prose th` or `.prose td`. blog.css sorts after
   04-components.css and `.prose th` ties `.data-table th` on specificity (0,1,1), so anything
   written here wins the tie and quietly undoes the component. The only thing prose owes a table is
   vertical rhythm. */
.prose .data-table-wrap { margin: 1.6em 0; }

/* A fare and an ISO date must not break in half, the same argument `.data-table__date` makes on the
   route boards. A markdown table cannot name a date column, so the convention is: right align every
   numeric or date column with `---:`, and nowrap follows the alignment. */
.prose .data-table__num { white-space: nowrap; }

/* The accent variant of the house mono label, for the one label on a band that marks the thing a
   reader should act on: "Latest" on the index, "Next" on a call to action. --accent-text, not
   --accent: the fill colour does not clear the contrast floor as a word on the page ground. */
.label--accent { color: var(--accent-text); }

/* ------------------------------------------------------------ Index/rows ---- */
/* THE LEAD ENTRY, on the house 6+4 row with the accent top rule the site uses to mark the one
   thing on a band that matters most. */
.entry-lead { border-top: 1px solid var(--accent); padding-top: 22px; }
.entry-lead__title {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 600;
  margin: 12px 0 0;
  text-wrap: balance;
}
.band .entry-lead__title a { color: var(--text); }
.band .entry-lead__title a:hover { color: var(--accent-text); }
.entry-lead__lede { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--text-4); }
.entry-lead__meta {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* THE DATED ARCHIVE. A 128px mono date column, the title and lede, then the measure. ISO dates,
   because they sort visually and never read ambiguously -- the same argument .data-table__date
   makes on the route boards. */
.archive__year { margin: 32px 0 10px; color: var(--text-5); }
.archive { border-top: 1px solid var(--line1); }
.archive__row {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line1);
  color: var(--text);
  transition: color var(--motion);
}
.archive__row:hover { color: var(--accent-text); }
.archive__date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.archive__text { display: block; min-width: 0; }
.archive__title { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.archive__lede { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-4); max-width: 60ch; }
.archive__measure { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-4); white-space: nowrap; }

@media (max-width: 640px) {
  .archive__row { grid-template-columns: 1fr; gap: 6px; }
  .archive__measure { display: none; }
}

/* ------------------------------------------------------------- Report ------ */
/* NO MEASURE CAP on the summary, and it is the only block on the page that gets none. These are
   scannable one line facts rather than running prose: each one is a single line the eye takes in
   at once, and the longest runs to about 113 characters, which fits the container. Prose stays
   capped at 68ch. text-wrap: pretty handles the narrow screens, where wrapping is correct. */
.summary { list-style: none; margin: 20px 0 0; padding: 0; }
.summary li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-block: 16px;
  border-top: 1px solid var(--line1);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.summary li:last-child { border-bottom: 1px solid var(--line1); }
.summary__n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--text-5); }

.masthead__title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 14px 0 20px;
  max-width: 18ch;
  text-wrap: balance;
}
.masthead__stamp {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.masthead__stamp b { font-weight: 500; color: var(--text); }
.masthead__rail { border-left: 1px solid var(--line1); padding-left: 28px; }

.headline-figure__n {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.headline-figure__t { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-4); }

.band__head { margin: 14px 0 0; font-size: 24px; letter-spacing: -0.025em; font-weight: 600; }
.band__intro { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-4); max-width: 68ch; }

.table-block { margin-top: 30px; }
.table-block h3 { font-size: 19px; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 4px; }
.table-block__note { margin: 0 0 14px; font-size: 14px; color: var(--text-4); max-width: 68ch; }

/* The route name is the row's subject, so it takes the darkest ink the system allows on a word. */
.data-table__route { color: var(--text); font-weight: 500; }
/* The direction tag beside a reversed low. Mono, because it names a route rather than describing
   one, and small enough to read as an annotation on the figure it follows. */
.data-table__dir { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
.data-table__none { color: var(--text-4); font-style: italic; }

/* A fall is the accent, a rise is --danger. Red is destructive everywhere else on the site, and
   this is the one editorial place it means "worse for the reader" rather than "this deletes
   something". Both keep tabular numerals so a column of them lines up. */
.wow--down { color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wow--up { color: var(--danger-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wow--flat { color: var(--text-4); white-space: nowrap; }

/* ------------------------------------------------------------ Charts ------- */
/* The frame is a surface and a hairline, not a card: the chart is the content, and a radius plus a
   shadow around every one of three would read as three separate objects on a page that is already
   a stack of bands. overflow-x, because an 880px drawing has to scroll inside itself on a phone
   rather than widen the page. */
.chart { margin: 26px 0 0; }
.chart__frame {
  background: var(--surface);
  border: 1px solid var(--line1);
  border-radius: var(--r-cell);
  padding: 4px;
  overflow-x: auto;
}
.chart__frame svg { min-width: 640px; }
.chart__cap { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-4); max-width: 68ch; }

/* ------------------------------------------------------------- Cite -------- */
.cite {
  margin-top: 20px;
  max-width: 76ch;
  background: var(--surface);
  border: 1px solid var(--line1);
  border-top: 1px solid var(--accent);
  border-radius: 0 0 var(--r-cell) var(--r-cell);
  padding: 24px 26px;
}
.cite__text {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-2);
  max-width: none;
  word-break: break-word;
}
.cite__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn--data { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }

/* --------------------------------------------------------- Methodology ---- */
.method { margin-top: 22px; max-width: 76ch; }
.method__item { padding-block: 18px; border-top: 1px solid var(--line1); }
.method__item:last-child { border-bottom: 1px solid var(--line1); }
.method__item p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-3); max-width: none; }
.method__item p b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- CTA ------- */
/* `.band .entry-cta__title`, not a bare class: `.band h2` in 06-marketing.css is (0,1,1) and beats
   a bare (0,1,0) class REGARDLESS of file order, so the bare form silently loses its size. */
.entry-cta { border-top: 1px solid var(--accent); padding-top: 22px; }
.band .entry-cta__title { font-size: 27px; letter-spacing: -0.025em; font-weight: 600; margin: 12px 0 8px; }
.entry-cta__body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-3); max-width: 46ch; }
.entry-cta__action { display: flex; align-items: flex-end; }

@media (max-width: 899px) {
  .masthead__rail { border-left: 0; padding-left: 0; }
  .entry-cta__action { align-items: flex-start; }
}

@media (max-width: 640px) {
  .prose { font-size: 16px; }
  .prose h2 { font-size: 23px; }
}