/* ============================================================================
   The course: a syllabus, a lecture, a plan.

   The list of thirty is a register, not a wall of marketing cards — a numbered
   academic index with just enough structure to scan, compare and resume.
   ========================================================================== */

/* ================================================== course header (home) */
.course-hero {
  border-block-end: 1px solid var(--line-soft);
  background: var(--surface-2);
  padding-block: clamp(var(--s-8), 5vw, var(--s-12));
}
.course-hero-grid {
  display: grid; gap: var(--s-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: end;
}
@media (max-width: 900px) { .course-hero-grid { grid-template-columns: 1fr; } }

.course-hero h1 { font-size: var(--fs-title); letter-spacing: -.015em; margin-block-end: var(--s-3); }

/* ---- progress: a measure, not a game ---------------------------------- */
.progress {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.progress-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-block-end: var(--s-3);
}
.progress-n { font-family: var(--font-read); font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.progress-n b { color: var(--accent); }
.progress-lbl { font-size: var(--fs-xs); color: var(--ink-3); }
.progress-bar {
  height: 6px; background: var(--surface-3);
  border-radius: var(--r-pill); overflow: hidden;
}
.progress-bar i {
  display: block; height: 100%; background: var(--accent);
  border-radius: inherit; transition: inline-size var(--dur-4) var(--ease);
}
.progress-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-4); }

/* ---- the numbers strip ------------------------------------------------- */
.kpis {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  margin: 0;
}
.kpi {
  padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.kpi dt { font-size: var(--fs-2xs); color: var(--ink-3); margin-block-end: 2px; }
.kpi dd {
  margin: 0; font-family: var(--font-read); font-weight: 700;
  font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- filters */
.filters {
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
  padding-block: var(--s-6);
  position: sticky; inset-block-start: var(--header-h); z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.filters .field { flex: 1 1 260px; max-width: 420px; }
.filters select.field { flex: 0 1 170px; }
.search-info { font-size: var(--fs-xs); color: var(--ink-3); flex-basis: 100%; }
.search-info a { color: var(--accent); }

/* ====================================================== the thirty lectures */
.part-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-h2); color: var(--ink);
  margin-block: var(--s-10) var(--s-4);
  padding-block-end: var(--s-3); border-block-end: 1px solid var(--line);
}
.part-head:first-child { margin-block-start: var(--s-2); }
.part-head .n { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-ui); font-weight: 500; }

.lec-list { list-style: none; margin: 0; padding: 0; }

/* one lecture: number, title, meta, actions — a register row that breathes */
.lec {
  display: grid; align-items: start;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5) var(--s-2);
  border-block-end: 1px solid var(--line-soft);
  transition: background var(--dur-2) var(--ease);
}
.lec:hover { background: var(--surface-2); }

.lec-no {
  grid-row: 1 / span 2;
  font-family: var(--font-read); font-size: 1.5rem; font-weight: 700;
  color: var(--line-strong); line-height: 1.1;
  font-variant-numeric: tabular-nums; text-align: center;
  transition: color var(--dur-2) var(--ease);
}
.lec:hover .lec-no { color: var(--accent); }
.lec-no small { display: block; font-size: .58rem; font-family: var(--font-ui); font-weight: 500; color: var(--ink-3); }

.lec-main { min-width: 0; }
.lec-title { font-family: var(--font-read); font-size: 1.22rem; font-weight: 700; line-height: 1.45; }
.lec-title a { color: var(--ink); text-decoration: none; }
.lec-title a:hover { color: var(--accent); }
.lec-sub { font-size: var(--fs-sm); color: var(--ink-3); margin-block-start: 2px; }

