/* Presentation for content that is read rather than answered: R-800's study notes,
   its glossary, and zad's study planner.

   The class names in .notes-body are not ours — they are the ones the R-800
   companion authored, reproduced here so 40 KB of preserved markup renders as it was
   written. Colours come from the shared token layer, so the notes follow the app's
   theme instead of carrying their own. */

.notes-nav {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 0 10px; margin-bottom: 4px;
}
.notes-jump {
  flex: none; min-height: var(--tap); display: inline-flex; align-items: center;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2);
  text-decoration: none; font: 600 var(--s-1)/1 var(--sans); white-space: nowrap;
}
.notes-jump[aria-current="page"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

/* ---- the preserved markup ---- */

.notes-body .card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin: 14px 0;
}
.notes-body h2 { font-size: var(--s2); margin: 0 0 10px; }
.notes-body h3 { font-size: var(--s1); margin: 20px 0 6px; }
.notes-body h4 { font-size: var(--s0); margin: 14px 0 4px; }
.notes-body p, .notes-body li { overflow-wrap: break-word; }
.notes-body ul, .notes-body ol { padding-left: 1.25rem; margin: .5rem 0; }
.notes-body li { margin: .22rem 0; }

.notes-body .objectives {
  background: var(--accent-soft); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0;
}
.notes-body .objectives h4 { margin: .1rem 0 .4rem; color: var(--accent); }
.notes-body .keypoint {
  background: var(--warn-soft); border-left: 4px solid var(--warn);
  border-radius: 8px; padding: .7rem 1rem; margin: .8rem 0; font-size: var(--s-1);
}
.notes-body .keypoint b:first-child { color: var(--warn); }
.notes-body .lesson {
  background: var(--ok-soft); border-left: 4px solid var(--ok);
  border-radius: 8px; padding: .7rem 1rem; margin: .8rem 0; font-size: var(--s-1);
}

.notes-body .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.notes-body table { border-collapse: collapse; min-width: 460px; font-size: var(--s-1); }
.notes-body th, .notes-body td {
  border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top;
}
.notes-body th { background: var(--panel-2); }

/* The original pinned the date into a 7.4rem absolute column. That is fine on a
   laptop and unreadable on a phone, so it stacks below 560px. */
.notes-body .timeline { list-style: none; padding-left: 0; margin: .6rem 0; }
.notes-body .timeline li { position: relative; padding: .3rem 0; margin: 0; }
.notes-body .timeline b.t {
  display: block; color: var(--accent);
  font-variant-numeric: tabular-nums; font-size: var(--s-2);
}
@media (min-width: 560px) {
  .notes-body .timeline li { padding: .28rem 0 .28rem 8.2rem; }
  .notes-body .timeline b.t {
    position: absolute; left: 0; top: .28rem; width: 7.4rem; font-size: var(--s-1);
  }
}

/* ------------------------------------------------------------------ glossary */

.gloss-search {
  width: 100%; min-height: var(--tap); margin-bottom: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink); font: var(--s0)/1.3 var(--sans);
}
dl.gloss { margin: 0; }
dl.gloss dt { font-weight: 700; color: var(--accent); margin-top: .7rem; }
dl.gloss dd { margin: 0 0 .3rem; font-size: var(--s-1); color: var(--ink-2); }

/* ------------------------------------------------------------------- planner */

.weekbar {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 0 12px;
}
.week-btn {
  flex: none; min-height: var(--tap); min-width: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink-2); cursor: pointer;
  font: 600 var(--s-2)/1.25 var(--sans);
}
.week-btn.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.week-btn.is-done:not(.is-on) { border-color: var(--ok); color: var(--ok); }
.week-frac { font-variant-numeric: tabular-nums; opacity: .8; }

.plan-book { border-left: 4px solid var(--pack-accent, var(--accent)); }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.plan-row {
  display: flex; gap: 10px; align-items: flex-start;
  min-height: var(--tap); padding: 8px 4px;
  border-top: 1px solid var(--line-soft); cursor: pointer;
}
.plan-row:first-of-type { border-top: 0; }
.plan-check { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.plan-body { display: grid; gap: 2px; min-width: 0; }
.plan-page { font-size: var(--s-2); color: var(--ink-3); }

/* --------------------------------------------------------------------- print */

@media print {
  .notes-nav, .weekbar, .gloss-search { display: none !important; }
  .notes-body .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .notes-body .tablewrap { overflow: visible; }
  .notes-body table { min-width: 0; width: 100%; }
  .notes-body h2, .notes-body h3 { break-after: avoid; }
}