/* Page-specific component styles on top of design.css.
   Library list rows + pagination; item detail header / banners /
   note-block / highlights / summary / image grid / inline body. */

/* =================================================================
   Library list (templates/library/library.html)
   ================================================================= */

.library-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.library-header h1 {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 22px; line-height: 1.2; margin: 0;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.library-header .count {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.library-header .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.items { display: flex; flex-direction: column; }
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 18px 12px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--paper-edge);
}
.item:last-child { border-bottom: 0; }
.item:hover {
  background: var(--highlight-faint);
  border-bottom-color: transparent;
}
.item .head {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.item .title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 16px; line-height: 1.3; color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.item .title:hover { color: var(--ink); }
.item .title:hover .title-text {
  box-shadow: inset 0 -0.4em 0 var(--highlight-wash);
}

/* "Threads" strip on the item detail page (spec 0014 PR2): cross-item
   navigation handles via shared named entities. Same hover treatment as
   .item .title — dark text, no underline, yellow wash on hover via the
   inset box-shadow trick on the inner span. The entity-detail page
   reuses .thread-link for its item list. */
.threads { margin: 8px 0 18px; }
.threads-label {
  font-family: var(--font-sans);
  color: var(--ink-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 8px;
}
.thread-link {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  margin-right: 14px;
}
.thread-link:hover { color: var(--ink); }
.thread-link:hover .thread-link-text {
  box-shadow: inset 0 -0.4em 0 var(--highlight-wash);
}
/* Concept-tag rows (spec 0023 framing card) reuse .thread-link inline, but
   here the links are punctuated by commas / pipes rather than spaced as
   standalone nav handles — drop the strip's margin-right so punctuation hugs. */
.concept-row .thread-link { margin-right: 0; }
.item .untitled {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-faint); font-style: italic;
}
.item .meta-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-faint);
  grid-column: 1 / 2;
  flex-wrap: wrap;
}
.item .meta-row .when { display: inline-flex; align-items: center; gap: 5px; }
.item .meta-row .dot { color: var(--ink-ghost); }
.item .meta-row .progress { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.item .meta-row .progress .pct { color: var(--ink-muted); font-weight: 500; }

.item .summary {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 6px;
}
.item a.summary {
  text-decoration: none;
  display: block;
}
.item a.summary:hover { color: var(--ink); }

.item .row-actions {
  grid-row: 1;
  grid-column: 2;
  display: flex; gap: 2px;
  align-self: start;
}
.item form.row-form { margin: 0; padding: 0; display: inline; }
.item form.row-form button[type="submit"] { margin: 0; padding: 0; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 12px 12px 0;
}
.pagination .indicator {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pagination .controls { display: flex; gap: 6px; }
.page-btn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) ease;
}
.page-btn:hover { background: var(--paper-sunken); }
.page-btn.disabled {
  color: var(--ink-faint);
  background: var(--paper);
  border-color: var(--paper-edge);
  cursor: default;
  pointer-events: none;
}

.empty {
  font-family: var(--font-serif);
  font-size: 19px; line-height: 1.55;
  color: var(--ink-muted);
  margin: 32px 0;
  max-width: 60ch;
}
.empty a { color: var(--ink); text-decoration-color: var(--highlight); }


/* =================================================================
   Item detail (templates/library/item_detail.html)
   ================================================================= */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 140px;
}

/* ---------- Metadata rail + inline panel (design refresh) ----------
   Mobile-first: single column. The rail is hidden; the collapsed inline
   panel (.meta-inline) carries the metadata above the summary. On wide
   screens the rail lifts into a persistent left column and the inline
   panel is hidden. */
.rail-col { display: none; }

/* Shared atoms (rail + inline). */
.md-sec + .md-sec { margin-top: 28px; }
.md-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Entity chip — filled link to the entity page. */
.md-ent {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); background: var(--paper-sunken);
  border: 1px solid transparent; padding: 4px 10px; border-radius: 5px;
  text-decoration: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.md-ent:hover { background: var(--paper-edge); border-color: var(--paper-edge); }

