/* ═══════════════════════════════════════════════════════════════════════
   DEVMARK LIBRARY — the book: detail head, reading view, summary sections
   ═══════════════════════════════════════════════════════════════════════

   The reference's book view is a cover, a publisher blurb, the word
   "Unrated", and prev/next. It is a lightbox, not a page: no URL of its own,
   nothing to link to, nothing to return to, and no reason to stay.

   Devmark's is a real document at a real address. It opens with a shared
   element transition from whatever you clicked, it can be deep-linked and
   refreshed, the back button works, and the body of it is a piece of
   original editorial writing with its own navigation and progress.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared element transition ───────────────────────────────────────────
   The cover you clicked becomes the cover on the page. Same-document view
   transitions are Baseline across Chromium, WebKit and Gecko; cross-document
   (MPA) transitions are not, so this library never relies on them. The pages
   are genuine separate documents for SEO and deep linking, and app.js
   intercepts in-page navigation to run the transition in one document. With
   JS off, or in a browser without the API, the link is simply a link. */
@supports (view-transition-name: none) {
  .book__cover { view-transition-name: var(--vt, none); }
  ::view-transition-old(root) { animation-duration: var(--d-ui); }
  ::view-transition-new(root) { animation-duration: var(--d-ui); }
}

/* ── Book head ─────────────────────────────────────────────────────────── */
.book {
  padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px));
}
.book__grid {
  display: grid;
  grid-template-columns: minmax(230px, 310px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) {
  .book__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.book__coverwrap { position: sticky; top: calc(var(--nav-h) + 28px); }
@media (max-width: 860px) {
  .book__coverwrap { position: static; width: min(230px, 56vw); }
}

.book__cover {
  /* cover_block() emits a <span>; without an explicit display it stays
     inline and collapses to 0x0 wherever the parent is not a flex or grid
     container. Every cover slot declares its own display for that reason. */
  display: block;
  position: relative;
  aspect-ratio: 2/3;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--ink-800);
  box-shadow: var(--lift-4);
  isolation: isolate;
}
.book__cover::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; z-index: 3;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.18) 50%, rgba(255,255,255,.08));
  pointer-events: none;
}
.book__cover img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }

.book__kicker { margin-bottom: var(--s-4); }
.book__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.08; letter-spacing: var(--ls-display);
  color: var(--paper); text-wrap: balance;
}
.book__subtitle {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--paper-3); margin-top: var(--s-3); text-wrap: pretty;
}
.book__author {
  margin-top: var(--s-4);
  font-size: var(--t-lead); color: var(--paper-2);
}
.book__author a { color: var(--paper); }

/* Metadata as a definition list — the correct structure, and it reads as a
   colophon rather than a row of pills. */
.colophon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
  padding-block: var(--s-5);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.colophon div { min-width: 0; }
.colophon dt {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); margin-bottom: 6px;
}
.colophon dd {
  font-size: var(--t-small); color: var(--paper); margin: 0;
  font-variant-numeric: tabular-nums;
}
/* An honest empty. Never "N/A", never an invented value. */
.colophon dd[data-unknown] { color: var(--paper-4); font-style: italic; }

.book__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-5); }

/* ── Provenance ──────────────────────────────────────────────────────────
   Which sources were consulted, and whether they agreed. This is the part
   of the product the reference has no equivalent for, and it is deliberately
   visible rather than buried: a library that claims its data is checked
   should show the check. */
