/* ── Lesson readings: "Read for this lesson" card + popover reader ──────────────
 * The reading text is built into the lesson; each opens in a native popover over the
 * lesson and closes back to the same scroll position (Esc, click outside, ✕ or
 * "Back to the lesson"). Without popover support the reading shows inline. */
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-list { list-style: none; margin: .6rem 0 0; padding: 0; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-item {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; margin: .5rem 0; border: 1px solid rgba(148,163,184,.25);
  border-radius: 12px; background: rgba(15,23,42,.55);
}
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-meta strong { display: block; font-size: 1.02rem; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-meta .sls-reading-src { display: block; font-size: .8rem; opacity: .75; margin: .15rem 0 .35rem; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-meta p { margin: 0; font-size: .92rem; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-open,
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-back {
  flex: none; cursor: pointer; border: 0; border-radius: 999px; padding: .5rem 1rem;
  font: 600 .88rem/1.2 inherit; color: #0b1220; background: #67e8f9;
}
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-open:hover, :is(#grit-lesson-wrapper, .content-item-description) .sls-reading-back:hover,
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-open:focus-visible, :is(#grit-lesson-wrapper, .content-item-description) .sls-reading-back:focus-visible {
  background: #a5f3fc; outline: 2px solid #a5f3fc; outline-offset: 2px;
}
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-pop {
  width: min(860px, 94vw); max-height: 88vh; overflow: auto; padding: 0;
  border: 1px solid rgba(148,163,184,.35); border-radius: 16px;
  background: #0b1220; color: #e2e8f0; box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-pop::backdrop { background: rgba(2,6,23,.72); backdrop-filter: blur(2px); }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.4rem .9rem; background: #0f172a;
  border-bottom: 1px solid rgba(148,163,184,.25);
}
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #67e8f9; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-head h2 { margin: .2rem 0 .25rem; font-size: 1.35rem; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-head .sls-reading-src { margin: 0; font-size: .8rem; opacity: .75; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-close {
  flex: none; align-self: flex-start; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgba(148,163,184,.4); background: transparent; color: #e2e8f0; cursor: pointer; font-size: 1rem;
}
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-body { padding: 1.2rem 1.6rem; line-height: 1.7; font-size: 1.02rem; max-width: 72ch; margin: 0 auto; box-sizing: content-box; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-body h3 { margin: 1.4rem 0 .5rem; font-size: 1.1rem; color: #a5f3fc; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-body blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 3px solid #67e8f9; background: rgba(103,232,249,.06); }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-body figure { margin: 1rem 0; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-body img { max-width: 100%; height: auto; border-radius: 10px; }
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-foot {
  display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
  padding: .9rem 1.4rem 1.2rem; border-top: 1px solid rgba(148,163,184,.25); font-size: .82rem;
}
:is(#grit-lesson-wrapper, .content-item-description) .sls-reading-foot .sls-reading-cite { margin: 0; opacity: .85; flex: 1 1 360px; }
@media (max-width: 640px) {
  :is(#grit-lesson-wrapper, .content-item-description) .sls-reading-item { flex-direction: column; align-items: stretch; }
  :is(#grit-lesson-wrapper, .content-item-description) .sls-reading-pop { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  :is(#grit-lesson-wrapper, .content-item-description) .sls-reading-body { padding: 1rem; }
}