/* Concept chip — outlined link to the concept page. */
.md-con {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted);
  background: transparent; border: 1px solid var(--paper-edge);
  padding: 4px 10px; border-radius: 5px; text-decoration: none;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.md-con:hover { color: var(--ink); border-color: var(--ink-ghost); background: var(--paper-raised); }

/* Character — label + Similar on a line, serif descriptor below. */
.md-char .row { padding: 13px 0; border-top: 1px solid var(--paper-edge); }
.md-char .row:first-child { border-top: 0; padding-top: 2px; }
.md-char .rowhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 5px;
}
.md-char .lab {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.md-char .val {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.5;
  color: var(--ink-soft); margin: 0;
}
.md-sim {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--ink-muted);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.md-sim:hover { color: var(--ink); border-bottom-color: var(--highlight); }

/* Rail keeps descriptors short so the persistent column stays compact. */
.md.is-rail .md-char .val {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.md.is-rail .md-char .row.voice .val { -webkit-line-clamp: 4; }

/* Figures — compact thumbnail grid. Rail is 2-up, inline panel is 3-up. */
.md-figs { display: grid; gap: 6px; }
.md.is-rail .md-figs { grid-template-columns: repeat(2, 1fr); }
.md.is-inline .md-figs { grid-template-columns: repeat(3, 1fr); }
.md-fig { display: block; text-decoration: none; }
.md-fig .frame {
  aspect-ratio: 4 / 3; background: #fff;
  border: 1px solid var(--paper-edge); border-radius: 2px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) ease;
}
.md-fig:hover .frame { border-color: var(--ink-ghost); }
.md-fig .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-fig.more .frame {
  border-style: dashed; background: var(--paper);
  flex-direction: column; gap: 1px;
}
.md-fig.more .more-n {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink-muted); line-height: 1;
}
.md-fig.more .more-lbl {
  font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-faint);
}
.md-fig.more:hover .frame { border-color: var(--ink-muted); background: var(--highlight-faint); }

/* Inline collapsible panel (narrow screens only). */
.meta-inline {
  margin: 4px 0 36px;
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
}
/* When the panel sits directly after the framing divider (no note/highlights
   between), the divider already draws the top rule — drop the panel's own so
   the two don't stack into a double line on mobile. */
.divider + .meta-inline { border-top: 0; margin-top: 0; }
.meta-inline-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 2px; font-family: var(--font-sans);
}
.meta-inline-summary::-webkit-details-marker { display: none; }
.meta-inline-summary:hover .mi-label { color: var(--ink); }
.mi-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); transition: color var(--dur-fast) ease;
}
.mi-meta {
  font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--ink-faint);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mi-chev { margin-left: auto; flex-shrink: 0; color: var(--ink-faint); transition: transform 200ms ease; }
.meta-inline[open] .mi-chev { transform: rotate(180deg); }
.meta-inline-body { padding: 2px 2px 22px; }

/* Wide: lift the metadata into a persistent left rail beside the article. */
@media (min-width: 1100px) {
  .layout:not(.layout--solo) {
    display: grid;
    grid-template-columns: 248px minmax(0, 720px);
    gap: 56px;
    justify-content: center;
    align-items: start;
  }
  .layout:not(.layout--solo) .doc { max-width: none; margin: 0; }
  .rail-col { display: block; position: relative; }
  /* Full-height hairline separating rail from article. */
  .rail-col::after {
    content: ""; position: absolute; top: 64px; bottom: 0; right: -28px; width: 1px;
    background: var(--paper-edge);
  }
  .rail-inner { padding: 64px 0 40px; }
  .rail-inner .section-label { margin-bottom: 14px; }
  .meta-inline { display: none; }
}

/* Item-detail page promotes its <header class="head"> to a sticky bar
   that sits directly beneath the sticky global nav. Drop the top
   padding on the article so the head provides the 56 px of breathing
   space instead (and so its full-bleed background can cover the full
   viewport width). */
