/* ============================================================
   Tidbits: one short fact per page.

   These sit on the chapter shell (ch-bar, ch-body, ch-col) like the
   labs, and add only what a tidbit needs: a larger opening paragraph,
   the proof pill, and the shareable card.
   ============================================================ */

.tb-lede { color: var(--ink-2); font-size: .98rem; max-width: 64ch; }

.tb-body {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.78; color: var(--ink-2); max-width: 62ch; margin-top: 1.6rem;
}
.tb-proof {
  display: inline-block; margin-top: 1.6rem; padding: .5rem .9rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--mono); font-size: .78rem; color: var(--acid);
}

.tb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: 2rem; }
.tb-cta a {
  font-size: .82rem; font-weight: 600; padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  transition: background .18s, color .18s, border-color .18s;
}
.tb-cta a:hover { background: var(--card-2); border-color: var(--line-2); color: var(--ink); }
.tb-cta a.tb-go { border-color: var(--acid); color: var(--acid); }
.tb-cta a.tb-go:hover { background: color-mix(in oklab, var(--acid) 14%, transparent); }

.tb-card {
  display: block; width: 100%; max-width: 28rem; height: auto; margin-top: 2.6rem;
  border: 1px solid var(--line); border-radius: var(--r);
}

/* ---------- the index ---------- */
.tb-index {
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  list-style: none; margin: 2.2rem 0 0; padding: 0;
}
.tb-index li {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card), transparent 75%);
  transition: border-color .22s, transform .22s;
}
.tb-index li:hover { border-color: var(--line-2); transform: translateY(-2px); }
.tb-index a { display: block; padding: 1.1rem 1.2rem; text-decoration: none; }
.tb-index .n {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acid);
}
.tb-index h3 { font-size: 1rem; margin: .4rem 0 .5rem; letter-spacing: -.015em; }
.tb-index p { font-size: .82rem; color: var(--mut); line-height: 1.55; margin: 0 0 .7rem; }
.tb-index .pf {
  font-family: var(--mono); font-size: .72rem; color: var(--ink-2);
  border-top: 1px solid var(--line); padding-top: .6rem; display: block;
}