/* The study page: one lesson, both halves of it.

   The bar, the text column, the highlights and the notebook are the old
   readers' own pieces (faben_read.css, notes.css) and keep their rules; this
   file is the frame around them - where the video goes when there is one, and
   how the two halves share the window. */
.study {
  margin: 0 auto;
  /* Wide enough for the text beside a video to be a page of text: at 1500 a
     large screen gave the paper eight hundred pixels next to the player,
     against the 1280 the 法本 reader and the 大藏经 give it alone. The text-only
     shapes are capped by their own column (--read-width) inside this. */
  max-width: min(1900px, 96vw);
  padding: 0 10px 46px;
  text-align: left;
}

/* The same bar the readers draw, without the reader's own centring trick: this
   page is wider than a page of text and the bar simply spans it. */
.study__bar {
  align-items: center;
  border-bottom: 1px solid #ddddc8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding-bottom: 8px;
}

/* Under the site bar's drawer mode (navbar.js; html.nav-drawer) the bar is two
   pills floating over the page's corners and a 52px cushion under them. This
   row is short enough to sit between the pills instead: it moves up into that
   band and keeps clear of the pills on either side, so the page starts at the
   very top of the window. Only where the row is one line and the right pill
   holds two buttons; below lg the pills are the phone's and the row wraps. */
@media (min-width: 64rem) {
  html.nav-drawer .content:has(> .study) {
    padding-top: 0;
  }

  html.nav-drawer .study__bar {
    min-height: 46px;
    padding-left: 54px;
    padding-right: 66px;
    padding-top: 4px;
  }
}

.study__where {
  align-items: center;
  color: #8a7a6a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85em;
  gap: 6px;
  min-height: var(--bar-row);
}

.study__where a {
  color: #4a7c59;
}

/* On a phone the trail shares its row with the layout switch: one line, the
   end of a long course title giving way, rather than a row of the bar to
   itself. */
@media screen and (max-width: 600px) {
  .study__where {
    flex: 1 1 0;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .study__where a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .study__views {
    flex: none;
  }
}

.study__tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-left: auto;
}

/* The done chips: 传承 and 法本 each a small pill with a ring before the name,
   filled green once it is done. The site's box (style.css .done-check) said
   传承未完成 in so many words and was the widest thing in the bar; the name and
   the colour say it here, and the words are kept for a screen reader. The
   box itself is off-screen but focusable, so the keyboard still reaches it. */
.study .done-check {
  background-color: #fbfaf3;
  border: 1px solid #cfcfba;
  border-radius: 99px;
  color: #6f6f5e;
  font-size: 0.82em;
  gap: 6px;
  line-height: 1.7;
  padding: 1px 10px 1px 8px;
  position: relative;
}

/* The box lies over the whole chip, unseen: the chip is the box's target, and
   the box is still there for the keyboard and for a script that ticks it. */
.study .done-check input {
  appearance: none;
  cursor: pointer;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  /* Over the ring and the name, or they take the press. */
  z-index: 1;
}

.done-check__ring {
  border: 1.5px solid #a3a38e;
  border-radius: 50%;
  box-sizing: border-box;
  flex: none;
  height: 12px;
  position: relative;
  width: 12px;
}

.study .done-check:hover {
  border-color: #4a7c59;
  color: #3b6748;
}

.study .done-check:has(input:checked) {
  background-color: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}

.study .done-check:has(input:checked) .done-check__ring {
  background-color: #fff;
  border-color: #fff;
}

.study .done-check:has(input:checked) .done-check__ring::after {
  color: #4a7c59;
  content: "✓";
  font-size: 9px;
  font-weight: 700;
  left: 0;
  line-height: 10px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}

.study .done-check:has(input:focus-visible) {
  outline: 2px solid #1a5276;
  outline-offset: 2px;
}

.study .done-check:has(input:disabled) {
  opacity: 0.6;
}

/* What went wrong with a tick, beside its chip. Empty it is not drawn at all:
   as a flex item it took a gap of its own, and the two chips stood a gap and
   a half apart. */
.done-check__error {
  color: #a0322d;
  font-size: 0.8em;
}

.done-check__error:empty {
  display: none;
}

.study__channels summary {
  cursor: pointer;
  list-style: none;
}

.study__channels summary::-webkit-details-marker {
  display: none;
}

/* The way across to the other 辅导/讲法 courses, one word in the bar: a menu
   in the channel menu's shape when there are several, a plain link when one.
   The 课 it lands on sits at the row's end, in the menu's own green. */
.study__teachings--one {
  color: #47734f;
  padding: 2px 7px;
  text-decoration: none;
}

.study__teachings--one:hover,
.study__teachings--one:focus-visible {
  background: #e5eadf;
  border-radius: 5px;
}

.study__teachings-at {
  color: #7a8f7e;
  font-size: 0.9em;
}

/* The menus in the bar open over the rail's handles, which stand at z 80 in
   the paper's corner right under the bar's end. A row of the 参看 menu is a
   course's name and a 课's, and wraps rather than running under them. */
.study__channels .fb-video-choice__menu {
  max-width: min(26em, calc(100vw - 32px));
  min-width: min(20em, calc(100vw - 32px));
  width: max-content;
  /* Over the rail (80) and, on a narrow window, over the pinned player (800). */
  z-index: 940;
}

/* On a phone a menu hung from its own summary ran off one edge of the window
   or the other; it hangs from the bar instead, the bar's width, under it. */
.study__bar {
  position: relative;
}

@media screen and (max-width: 600px) {
  .study__channels.study__channels {
    position: static;
  }

  .study__channels .fb-video-choice__menu {
    left: 0;
    max-width: none;
    min-width: 0;
    right: 0;
    width: auto;
  }
}

.study__teachings .fb-video-choice__menu a {
  white-space: normal;
}

.study__teachings .study__teachings-at {
  white-space: nowrap;
}