.doc--sticky { padding-top: 0; }

.doc--sticky .head {
  position: sticky;
  top: 52px;            /* tracks global nav height (16+19+16+1 ≈ 52 px) */
  z-index: 18;
  background: var(--paper);
  margin: 0 -32px;
  padding: 56px 32px 0;
  transition: padding 180ms ease, box-shadow 180ms ease;
}
.doc--sticky .head.is-compact {
  padding-top: 12px;
  box-shadow: 0 1px 0 var(--paper-edge);
}
.doc--sticky .head.is-compact .subhead,
.doc--sticky .head.is-compact .head-link-row,
.doc--sticky .head.is-compact .meta-row .when,
.doc--sticky .head.is-compact .meta-row .timestamp,
.doc--sticky .head.is-compact .meta-row .dot {
  display: none;
}
.doc--sticky .head.is-compact .meta-row {
  margin-bottom: 6px;
}
.doc--sticky .head.is-compact h1 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 12px;
  transition: font-size 180ms ease, line-height 180ms ease, margin 180ms ease;
}
.doc--sticky .head h1 {
  transition: font-size 180ms ease, line-height 180ms ease, margin 180ms ease;
}
.doc--sticky .head.is-compact .actions-primary {
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 0;
  gap: 12px;
  row-gap: 8px;
}
.doc--sticky .head.is-compact .actions-primary .btn,
.doc--sticky .head.is-compact .actions-primary form button[type="submit"] {
  padding: 6px 10px;
  font-size: 12.5px;
}
.doc--sticky .head.is-compact .actions-primary .actions-stats {
  font-size: 12px;
}

/* ---------- Header ---------- */
.head .meta-row {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.head .meta-row .meta-spacer { flex: 1; min-width: 16px; }
.head .meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-ghost); flex-shrink: 0; }
.head .meta-row .when {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.head .meta-row .when i { color: var(--ink-faint); }
.head .meta-row .timestamp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.head .meta-row .ibtn { flex-shrink: 0; }

/* Secondary header rows — source URL, "Download original PDF". Each
   gets its own line below the meta row so a long URL doesn't push
   edit/delete onto a second line of the meta row. */
.head .head-link-row {
  font-family: var(--font-sans); font-size: 13px;
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-muted);
}
.head .head-link-row a {
  color: var(--ink-muted);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
}
.head .head-link-row a:hover { color: var(--ink); }
.head .head-link-row i { color: var(--ink-faint); flex-shrink: 0; }
.head .head-link-row + h1 { margin-top: 18px; }

.head h1 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 38px; line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.head .subhead {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.4;
  color: var(--ink-muted);
  margin: 0 0 28px;
}

/* ---------- Action bar: Read · stats · Mark Unread ---------- */
.actions-primary {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--paper-edge);
  flex-wrap: wrap;
  row-gap: 14px;
}
.actions-primary .actions-stats {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  flex: 1;
  min-width: 0;
}
.actions-primary .actions-stats .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-ghost);
  flex-shrink: 0;
}
.actions-primary .actions-stats .pct {
  color: var(--ink); font-weight: 500;
}
.actions-primary form { margin: 0; padding: 0; display: inline; }
.actions-primary form button[type="submit"] {
  margin: 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--paper-edge); background: var(--paper-raised);
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--dur-fast) ease;
}
.actions-primary form button[type="submit"]:hover { background: var(--paper-sunken); }

/* ---------- Banners (refining / outline) ---------- */
.banner {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-muted);
  background: var(--paper-sunken);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0 0 24px;
}
.banner strong { color: var(--ink); font-weight: 600; }
.banner.warn { background: rgba(255, 210, 0, 0.10); border-color: rgba(255, 210, 0, 0.4); }

