/* Frankenstein story: the ISBN-to-scan chain, the two lending answers, the hOCR overlay. */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); counter-reset: link; }
.chain li { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.chain li + li::before { content: "→"; position: absolute; left: -0.95rem; top: 50%; transform: translateY(-50%); color: var(--orange-text); font-weight: 700; }
.chain .k { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sage-text); }
.chain b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; color: var(--navy); overflow-wrap: anywhere; }
.chain .d { font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.chain .c { font-family: var(--font-mono); font-size: .7rem; }
.chain .c a { color: var(--orange-text); }
.access .acc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px 18px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.access h3 { font-size: 1.25rem; }
.access p { color: var(--ink-2); font-size: .94rem; }
.access .src { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }

.hocr-panel { display: grid; gap: var(--space-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px; }
.hocr-panel .swap-main { display: grid; gap: var(--space-3); min-width: 0; }
.hocr { display: grid; max-width: 760px; border-radius: 6px; overflow: hidden; border: 1px solid var(--soft); }
.hocr > img, .hocr > svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.hocr > svg { height: 100%; }
.hocr .wb { fill: rgba(211,115,74,.10); stroke: var(--orange); stroke-width: 3; cursor: help; }
.hocr .wb.low { fill: rgba(13,34,64,.10); stroke: var(--navy); stroke-dasharray: 10 6; }
.hocr .wb:hover, .hocr .wb.on { fill: rgba(211,115,74,.35); stroke-width: 6; }
.hocr[data-mode="low"] .wb:not(.low) { opacity: 0; }
.hocr[data-mode="none"] .wb { opacity: 0; }
.hocr-text { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.7; color: var(--ink); max-width: 70ch; }
.hocr-text .w { border-radius: 3px; cursor: help; }
.hocr-text .w.low { text-decoration: underline dashed var(--navy); text-underline-offset: 4px; }
.hocr-text .w:hover, .hocr-text .w.on { background: var(--orange-light); color: var(--orange-text); }

@media (max-width: 900px) {
  .chain { grid-template-columns: 1fr; gap: var(--space-3); }
  .chain li + li::before { content: "↓"; left: 50%; top: -0.95rem; transform: translateX(-50%); }
}
@media (max-width: 560px) { .chart-wrap > svg.hbars[viewBox^="0 0 700"] { min-width: 600px; } }