/* The 参看 menu holds two kinds of thing, each under a small heading: the
   辅导 (or 讲记) rows, then the same text in the other stream. */
.study__teachings-group {
  color: #9a9a86;
  display: block;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  padding: 8px 12px 2px;
}

.study__teachings-group + .study__teachings-group,
.fb-video-choice__menu a + .study__teachings-group {
  border-top: 1px solid #e6e6d6;
  margin-top: 4px;
  padding-top: 8px;
}

/* The layout, three pictures of it in the bar: the auto margins either side,
   with the tools' own, put it midway between the trail and the tools. On every
   width: stacked, 只看法本 and 只看视频 are still the one half alone. */
.study__views {
  border: 1px solid #c9c9b4;
  border-radius: 6px;
  display: inline-flex;
  margin-left: auto;
  overflow: hidden;
}

.study__view {
  align-items: center;
  background: #f7f7f1;
  border: 0;
  border-left: 1px solid #c9c9b4;
  color: #6b6b5c;
  cursor: pointer;
  display: inline-flex;
  height: var(--bar-row, 30px);
  padding: 0 10px;
}

.study__view:first-child {
  border-left: 0;
}

.study__view:hover {
  background: #eeeee3;
  color: #33332c;
}

.study__view[aria-pressed="true"] {
  background: #4a7c59;
  color: #fff;
}

.study__view:focus-visible {
  outline: 2px solid #1a5276;
  outline-offset: -2px;
}

.study__view-icon {
  display: block;
}

/* The play mark is cut out of the video's box: the button's own ground shows
   through, whichever it is. */
.study__view-icon-play {
  fill: #f7f7f1;
}

.study__view:hover .study__view-icon-play {
  fill: #eeeee3;
}

.study__view[aria-pressed="true"] .study__view-icon-play {
  fill: #4a7c59;
}

.study__rail .study__unfold--media .study__view-icon-play {
  fill: #fffdf6;
}

/* The title, with the stream's chip beside it, on the left where the trail
   and the text begin: centred, it stood off the line everything else is on.
   On a text-only page the paper is a centred column narrower than the bar,
   and the head is drawn to that column so the title starts where the text
   does; on a video-only page, to the player's width. */
.study__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 16px 0 4px;
  text-align: left;
}

/* Anything else in the head - the 闻法要求 strip - takes a row of its own. */
.study__head > :not(.study__title, .study__meta) {
  flex-basis: 100%;
}

.study--text .study__head,
.study--audio .study__head {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--read-width, 100%);
  padding-left: 14px;
  padding-right: 14px;
}

.study--video .study__head {
  margin: 0 auto;
  max-width: min(1400px, calc((100vh - 260px) * 16 / 9));
}

.study__title {
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 1.45em;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
}

.study__meta {
  color: #8a7a6a;
  font-size: 0.88em;
  margin: 0;
}

/* Which stream this is, said once: the tick and the notebook behave
   differently under the two, and the reader should know which they are in. */
.study__stream {
  border: 1px solid;
  border-radius: 99px;
  font-size: 0.85em;
  padding: 0 8px;
}

.study__stream--systematic {
  border-color: #9fb8c8;
  color: #1a5276;
}

.study__stream--free {
  border-color: #a8c4b0;
  color: #4a7c59;
}

/* The way across to the other stream, in the meta line's own grey: as a blue
   link it pulled the eye off the title on every page. A dotted rule says it
   can be pressed; the colour comes on under the pointer. */
.study__cross {
  color: #8a7a6a;
  text-decoration: underline dotted #c9bfae;
  text-underline-offset: 3px;
}

.study__cross:hover,
.study__cross:focus-visible {
  color: #1a5276;
  text-decoration-color: currentColor;
}

.study__stage {
  margin-top: 10px;
}

.study__nav {
  margin-top: 18px;
}

/* The line under the player, study-video.js's: 上次看到 12:40，接着看; 这一课的
   视频快看完了 with the tick beside it. One line, in the meta grey, the action
   a small pill in the site's green. */
.study__hint {
  align-items: center;
  animation: study-hint-in 0.25s ease-out;
  background: #f3f7f1;
  border: 1px solid #cfdccc;
  border-left: 4px solid #4a7c59;
  border-radius: 8px;
  color: #33423a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.92em;
  gap: 8px 12px;
  line-height: 1.4;
  margin: 10px 0 0;
  padding: 10px 12px 10px 14px;
}

/* What the line is about, at its head: the clock for a place to pick up at,
   the tick for a lesson nearly done. */
.study__hint::before {
  content: "⏱";
  flex: none;
  font-size: 1.1em;
}

.study__hint[data-hint-kind="done"]::before {
  content: "✓";
  background: #4a7c59;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  width: 1.6em;
}

.study__hint-text {
  flex: 1 1 12em;
}

.study__hint-action {
  background: #4a7c59;
  border: 0;
  border-radius: 99px;
  box-shadow: 0 1px 3px rgba(35, 70, 45, 0.25);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 5px 14px;
  white-space: nowrap;
}

.study__hint-action:hover,
.study__hint-action:focus-visible {
  background: #3b6748;
  outline: none;
}

.study__hint-action:focus-visible {
  box-shadow: 0 0 0 3px #c7dccb;
}

/* The reader has read it: a small × puts the line away. */
.study__hint-dismiss {
  background: none;
  border: 0;
  border-radius: 50%;
  color: #8a7a6a;
  cursor: pointer;
  font-size: 1.1em;
  height: 28px;
  line-height: 1;
  padding: 0;
  width: 28px;
}

.study__hint-dismiss:hover,
.study__hint-dismiss:focus-visible {
  background: #e3ebe0;
  color: #33423a;
  outline: none;
}

@keyframes study-hint-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .study__hint {
    animation: none;
  }
}

/* Under the player, the 课 before, this one and the 课 after, and the way to
   the rest (the drawer). Only where the video is a column of its own: the
   column was empty under the player for the length of the text. */