/* ---------- Note (marginalia, no header) ---------- */
.note-block {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.55;
  color: var(--ink-soft);
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ink-ghost);
  margin: 0 0 36px;
  position: relative;
}
.note-block > :first-child { margin-top: 0; }
.note-block > :last-child { margin-bottom: 0; }
.note-block p { margin: 0 0 0.6em; }
.note-block img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.8em 0;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-image);
  background: var(--paper-raised);
  padding: 6px;
}
.note-block .edit-affordance {
  position: absolute; right: -4px; top: -2px;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: var(--radius-xs);
  text-decoration: none; opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.note-block:hover .edit-affordance { opacity: 1; color: var(--ink-muted); }

/* ---------- Highlights (no header — pulled passages) ---------- */
.highlights { margin: 0 0 44px; }
.highlight-passage {
  font-family: var(--font-serif);
  font-size: 19px; line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--highlight);
}
.highlight-passage:last-child { margin-bottom: 0; }
.highlight-passage .pg {
  display: block;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 8px;
  text-decoration: none;
}
.highlight-passage .pg:hover { color: var(--ink-muted); }

/* ---------- Divider ---------- */
.divider {
  border: 0;
  border-top: 1px solid var(--paper-edge);
  margin: 32px 0;
}

/* ---------- Summary (flowing serif) ---------- */
.summary {
  font-family: var(--font-serif);
  font-size: 19px; line-height: 1.65;
  color: var(--ink);
  margin-top: 12px;
}
.summary > :first-child { margin-top: 0; }
.summary p { margin: 0 0 1.05em; }
/* Drop cap on the summary's first letter — sets the summary apart from the
   framing block above it. Only when the summary opens with a paragraph
   (narrative summaries); outline/heading-led summaries are left alone.
   Uses `initial-letter` (3 lines tall, top-aligned to the first line) — the
   browser computes proper cap-height alignment, which the older float +
   line-height hack got wrong (the glyph rode too high). Browsers without
   support (e.g. Firefox) fall back to a plain bold first letter. */
.summary > p:first-child::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  font-family: var(--font-serif);
  font-weight: 600;
  margin-right: 0.09em;
  color: var(--ink);
}
.summary h1, .summary h2, .summary h3, .summary h4 {
  font-family: var(--font-serif); font-weight: 500;
  color: var(--ink-soft);
  line-height: var(--leading-snug);
  margin: 1.4em 0 0.5em;
}
.summary h1 { font-size: var(--text-2xl); }
.summary h2 { font-size: var(--text-xl); }
.summary h3 { font-size: var(--text-lg); }
.summary h4 { font-size: var(--text-md); }
.summary ul, .summary ol { padding-left: 1.5rem; margin: 0.75rem 0 1.05em; }
.summary ul { list-style: disc; }
.summary ol { list-style: decimal; }
.summary li { margin-bottom: 0.35rem; }
.summary li p { margin: 0; }
.summary a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-ghost);
  text-underline-offset: 3px;
}
.summary a:hover { text-decoration-color: var(--highlight); }
/* Summary images are wrapped by `resolve_image_tokens` in
   <a class="summary-img-link"> — the link is the card; the image
   fills it; PDF page caption sits below the image inside the same
   frame. */
.summary .summary-img-link {
  display: block;
  margin: 1.6em auto;
  width: 90%;
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-image);
  padding: 6px;
  text-decoration: none;
  transition: border-color var(--dur-fast) ease;
}
.summary .summary-img-link:hover { border-color: var(--ink-ghost); }
.summary .summary-img-link img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.summary .summary-img-page {
  display: block;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 8px;
  padding: 2px 4px 4px;
  font-variant-numeric: tabular-nums;
}
/* Multi-image paragraphs (comparison sets) lay side-by-side. */
.summary p:has(.summary-img-link + .summary-img-link) {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start;
  justify-content: center;
}
.summary p:has(.summary-img-link + .summary-img-link) .summary-img-link {
  flex: 1 1 calc((100% - 12px) / 2);
  width: calc((100% - 12px) / 2);
  margin: 0;
}
/* Fallback: bare <img> in summary (no link wrapper). Keep the same
   card treatment so the layout is consistent. */