.prov {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--hair);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--lift-1);
}
.prov__head {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-3); font-weight: 700;
  margin-bottom: var(--s-3);
}
.prov__head svg { width: 12px; height: 12px; color: var(--accent); }
.prov__list { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.prov__src {
  font-size: var(--t-small); color: var(--paper-3);
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 4px 11px;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
a.prov__src:hover { color: var(--paper); border-color: var(--hair-3); }
.prov__note { font-size: var(--t-small); color: var(--paper-4); margin-top: var(--s-3); line-height: 1.45; }
.prov--flagged { border-color: rgba(255,196,84,.28); }
.prov--flagged .prov__head svg { color: #FFC454; }

/* ── The reading view ────────────────────────────────────────────────────
   Two columns: a section rail that tracks position, and the prose. The rail
   collapses to a horizontal scroller on narrow screens rather than
   disappearing, because it is the only way to see the shape of the piece. */
.read {
  margin-top: var(--section-y);
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 960px) { .read { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }

.rail-nav { position: sticky; top: calc(var(--nav-h) + 28px); }
.rail-nav__h {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--hair);
}
.rail-nav ol { display: grid; gap: 1px; }
.rail-nav a {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2);
  align-items: baseline;
  padding: 7px 8px 7px 0;
  font-size: var(--t-small); line-height: 1.32; color: var(--paper-4);
  border-left: 1.5px solid transparent;
  padding-left: 11px;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.rail-nav a:hover { color: var(--paper-2); }
.rail-nav a[aria-current="true"] { color: var(--paper); border-left-color: var(--accent); }
.rail-nav .n {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: var(--t-micro); color: var(--paper-4);
}
.rail-nav a[aria-current="true"] .n { color: var(--accent); }

@media (max-width: 960px) {
  .rail-nav {
    position: sticky; top: var(--nav-h); z-index: 19;
    background: color-mix(in oklab, var(--ink-900) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    border-bottom: 1px solid var(--hair);
  }
  .rail-nav__h { display: none; }
  .rail-nav ol {
    display: flex; gap: var(--s-2); overflow-x: auto;
    scrollbar-width: none; padding-block: 10px;
  }
  .rail-nav ol::-webkit-scrollbar { display: none; }
  .rail-nav a {
    flex: none; border-left: 0; border-bottom: 1.5px solid transparent;
    padding: 6px 2px; white-space: nowrap; max-width: 58vw;
  }
  .rail-nav a span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .rail-nav a[aria-current="true"] { border-bottom-color: var(--accent); }
}

/* ── Prose ───────────────────────────────────────────────────────────── */
.prose { max-width: var(--maxw-read); }
.prose > * + * { margin-top: var(--s-5); }
.prose p {
  font-size: var(--t-read); line-height: var(--lh-read);
  color: var(--paper-2); text-wrap: pretty;
}
.prose strong { color: var(--paper); font-weight: 700; }
.prose em { font-style: italic; }

.sec { scroll-margin-top: calc(var(--nav-h) + 90px); }
.sec + .sec { margin-top: clamp(48px, 6vw, 84px); }
.sec__head {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--hair);
}
.sec__n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--paper-4); font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.sec__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.2; letter-spacing: var(--ls-display); color: var(--paper);
  text-wrap: balance;
}

/* A pull-out: the one idea from a section worth isolating. Not a fabricated
   quotation from the book — it is Devmark's phrasing, and it is marked as
   such by being set in the interface face rather than the book's voice. */
.pull {
  border-left: 2px solid var(--accent-line);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin-block: var(--s-6);
}
.pull p {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  line-height: 1.42; color: var(--paper); font-style: italic;
}
.pull cite {
  display: block; margin-top: var(--s-3);
  font-family: var(--font-ui); font-style: normal;
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4);
}

