/* Journal: index, archives and post pages. Loaded only on journal + post pages (page-only asset).
   Uses tokens.css variables from site.css. */

/* ---------- prose additions (mdlib: figures, tables, rules) ---------- */
.prose .fig { margin: 2rem 0; }
.prose .fig img { width: 100%; height: auto; border-radius: var(--radius); background: var(--paper-2); }
.prose .fig figcaption { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--mute); margin-top: .55rem; }
.prose .fig--hero { margin: 0 0 2.2rem; }
.prose .fig--hero img { width: auto; max-width: 100%; max-height: min(34rem, 70vh); margin-inline: auto; }
.prose hr { border: 0; height: 1px; background: var(--rule-2); margin: 2.4rem 0; }
.prose h4 { font-size: var(--step-1); font-weight: 600; margin-top: 1.6em; }
.prose ul ul, .prose ol ul { margin-top: .5rem; }
.prose .tbl { overflow-x: auto; margin: 1.8rem 0; border-top: 2px solid var(--el, var(--action)); }
.prose .tbl:focus-visible { outline-offset: 2px; }
.prose table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; line-height: 1.45; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 600; color: var(--ink); }
.prose td { color: var(--ink-2); }
.byline { font-size: .92rem; color: var(--mute); margin-bottom: 1.6rem; }
.byline a { color: var(--ink); }

/* ---------- chips ---------- */
.jchips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.jchip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .95rem;
  border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 .9rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.jchip[data-el]::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--el); flex: none; }
.jchip:hover { border-color: var(--ink); }
.jchip__n { color: var(--mute); font-size: .8rem; font-variant-numeric: tabular-nums; }
.jchip[aria-pressed="true"], .jchip[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.jchip[aria-pressed="true"] .jchip__n, .jchip[aria-current="page"] .jchip__n { color: inherit; opacity: .75; }
.jchip--more { border-style: dashed; }
.jchips--all { gap: .6rem; padding-bottom: 3rem; }
.ptopics { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }

/* ---------- featured ---------- */
.jfeat { display: grid; gap: 1.4rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.jfeat__img { margin: 0; }
.jfeat__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--paper-2); }
.jfeat__copy { border-top: 4px solid var(--el); padding-top: 1.2rem; align-self: start; }
.jfeat__k { font-size: .9rem; color: var(--el-ink); font-weight: 600; margin-bottom: .6rem; }
.jfeat__t { font-size: var(--step-4); line-height: 1.02; max-width: 18ch; }
.jfeat__t a { text-decoration: none; }
.jfeat__t a:hover { text-decoration: underline; text-decoration-color: var(--el); }
.jfeat__ex { font-size: var(--step-1); color: var(--ink-2); margin: 1rem 0; max-width: 34rem; }
@media (min-width: 900px) { .jfeat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: center; } }

/* ---------- explorer ---------- */
.jx { padding-top: 0; }
html:not(.js) .jx-search { display: none; }
.jx-search { margin-bottom: 1.6rem; max-width: 44rem; }
.jx-search > label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .45rem; }
.jx-search__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.jx-search input, .jx-search select {
  min-height: 48px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper);
  color: var(--ink); font: 400 1rem/1.2 var(--sans); padding: .6rem 1.1rem;
}
.jx-search input { flex: 1 1 16rem; min-width: 0; }
.jx-search input:focus, .jx-search select:focus { border-color: var(--ink); }
.jx-search input::placeholder { color: var(--mute); opacity: 1; }
.jx-filters { display: grid; gap: 1.1rem; padding: 1.4rem 0; border-block: 1px solid var(--rule); }
.jx-g__h { font: 600 .85rem/1.3 var(--sans); color: var(--mute); margin-bottom: .55rem; letter-spacing: 0; }
.jx-reset { margin: 1rem 0 0; }
.jx-count { color: var(--mute); font-size: .95rem; margin: 1.4rem 0 .2rem; }
.jx-back { margin: 0 0 .5rem; }
.jx-more, .jx-empty { list-style: none; padding: 1.6rem 0; border-top: 1px solid var(--rule); }

/* ---------- article rows ---------- */
.jlist { list-style: none; }
.jrow { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--rule); position: relative; }
.jrow__img, .jrow__g { display: block; width: 6rem; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.jrow__img img { width: 100%; height: 100%; object-fit: cover; }
.jrow__g { color: var(--el-ink); padding: 1.1rem; background: color-mix(in srgb, var(--el) 12%, var(--paper)); }
.jrow__g .glyph { width: 100%; height: 100%; }
.jrow__body { display: grid; gap: .3rem; align-content: start; }
.jrow__meta { font-size: .85rem; color: var(--mute); margin: 0; }
.jrow__meta a { color: var(--mute); }
.jrow__t { font-size: var(--step-2); font-weight: 600; line-height: 1.12; }
.jrow__t a { text-decoration: none; }
.jrow__t a::after { content: ""; position: absolute; inset: 0; }
.jrow__t a:hover { color: var(--el-ink); }
.jrow__t a:focus-visible { outline: none; }
.jrow:has(.jrow__t a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.jrow__ex { color: var(--ink-2); margin: 0; max-width: 44rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jrow__area { margin: .2rem 0 0; font-size: .85rem; }
.jrow__area a, .jrow__meta a { position: relative; z-index: 1; }
.jrow__area a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--ink-2); min-height: 24px; }
.jrow__area a::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--el); }
.jrow__area a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 760px) {
  .jrow { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.6rem; }
  .jrow__img, .jrow__g { width: 10rem; aspect-ratio: 4 / 3; }
  .jrow__g { padding: 1.6rem 2.6rem; }
}
.jlist--rel .jrow__ex { -webkit-line-clamp: 2; }

/* ---------- pagination ---------- */
.pg { padding: 2rem 0 0; border-top: 1px solid var(--rule); }
.pg ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.pg a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .8rem;
  border: 1px solid var(--rule-2); border-radius: 999px; text-decoration: none; font-variant-numeric: tabular-nums; }
.pg a:hover { border-color: var(--ink); }
.pg a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- post side: table of contents ---------- */
.toc { margin-bottom: 2.2rem; }
.toc h2 { font: 600 .85rem/1.3 var(--sans); color: var(--mute); margin: 0 0 .6rem; letter-spacing: 0; }
.toc ol { list-style: none; display: grid; gap: .1rem; border-left: 1px solid var(--rule-2); }
.toc a { display: block; padding: .3rem 0 .3rem .9rem; font-size: .93rem; line-height: 1.35; text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 999px) { .toc { display: none; } }
@media (max-width: 759px) {
  .jx-filters .jchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
  .jx-filters .jchips::-webkit-scrollbar { display: none; }
  .jx-filters .jchip { flex: none; }
}
.jx-g, .jx { min-width: 0; }
.jchip { white-space: nowrap; }

[data-page="post"] .ph__lede:empty { display: none; }
/* formula note (component from src/tools/library.py; same look as library.css .fnote) */
.prose .fnote { font-size: .9rem; line-height: 1.5; color: var(--mute); border-left: 3px solid var(--earth); padding: .2rem 0 .2rem .8rem; max-width: 40rem; margin: 2rem 0 0; }