.lec-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  font-size: var(--fs-2xs); color: var(--ink-3);
  margin-block-start: var(--s-2);
}
.lec-meta span { display: inline-flex; align-items: center; gap: var(--s-1); }
.lec-meta b { font-weight: 500; color: var(--ink-3); }
.lec-meta .v { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.lec-topics {
  font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.8;
  margin-block-start: var(--s-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.res-snip mark, .lec-hit mark { background: var(--mark); color: var(--mark-ink); border-radius: 2px; }
.lec-hit {
  font-family: var(--font-read); font-size: 1rem; line-height: 1.85;
  color: var(--ink-2); margin-block-start: var(--s-2);
  padding-inline-start: var(--s-3); border-inline-start: 2px solid var(--accent-line);
}

.lec-acts {
  grid-column: 3; grid-row: 1 / span 2;
  display: flex; flex-direction: column; gap: var(--s-2); align-items: stretch;
}
.lec-acts .btn { min-height: 32px; font-size: var(--fs-xs); padding-inline: var(--s-3); }

/* study state: a dot plus a word, never colour alone */
.state-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--line-strong); box-shadow: 0 0 0 2px var(--surface);
}
.state-doing .state-dot { background: var(--warn); }
.state-done  .state-dot { background: var(--ok); }
.lec.state-done .lec-no { color: var(--ok); }
.state-btn { justify-content: flex-start; }

@media (max-width: 720px) {
  .lec { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .lec-acts { grid-column: 1 / -1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
  .lec-acts .btn { flex: 1 1 auto; }
}

/* ============================================================ lecture page */
.lecture-head { padding-block: var(--s-8) var(--s-6); }
.lecture-kicker {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--accent);
  letter-spacing: .06em; margin-block-end: var(--s-2);
}
.lecture-head h1 {
  font-size: var(--fs-title); letter-spacing: -.015em; line-height: 1.3;
  margin-block-end: var(--s-3); max-width: 24ch;
}
.lecture-head .sub { font-size: var(--fs-lg); color: var(--ink-2); max-width: 62ch; margin-block-end: var(--s-5); }

/* Where the lecture sits in the author's own division. The باب and the فصل
   read as a path; the مباحث and مطالب it covers — as many as twelve — unfold
   as an indented outline rather than wrapping into rows of identical pills. */
.placement { margin-block-end: var(--s-4); }
.placement > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding-block: var(--s-2);
  list-style: none; cursor: pointer; border-radius: var(--r-sm);
}
.placement > summary::-webkit-details-marker { display: none; }
.placement > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pl-path {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  min-width: 0; font-size: var(--fs-xs);
}
.pl-path a, .pl-path span { color: var(--ink-2); text-decoration: none; }
.pl-path a:hover { color: var(--accent); text-decoration: underline; }
.pl-path .lv1, .pl-path a.lv1 { color: var(--accent); font-weight: 600; }
.pl-path .sep { color: var(--line-strong); }

.pl-more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs); color: var(--ink-3);
  padding: 2px var(--s-3);
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.pl-more b { font-weight: 600; font-variant-numeric: tabular-nums; }
.placement > summary:hover .pl-more { color: var(--ink-2); border-color: var(--line-strong); }
.placement[open] .pl-more { color: var(--accent); border-color: var(--accent-line); }
/* a caret, not a chevron: rotation is vertical, so RTL leaves it alone */
.pl-more i {
  inline-size: 0; block-size: 0;
  border-inline: 3px solid transparent;
  border-block-start: 4px solid currentColor;
  transition: transform var(--dur-2) var(--ease);
}
.placement[open] .pl-more i { transform: rotate(180deg); }

