/* 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;
  max-width: min(1500px, 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;
}

.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;
}

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

/* What went wrong with a tick, beside its box. Empty it is not drawn at all:
   as a flex item it took a gap of its own, and the two boxes 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 reader's say over the split, three buttons in the bar. */
.study__views {
  border: 1px solid #c9c9b4;
  border-radius: 6px;
  display: inline-flex;
  overflow: hidden;
}

.study__view {
  background: #f7f7f1;
  border: 0;
  border-left: 1px solid #c9c9b4;
  color: #5a5a4e;
  cursor: pointer;
  font: inherit;
  font-size: 0.85em;
  line-height: var(--bar-row, 30px);
  padding: 0 9px;
}

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

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

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

.study__head {
  padding: 14px 0 6px;
  text-align: center;
}

.study__title {
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 1.45em;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 4px;
  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;
}

/* ------------------------------------------------------ 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));
}

/* --------------------------------------------------------- both: video beside text */
@media screen and (min-width: 1100px) {
  .study--both .study__stage {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(360px, 44%) minmax(0, 1fr);
  }

  /* 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;
  }

  .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 buttons in the bar set it and the browser
   remembers it. 只看法本 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. */
.study--both[data-study-view="text"] .study__media,
.study--both[data-study-view="video"] .fb-read__workspace > :not(.note-panel),
.study--both[data-study-view="video"] .fb-textsize {
  display: none;
}

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

.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;
  margin: 0 auto;
  max-width: min(1400px, calc((100vh - 260px) * 16 / 9));
  position: static;
}

.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 in the rail, which study.js moves to the video's corner. */
.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 {
  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 {
    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 {
  --fab-shift: 0px;
  bottom: auto;
  /* The rail has no height to give; without this the circles shrink to their text. */
  flex: none;
  position: static;
  right: auto;
  top: auto;
}

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

/* 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;
}

.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;
  }
}

/* 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. */
@media screen and (max-width: 1099px) {
  .study__rail {
    margin-right: 0;
  }

  /* Under the folded video, which is min(46vw, 320px) wide at 16:9, 8px down.
     Only beside the text: at the video's own corner there is nothing to fold. */
  .study__text .study__rail {
    top: calc(min(46vw, 320px) * 9 / 16 + 20px);
  }

  /* 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 {
    flex-direction: row;
    height: auto;
    justify-content: flex-end;
    margin-bottom: 8px;
    position: static;
    width: auto;
  }

  .study__media .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;
  }

  .study--both .study__player.is-compact {
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    position: fixed;
    right: 8px;
    top: 8px;
    width: min(46vw, 320px);
    z-index: 900;
  }
}