/* ============================================================================
   The teaching layer as it appears inside the reader: site nav, search scope,
   and the "ضمن المحاضرة" cross-links. Everything here is additive — remove the
   file and the reader looks exactly as it did before the course existed.
   ========================================================================== */

/* ------------------------------------------------------------- site nav */
.topbar .site-nav { display: flex; gap: .15rem; margin-inline-start: .6rem; }
.topbar .site-nav a {
  font-family: var(--sans-ar); font-size: .86rem; text-decoration: none;
  color: var(--ink-soft); padding: .3rem .62rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.topbar .site-nav a:hover { color: var(--ink); background: var(--chrome-2, var(--chrome)); }
.topbar .site-nav a[aria-current="page"] {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
@media (max-width: 720px) { .topbar .site-nav { margin-inline-start: .25rem; }
  .topbar .site-nav a { padding: .28rem .45rem; font-size: .8rem; } }

/* --------------------------------------------------------- search scope */
.q-scope {
  font: inherit; font-family: var(--sans-ar); font-size: .78rem;
  color: var(--ink-soft); background: transparent; border: 0;
  border-inline-start: 1px solid var(--rule); padding: 0 .4rem; margin-inline-start: .3rem;
  cursor: pointer; max-width: 6.2rem;
}
.q-scope:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* the book half of the results is hidden when the scope is lectures only */
body[data-qscope="lectures"] #searchResults,
body[data-qscope="lectures"] #searchNav { display: none; }

/* ------------------------------------------------------ lecture results */
.lec-results { border-top: 1px solid var(--rule); margin-top: .4rem; }
.lec-res-head {
  font-family: var(--sans-ar); font-size: .8rem; color: var(--ink-faint);
  margin: .6rem .2rem .3rem; display: flex; align-items: center; gap: .4rem;
}
a.lec-res {
  display: block; width: 100%; text-align: start; text-decoration: none; color: inherit;
  padding: .5rem .6rem; border-radius: 10px; border: 1px solid transparent;
}
a.lec-res:hover { background: var(--chrome); border-color: var(--rule); }
a.lec-res .res-head {
  display: flex; gap: .5rem; align-items: baseline; font-family: var(--sans-ar);
  font-size: .78rem; color: var(--ink-soft); margin-bottom: .15rem;
}
a.lec-res .res-page { color: var(--accent); white-space: nowrap; }
a.lec-res .res-snip { display: block; font-size: .92rem; line-height: 1.8; color: var(--ink); }

/* ---------------------------------------------------------- cross-links */
.lec-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--sans-ar); font-size: .72rem; line-height: 1.6;
  color: var(--accent); white-space: nowrap;
}
.lec-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lec-chip a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.lec-chip a:hover { border-bottom-style: solid; }

.lec-chip.on-page {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 999px; padding: .1rem .5rem;
}

/* inside a paragraph the link stays out of the way until the paragraph is
   hovered or focused — the book text must read as the book, not as a syllabus */
/* user-select:none keeps the chip out of a hand-made selection, the same way
   plainOf() keeps it out of the copy buttons' text */
.lec-para { margin-inline-start: .35rem; opacity: 0; transition: opacity .14s ease;
            user-select: none; -webkit-user-select: none; }
.book p:hover > .lec-para, .book h2:hover > .lec-para, .book h3:hover > .lec-para,
.book h4:hover > .lec-para, .book h5:hover > .lec-para,
.lec-para:focus-within { opacity: 1; }
@media (hover: none) { .lec-para { opacity: .75; } }

body.no-lec-links .lec-para, body.no-lec-links .lec-chip.on-page { display: none; }

@media print { .lec-chip, .lec-para, .site-nav, .q-scope, .lec-results { display: none !important; } }

/* The reader's top bar was already full before the course nav joined it, so on
   narrow screens the search drops to a line of its own instead of pushing the
   page into horizontal scroll. */
@media (max-width: 760px) {
  body.has-course .topbar-row { flex-wrap: wrap; row-gap: .35rem; }
  body.has-course .topbar-row .brand-sub { display: none; }
  body.has-course .topbar-row .search-wrap { order: 10; flex: 1 1 100%; max-width: none; }
}
@media (max-width: 420px) {
  body.has-course .topbar .brand-title { font-size: .95rem; }
  body.has-course .topbar .site-nav a { padding: .26rem .42rem; font-size: .78rem; }
}