.summary > p > img:only-child,
.summary > img {
  display: block;
  margin: 1.6em auto;
  width: 90%;
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-image);
  padding: 6px;
}
/* ---------- Image grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 48px;
}
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
.grid a {
  display: block;
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-image);
  padding: 6px;
  text-decoration: none;
  transition: border-color var(--dur-fast) ease;
}
.grid a:hover { border-color: var(--ink-ghost); }
.grid .frame {
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--paper-sunken);
  aspect-ratio: 1 / 1;
  display: flex; align-items: stretch;
}
.grid .frame img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
}
.grid .pg {
  display: block;
  font-family: var(--font-sans); font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-top: 6px;
  padding: 0 2px 2px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* "See all" overflow tile — the 8th tile when the document has more
   than 8 eligible images. Visually mirrors the figure tiles but the
   frame holds a count and a label instead of a thumbnail. */
.grid a.more { background: var(--paper); }
.grid a.more .frame {
  background: var(--paper);
  border-style: dashed;
  border-color: var(--ink-ghost);
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  text-align: center;
}
.grid a.more:hover .frame {
  border-color: var(--ink-muted);
  background: var(--highlight-faint);
}
.grid a.more .more-n {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  color: var(--ink-soft);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.grid a.more .more-lbl {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.grid a.more .pg { color: var(--ink-muted); }

/* ---------- Inline body (typed notes only) ---------- */
.body {
  font-family: var(--font-serif);
  font-size: 19px; line-height: 1.65;
  color: var(--ink);
  max-width: 68ch;
}
.body > :first-child { margin-top: 0; }
.body p { margin: 0 0 1.05em; }
.body h1, .body h2, .body h3, .body h4 {
  font-family: var(--font-serif); font-weight: 500;
  color: var(--ink-soft);
  line-height: var(--leading-snug);
  margin: 1.4em 0 0.5em;
}
.body h1 { font-size: var(--text-2xl); }
.body h2 { font-size: var(--text-xl); }
.body h3 { font-size: var(--text-lg); }
.body img {
  max-width: 100%;
  display: block;
  margin: 1.4em 0;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-image);
  padding: 6px;
  background: var(--paper-raised);
}
.body ul, .body ol { padding-left: 1.5rem; margin: 0.75rem 0 1.05em; }
.body ul { list-style: disc; }
.body ol { list-style: decimal; }
.body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-ghost);
  text-underline-offset: 3px;
}
.body a:hover { text-decoration-color: var(--highlight); }

/* ─── Spec 0009: related-items rail ───────────────────────────────────── */