.pl-tree {
  list-style: none; margin: var(--s-1) 0 0; padding: 0;
  padding-inline-start: var(--s-3);
  border-inline-start: 1px solid var(--line-soft);
}
.pl-tree li { font-size: var(--fs-xs); line-height: 1.7; }
.pl-tree a {
  display: block; padding: var(--s-1) var(--s-2);
  color: var(--ink-2); text-decoration: none; border-radius: var(--r-xs);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pl-tree a:hover { color: var(--accent); background: var(--surface-2); }
.pl-tree .lv3 > a { color: var(--ink); font-weight: 600; }
.pl-tree .lv4 > a { padding-inline-start: var(--s-6); }
.pl-tree .lv5 > a { padding-inline-start: var(--s-10); }

.ho-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  font-size: var(--fs-xs); color: var(--ink-3);
  padding-block: var(--s-3); border-block: 1px solid var(--line-soft);
  max-width: 84ch;
}
.ho-meta > span { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.ho-meta b { font-weight: 500; color: var(--ink-3); }
.ho-meta .v { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ho-meta a { color: var(--accent); }

/* ---- the view bar: sticky, so the reader never goes back for it -------
   Two ranks, not six equal buttons. Which view you are in is a segmented
   control; what you can do to it are ordinary buttons beside it. */
.viewbar {
  position: sticky; inset-block-start: var(--header-h); z-index: 6;
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  padding-block: var(--s-3);
  margin-block: var(--s-5) var(--s-8);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line-soft);
}
.viewbar .spacer { flex: 1 1 auto; }
.viewseg { flex-wrap: wrap; max-inline-size: 100%; }
.viewseg a { min-height: 34px; padding-inline: var(--s-4); font-size: var(--fs-sm); }
.viewseg a[aria-current="page"] { color: var(--accent); }
.viewbar .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .viewbar { gap: var(--s-2); }
  .viewseg { inline-size: 100%; }
  .viewseg a { flex: 1 1 0; justify-content: center; padding-inline: var(--s-2); }
  .viewbar .spacer { display: none; }
}

/* a hairline of progress through the lecture, hung under the header */
.read-progress {
  position: fixed; inset-block-start: var(--header-h); inset-inline: 0;
  z-index: calc(var(--z-header) - 1);
  block-size: 2px; pointer-events: none;
}
.read-progress i {
  display: block; block-size: 100%; inline-size: 0;
  background: var(--accent);
  transition: inline-size var(--dur-1) linear;
}

/* ---- the lecture body -------------------------------------------------- */
.lecture-layout {
  --lec-rail: 244px;
  display: grid; gap: var(--s-10);
  /* The contents rail leads, the prose follows. The template MUST agree with
     the DOM order (nav, then body) — state it the other way round and the two
     swap places, giving the table of contents the whole page and squeezing the
     lecture itself into the rail. */
  grid-template-columns: var(--lec-rail) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1000px) {
  .lecture-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

/* The rail sits at the inline-start edge, so its rule always faces the prose
   — one declaration, correct in both directions. */
.lec-toc {
  position: sticky; inset-block-start: calc(var(--header-h) + 4.5rem);
  max-height: calc(100dvh - var(--header-h) - 7rem); overflow-y: auto;
  font-size: var(--fs-xs);
  padding-inline-end: var(--s-5);
  border-inline-end: 1px solid var(--line-soft);
  overscroll-behavior: contain;
}
.lec-toc h2 {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600;
  color: var(--ink-3); letter-spacing: .06em;
  margin-block-end: var(--s-3); padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--line-soft);
}
.lec-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 1px; }
.lec-toc li { counter-increment: toc; }
.lec-toc a {
  display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border-inline-start: 2px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-3); text-decoration: none; line-height: 1.65;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.lec-toc a::before {
  content: counter(toc, arabic-indic);
  color: var(--line-strong); font-variant-numeric: tabular-nums;
  font-family: var(--font-ui); font-size: var(--fs-2xs);
  transition: color var(--dur-1) var(--ease);
}
.lec-toc a:hover { color: var(--ink); background: var(--surface-2); }
.lec-toc a:hover::before { color: var(--ink-3); }
.lec-toc a.is-current {
  color: var(--accent); font-weight: 600;
  background: var(--accent-weak); border-inline-start-color: var(--accent);
}
.lec-toc a.is-current::before { color: var(--accent); }
.lec-toc .toc-top {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-block-start: var(--s-4); padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line-soft);
  color: var(--ink-3); text-decoration: none; font-size: var(--fs-2xs);
  inline-size: 100%;
}
.lec-toc .toc-top .ico { transform: rotate(180deg); }
.lec-toc .toc-top:hover { color: var(--accent); }

/* Below the rail breakpoint the contents become a wrapped row of pills, which
   is a summary you can skim rather than a column that eats the first screen. */
