/* ═══════════════════════════════════════════════════════════════════════
   DEVMARK LIBRARY — page-level composition
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero search ─────────────────────────────────────────────────────── */
.hero__search { margin-top: clamp(28px, 4vw, 44px); }
.hero__search .search__input { cursor: pointer; }

/* ── The front shelf ─────────────────────────────────────────────────── */
.shelfstage {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* The row can be wider than the viewport; this is the one element allowed
     to scroll sideways, and it contains that scroll rather than leaking it
     to the document. */
}
.shelfstage::-webkit-scrollbar { display: none; }
.shelfstage .shelf__row { min-width: max-content; }
.shelfstage__note {
  margin-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline;
}

/* ── Shelf cards ─────────────────────────────────────────────────────── */
.shelfgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-3);
  overflow: hidden;
}
.shelfcard {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5) var(--s-5) var(--s-6);
  background: var(--ink-900);
  transition: background var(--d-ui) var(--e-out);
  min-width: 0;
}
.shelfcard:hover { background: var(--ink-800); }
.shelfcard__n {
  font-size: var(--t-micro); color: var(--paper-4);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.shelfcard__body { min-width: 0; display: grid; gap: 7px; }
.shelfcard__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.12rem; line-height: 1.22; color: var(--paper);
}
.shelfcard__blurb { font-size: var(--t-small); color: var(--paper-3); line-height: 1.5; }
.shelfcard__count {
  font-size: var(--t-small); color: var(--paper-4);
  font-variant-numeric: tabular-nums;
}
/* The shelf's colour, revealed as a rule along the bottom edge on hover. */
.shelfcard__swatch {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: oklch(46% 0.085 var(--hue, 30));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-content) var(--e-out);
}
.shelfcard:hover .shelfcard__swatch,
.shelfcard:focus-visible .shelfcard__swatch { transform: scaleX(1); }

/* ── Collections ─────────────────────────────────────────────────────── */
/* A grid item defaults to min-width:auto, which lets a wide child expand the
   track rather than scroll inside it — that is what turns one horizontal rail
   into a 2800px document. Every track that holds a scroller is pinned to 0. */
.colls { display: grid; gap: var(--s-9); }
.colls > *, .coll, .coll > .rail { min-width: 0; }
.coll__head { max-width: 62ch; display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
.coll__name { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.coll__blurb { max-width: 56ch; }

/* ── Method list ─────────────────────────────────────────────────────── */
.method {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.method__step {
  background: var(--ink-900);
  padding: var(--s-6) var(--s-5) var(--s-7);
  display: grid; gap: var(--s-3); align-content: start;
}
.method__n { font-size: var(--t-micro); color: var(--accent); font-variant-numeric: tabular-nums; }
.method__step .h3 { font-size: 1.02rem; }

/* ── Library controls ────────────────────────────────────────────────── */
.filterbank {
  display: grid; gap: var(--s-3);
  padding-block: var(--s-5) var(--s-6);
}
.filterrow {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
}
.filterrow__label { color: var(--paper-4); }
@media (max-width: 620px) {
  .filterrow { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* View switching. Both views are built at build time and one is hidden, so
   switching costs nothing and neither view has to be constructed in JS. */
.viewport { position: relative; }
.libshelf { display: none; }
[data-view="shelf"] .libgrid { display: none; }
[data-view="shelf"] .libshelf { display: block; }

.libshelf .shelf__run {
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--hair);
}

/* ── Table (method page) ─────────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: collapse; margin-top: var(--s-5);
  font-size: var(--t-small);
  display: block; overflow-x: auto;
}
.table th, .table td {
  text-align: left; padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.table th {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
  white-space: nowrap;
}
.table td { color: var(--paper-2); }
.table td:first-child { color: var(--paper); font-weight: 500; white-space: nowrap; }

/* Inline code in prose. */
code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--ink-700); color: var(--paper);
  padding: 2px 6px; border-radius: var(--r-1);
}

/* ── Prose headings inside the method page ───────────────────────────── */
.prose .h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); }

/* ── Motion guards ───────────────────────────────────────────────────────
   Anything the reveal system will animate starts visible in CSS. motion.js
   sets opacity:0 only in the frame it takes over. This is what keeps a JS
   failure from producing a blank page. */
[data-reveal] { opacity: 1; }