.related-rail {
  margin: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.related-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.related-section__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.related-section--fallback .related-section__title {
  color: var(--ink-muted);
  font-size: var(--text-base);
  font-weight: 500;
}

.related-section__cards,
.related-section__skeleton {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.related-section__skeleton-card {
  height: 4.5rem;
  border-radius: var(--radius-image, 6px);
  background: linear-gradient(90deg, var(--paper-sunken) 0%, var(--paper-edge) 50%, var(--paper-sunken) 100%);
  background-size: 200% 100%;
  animation: related-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes related-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.related-card {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-image, 6px);
  background: var(--paper-raised);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.related-section--fallback .related-card {
  background: var(--paper-sunken);
  border-color: var(--paper-edge);
}

.related-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
}

.related-card__brief {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: var(--leading-snug, 1.35);
}

.related-card__link {
  text-decoration: none;
  color: inherit;
}
.related-card__link:hover .related-card__title {
  text-decoration: underline;
  text-decoration-color: var(--ink-ghost);
}

.related-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.related-card__chip {
  font-size: var(--text-xs);
}

.related-card__chip--edge-contradicts,
.related-card__chip--edge-qualifies {
  border-color: var(--ink-warn, var(--ink-muted));
  color: var(--ink-warn, var(--ink-muted));
}

.related-card__chip--edge-supports,
.related-card__chip--edge-parallels {
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}

.related-card__chip--edge-extends,
.related-card__chip--edge-refines {
  border-color: var(--ink);
  color: var(--ink);
}

.related-card__match-count {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.related-card--image .related-card__image-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.related-card--image .related-card__image-pair img {
  max-width: 120px;
  max-height: 90px;
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  object-fit: cover;
  margin: 0;
  padding: 0;
  background: var(--paper);
}

.related-card__image-pair-sep {
  color: var(--ink-muted);
  font-size: var(--text-lg);
}

.related-section__more {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-decoration: none;
  margin-top: 0.25rem;
  align-self: flex-start;
}
.related-section__more:hover { text-decoration: underline; }

.related-all-results__header { margin-bottom: 1.5rem; }
.related-all-results__back {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-decoration: none;
}
.related-all-results__back:hover { text-decoration: underline; }
.related-all-results__title {
  margin: 0.4rem 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
}
.related-all-results__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.related-all-results__subtitle {
  margin: 0.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* =================================================================
   Related-items rail v2 (design bundle: saved-page.html)
   - section-label: heading + inline lbl-method slug + trailing rule
   - .relation-card: semantic relations (Deepens/Widens/Tension/Reframes/Bridges)
   - .similar-card / .similar-row: ANN/fallback ranked rows (Similar items/images)
   ================================================================= */

.related-rail .related-section { margin: 0 0 56px; }
.related-rail .related-section + .related-section { margin-top: -8px; }

.section-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--paper-edge);
}
.section-label .lbl-method {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-faint);
  font-size: 12px;
}

/* ─── Semantic relation card ─────────────────────────────────────── */
.relation-card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
  padding: 18px 20px 18px;
}
.relation-card + .relation-card { margin-top: 12px; }

/* Admin-only debug instrumentation badge — gated by request.user.is_staff
   in templates. Used to surface internal numbers (cohesion scores etc.)
   without leaking them into end-user UI. */
.dev-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-left: 6px;
  vertical-align: baseline;
  letter-spacing: 0.02em;
}

/* Chip row: ≤ 3 chips per card, family-collapsed when the card
   surfaces from more dimensions than fit. First chip aligns with
   the prose; the rest are by rank. */
.rel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 0 10px -6px;
}

/* The signature element: a serif rel-chip highlighted in the same
   yellow as a marker pulled across the page. */
.rel-chip {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--highlight-wash);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 2px 6px;
  border-radius: 2px;
}
/* Inside a .rel-chips row the margin moves to gap, so reset the
   solo-chip margin. Solo `.rel-chip` (legacy) keeps its own spacing. */
.rel-chips > .rel-chip { margin: 0; }

.rel-head {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  margin: 0 0 4px;
}
.rel-title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 16px; line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: -0.005em;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rel-title:hover { color: var(--ink); }
.rel-title:hover .title-text {
  box-shadow: inset 0 -0.4em 0 var(--highlight-wash);
}