@media (max-width: 1000px) {
  .lec-toc {
    position: static; max-height: none; border: 0; padding: 0;
    padding-block-end: var(--s-5); border-block-end: 1px solid var(--line-soft);
    overflow: visible;
  }
  .lec-toc ol { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .lec-toc a {
    display: inline-flex; gap: var(--s-2);
    border: 1px solid var(--line-soft); border-radius: var(--r-pill);
    padding: var(--s-1) var(--s-3); line-height: 1.8;
  }
  .lec-toc a.is-current { border-color: var(--accent-line); }
  .lec-toc .toc-top { display: none; }
}

/* Even with the rail taking its share, prose stops at the book's own measure:
   a 1,000px line of justified Arabic cannot be read, only scanned. */
.lecture-body { min-width: 0; max-width: var(--measure); }
.lecture-body h2 {
  font-size: var(--fs-h1); color: var(--ink);
  margin-block: var(--s-12) var(--s-4);
  padding-block-end: var(--s-3); border-block-end: 1px solid var(--line-soft);
  scroll-margin-block-start: calc(var(--header-h) + 5rem);
}
.lecture-body h2:first-child { margin-block-start: var(--s-4); }
.lecture-body h3 { font-size: var(--fs-h3); color: var(--ink); margin-block: var(--s-8) var(--s-3); }
.lecture-body p {
  font-family: var(--font-read); font-size: 1.12rem; line-height: 2.05;
  color: var(--ink); margin-block-end: var(--s-4); text-align: justify;
}
.lead-p { color: var(--ink-2); }
.sec-lead { color: var(--ink-2); font-style: normal; }

/* ---- objectives: a restrained academic panel --------------------------- */
.ho-obj {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  margin-block-end: var(--s-8);
}
html[dir="rtl"] .ho-obj { border-inline-start: 1px solid var(--line-soft); border-inline-end: 3px solid var(--accent); }
.ho-obj h2 {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent); margin: 0 0 var(--s-3); padding: 0; border: 0;
}
.ho-obj ol { margin: 0; padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
.ho-obj li { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.85; color: var(--ink-2); }

/* ---- verbatim book text ------------------------------------------------ */
.srcq {
  position: relative;
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--accent-line);
  border-radius: var(--r-md);
}
html[dir="rtl"] .srcq { border-inline-start: 1px solid var(--line-soft); border-inline-end: 3px solid var(--accent-line); }
.srcq p {
  font-family: var(--font-read); font-size: 1.1rem; line-height: 2;
  color: var(--ink); margin-block-end: var(--s-2); text-align: justify;
}
.srcq p:last-of-type { margin-block-end: 0; }
.srcq p[dir="ltr"] { font-family: var(--font-ui); font-size: .95rem; text-align: start; }
.srcq-foot {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--ink-3);
  margin-block-start: var(--s-3); padding-block-start: var(--s-2);
  border-block-start: 1px dashed var(--line);
}
.srcq-foot a { color: var(--accent); text-decoration: none; }
.srcq-foot a:hover { text-decoration: underline; }
.srcq.is-fn p { font-size: 1rem; color: var(--ink-2); }
.src-ref { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--ink-3); }
.src-ref a { color: var(--accent); text-decoration: none; }
.src-ref a:hover { text-decoration: underline; }

/* ==================================== academic callouts: one system, one hue */
/* Kind is carried by a label and an icon; the accent never changes colour, so
   nine callout types cannot become nine competing hues. */
.kbox {
  margin-block: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-3);
  border-radius: var(--r-md);
}
html[dir="rtl"] .kbox { border-inline-start: 1px solid var(--line); border-inline-end: 3px solid var(--ink-3); }
.kbox > .kbox-h {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-2); margin-block-end: var(--s-2);
}
.kbox > .kbox-h .tag {
  color: var(--ink-3); font-weight: 600; letter-spacing: .02em;
}
.kbox p { font-family: var(--font-read); font-size: 1.08rem; line-height: 1.95; color: var(--ink); margin: 0; }
.kbox p + p { margin-block-start: var(--s-2); }