.study__around {
  display: none;
  flex-direction: column;
  font-size: 0.9em;
  gap: 1px;
  margin-top: 14px;
}

@media screen and (min-width: 1100px) {
  .study--both .study__around {
    display: flex;
  }
}

.study__around-step {
  align-items: baseline;
  border-radius: 6px;
  color: #4a7c59;
  display: flex;
  gap: 10px;
  padding: 5px 10px;
  text-decoration: none;
}

a.study__around-step:hover .study__around-t {
  text-decoration: underline;
}

.study__around-step.is-here {
  background-color: var(--read-paper, #fbf8f1);
  color: #33332c;
  font-weight: 600;
}

.study__around-n {
  color: #9a9a86;
  flex: none;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  min-width: 2em;
  text-align: right;
}

.study__around-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study__around-all {
  align-self: flex-start;
  background: none;
  border: 0;
  color: #4a7c59;
  cursor: pointer;
  font: inherit;
  font-size: 0.9em;
  margin-left: calc(2em + 10px);
  padding: 4px 10px;
}

.study__around-all:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------ only the text: the reader */
.study--text .fb-read {
  padding-bottom: 0;
}

/* ------------------------------------------------------ only the video: the player */
.study--video .study__media {
  margin: 0 auto;
  max-width: min(1400px, calc((100vh - 260px) * 16 / 9));
}

/* ---------------------------------------------------- the recordings: a row of players
   The shared player (audio-player.css) in a row of its own. Under the video it
   is one more thing in that column. With no video it is the head of the paper,
   the paper's width and colour, and it pins to the top of the window while the
   text scrolls, so the controls stay in reach the way the video column does. */
.study__media .study__audio {
  margin-top: 12px;
}

.study--text .study__audio,
.study--audio .study__audio {
  background-color: var(--read-paper, #fbf8f1);
  border-bottom: 1px solid #e8e3d2;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--read-width, 100%);
  padding: 10px 14px 12px;
}

.study--text .study__audio {
  /* Not a scroll anchor: the row folds as the reader scrolls into the text
     (study-audio.js), and a browser anchoring the scroll to a player that
     has just been folded away pulled the page back to the top. */
  overflow-anchor: none;
  position: sticky;
  top: 64px;
  z-index: 3;
}

/* Once the site bar has folded away (navbar.js) the row takes its place at the
   top of the window, and leaves the corner to the bar's knob: the paper is
   92vw wide, so its top-right corner is under the knob at every width. */
html.nav-folded .study--text .study__audio {
  padding-right: 60px;
  top: 0;
}

/* Pinned over the text, the row is as short as it can be: 主讲 / 答疑 and the
   length say which is which, and the file's name - the same date and title
   three times over - is left to the 课程 page. */
.study--text .study__audio .audio-rec__title {
  display: none;
}

.study--text .study__audio .audio-rec-list {
  gap: 8px;
}

.study--text .study__audio .audio-rec__head {
  margin-bottom: 2px;
}

.study--text .study__audio .audio-rec__tools {
  margin-top: 2px;
}

/* Pinned and scrolled into the text (study-audio.js): the current recording's
   controls and nothing else. */
.study--text .study__audio.is-folded {
  box-shadow: 0 6px 16px -10px rgba(40, 30, 10, 0.35);
}

.study--text .study__audio.is-folded .audio-rec:not(.is-current),
.study--text .study__audio.is-folded .audio-rec__tools {
  display: none;
}

/* A 课 that is only recordings: the row has the window, the notebook opens
   beside it as beside a video (below, with .study--video). */
.study--audio .study__audio {
  border-bottom: 0;
  border-radius: 8px;
}

/* --------------------------------------------------------- both: video beside text */
@media screen and (min-width: 1100px) {
  .study--both .study__stage {
    align-items: start;
    display: grid;
    gap: 22px;
    /* Two fifths to the player: the text is what is read for the hour, and
       at 44% the video column was the wider of the two on a laptop. */
    grid-template-columns: minmax(360px, 40%) minmax(0, 1fr);
  }

  /* Beside a player the paper's own frame (faben_read.css) drew a second box
     next to the video's black one; the paper's tone marks it out enough. */
  .study--both .fb-read__body {
    border-color: transparent;
  }

  /* The player stays in view while the text scrolls under the reader's eye;
     the top offset is the site bar's height. */
  .study--both .study__media {
    position: sticky;
    top: 64px;
  }

  /* The bar's height too, once the bar has folded away (navbar.js). */
  html.nav-folded .study--both .study__media {
    top: 0;
  }

  .study--both .fb-read__workspace {
    margin-top: 0;
    position: relative;
  }

  /* The 高亮/阅读进度 strip sat above the text and pushed it down a whole row
     beside a video that starts at the top. Here it is tucked into the paper's
     own top-right corner, over the padding above the first line. */
  .study--both:not([data-study-view="text"]) .fb-resume {
    /* One line: the quote gives way (it is clipped with an ellipsis anyway)
       rather than 移除 wrapping under it, which made the strip two lines tall
       and had it hang over the heading's row. */
    flex-wrap: nowrap;
    /* The paper's width, less a margin either side: at 60% the quote was cut
       to a few words. */
    left: 14px;
    margin: 0;
    padding: 3px 10px;
    position: absolute;
    right: 14px;
    top: 8px;
    z-index: 2;
  }

  .study--both:not([data-study-view="text"]) .fb-resume__drop {
    white-space: nowrap;
  }

  /* The paper's own padding above the first line is 26px, and the strip is
     taller than that: over a centred heading it covered the heading's top.
     With the strip showing, the paper opens with room for it. */
  .study--both:not([data-study-view="text"])
    .fb-resume:not([hidden]):has(> .fb-resume__place:not([hidden]))
    ~ .fb-read__body {
    padding-top: 58px;
  }
}

/* The notebook is a desk in the same row as what it is about, whichever half
   has the window: it opens level with the top of the paper or the player and
   sticks there as the page scrolls, the way the reader's own docked desk does
   (faben_read.css, notes.css). It used to stand fixed at the window's edge
   in the two views with a video, level with nothing.

   并排: the video column gives up some of its share and the text column holds
   the paper and the desk side by side, as the reader does. 只看视频: the text
   column is the desk alone, beside the player. 只看法本 is the reader's own
   layout untouched. */
@media screen and (min-width: 1280px) {
  html.note-is-open
    .study--both:not([data-study-view="text"]):not([data-study-view="video"])
    .study__stage {
    grid-template-columns: minmax(300px, 30%) minmax(0, 1fr);
  }

  html.note-is-open .study--both[data-study-view="video"] .study__stage {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 400px);
  }

  /* As a grid item the player's auto margins would size it to its content,
     and a 16:9 box drawn from padding has none: it shrank to nothing. The
     column is its width, up to the same cap. */
  html.note-is-open .study--both[data-study-view="video"] .study__media,
  html.note-is-open .study--video .study__media {
    margin: 0;
    width: 100%;
  }

  .study--both[data-study-view="video"] .fb-read__workspace.is-note-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .study--both[data-study-view="video"]
    .fb-read__workspace
    .note-panel--read[data-note-docked="1"] {
    grid-column: 1;
    grid-row: auto;
  }

  /* The 阅读进度 strip is tucked into the paper's corner (above); with the desk
     open that corner is the desk's width further left. */
  .study--both:not([data-study-view="text"]) .fb-read__workspace.is-note-open .fb-resume {
    right: calc(clamp(340px, 26vw, 400px) + 32px);
  }
}

/* ------------------------------------------- one half at a time, by the reader's choice
   The attribute is study.js's; the handles on the page set it and the browser
   remembers it. Two chevrons stand at the top of the line between the halves:
   ‹ puts the video away, and a ▶ joins the handles on the rail to bring it
   back; › folds the paper to a tab down the right side, which opens it again. 只看法本
   leaves the page the reader's shape and the notebook docks as it does on the
   reader; 只看视频 keeps the notebook reachable - it is the text column's - and
   hides the rest of that column. Stacked, on a narrower window, the switch in
   the bar is the only handle: the chevrons and the tab are the split's. */
.study__split,
.study__unfold.study__unfold {
  display: none;
}

.study--both[data-study-view="text"] .study__media,
.study--both[data-study-view="video"] .fb-read__workspace > :not(.note-panel) {
  display: none;
}

/* No text to size: the buttons go, but not their room, or the switch in the
   middle of the bar would move under the pointer that pressed it. */
.study--both[data-study-view="video"] .fb-textsize {
  visibility: hidden;
}

/* ‹, or the bar: the video away, and the page the reader's shape; the ▶ on
   the rail is the way back. */
.study--both[data-study-view="text"] .study__rail .study__unfold--media {
  color: #4a7c59;
  display: inline-flex;
  order: 8;
}

/* Stacked, with the paper away, the handles that were at its corner stand in
   a row under the video instead of over the 课 cards below. */
@media screen and (max-width: 1099px) {
  .study--both[data-study-view="video"] .study__rail {
    flex-direction: row;
    height: auto;
    justify-content: flex-end;
    margin: 10px 0 0;
    position: static;
    width: auto;
  }
}

@media screen and (min-width: 1100px) {
  .study--both:not([data-study-view="text"]):not([data-study-view="video"]) .study__split {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* The gap between the columns is 22px; the chevrons fill it, at the top. */
    right: -22px;
    top: 0;
    width: 22px;
    z-index: 3;
  }

  .study__split-b {
    background: none;
    border: 0;
    border-radius: 4px;
    color: #b0b09a;
    cursor: pointer;
    font: inherit;
    font-size: 1.25em;
    height: 22px;
    line-height: 22px;
    padding: 0;
    width: 22px;
  }

  .study__split-b:hover,
  .study__split-b:focus-visible {
    background-color: #eeeee3;
    color: #4a7c59;
  }

  .study__split-b:focus-visible {
    outline: 2px solid #1a5276;
    outline-offset: -2px;
  }

  .study--both[data-study-view="text"] .study__stage {
    display: block;
  }

  /* ›: the paper away, and the video with the room, as wide as the window's
     height allows. The paper's column is the rail's handles alone, sticky as
     one, and a 法本 tab stands where the chevrons did, in the gap at the
     video's corner. With the notebook open the column is the desk's and the
     handles are away, as on the reader; the tab stays. */
  .study--both[data-study-view="video"] .study__stage {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  html:not(.note-is-open) .study--both[data-study-view="video"] .study__text {
    position: sticky;
    top: 72px;
  }

  .study--both[data-study-view="video"] .study__rail {
    height: auto;
    margin: 0;
    position: static;
  }

  html.note-is-open .study--both[data-study-view="video"] .study__rail {
    display: none;
  }

  .study--both[data-study-view="video"] .study__unfold--text {
    align-items: center;
    background: #fffdf6;
    border: 1px solid #d2c6ac;
    border-radius: 6px;
    color: #4a7c59;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: -22px;
    top: 0;
    width: 22px;
    z-index: 3;
  }

  .study--both[data-study-view="video"] .study__unfold--text .study__view-icon {
    transform: rotate(90deg);
  }

  .study--both[data-study-view="video"] .study__unfold--text:hover {
    background: #f1eee2;
  }

  .study--both[data-study-view="video"] .study__media {
    /* The colour is the pinned strip's, on a narrow window (below); here the
       box is not pinned, and with the rail's row above the player it showed as
       a band over the picture's top. */
    background-color: transparent;
    /* Centred as a grid item: auto margins would size it to its content, and
       a 16:9 box drawn from padding has none. */
    justify-self: center;
    margin: 0;
    max-width: min(1400px, calc((100vh - 260px) * 16 / 9));
    /* Not stuck, as beside the paper; still positioned, for the tab. */
    position: relative;
    top: 0;
    width: 100%;
  }

  .study--both[data-study-view="video"] .study__player.is-compact {
    box-shadow: none;
    position: static;
    width: auto;
  }

  /* With the text away there is nothing to highlight and no place to go back
     to: only 学习笔记 stays on the rail. */
  .study--both[data-study-view="video"] .study__rail .fb-marks-fab.fb-marks-fab.fb-marks-fab,
  .study--both[data-study-view="video"] .study__rail .study-fab--jump,
  .study--both[data-study-view="video"] .study__return {
    display: none;
  }
}

/* A lesson that is only a recording: the notebook opens beside the player, in
   a column of its own, and the video takes what is left rather than being
   covered. The docked panel's own rules (notes.css) make it a desk the height
   of the window; under 1280px it is that stylesheet's bottom sheet. */
@media screen and (min-width: 1280px) {
  html.note-is-open .study--video .study__stage,
  html.note-is-open .study--audio .study__stage {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 400px);
  }
}

/* --------------------------------------------------------------- the rail at the corner
   学习笔记, 🖍 高亮笔记 and 🔖 阅读进度 stand in one rail at the paper's
   top-right corner, and the rail sticks there as the text scrolls. study.js
   moves the readers' own floating handles (notes.css .note-fab, faben_read.css
   .fb-marks-fab) into it, so they keep their scripts and lose their fixed
   places at the window's edge - which on a wide window is a long way from the
   text. Zero height, so the paper starts where it did. The strip above the
   text keeps 阅读进度's quote and goes when that goes. The stacked class names
   outweigh the readers' `body:has(...)` placements without !important.

   The playlist player (play_yt_video.html) loads this sheet for the rail alone,
   at its video's corner with 学习笔记 in it. */
.study .fb-resume__marks {
  display: none;
}

.study .fb-resume:has(> .fb-resume__place[hidden]) {
  display: none;
}

.study__rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 0;
  margin-left: auto;
  /* Into the gutter beside the paper: its left edge 8px off the paper's right. */
  margin-right: -52px;
  position: sticky;
  top: 72px;
  width: 44px;
  z-index: 80;
}

