/* Long-form prose for /research. Rides on styles.css, same tokens, same header and footer.
   Only the reading column and the things markdown emits (tables, code, figures) are new. */

.wrap.prose {
  max-width: 760px;
}

.crumb {
  margin: 0 0 24px;
  font-size: 0.9rem;
}

.crumb a {
  color: var(--text-dim);
}

.crumb a:hover {
  color: var(--accent);
  text-decoration: none;
}

.wrap.prose h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 20px;
}

/* The standing note every article carries: this programme's own ceiling, stated up front. */
.ceiling {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: 0.88rem;
  padding: 12px 16px;
  margin: 0 0 40px;
}

.ceiling strong {
  color: var(--text);
}

article {
  font-size: 1rem;
  line-height: 1.75;
}

article h2 {
  font-size: 1.3rem;
  margin: 48px 0 12px;
  line-height: 1.3;
}

article h3 {
  font-size: 1.08rem;
  margin: 36px 0 10px;
}

article h4 {
  font-size: 0.98rem;
  margin: 28px 0 8px;
  color: var(--text-dim);
}

article p,
article li {
  color: #d5d9e2;
}

article strong {
  color: var(--text);
}

article ul,
article ol {
  padding-left: 22px;
}

article li {
  margin: 6px 0;
}

article li > ul,
article li > ol {
  margin: 6px 0;
}

article hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

article blockquote {
  margin: 24px 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--border);
  color: var(--text-dim);
}

/* Inline code carries a lot of weight in these notes (variable names, JSON fields, file
   names), so it needs to be legible without shouting. */
article code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: #1b1e27;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  overflow-wrap: break-word;
}

article pre {
  background: #14161d;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}

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

/* Wide content scrolls in its own box; the page never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.86rem;
  min-width: 460px;
}

.table-wrap th,
.table-wrap td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.table-wrap th {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.table-wrap tr:last-child td {
  border-bottom: 0;
}

article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

/* The toc extension wraps every heading's text in an anchor. Left alone it inherits the
   site's link colour and the whole page turns green, so headings keep the text colour and
   only give themselves away on hover. */
article h2 .toclink,
article h3 .toclink,
article h4 .toclink,
.intro h2 .toclink,
.intro h3 .toclink {
  color: inherit;
  text-decoration: none;
}

article h2 .toclink:hover,
article h3 .toclink:hover,
article h4 .toclink:hover,
.intro h2 .toclink:hover,
.intro h3 .toclink:hover {
  color: var(--accent);
  text-decoration: none;
}

article .footnote {
  font-size: 0.88rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  margin-top: 48px;
}

/* --- the section index ------------------------------------------------------------------ */

.intro {
  max-width: 700px;
  line-height: 1.75;
}

.intro p,
.intro li {
  color: #d5d9e2;
}

.intro strong {
  color: var(--text);
}

.intro h2 {
  font-size: 1.25rem;
  margin: 44px 0 12px;
}

.intro ul {
  padding-left: 22px;
}

.intro li {
  margin: 8px 0;
}

.intro code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: #1b1e27;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

.wrap > h2 {
  font-size: 1.3rem;
  margin: 56px 0 8px;
}

.count {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.9rem;
  margin-left: 6px;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.post-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.post-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  text-decoration: none;
}

.post-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.35;
}

.post-blurb {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.55;
}

.post-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 2px 10px;
}

/* --- the archive ------------------------------------------------------------------------ */

.big-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.95rem;
}

.archive-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.archive-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}

/* Posts are numbered across the whole run, so the featured list's gaps are visible. Tabular
   figures keep the column straight. */
.archive-num {
  flex: 0 0 30px;
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.archive-title {
  flex: 1 1 auto;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}

.archive-title:hover {
  color: var(--accent);
  text-decoration: none;
}

.archive-links {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.archive-links a {
  color: var(--text-dim);
}

.archive-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* The route list is the one place a phone genuinely needs the two halves stacked. */
@media (max-width: 560px) {
  .archive-list li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 4px 14px;
  }

  .archive-links {
    grid-column: 2;
    margin-left: 0;
  }
}

/* The number a featured card carries, matching the archive's run. */
.post-num {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.crumb .crumb-sep {
  color: var(--text-dim);
}