.kbox[data-kind="definition"] { border-inline-end-color: var(--accent); }
.kbox[data-kind="definition"] .tag,
.kbox[data-kind="rule"] .tag,
.kbox[data-kind="principle"] .tag { color: var(--accent); }
.kbox[data-kind="rule"], .kbox[data-kind="principle"] {
  border-inline-end-color: var(--accent); background: var(--accent-weak);
}
.kbox[data-kind="law"], .kbox[data-kind="constitution"] {
  border-inline-end-color: var(--navy); background: var(--surface-2);
}
.kbox[data-kind="law"] .tag, .kbox[data-kind="constitution"] .tag { color: var(--navy); }
:root[data-theme="dark"] .kbox[data-kind="law"] .tag { color: var(--on-navy-2); }
.kbox[data-kind="opinion"] { border-inline-end-color: var(--warn); }
.kbox[data-kind="opinion"] .tag { color: var(--warn); }
.kbox[data-kind="case"] { border-inline-end-color: var(--ok); }
.kbox[data-kind="case"] .tag { color: var(--ok); }
.kbox[data-kind="note"] { background: var(--surface-2); border-style: dashed; }
html[dir="rtl"] .kbox[data-kind="definition"],
html[dir="rtl"] .kbox[data-kind="rule"] { border-inline-start: 1px solid var(--line); }

/* ---- lists, tables, diagrams ------------------------------------------- */
.klist { margin-block: var(--s-5); }
.klist h4, .ktable h4, .kdiag h4 {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-3); margin-block-end: var(--s-2);
}
.klist ol, .klist ul { margin: 0; padding-inline-start: var(--s-6); display: grid; gap: var(--s-2); }
.klist li { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.9; color: var(--ink); }
.klist .after { font-size: var(--fs-sm); color: var(--ink-2); margin-block-start: var(--s-3); }

.ktable { margin-block: var(--s-6); }
.tbl-wrap, .ktable { overflow-x: auto; }
.ktable table, .plan {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); min-width: 30rem;
}
.ktable th, .ktable td, .plan th, .plan td {
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line-soft);
  text-align: start; vertical-align: top; line-height: 1.75;
}
.ktable th, .plan th {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600;
  color: var(--ink-3); background: var(--surface-2);
  border-block-end: 1px solid var(--line);
  position: sticky; inset-block-start: 0;
}
.ktable td { font-family: var(--font-read); font-size: 1.02rem; color: var(--ink); }
.ktable tbody tr:hover, .plan tbody tr:hover { background: var(--surface-2); }
.ktable th[scope="row"] {
  font-family: var(--font-ui); color: var(--accent); font-weight: 600;
  white-space: nowrap; position: static;
}
.ktable .note {
  font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--ink-3);
  margin-block-start: var(--s-2); line-height: 1.7;
}

.kdiag { margin-block: var(--s-6); }
.kdiag .flow { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch; }
.kdiag .flow .node {
  flex: 1 1 150px; min-width: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2);
  display: flex; align-items: center;
}
.kdiag .flow .arrow {
  flex: none; align-self: center; color: var(--line-strong);
  font-size: 1.1rem; line-height: 1;
}
@media (max-width: 640px) {
  .kdiag .flow { flex-direction: column; }
  .kdiag .flow .arrow { transform: rotate(-90deg); align-self: center; }
}