.study__rail .note-fab.note-fab.note-fab,
.study__rail .fb-marks-fab.fb-marks-fab.fb-marks-fab,
.study__rail .study-fab,
.study__rail [data-drawer-fab] {
  --fab-shift: 0px;
  bottom: auto;
  /* The rail has no height to give; without this the circles shrink to their text. */
  flex: none;
  left: auto;
  position: static;
  right: auto;
  top: auto;
}

/* The drawer's ☰ (lesson_drawer.html and the other drawers' own), the same
   circle as the rest once it is here, and last: the way to the other 课 is
   wanted after the reading, not during it. */
.study__rail [data-drawer-fab] {
  background-color: #fffdf6;
  border: 1px solid #d2c6ac;
  box-shadow: 0 3px 14px rgba(78, 13, 13, 0.16);
  height: 44px;
  margin: 0;
  order: 9;
  width: 44px;
}

.study__rail .note-fab[hidden],
.study__rail .fb-marks-fab[hidden],
.study__rail .study-fab[hidden] {
  display: none;
}

/* A guest's ✎ on the rail, where a reader's notebook handle stands: pressed,
   a line on what signing in adds and the way to it. Grey, so it does not ask
   to be pressed. */
.study__guest {
  position: relative;
}

.study__guest > summary {
  color: #a3a38e;
  list-style: none;
}