/* Key ideas: numbered, the spine of the argument in one screen. */
.ideas { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.idea {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--hair); border-radius: var(--r-3);
  background: var(--surface); box-shadow: var(--lift-1);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.idea:hover { border-color: var(--hair-2); background: var(--ink-800); }
.idea__n {
  font-family: var(--font-display); color: var(--accent);
  font-variant-numeric: tabular-nums; font-size: 0.9rem;
}
.idea__t { color: var(--paper); font-weight: 700; font-size: 0.97rem; line-height: 1.35; }
.idea__b { color: var(--paper-3); font-size: var(--t-small); line-height: 1.5; margin-top: 5px; }

/* ── Honest empty state for an unwritten summary ─────────────────────────
   Shown when a record has verified metadata but no Devmark summary yet. It
   says exactly that. It does not say "no summary available" as if something
   went wrong, and it never pads the page with generated filler. */
.pending {
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed var(--hair-2);
  border-radius: var(--r-4);
  background: var(--ink-850);
}
.pending__t {
  font-family: var(--font-display); font-size: var(--t-h3);
  color: var(--paper); margin-bottom: var(--s-3);
}
.pending__b { color: var(--paper-3); max-width: 54ch; font-size: var(--t-small); line-height: 1.6; }

/* ── Prev / next ─────────────────────────────────────────────────────── */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  margin-top: var(--section-y);
  border-top: 1px solid var(--hair); padding-top: var(--s-6);
}
@media (max-width: 620px) { .pager { grid-template-columns: 1fr; } }
.pager a {
  display: grid; gap: 7px; padding: var(--s-5);
  border: 1px solid var(--hair); border-radius: var(--r-3);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out),
              transform var(--d-ui) var(--e-spring-snap);
}
.pager a:hover { border-color: var(--hair-2); background: var(--ink-850); transform: translateY(-2px); }
.pager__dir { font-size: var(--t-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--paper-4); }
.pager__t { font-family: var(--font-display); font-weight: 700; color: var(--paper); font-size: 1.05rem; line-height: 1.25; }
.pager a:last-child { text-align: right; }
@media (max-width: 620px) { .pager a:last-child { text-align: left; } }

/* ── Book DNA: the catalogue note ────────────────────────────────────────
   Styled as an annotation a librarian pencilled onto the card, not as a
   dashboard. One hairline rule top and bottom, the same label treatment as
   the colophon, and no boxes: the page already has a bordered card in .prov,
   and a second one would turn the page into a stack of panels.

   Deliberately absent: pills for every value, icons, and any colour that
   would read as a status. The only accent is the scale mark. */
.dna {
  margin-top: var(--s-8);
  padding-block: var(--s-6);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.dna__h {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4);
  font-weight: 700; margin: 0 0 var(--s-5);
}
.dna__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-5) var(--s-7);
  margin: 0;
}
.dna__row { min-width: 0; }
.dna__k {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); margin-bottom: 6px;
}
.dna__v {
  margin: 0;
  font-size: var(--t-lead); color: var(--paper);
  font-family: var(--font-display);
  line-height: 1.25;
}
.dna__sep { color: var(--paper-4); margin-inline: 2px; }
/* The one-line gloss under each value. This is what stops the block reading
   as jargon: "Reflective" means nothing on its own. */
.dna__note {
  display: block; margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-small); line-height: 1.45; color: var(--paper-3);
}

/* Position on a spectrum, not a score. Four marks, one filled, no numbers,
   and no direction in which "more" is better. */
.dna__scale { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.dna__marks { display: inline-flex; gap: 4px; }
.dna__mark {
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--hair-2);
}
.dna__mark.is-on { background: var(--accent); }

.dna__ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dna__idea {
  font-family: var(--font-ui);
  font-size: var(--t-small); color: var(--paper-2);
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 4px 11px;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
.dna__idea:hover { color: var(--paper); border-color: var(--hair-3); background: var(--ground); }

@media (max-width: 560px) {
  .dna { margin-top: var(--s-7); padding-block: var(--s-5); }
  .dna__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* ── Read this if ────────────────────────────────────────────────────────
   Statements about the reader, not claims about the book, so they are set as
   plain sentences rather than as benefits with ticks beside them. The marker
   is a hairline dash: enough to make it a list, not enough to make it a
   feature grid. */
.readif { margin-top: var(--s-6); }
.readif__h {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4);
  font-weight: 700; margin: 0 0 var(--s-4);
}
.readif__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s-3) var(--s-7);
}
.readif__list li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--t-body); line-height: 1.5; color: var(--paper-2);
  max-width: 62ch;
}
.readif__list li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 12px; height: 1px; background: var(--accent);
}
@media (max-width: 560px) {
  .readif__list { grid-template-columns: minmax(0, 1fr); }
}