/* ── Ideas index ─────────────────────────────────────────────────────────
   A list of concepts with their weight in the catalogue. Set as rows rather
   than as a tag cloud: a cloud encodes size as type size, which makes the
   small entries unreadable to make a decorative point. */
.ideagrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 0 var(--s-7);
}
.idearow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hair);
  transition: color var(--d-fast) var(--e-out);
}
.idearow:hover { color: var(--paper); }
.idearow:hover .idearow__n { color: var(--accent); }
.idearow__t {
  font-family: var(--font-display);
  font-size: var(--t-h3); line-height: 1.2; color: var(--paper);
}
.idearow__n {
  font-size: var(--t-small); color: var(--paper-4);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-fast) var(--e-out);
}

/* Ideas that co-occur with the one being viewed. */
.ideanear {
  margin-top: var(--s-6);
  padding-block: var(--s-5);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.ideanear__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-3);
}
.ideanear__note {
  font-size: var(--t-small); color: var(--paper-4);
  margin-top: var(--s-3); line-height: 1.45; max-width: 52ch;
}

/* ── Reading paths ───────────────────────────────────────────────────────
   The index reads as a set of routes, not as more book cards: the covers are
   a strip at the bottom of each card, small and overlapped, so they signal
   "five books" without competing with the name of the path. */
.pathgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.pathcard {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--hair); border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--lift-1);
  transition: transform var(--d-ui) var(--e-out),
              box-shadow var(--d-ui) var(--e-out),
              border-color var(--d-ui) var(--e-out);
}
.pathcard:hover { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: var(--hair-2); }
.pathcard__k {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
}
.pathcard__t {
  font-family: var(--font-display);
  font-size: var(--t-h3); line-height: 1.15; color: var(--paper);
  margin-top: var(--s-3);
}
.pathcard__b {
  font-size: var(--t-small); line-height: 1.5; color: var(--paper-3);
  margin-top: var(--s-3);
}
/* Overlapped so it reads as a stack of books rather than a row of thumbnails. */
.pathcard__covers { display: flex; margin-top: var(--s-5); padding-left: 6px; }
.pathcard__c {
  width: 52px; aspect-ratio: 2 / 3; margin-left: -6px;
  border-radius: 2px; overflow: hidden; position: relative;
  box-shadow: 0 1px 6px rgba(74, 48, 24, .22);
  flex: 0 0 auto;
}
.pathcard__c img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A single path: a staircase. The numeral is the spine of the layout. */
.steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; }
.step {
  display: grid;
  grid-template-columns: 3.25rem 112px minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-top: 1px solid var(--hair);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--hair); }
.step__n {
  font-family: var(--font-display);
  font-size: var(--t-h3); color: var(--paper-4);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.step__cover { display: block; }
.step__img {
  display: block; width: 112px; aspect-ratio: 2 / 3;
  border-radius: 3px; overflow: hidden; position: relative;
  box-shadow: var(--lift-1);
}
.step__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step__body { min-width: 0; }
.step__t {
  font-family: var(--font-display);
  font-size: var(--t-h3); line-height: 1.18; margin: 0; color: var(--paper);
}
.step__t a:hover { color: var(--accent); }
.step__a { font-size: var(--t-body); color: var(--paper-2); margin-top: 4px; }
.step__meta {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); margin-top: var(--s-3);
}
/* The reason this book is at this position — the actual content of a path. */
.step__why {
  font-size: var(--t-body); line-height: 1.6; color: var(--paper-2);
  margin-top: var(--s-3); max-width: 64ch;
}
.steps__foot {
  font-size: var(--t-small); color: var(--paper-4);
  margin-top: var(--s-6); max-width: 58ch; line-height: 1.55;
}

