/* Classical Reading — the source-text library.
   Layers on the site's optical-glass tokens (--ink, --accent, --gold, the
   .card.glass material). Manuscript-quiet: the texts are the subject, the
   chrome recedes. Theme-aware through the shared tokens. */

.cl-head { margin: 6px 0 26px; }
.cl-head h1 { margin: 0 0 10px; }
.cl-lede {
  max-width: 66ch; margin: 0 0 20px; font-size: 1.02rem; line-height: 1.7;
  color: var(--ink-soft);
}

/* ── search ─────────────────────────────────────────────────────────── */
.cl-search { display: flex; gap: 10px; max-width: 620px; margin: 0 0 16px; }
.cl-search-input {
  flex: 1 1 auto; min-width: 0; padding: 12px 16px; border-radius: 13px;
  border: 1px solid rgba(120,150,200,.3); background: rgba(255,255,255,.5);
  color: var(--ink); font: inherit; font-size: .95rem;
}
.cl-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cl-search-btn { flex: 0 0 auto; }

.cl-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.cl-stat { font-size: .84rem; color: var(--ink-soft); }
.cl-stat strong { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 1.05rem; }

/* ── a category section ─────────────────────────────────────────────── */
.cl-sec { margin: 30px 0; }
.cl-sec-h {
  margin: 0 0 14px; font-size: 1.06rem; font-weight: 700; color: var(--ink);
  padding-bottom: 8px; border-bottom: 1px solid rgba(120,150,200,.22);
}
.cl-sec-count { color: var(--ink-faint); font-weight: 500; }

/* ── the text grid ──────────────────────────────────────────────────── */
.cl-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cl-card { padding: 18px 18px 16px; position: relative; }
.cl-card-link { text-decoration: none; }
/* The whole card is the target — a stretched link over the glass. */
.cl-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cl-card-title {
  display: block; font-size: 1.04rem; font-weight: 700; color: var(--ink);
  line-height: 1.35;
}
.cl-card-title .dev { display: block; font-weight: 600; color: var(--ink-soft); font-size: .92rem; margin-top: 1px; }
.cl-card-author { margin: 5px 0 0; font-size: .82rem; color: var(--gold, #b0813d); font-weight: 600; }
.cl-card-blurb { margin: 9px 0 0; font-size: .86rem; line-height: 1.62; color: var(--ink-soft); }
.cl-card-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-count { font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cl-verified-pill {
  font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  color: color-mix(in srgb, var(--good, #3f8f5f) 78%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--good, #3f8f5f) 42%, transparent);
  background: color-mix(in srgb, var(--good, #3f8f5f) 8%, transparent);
}

/* search-result verse chips on a card */
.cl-card-hits { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.cl-refchip {
  font-size: .74rem; font-weight: 650; padding: 2px 9px; border-radius: 999px;
  color: var(--ink-soft); text-decoration: none;
  border: 1px solid rgba(120,150,200,.34); background: rgba(255,255,255,.55);
  font-variant-numeric: tabular-nums;
}
.cl-refchip:hover { color: var(--ink); border-color: var(--accent); }
.cl-more { font-size: .74rem; color: var(--ink-faint); align-self: center; }
.cl-empty { color: var(--ink-soft); font-size: .95rem; max-width: 60ch; }

/* ── a text page ────────────────────────────────────────────────────── */
.cl-text-head { margin: 6px 0 24px; }
.cl-text-head h1 { margin: 0 0 8px; }
.cl-text-head .dev { color: var(--ink-soft); font-weight: 600; }
.cl-text-author { margin: 0 0 10px; font-size: .9rem; color: var(--gold, #b0813d); font-weight: 600; }
.cl-text-blurb { max-width: 66ch; margin: 0 0 12px; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
.cl-text-edition { font-size: .84rem; color: var(--ink-faint); }
.cl-edition-label { font-weight: 650; color: var(--ink-soft); }

.cl-refs-lede { max-width: 66ch; margin: 0 0 18px; font-size: .9rem; line-height: 1.66; color: var(--ink-soft); }

/* Chapter navigation + grouping for a full text. */
.cl-chapnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.cl-chapchip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
  font-size: .82rem; font-weight: 650; text-decoration: none; color: var(--ink-soft);
  border: 1px solid rgba(120,150,200,.3); background: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
}
.cl-chapchip:hover { color: var(--ink); border-color: var(--accent); }
.cl-chapter { margin: 0 0 26px; scroll-margin-top: 84px; }
.cl-chapter-h {
  margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
.cl-chapter-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; border-radius: 7px; font-size: .82rem;
  color: #fff; background: color-mix(in srgb, var(--accent) 76%, var(--ink));
  font-variant-numeric: tabular-nums;
}

.cl-verses { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cl-verse {
  padding: 15px 17px; border-radius: 14px;
  border: 1px solid rgba(120,150,200,.24); background: rgba(255,255,255,.4);
  scroll-margin-top: 90px;   /* so #anchor lands clear of the sticky header */
}
.cl-verse.is-verified { border-left: 3px solid color-mix(in srgb, var(--good, #3f8f5f) 60%, transparent); }
.cl-verse.is-sanskrit { border-left: 3px solid color-mix(in srgb, var(--accent) 42%, transparent); }
.cl-verse-badge.cl-sanskrit {
  color: color-mix(in srgb, var(--accent) 80%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.cl-verse:target { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.cl-verse-top { display: flex; align-items: center; gap: 10px; }
.cl-verse-ref { font-size: .96rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-verse-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.cl-verse-badge.cl-verified {
  color: color-mix(in srgb, var(--good, #3f8f5f) 80%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--good, #3f8f5f) 42%, transparent);
}
.cl-verse-badge.cl-pending {
  color: var(--ink-faint);
  border: 1px solid rgba(120,150,200,.34);
}
.cl-verse-label { margin: 7px 0 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.cl-verse-body { margin: 12px 0 0; }
.cl-verse-caption {
  margin: 12px 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cl-verse-caption:first-child { margin-top: 0; }
.cl-sanskrit {
  margin: 0; font-size: 1.12rem; line-height: 1.9; color: var(--ink);
  font-weight: 500;
}
.cl-iast { margin: 4px 0 0; font-size: .88rem; font-style: italic; color: var(--ink-soft); line-height: 1.6; }
.cl-translation { margin: 0; font-size: .95rem; line-height: 1.72; color: var(--ink); }
.cl-translator { color: var(--ink-faint); font-size: .85rem; }
.cl-verse-pending {
  margin: 10px 0 0; font-size: .82rem; line-height: 1.6; color: var(--ink-faint);
  font-style: italic;
}
.cl-verse-source {
  margin: 12px 0 0; font-size: .76rem; line-height: 1.55; color: var(--ink-faint);
  border-top: 1px dashed rgba(120,150,200,.24); padding-top: 8px;
}

/* ── shared footers ─────────────────────────────────────────────────── */
.cl-honesty {
  max-width: 66ch; margin: 28px 0 8px; font-size: .8rem; line-height: 1.62;
  color: var(--ink-faint); border-top: 1px solid rgba(120,150,200,.2); padding-top: 14px;
}
.cl-back { margin: 22px 0 0; }
.cl-back a { color: color-mix(in srgb, var(--accent) 84%, var(--ink)); text-decoration: none; font-weight: 600; font-size: .9rem; }
.cl-back a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .cl-search { flex-direction: column; }
  .cl-grid { grid-template-columns: 1fr; }
}