.kdiag .hier { display: grid; gap: var(--s-3); }
.kdiag .hier .root {
  font-family: var(--font-read); font-weight: 700; font-size: 1.1rem;
  color: var(--accent); text-align: center;
  padding: var(--s-2); background: var(--accent-weak);
  border: 1px solid var(--accent-line); border-radius: var(--r-md);
}
.kdiag .hier .cols { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kdiag .hier .branch {
  padding: var(--s-3); background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.kdiag .hier .branch > b {
  display: block; font-family: var(--font-ui); font-size: var(--fs-xs);
  color: var(--ink-3); margin-block-end: var(--s-2);
}
.kdiag .hier .branch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.kdiag .hier .branch li { font-size: var(--fs-sm); color: var(--ink); line-height: 1.7; }

/* ---- terms, summary, questions, quiz ----------------------------------- */
.terms { display: grid; gap: var(--s-3); margin-block: var(--s-5); }
.term {
  padding: var(--s-4); background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.term dt { font-family: var(--font-read); font-weight: 700; font-size: 1.08rem; color: var(--accent); }
.term dd { margin: var(--s-1) 0 0; font-family: var(--font-read); font-size: 1.02rem; line-height: 1.85; color: var(--ink-2); }

.qlist { padding-inline-start: var(--s-6); display: grid; gap: var(--s-3); }
.qlist li { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.9; }

.quiz { display: grid; gap: var(--s-4); margin-block: var(--s-5); }
.qitem {
  padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.qq { font-family: var(--font-read); font-size: 1.08rem; line-height: 1.85; margin-block-end: var(--s-3); }
.qopts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.qopts button {
  width: 100%; text-align: start;
  padding: var(--s-2) var(--s-4); min-height: 40px;
  font-family: var(--font-read); font-size: 1.02rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); color: var(--ink);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.qopts button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--surface-3); }
.qopts button.right { border-color: var(--ok); background: var(--ok-weak); font-weight: 600; }
.qopts button.wrong { border-color: var(--danger); background: var(--danger-weak); }
.qwhy {
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.8;
  margin-block-start: var(--s-3); padding-block-start: var(--s-2);
  border-block-start: 1px dashed var(--line);
}
.qshow { font-size: var(--fs-xs); color: var(--accent); font-weight: 600; }

/* ---- instructor-only surfaces ------------------------------------------ */
.instr-only { display: none; }
body.instructor .instr-only { display: block; }
.pnotes {
  background: var(--navy); color: var(--on-navy-2);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  font-size: var(--fs-sm); line-height: 1.85;
}
.pnotes b { display: block; color: var(--accent-strong); font-size: var(--fs-2xs); margin-block-end: var(--s-1); }
.ocr-warn {
  background: var(--warn-weak); border: 1px solid var(--warn);
  border-radius: var(--r-md); padding: var(--s-4);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.8;
  margin-block-end: var(--s-6);
}
.ocr-warn b { color: var(--warn); }

/* ------------------------------------------------------- lecture footer nav */
.lec-nav {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-block-start: var(--s-16); padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line-soft);
}
.lec-nav a {
  display: block; padding: var(--s-4);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink); font-size: var(--fs-sm); line-height: 1.6;
  transition: border-color var(--dur-2) var(--ease);
}
.lec-nav a:hover { border-color: var(--accent-line); }
.lec-nav a small { display: block; font-size: var(--fs-2xs); color: var(--ink-3); margin-block-end: 2px; }
.lec-nav .mid { border: 0; text-align: center; color: var(--ink-3); font-size: var(--fs-xs); }
.lec-nav a:last-child { text-align: end; }
@media (max-width: 720px) { .lec-nav { grid-template-columns: 1fr; } .lec-nav a:last-child { text-align: start; } }

/* ============================================================== the plan */
.plan caption { text-align: start; padding-block-end: var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }
.plan td .t { font-family: var(--font-read); font-size: 1.05rem; font-weight: 600; }
.plan td .t a { color: var(--ink); text-decoration: none; }
.plan td .t a:hover { color: var(--accent); }
.plan td small { display: block; color: var(--ink-3); font-size: var(--fs-2xs); margin-block-start: 2px; }
.plan .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.plan tr.week-start td { border-block-start: 2px solid var(--accent-line); }

@media (max-width: 860px) {
  /* the table becomes a stack of rows, each labelled by its own header */
  .plan, .plan tbody, .plan tr, .plan td { display: block; width: 100%; }
  .plan thead { display: none; }
  .plan tr {
    border: 1px solid var(--line-soft); border-radius: var(--r-md);
    padding: var(--s-4); margin-block-end: var(--s-3); background: var(--surface);
  }
  .plan td { border: 0; padding: var(--s-1) 0; }
  .plan td::before {
    content: attr(data-th) "  ";
    font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--ink-3);
  }
  .plan td.no-label::before { content: none; }
}

@media print {
  .filters, .viewbar, .lec-nav, .lec-acts, .progress-acts, .lec-toc,
  .read-progress { display: none !important; }
}