@media (max-width: 760px) {
  .step {
    grid-template-columns: 2.5rem 76px minmax(0, 1fr);
    gap: var(--s-4);
  }
  .step__img { width: 76px; }
  .step__n { font-size: var(--t-lead); }
}
@media (max-width: 420px) {
  .pathgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Compare ─────────────────────────────────────────────────────────────
   Two columns of description. Deliberately symmetrical: identical type,
   identical weight, identical order on both sides, because any asymmetry
   would read as a preference and there is no preference to express. */
.cmp { margin-top: var(--s-8); }
.cmp__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.cmp__pick {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; min-height: 148px;
  padding: var(--s-5); text-align: left;
  border: 1px dashed var(--hair-2); border-radius: var(--r-3);
  background: transparent; cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
.cmp__pick:hover { border-color: var(--hair-3); background: var(--ground); }
.cmp__pick-k, .cmp__k {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
}
.cmp__pick-t {
  font-family: var(--font-display); font-size: var(--t-h3);
  color: var(--paper); margin-top: var(--s-3);
}
.cmp__pick-h { font-size: var(--t-small); color: var(--paper-4); }

.cmp__head { display: flex; gap: var(--s-4); align-items: flex-start; }
.cmp__cover {
  flex: 0 0 auto; width: 84px; aspect-ratio: 2 / 3;
  border-radius: 3px; overflow: hidden; background: var(--band);
  box-shadow: var(--lift-1);
}
.cmp__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp__headtext { min-width: 0; }
.cmp__t {
  font-family: var(--font-display); font-size: var(--t-h3);
  line-height: 1.15; margin: var(--s-2) 0 0; color: var(--paper);
}
.cmp__t a:hover { color: var(--accent); }
.cmp__a { font-size: var(--t-small); color: var(--paper-3); margin-top: 4px; }
.cmp__swap {
  margin-top: var(--s-3); padding: 0;
  font-size: var(--t-small); color: var(--paper-4);
  background: none; border: 0; border-bottom: 1px solid var(--hair-2);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.cmp__swap:hover { color: var(--accent); border-color: var(--accent); }

.cmp__grid { margin-top: var(--s-7); }
.cmp__row {
  display: grid;
  grid-template-columns: 8.5rem repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--hair);
  align-items: start;
}
.cmp__row:last-child { border-bottom: 1px solid var(--hair); }
.cmp__rk {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
  padding-top: 3px;
}
.cmp__rv { min-width: 0; }
.cmp__v {
  display: block;
  font-family: var(--font-display); font-size: var(--t-lead);
  line-height: 1.25; color: var(--paper);
}
.cmp__note {
  display: block; margin-top: 6px;
  font-size: var(--t-small); line-height: 1.45; color: var(--paper-3);
}
.cmp__ideas { display: flex; flex-wrap: wrap; gap: 6px; }
/* The only emphasis in the whole comparison, and it marks agreement between
   the two books rather than superiority of either. */
.dna__idea.is-shared {
  border-color: var(--accent); color: var(--paper);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

.cmp__summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-7);
}
.cmp__sk {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4);
  font-weight: 700; margin-bottom: var(--s-3);
}
.cmp__difflist { list-style: none; margin: 0; padding: 0; }
.cmp__difflist li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--t-body); line-height: 1.55; color: var(--paper-2);
  margin-bottom: var(--s-3); max-width: 60ch;
}
.cmp__difflist li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 12px; height: 1px; background: var(--accent);
}
.cmp__foot, .cmp__hint, .cmp__ns {
  font-size: var(--t-small); color: var(--paper-4);
  margin-top: var(--s-6); max-width: 62ch; line-height: 1.55;
}

@media (max-width: 720px) {
  .cmp__cols { grid-template-columns: minmax(0, 1fr); }
  /* The row label becomes a heading over a stacked pair, so the two books
     stay side by side even here: reading them in one column would lose the
     comparison entirely. */
  .cmp__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .cmp__rk { grid-column: 1 / -1; padding-top: 0; }
  .cmp__v { font-size: var(--t-body); }
}

/* ── Discovery surfaces ──────────────────────────────────────────────────
   Built from the tokens the rest of the library already uses: the same
   hairlines, the same label treatment, the same oxblood accent for the one
   thing that carries meaning. No new colours, no cards with heavier shadows
   than the shelf, nothing that announces itself as a feature. */

.dcard {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hair);
}
.dcard:first-child { border-top: 0; }
.dcard__cover {
  flex: 0 0 auto; width: 46px; aspect-ratio: 2 / 3;
  border-radius: 2px; overflow: hidden; position: relative;
  background: var(--band); box-shadow: var(--lift-1);
}
.dcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard__body { min-width: 0; }
.dcard__t {
  display: block; font-family: var(--font-display);
  font-size: var(--t-body); line-height: 1.25; color: var(--paper);
}
.dcard:hover .dcard__t { color: var(--accent); }
.dcard__a { display: block; font-size: var(--t-small); color: var(--paper-4); margin-top: 2px; }
.dcard__why {
  display: block; font-size: var(--t-small); line-height: 1.45;
  color: var(--paper-3); margin-top: 6px; max-width: 46ch;
}