/* Type chip next to the title — mirrors .kind on the page header. */
.rel-kind {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 2px 8px; border-radius: 4px;
  background: var(--paper-sunken);
  flex-shrink: 0;
}
.rel-kind.book    { color: #4a4a4a; background: #ececec; }
.rel-kind.pdf     { color: #5a4634; background: #efe9df; }
.rel-kind.webpage { color: #4a4a4a; background: #ececec; }
.rel-kind.note    { color: #6a4f0f; background: rgba(255, 210, 0, 0.18); }

.rel-explain {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0;
}
.rel-explain em { font-style: italic; color: var(--ink); }

.related-card__see-all-reasons {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: 1px;
}
.related-card__see-all-reasons:hover { color: var(--ink); border-bottom-color: var(--ink-ghost); }

/* Spec 0020 PR 6 — "see evidence →" link to /relate/. Demoted from the
 * card's primary click target (now the item detail page); kept for
 * verification, multi-match deep-dives, and chain/triangle inspection.
 */
.related-card__see-evidence {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-sans); font-size: 11.5px;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: 1px;
  letter-spacing: 0.02em;
}
.related-card__see-evidence:hover { color: var(--ink); border-bottom-color: var(--ink-ghost); }

/* Similar (fallback) rows: the row's body anchor opens the item; the
 * see-evidence link sits beside it for /relate/ access. */
.similar-row__open {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.similar-row__open:hover { background: var(--highlight-faint); }
.similar-row .related-card__see-evidence {
  margin: 8px 0 8px 14px;
  white-space: nowrap;
}

/* ─── Similar (ANN / fallback) ranked rows ───────────────────────── */
.similar-card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
  padding: 4px 8px;
}
.similar-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--paper-edge);
  align-items: start;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
}
.similar-row:last-child { border-bottom: 0; }
.similar-row:hover { background: var(--highlight-faint); border-bottom-color: transparent; }
.similar-row .rank {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.similar-row .body .row-head {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  margin: 0 0 3px;
}
.similar-row .body .title {
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.similar-row .body .why {
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 0;
}
.similar-row .meta {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 4px;
}

/* ─── Similar Images cards ─────────────────────────────────────────────────
   Visual-neighbour section in the rail. Per the design bundle
   (memex-design-system/saved-page.html § "Similar images"), the figures
   carry the meaning here — title + reason become compact metadata, and
   the actual images sit large, side-by-side, in hairline frames. The
   seed item's image is on the left ("This <Type>"); the related item's
   matching image is on the right (target title). A small arrow chip
   pairs them ("this looks like that"). */
.simimg-card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
  padding: 18px 22px 22px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast, 120ms) ease;
}
.simimg-card + .simimg-card { margin-top: 10px; }
.simimg-card:hover { background: var(--highlight-faint); }
.simimg-head {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
}
.simimg-head .rank {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.simimg-head .row-head {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.simimg-head .title {
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.simimg-why {
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 4px 0 18px 42px;
  max-width: 62ch;
}
.simimg-pair {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  gap: 18px;
  align-items: stretch;
  margin-left: 42px;
}
.simimg-figure { min-width: 0; display: flex; flex-direction: column; }
.simimg-frame {
  height: 200px;
  background: #ffffff;
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 16px;
}
.simimg-frame img, .simimg-frame svg {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.simimg-caption {
  margin: 10px 2px 0;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-faint);
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.35;
  min-width: 0;
}
.simimg-caption .src-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.simimg-figure.is-this .simimg-caption .src-tag { color: var(--ink-soft); }
.simimg-link {
  align-self: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  display: grid; place-items: center;
  color: var(--ink-faint);
}
.simimg-card:hover .simimg-link {
  color: var(--ink-muted);
  border-color: var(--ink-ghost);
}
@media (max-width: 720px) {
  .simimg-why { margin-left: 0; }
  .simimg-pair {
    grid-template-columns: 1fr;
    margin-left: 0;
    gap: 14px;
  }
  .simimg-link {
    justify-self: center;
    transform: rotate(90deg);
  }
  .simimg-frame { height: 180px; }
}

/* "See all →" link below a section in the rail. */
.related-rail .related-section__more {
  margin-top: 16px;
  font-family: var(--font-sans); font-size: 13px;
}
.related-rail .related-section__more a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: 1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.related-rail .related-section__more a:hover {
  color: var(--ink); border-bottom-color: var(--ink-ghost);
}

/* ---------- Spec 0022 — framing prose (Locate + Reconcile) ---------- */
.framing { margin: 0.25rem 0 1.75rem; }
.framing-locate.prose { margin-bottom: 0.5rem; }
.framing-refining { font-size: 13px; color: var(--ink-muted); }
.framing-reconcile { margin: 0.75rem 0; }
.framing-reconcile summary {
  cursor: pointer; font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-soft); margin-bottom: 0.25rem;
}
.framing-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.framing-feedback { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.framing-feedback-label { font-size: 12px; }
/* Compact flag/dismiss buttons — meta-actions, lighter than a full .btn. */
.framing-actions .btn, .framing-feedback .btn { font-size: 12px; padding: 4px 9px; }
.framing-actions form { margin: 0; }