/* The paid-document badge.
 *
 * Loaded from includes/head.php for EVERY page, not from a page stylesheet:
 * the badge appears on the document page, the catalogue and the search overlay,
 * and the catalogue runs an A/B whose two arms load different stylesheets. CSS
 * that lives in one arm's sheet reaches half the visitors, which is how a
 * previous widget shipped invisible to one arm.
 *
 * Costs ~1KB on pages that never render a badge. That is the price of it always
 * working. */

.dbadge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px 3px 8px;
  background:linear-gradient(100deg,#e8501e,#f77a4a); color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; line-height:1.6; border-radius:0; vertical-align:middle;
}
.dbadge::before{content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.9); flex:0 0 5px}
.dbadge-lg{font-size:12px; padding:5px 13px 5px 11px; letter-spacing:.1em}
/* Search results: everything in the overlay must stay light, so the fill drops
   away and only the number remains. */
.dbadge-q{background:none; color:#e8501e; border:1.5px solid #e8501e; padding:2px 8px}
.dbadge-q::before{display:none}

/* A paid card in the catalogue. The border and the top rule are the point: a
   10px label only reads once you have stopped at the card, and nobody stops —
   two paid documents sit among forty free ones and the eye moves at scroll
   speed. Shape and colour survive being seen peripherally. */
.doc-card.is-paid{
  position:relative; border-color:#e8501e !important; box-shadow:inset 0 0 0 1px #e8501e;
}
.doc-card.is-paid::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#e8501e,#f7a072); z-index:1;
}

/* A paid ROW in the list arm is a different problem, and the card treatment was
   simply wrong for it. .fp-row is a full-width line in a stack of lines with no
   gap between neighbours: boxing one draws a hard rectangle across the page,
   collides with the row above, and reads as an error state rather than a
   feature. A list wants a MARKER, not a container — one accent bar on the
   leading edge and a whisper of tint. It scans just as fast down a column of
   left-aligned rows and leaves the rhythm of the list intact. */
.fp-row.is-paid{
  border-left:3px solid #e8501e;
  padding-left:13px;
  background:linear-gradient(90deg, rgba(232,80,30,.055), transparent 42%);
}
.fp-row.is-paid:hover{ background:linear-gradient(90deg, rgba(232,80,30,.1), transparent 52%); }
.dbadge-price{font-size:15px; font-weight:800; letter-spacing:-.02em; color:#e8501e;
  font-variant-numeric:tabular-nums}

  .dbadge-price{color:#ff6a3d}
}

/* Spotlight rows: the badge sits at the end of the row, and free documents get
   a quiet counterpart so silence never has to be interpreted. */
.spotlight-item{align-items:center}
.spotlight-item .dbadge{margin-left:auto; flex:0 0 auto}
.spotlight-item-free{margin-left:auto; flex:0 0 auto; font-size:11.5px; font-weight:700;
  color:#8b8379; white-space:nowrap}

/* ── Related-document cards ─────────────────────────────────────────────────
   Rebuilt from a thumbnail-plus-blurb layout whose "thumbnail" was a Unicode
   emoji at 40px. The whole card is one link now, the file type is stated as
   text next to a Font Awesome glyph, and the footer carries either a price or a
   use count — never a download count on a book, where the number invites a
   comparison that means nothing. */
.related-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.related-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.related-grid{grid-template-columns:repeat(4,1fr)}}

.rel-card{display:flex;flex-direction:column;gap:8px;padding:15px 16px;
  border:1px solid #e4e2de;background:#fff;text-decoration:none;color:#0a0a0a;
  position:relative;transition:border-color .14s ease,transform .14s ease}
.rel-card:hover{border-color:#0a0a0a;transform:translateY(-2px)}
.rel-card.is-paid{border-color:#e8501e}
.rel-card.is-paid::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#e8501e,#f7a072)}

.rel-top{display:flex;align-items:center;gap:8px;min-height:20px}
.rel-ico{font-size:15px;color:#8b8379}
.rel-card.is-paid .rel-ico{color:#e8501e}
.rel-ext{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8b8379}
.rel-top .dbadge{margin-left:auto}

.rel-title{font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.rel-card:hover .rel-title{text-decoration:underline;text-underline-offset:3px}
/* Vietnamese: stacked diacritics need the extra leading. */
.rel-desc{font-size:12.5px;line-height:1.55;color:#57514a}
.rel-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:8px;border-top:1px solid #f0eeea}
.rel-cat{font-size:11px;color:#8b8379}
.rel-price{font-size:13.5px;font-weight:800;color:#e8501e;font-variant-numeric:tabular-nums}
.rel-dl{font-size:11px;color:#8b8379}

  .rel-card:hover{border-color:#f4f1ec}
  .rel-desc{color:#a9a29a}
  .rel-foot{border-top-color:#2f2c28}
}
@media (prefers-reduced-motion: reduce){ .rel-card{transition:none} .rel-card:hover{transform:none} }

/* NO dark-mode block here, deliberately.
   These components had one, and the site does not implement a dark theme — so
   on a machine set to dark the related cards rendered dark grey while the page
   around them stayed white. Honouring prefers-color-scheme only works if the
   WHOLE page honours it; doing it per-component produces exactly one island of
   the wrong colour. (2026-08-21) */