.liked {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--s-6) var(--s-7); margin-top: var(--s-7);
}
.liked__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-3);
}
.liked__foot {
  font-size: var(--t-small); color: var(--paper-4); line-height: 1.55;
  margin-top: var(--s-6); max-width: 64ch;
}

/* A journey is a list with a spine, not a flowchart. The rule down the left
   is the only graphic, and the current book is the one marked. */
.journey__lead { font-size: var(--t-body); color: var(--paper-2); margin-top: var(--s-4); max-width: 62ch; }
.jsteps {
  list-style: none; margin: var(--s-6) 0 0; padding: 0 0 0 var(--s-5);
  border-left: 1px solid var(--hair);
}
.jstep { position: relative; padding: var(--s-4) 0 var(--s-4) var(--s-4); }
.jstep::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-5) - 4px); top: calc(var(--s-4) + 7px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--band); border: 1px solid var(--hair-2);
}
.jstep.is-here::before { background: var(--accent); border-color: var(--accent); }
.jstep__n {
  display: block; font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
}
.jstep.is-here .jstep__n { color: var(--accent); }
.jstep__t {
  display: block; font-family: var(--font-display);
  font-size: var(--t-h3); line-height: 1.2; color: var(--paper); margin-top: 4px;
}
.jstep__t:hover { color: var(--accent); }
.jstep__why {
  display: block; font-size: var(--t-small); line-height: 1.5;
  color: var(--paper-3); margin-top: 6px; max-width: 64ch;
}

@media (max-width: 560px) {
  .liked { grid-template-columns: minmax(0, 1fr); }
  .jsteps { padding-left: var(--s-4); }
  .jstep { padding-left: var(--s-3); }
  .jstep::before { left: calc(-1 * var(--s-4) - 4px); }
}

/* ── Discover: intent form ───────────────────────────────────────────── */
.intent { margin: var(--s-7) 0 0; max-width: 78ch; }
.intent__row { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.intent__l {
  padding: 0; margin: 0 0 var(--s-3);
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
}
.intent__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichip {
  font: inherit; font-size: var(--t-small); line-height: 1;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  color: var(--paper-3); background: transparent;
  border: 1px solid var(--hair-2);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
.ichip:hover { color: var(--paper); border-color: var(--hair-3); }
.ichip[aria-pressed="true"] {
  color: var(--ground); background: var(--accent); border-color: var(--accent);
}
.intent__act { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-6); }
.intent__out:not(:empty) { margin-top: var(--s-8); }

.dres { border-top: 1px solid var(--hair); padding-top: var(--s-5); }
.dres__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);
}
.dres__list { max-width: 62ch; }
.dres__none { color: var(--paper-3); font-size: var(--t-body); max-width: 52ch; }
.dres__meta {
  display: block; font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px;
}

/* ── Surprise me ─────────────────────────────────────────────────────── */
.surprise { margin-top: var(--s-6); }
.surprise__out:not(:empty) { margin-top: var(--s-6); max-width: 62ch; }
.surprise__card { display: flex; gap: var(--s-5); align-items: flex-start; }
.surprise__cover {
  flex: 0 0 auto; width: 96px; aspect-ratio: 2 / 3; border-radius: 2px;
  overflow: hidden; background: var(--band); box-shadow: var(--lift-2);
}
.surprise__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.surprise__t {
  display: block; font-family: var(--font-display); font-size: var(--t-h3);
  line-height: 1.15; color: var(--paper);
}
.surprise__card a:hover .surprise__t { color: var(--accent); }
.surprise__a { display: block; font-size: var(--t-small); color: var(--paper-4); margin-top: 4px; }
.surprise__why {
  font-size: var(--t-small); line-height: 1.5; color: var(--paper-3);
  margin: var(--s-3) 0 0;
}