.study__guest > summary::-webkit-details-marker {
  display: none;
}

.study__guest[open] > summary {
  border-color: #a3a38e;
  color: #6f6f5e;
}

.study__guest-pop {
  background-color: #fffdf6;
  border: 1px solid #d2c6ac;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(78, 13, 13, 0.16);
  color: #5a5a4e;
  font-size: 0.86em;
  line-height: 1.5;
  padding: 10px 14px;
  position: absolute;
  right: 52px;
  top: 0;
  width: 15em;
  z-index: 2;
}

.study__guest-pop p {
  margin: 0 0 6px;
}

.study__guest-pop a {
  color: #4a7c59;
  font-weight: 600;
}

/* The notebook stands where the rail does; while it is open its own close
   button is the handle, and the rail's would sit on the panel's edge. */
body:has(#notebook:not([hidden])) .study__rail .note-fab.note-fab.note-fab,
body:has(#notebook:not([hidden])) .study__rail .study-fab {
  display: none;
}

.study-fab {
  align-items: center;
  background-color: #fffdf6;
  border: 1px solid #d2c6ac;
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(78, 13, 13, 0.16);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.1em;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

/* The map's handle: the bar's ✦ hollowed out so it sits quietly on the rail, lit
   while the map is open. */
.study-fab--map {
  color: #6b5b2e;
  font-size: 1.2em;
}

.study-fab--map[aria-expanded="true"] {
  background-color: #6b5b2e;
  border-color: #6b5b2e;
  color: #fff;
}

.study-fab:focus-visible {
  outline: 2px solid #be7123;
  outline-offset: 2px;
}

/* Room for the rail beside the paper, so the handles stand in a gutter of their
   own rather than over the last characters of every line. */
@media screen and (min-width: 1100px) {
  .study {
    padding-right: 84px;
  }
}

/* The rail's knob: on a wide window there is none to see. */
.study__rail-knob {
  display: none;
}

/* One column: the paper runs to the window's edge and the folded video has the
   top-right corner, so the rail sits over the paper's edge, under the video -
   folded to one small, half-clear knob, so that a column of circles does not
   stand on the text; the handles come out on a tap (study.js). With the paper
   away there is nothing under them, and they stand in a row under the video
   (above). */
@media screen and (max-width: 1099px) {
  .study__rail {
    margin-right: 0;
  }

  .study__text .study__rail-knob {
    background-color: rgba(255, 253, 246, 0.8);
    border: 1px solid rgba(210, 198, 172, 0.8);
    border-radius: 999px;
    color: #6b6b5c;
    cursor: pointer;
    display: inline-flex;
    flex: none;
    font-size: 1.1em;
    height: 34px;
    justify-content: center;
    line-height: 1;
    margin-left: auto;
    padding: 0;
    width: 34px;
  }

  .study__text .study__rail-knob[aria-expanded="true"] {
    background-color: #4a7c59;
    border-color: #4a7c59;
    color: #fff;
  }

  .study__text .study__rail-knob:focus-visible {
    outline: 2px solid #be7123;
    outline-offset: 2px;
  }

  .study:not([data-study-view="video"])
    .study__text
    .study__rail:not(.is-open)
    > :not(.study__rail-knob) {
    display: none;
  }

  /* Open, the handles come out in a row to the knob's left, along the one
     line it already stands on, not down the edge of the text. */
  .study__text .study__rail.is-open {
    align-items: center;
    flex-direction: row-reverse;
    width: auto;
  }

  .study__text .study__rail.is-open .study__rail-knob {
    margin-left: 0;
  }

  /* In the row the ✎ note has no room to its left: it hangs under the handle,
     at the right edge. */
  .study__text .study__rail.is-open .study__guest-pop {
    right: 0;
    top: 52px;
  }

  .study--both[data-study-view="video"] .study__text .study__rail-knob {
    display: none;
  }

  /* At the video's corner there is no gutter to stand in, and the handle sat
     on the picture, over the player's own buttons. A row above the player
     instead, the handle at its right; the player is at the top of the stage
     with nothing to scroll past, so the row need not stick. */
  .study__media .study__rail,
  .study__audio .study__rail {
    flex-direction: row;
    height: auto;
    justify-content: flex-end;
    margin-bottom: 8px;
    position: static;
    width: auto;
  }

  .study__media .study__rail:empty,
  .study__audio .study__rail:empty {
    margin-bottom: 0;
  }
}

/* One column. The video is at the top and pins there; once the reader has
   scrolled well past it, study.js folds it to a small window in the corner so
   the text has the screen and the sound keeps going. */
@media screen and (max-width: 1099px) {
  .study--both .study__media {
    background-color: #f4f4ee;
    position: sticky;
    top: 0;
    z-index: 800;
  }

  .study--both .study__media.is-folded {
    position: static;
  }

  /* At the foot of the window, on the right, the way a picture-in-picture
     goes: at the top it sat over the first lines of whatever the reader had
     scrolled to and over the rail's handles. Above 跟读's way back (bottom
     24px) and clear of the drawer's scrim. */
  .study--both .study__player.is-compact {
    border-radius: 8px;
    bottom: 84px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    position: fixed;
    right: 8px;
    width: min(42vw, 280px);
    z-index: 900;
  }
}

/* Between a phone and the split: the two halves stacked, the player no wider
   than a large one - at the window's full width it was 560px tall on a laptop
   the split does not fit, and the text began a screen down. */
@media screen and (min-width: 700px) and (max-width: 1099px) {
  .study--both .study__media {
    margin: 0 auto;
    max-width: 720px;
  }
}

/* A phone: the paper and the player run to the window's edges, and the frame
   the paper had goes with the two 10px gutters - a line of text gets four
   characters back. The bar, the head and the cards keep a gutter. */
@media screen and (max-width: 600px) {
  .study {
    padding-left: 0;
    padding-right: 0;
  }

  .study__bar,
  .study__head,
  .study__nav,
  .study__hint {
    margin-left: 10px;
    margin-right: 10px;
  }

  .study--text .fb-read,
  .study--text .study__head,
  .study--audio .study__head {
    padding-left: 0;
    padding-right: 0;
  }

  .study .fb-read__body {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
  }

  .study .fb-read__workspace > :not(.fb-read__body, .note-panel) {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* One row of tools, closer set: the step on is on the card at the foot and
     in the drawer, and here it pushed the done chips onto a third line. */
  .study__tools {
    gap: 6px 8px;
  }

  .study .done-check {
    padding: 1px 8px 1px 7px;
  }

  /* The way out to YouTube is on the player itself; the step on is on the
     card at the foot and in the drawer. */
  .study__next,
  .study__tools .play-head__watch {
    display: none;
  }
}

/* 跟读 (study-follow.js). The paragraph being spoken, its time beside every
   aligned paragraph, and the way back once the reader has scrolled away. */
.fb-u--now {
  background-color: rgba(74, 124, 89, 0.11);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.study__timed {
  position: relative;
}

.study__seek {
  background-color: #f3f7f1;
  border: 1px solid #cfdccc;
  border-radius: 999px;
  color: #4a7c59;
  cursor: pointer;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68em;
  line-height: 1.4;
  opacity: 0;
  padding: 0 7px;
  position: absolute;
  right: 0;
  top: -1.1em;
  transition: opacity 0.15s;
  z-index: 2;
}

.study__seek::before {
  content: "▶ ";
  font-size: 0.8em;
}

.study__timed:hover > .study__seek,
.study__seek:focus-visible,
.study__timed:has(> .fb-u--now) > .study__seek {
  opacity: 1;
}

.study__seek:hover {
  background-color: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}

.study__seek:focus-visible {
  outline: 2px solid #c7dccb;
  outline-offset: 1px;
}

.study__return {
  background-color: #4a7c59;
  border: 0;
  border-radius: 999px;
  bottom: 24px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  color: #fff;
  cursor: pointer;
  font-size: 0.95em;
  left: 50%;
  padding: 9px 18px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 950;
}

.study__return::before {
  content: "↕ ";
}

.study__return:hover {
  background-color: #3b6748;
}

.study__return:focus-visible {
  outline: 2px solid #c7dccb;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fb-u--now,
  .study__seek {
    transition: none;
  }
}

/* The AI drawer: a 思维导图 from the right edge, on drawer.js's contract
   (data-drawer-root, is-drawer-open). Its way in is the handle on the rail;
   the chip in the bar appears only for a draft, so the 技术助理 sees there is
   one to review. It wears a small AI mark so nobody takes the tree for the
   上师's own 科判. */
.study-ai__open {
  background: #f3f0e6;
  border: 1px solid #d8d2be;
  border-radius: 5px;
  color: #6b5b2e;
  cursor: pointer;
  font: inherit;
  font-size: 0.85em;
  line-height: calc(var(--bar-row, 30px) - 2px);
  padding: 0 8px 0 24px;
  position: relative;
}

.study-ai__open::before {
  color: #a08a4a;
  content: "✦";
  font-size: 0.85em;
  left: 8px;
  position: absolute;
  top: 0;
}

.study-ai__open:hover,
.study-ai__open:focus-visible,
.study-ai__open[aria-expanded="true"] {
  background: #e9e3d0;
  border-color: #c2b78f;
}

.study-ai__open--draft {
  border-style: dashed;
}

/* Above the folded video (z-index 900 on a narrow window), which otherwise
   floats over the tree. */
.study-ai {
  inset: 0;
  position: fixed;
  visibility: hidden;
  z-index: 950;
}

.study-ai.is-drawer-open {
  visibility: visible;
}

.study-ai__scrim {
  background: rgba(40, 36, 20, 0.28);
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.2s;
}

.study-ai.is-drawer-open .study-ai__scrim {
  opacity: 1;
}

.study-ai__panel {
  background: #fbfaf3;
  border-left: 1px solid #d9d9c6;
  bottom: 0;
  box-shadow: -2px 0 14px rgba(78, 60, 13, 0.14);
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  overflow-y: auto;
  padding: 0 0 24px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.2s;
  width: 420px;
}

.study-ai.is-drawer-open .study-ai__panel {
  transform: translateX(0);
}

.study-ai__head {
  align-items: center;
  border-bottom: 1px solid #e3e0cf;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 12px 16px 10px;
  position: sticky;
  top: 0;
  background: #fbfaf3;
  z-index: 1;
}

.study-ai__controls {
  align-items: center;
  display: flex;
  gap: 4px;
}

.study-ai__fold-all {
  background: none;
  border: 1px solid #d9d9c6;
  border-radius: 12px;
  color: #6b5b2e;
  cursor: pointer;
  font: inherit;
  font-size: 0.8em;
  padding: 2px 10px;
}

.study-ai__fold-all:hover {
  background: #f3efdf;
}

.study-ai__title {
  font-weight: 600;
}

.study-ai__badge {
  background: #efe9d3;
  border-radius: 10px;
  color: #6b5b2e;
  font-size: 0.75em;
  margin-left: 6px;
  padding: 1px 8px;
}

.study-ai__close {
  background: none;
  border: 0;
  color: #6b6b5a;
  cursor: pointer;
  font-size: 1.4em;
  line-height: 1;
  padding: 0 4px;
}

.study-ai__note {
  border-top: 1px solid #ecead9;
  color: #9a957f;
  font-size: 0.78em;
  margin: 12px 16px 0;
  padding-top: 10px;
}

/* The 技术助理's decision on a draft, under the note. */
.study-ai__review {
  background: #f3efdf;
  border-radius: 8px;
  font-size: 0.85em;
  margin: 8px 16px;
  padding: 10px 12px;
}

.study-ai__verdict {
  color: #4e3c0d;
  margin: 0 0 6px;
}

.study-ai__problems {
  color: #7a5a1e;
  margin: 0 0 8px;
  padding-left: 18px;
}

.study-ai__problems li {
  margin-bottom: 4px;
}

.study-ai__decide {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.study-ai__approve,
.study-ai__delete {
  border: 1px solid #b9a86a;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  padding: 4px 12px;
}

.study-ai__approve {
  background: #6b5b2e;
  border-color: #6b5b2e;
  color: #fff;
}

.study-ai__all {
  color: #6b5b2e;
  margin-left: auto;
}

/* The list of drafts waiting (study/ai_drafts.html): courses as sections,
   one row a draft, the verdict first. */
.drafts {
  margin: 0 auto;
  max-width: 1100px;
  padding: 16px;
}

.drafts__head {
  margin-bottom: 20px;
}

.drafts__title {
  margin: 0 0 10px;
}

.drafts__filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.drafts__filter {
  border: 1px solid #d9d9c6;
  border-radius: 14px;
  color: #4e3c0d;
  padding: 3px 12px;
  text-decoration: none;
}

.drafts__filter.is-on {
  background: #6b5b2e;
  border-color: #6b5b2e;
  color: #fff;
}

.drafts__spent {
  color: #7a7767;
  margin-left: auto;
}

/* Approved maps 生产 has not confirmed, above the piles of drafts. */
.drafts__pushlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drafts__push {
  align-items: baseline;
  border-top: 1px solid #ebe6d6;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 8px 4px;
}

.drafts__push-note {
  color: #8a8270;
  font-size: 0.85em;
}

.drafts__push-note--said {
  color: #a0522d;
}

.drafts__lead {
  color: #7a7767;
  font-size: 0.9em;
  margin: 10px 0 0;
}

.drafts__course {
  background: #fbfaf3;
  border: 1px solid #e3e0cf;
  border-radius: 10px;
  margin-bottom: 20px;
}

.drafts__course-head {
  align-items: center;
  border-bottom: 1px solid #e3e0cf;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 12px 16px;
}

.drafts__course-title {
  font-size: 1.1em;
  margin: 0;
}

.drafts__count {
  color: #7a7767;
  font-size: 0.8em;
  font-weight: normal;
  margin-left: 8px;
}

.drafts__bulk {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.drafts__pick-all {
  color: #4e3c0d;
  font-size: 0.9em;
}

.drafts__btn {
  background: #fff;
  border: 1px solid #b9a86a;
  border-radius: 6px;
  color: #4e3c0d;
  cursor: pointer;
  font: inherit;
  font-size: 0.9em;
  padding: 4px 12px;
}

.drafts__btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.drafts__btn--approve:not(:disabled) {
  background: #6b5b2e;
  border-color: #6b5b2e;
  color: #fff;
}

.drafts__btn--delete:not(:disabled) {
  border-color: #b06a5a;
  color: #8a3f31;
}

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

.drafts__row {
  align-items: flex-start;
  border-bottom: 1px solid #ecead9;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.drafts__row:last-child {
  border-bottom: 0;
}

.drafts__row--stale .drafts__main {
  color: #9a968a;
}

.drafts__pick {
  padding-top: 3px;
}

.drafts__main {
  flex: 1;
  min-width: 0;
}

.drafts__line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.drafts__state {
  border-radius: 10px;
  font-size: 0.78em;
  padding: 1px 9px;
  white-space: nowrap;
}

.drafts__state--passed {
  background: #dfe9d2;
  color: #375224;
}

.drafts__state--hand {
  background: #dde6ee;
  color: #2f4a63;
}

.drafts__state--failed {
  background: #f3dfcf;
  color: #7a4a1e;
}

.drafts__state--over {
  background: #efe9d3;
  color: #6b5b2e;
}

.drafts__state--stale {
  background: #e6e4dc;
  color: #6f6c62;
}

.drafts__lesson {
  font-weight: 600;
}

.drafts__meta {
  color: #7a7767;
  font-size: 0.82em;
}

.drafts__problem {
  color: #7a4a1e;
  font-size: 0.9em;
  margin: 6px 0 0;
}

.drafts__more {
  font-size: 0.9em;
  margin-top: 6px;
}

.drafts__more summary {
  color: #6b5b2e;
  cursor: pointer;
}

.drafts__objections {
  background: #f8f1e4;
  border-radius: 6px;
  color: #7a4a1e;
  margin: 8px 0;
  padding: 8px 8px 8px 26px;
}

.drafts__objections li {
  margin-bottom: 4px;
}

.drafts__tree,
.drafts__tree ul {
  list-style: none;
  margin: 6px 0 0;
  padding-left: 18px;
}

.drafts__tree {
  padding-left: 0;
}

.drafts__node {
  margin: 3px 0;
}

.drafts__units {
  color: #a39f8f;
  font-size: 0.8em;
  margin-left: 6px;
}

.drafts__one {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.drafts__empty {
  color: #7a7767;
}

@media (max-width: 600px) {
  .drafts__row {
    flex-wrap: wrap;
  }

  .drafts__one {
    margin-left: 30px;
    width: 100%;
  }
}

.study-ai__tree {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
}

.study-ai__tree--root {
  padding: 8px 12px 0;
}

.study-ai__node {
  margin: 0;
  padding: 0;
}

.study-ai__node.is-folded > .study-ai__tree {
  display: none;
}

.study-ai__row {
  align-items: baseline;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  padding: 4px 6px 4px 2px;
}

.study-ai__row:hover {
  background: #f3efdf;
}

/* The map's own guide lines: a branch's children hang off one line. */
.study-ai__tree .study-ai__tree {
  border-left: 1px solid #e1dcc4;
  margin-left: 9px;
  padding-left: 12px;
}

.study-ai__fold,
.study-ai__leaf {
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.study-ai__fold {
  background: none;
  border: 0;
  color: #9a957f;
  cursor: pointer;
  padding: 0;
  position: relative;
  top: 2px;
}

.study-ai__fold::before {
  border-color: transparent transparent transparent currentColor;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  content: "";
  display: block;
  margin: 0 auto;
  transform: rotate(90deg);
  transition: transform 0.15s;
}

.is-folded > .study-ai__row > .study-ai__fold::before {
  transform: rotate(0);
}

.study-ai__leaf::before {
  background: #d9d3b8;
  border-radius: 50%;
  content: "";
  display: block;
  height: 5px;
  margin: 6px auto 0;
  width: 5px;
}

.study-ai__link {
  color: #3a3a2e;
  text-decoration: none;
}

.study-ai__tree--root > .study-ai__node > .study-ai__row > .study-ai__link {
  font-size: 1.05em;
  font-weight: 600;
}

.study-ai__tree--root
  > .study-ai__node
  > .study-ai__tree
  > .study-ai__node
  > .study-ai__row
  > .study-ai__link {
  font-weight: 600;
}

.study-ai__link:hover,
.study-ai__link:focus-visible {
  color: #1f5f6b;
  text-decoration: underline;
}

.study-ai__span {
  color: #b0ab96;
  font-size: 0.72em;
  white-space: nowrap;
}

/* Where the reader is: the node covering the paragraph under their eye, and
   the branch it is in. */
.study-ai__node.is-current > .study-ai__row {
  background: #ead9b0;
}

.study-ai__node.is-current > .study-ai__row > .study-ai__link {
  color: #3d2c07;
}

.study-ai__node.is-current-branch > .study-ai__row > .study-ai__link {
  color: #6b5b2e;
}

.study-ai__node.is-current-branch > .study-ai__row > .study-ai__fold {
  color: #6b5b2e;
}

/* On a wide window the map is a column beside the page, not a sheet over it:
   no scrim, the page makes room, and a jump leaves it open. */
@media screen and (min-width: 1280px) {
  .study-ai {
    inset: 0 0 0 auto;
    width: 380px;
  }

  .study-ai__scrim {
    display: none;
  }

  .study-ai__panel {
    box-shadow: none;
    max-width: none;
    width: 380px;
  }

  /* The panel's width plus the rail's gutter, so the handles beside the paper
     stay clear of the panel's edge. */
  html.mindmap-is-open .study {
    max-width: none;
    padding-right: 444px;
  }

  html.mindmap-is-open
    .study--both:not([data-study-view="text"]):not([data-study-view="video"])
    .study__stage {
    grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .study-ai__fold::before {
    transition: none;
  }
}