/* ── My library ──────────────────────────────────────────────────────── */
.mytabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--s-7) 0 var(--s-6);
  border-bottom: 1px solid var(--hair); padding-bottom: var(--s-4);
}
.mytab {
  font: inherit; font-size: var(--t-small); line-height: 1; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; color: var(--paper-3);
  background: transparent; border: 1px solid var(--hair-2);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.mytab:hover { color: var(--paper); border-color: var(--hair-3); }
.mytab.is-on { color: var(--ground); background: var(--accent); border-color: var(--accent); }
.mytab__n { opacity: 0.6; margin-left: 6px; font-variant-numeric: tabular-nums; }
.mylist { max-width: 64ch; min-height: 120px; }
.mylist__none { color: var(--paper-3); font-size: var(--t-body); max-width: 50ch; }
.mylist__none a { color: var(--accent); }
.dcard__drop {
  flex: 0 0 auto; margin-left: auto; align-self: center;
  font: inherit; font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-3); cursor: pointer;
  background: transparent; border: 0; padding: 6px 2px;
}
.dcard__drop:hover { color: var(--accent); }

/* ── Save controls on a book page ────────────────────────────────────── */
.save { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--s-5); }
.save__l {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
  margin-right: 4px;
}
.save__b {
  font: inherit; font-size: var(--t-small); line-height: 1; cursor: pointer;
  padding: 8px 13px; border-radius: 999px; color: var(--paper-3);
  background: transparent; border: 1px solid var(--hair-2);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.save__b:hover { color: var(--paper); border-color: var(--hair-3); }
.save__b[aria-pressed="true"] {
  color: var(--ground); background: var(--accent); border-color: var(--accent);
}
.save__note { font-size: var(--t-micro); color: var(--ink-3); flex-basis: 100%; margin: 2px 0 0; }

@media (max-width: 560px) {
  .surprise__cover { width: 72px; }
  .intent__chips { gap: 7px; }
  .ichip, .mytab { padding: 8px 12px; }
}

/* A book with no verified cover shows its title, as it does on the shelves. */
.dcard__cover--none { display: flex; align-items: center; padding: 5px 4px; }
.dcard__none {
  font-family: var(--font-display); font-size: 8px; line-height: 1.15;
  color: var(--ink-3); overflow: hidden;
}

.dres__g + .dres__g { margin-top: var(--s-6); }
.dres__why {
  font-size: var(--t-small); line-height: 1.5; color: var(--paper-2);
  max-width: 56ch; margin: 0 0 var(--s-3);
  padding-left: var(--s-3); border-left: 2px solid var(--accent-line);
}

/* Intent results in the palette — a section under the books, never an option
   in the listbox, so book ranking and keyboard behaviour are untouched. */
.palette__intent { border-top: 1px solid var(--hair); margin-top: var(--s-3); padding-top: var(--s-3); }
.palette__int {
  display: block; padding: 10px 14px; border-radius: 6px;
  text-decoration: none;
}
.palette__int:hover { background: var(--accent-soft); }
.palette__int .palette__t { display: block; }
.palette__int .palette__s { display: block; }
.palette__why {
  display: block; font-size: var(--t-micro); line-height: 1.45;
  color: var(--paper-3); margin-top: 4px; max-width: 54ch;
}

/* ── Ways into a large collection ────────────────────────────────────── */
.cgroup__nav {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin: var(--s-7) 0 var(--s-8);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--hair);
}
.cgroup__k {
  flex-basis: 100%; margin: 0 0 var(--s-3);
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
.cgroup__l {
  font-size: var(--t-small); line-height: 1; padding: 9px 14px;
  border-radius: 999px; border: 1px solid var(--hair-2); color: var(--paper-2);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.cgroup__l:hover { color: var(--accent); border-color: var(--hair-3); }
.cgroup__n { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 4px; }
.cgroup { margin-top: var(--s-9, var(--s-8)); scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.cgroup:first-of-type { margin-top: 0; }
.cgroup__h {
  font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.1;
  margin: 0 0 var(--s-5); color: var(--paper);
}

/* The global focus ring uses the standard corner radius; these controls are
   pills, so the ring has to follow them or it reads as a stray rectangle. */
.ichip:focus-visible, .mytab:focus-visible,
.save__b:focus-visible, .cgroup__l:focus-visible { border-radius: 999px; }

/* ── Share, and the confirmation after a copy ────────────────────────── */
.save__b--share { margin-left: auto; }
@media (max-width: 560px) { .save__b--share { margin-left: 0; } }

/* Uses the toast layer the tokens already reserve. Positioned so it cannot
   cover the control that produced it. */
.copied {
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: var(--s-6); transform: translate(-50%, 8px);
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink-1); color: var(--ground);
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.01em;
  box-shadow: var(--lift-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.copied.is-on { opacity: 1; transform: translate(-50%, 0); }