/* 学习笔记: the panel a reader writes one in, the way a written one reads back,
   and the 笔记本 page that collects them all.

   The panel was two skins of the same thing - .play-note under the players and
   .fb-note on the 法本 pages - over a 30x20 textarea. */

/* ---------------------------------------------------------------- the panel */

.note-panel {
  background-color: #fff;
  border: 1px solid #e0dcc8;
  border-radius: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  text-align: left;
}

/* display: block on the class would beat the browser's own [hidden] rule, and
   the panel is closed until the bar's handle asks for it. */
.note-panel[hidden] {
  display: none;
}

/* The stage does not change the player's measured size. It only gives the
   notebook a containing block over the picture. */
.play-stage {
  margin: 0 auto;
  max-width: var(--play-width);
  position: relative;
}

.play-stage .play-video {
  margin: 0;
  max-width: none;
}

.note-panel--play {
  margin: 8px auto 0;
  max-width: var(--play-width);
}

/* Pausing remains the reader's choice. Opening the notebook changes no player
   state and no layout: an opaque sheet sits over the right of the picture. */
.note-panel--play[data-note-overlay="1"] {
  background-color: #fffdf6;
  border-color: #d2c6ac;
  bottom: 12px;
  box-shadow: -8px 0 30px rgba(20, 15, 10, 0.28);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: calc(100% - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  right: 12px;
  top: 12px;
  width: min(54%, 640px);
  z-index: 20;
}

.note-panel--play[data-note-overlay="1"][hidden] {
  display: none;
}

/* A fixed fullscreen child cannot escape its parent's stacking context. Lift
   the sheet only for EasyMDE fullscreen; in ordinary overlay mode the course
   drawer remains above it. */
.note-panel--play[data-note-overlay="1"]:has(.editor-toolbar.fullscreen) {
  z-index: 1199;
}

.note-panel--play[data-note-overlay="1"] .note-panel__head,
.note-panel--play[data-note-overlay="1"] .note-panel__saved,
.note-panel--play[data-note-overlay="1"] .note-panel__acts {
  flex: none;
}

.note-panel--play[data-note-overlay="1"] .EasyMDEContainer {
  flex: 1 1 auto;
  min-height: 0;
}

.note-panel--play[data-note-overlay="1"] .EasyMDEContainer .CodeMirror {
  min-height: clamp(110px, 20vw, 280px);
}

/* A portrait phone's 16:9 picture is shallow. Use its whole area and remove
   formatting chrome; Markdown still works, while the writing surface remains
   large enough to use. */
@media screen and (max-width: 699px), screen and (max-height: 560px) {
  .note-panel--play[data-note-overlay="1"] {
    bottom: 6px;
    left: 6px;
    max-width: none;
    padding: 8px 10px;
    right: 6px;
    top: 6px;
    width: auto;
  }

  .note-panel--play[data-note-overlay="1"] .note-panel__head {
    margin-bottom: 4px;
    padding-bottom: 4px;
  }

  .note-panel--play[data-note-overlay="1"] .note-panel__saved {
    min-height: 1em;
    padding-bottom: 3px;
  }

  .note-panel--play[data-note-overlay="1"] .editor-toolbar {
    display: none;
  }

  .note-panel--play[data-note-overlay="1"] .EasyMDEContainer .CodeMirror {
    border-radius: 8px;
    height: 76px;
    min-height: 76px;
    padding: 6px 8px;
  }

  .note-panel--play[data-note-overlay="1"] .note-panel__input {
    height: 76px;
    min-height: 76px;
    resize: none;
  }

  .note-panel--play[data-note-overlay="1"] .note-panel__acts {
    gap: 8px;
    padding-top: 6px;
  }

  .note-panel--play[data-note-overlay="1"] .note-panel__save {
    padding: 5px 13px;
  }

  .note-panel--play[data-note-overlay="1"] .note-panel__hide {
    display: none;
  }
}

/* On a 法本 page: the same paper the text is set on. */
.note-panel--read {
  background-color: var(--read-paper, #fdfdf8);
  border-color: #d9d9c6;
}

.note-panel--read[data-note-docked="1"] {
  box-sizing: border-box;
}

.note-panel__head {
  align-items: center;
  border-bottom: 1px solid #e8e3d2;
  display: flex;
  justify-content: space-between;
  margin: -2px 0 8px;
  padding-bottom: 8px;
}

.note-panel__title {
  color: #4e0d0d;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 1.08em;
  font-weight: 600;
  margin: 0;
}

.note-panel__title i {
  color: #be7123;
  margin-right: 4px;
}

.note-panel__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #6b6257;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin: -8px -8px -8px 8px;
  width: 44px;
}

.note-panel__close:hover {
  background-color: #f2ede0;
  color: #4e0d0d;
}

.note-panel__close:focus-visible,
.note-fab:focus-visible,
.note-panel__save:focus-visible,
.note-panel__hide:focus-visible {
  outline: 2px solid #be7123;
  outline-offset: 2px;
}

/* A long 法本 needs the note beside the passage, not above its first line. */
@media screen and (min-width: 1280px) {
  .note-panel--read[data-note-docked="1"] {
    margin-top: 0;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
    position: sticky;
    top: 70px;
  }

  .note-panel--read[data-note-docked="1"] .EasyMDEContainer .CodeMirror {
    min-height: clamp(260px, 46vh, 520px);
  }

  /* The handle is meant to come to rest in the circle the close control was
     sitting in, and it was five pixels above it: 70px of sticky offset, the
     panel's own border and padding, less the close control's negative margin.
     It only looked right because it was caught mid-slide. */
  body:has(.note-panel--read[data-note-docked="1"]) .note-fab {
    top: calc(70px + 1px + 12px - 2px - 8px);
  }
}

/* On a smaller screen two columns make both halves unusable. The notebook
   becomes a half-height sheet: the passage stays visible above it and can keep
   moving independently. */
@media screen and (max-width: 1279px) {
  .note-panel--read[data-note-docked="1"] {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    box-shadow: 0 -8px 28px rgba(78, 13, 13, 0.16);
    left: 50%;
    margin: 0;
    max-height: min(62dvh, 620px);
    max-width: 720px;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    transform: translateX(-50%);
    width: min(calc(100% - 16px), 720px);
    z-index: 1100;
  }

  .note-panel--read[data-note-docked="1"] .EasyMDEContainer .CodeMirror {
    min-height: 220px;
  }
}

.note-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);
  color: #6f3717;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.92em;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: fixed;
  right: 18px;
  top: 68px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
  width: 44px;
  z-index: 80;
}

/* Keep the accessible label, but the floating control occupies the same
   44px circle as the close control it replaces. */
.note-fab span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media screen and (min-width: 1280px) {
  .note-fab {
    /* Expanded reader is centred. Its right edge is either 8px from the
       viewport or half the unused space away; another 22px matches the close
       button's negative margin inside the paper. */
    right: calc(
      max(8px, calc((100vw - clamp(320px, var(--bar-width, 100%), 1280px) - 418px) / 2)) + 22px
    );
  }
}

.note-fab[hidden] {
  display: none;
}

.note-fab:hover {
  border-color: #be7123;
  box-shadow: 0 4px 18px rgba(78, 13, 13, 0.22);
}

.note-is-open .note-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

@media screen and (max-width: 600px) {
  .note-fab {
    right: 12px;
    top: 68px;
  }

  .note-panel--read[data-note-docked="1"] {
    max-height: 60dvh;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    width: 100%;
  }

  .note-panel__acts {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-fab {
    transition: none;
  }
}

.note-panel__saved {
  color: #4a7c59;
  display: block;
  font-size: 0.85em;
  min-height: 1.2em;
  padding-bottom: 6px;
}

/* What the reader sees for the moment between opening the panel and the editor
   arriving, and for good if it never does. */
.note-panel__input {
  border: 1px solid #dcd8c4;
  border-radius: 8px;
  box-sizing: border-box;
  color: #3a352c;
  font-family: inherit;
  font-size: 1.05em;
  line-height: 1.8;
  padding: 10px 12px;
  width: 100%;
}

.note-panel__acts {
  align-items: center;
  display: flex;
  gap: 14px;
  padding-top: 10px;
}

.note-panel__save {
  background-color: #be7123;
  border: 1px solid #be7123;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 0.95em;
  padding: 7px 18px;
}

.note-panel__save:hover {
  background-color: #a55f1a;
}

.note-panel__auto {
  align-items: center;
  color: #6b6257;
  cursor: pointer;
  display: flex;
  font-size: 0.9em;
  gap: 6px;
}

.note-panel__auto input {
  accent-color: #be7123;
  cursor: pointer;
  margin: 0;
}

/* Pushed to the far end, away from the two controls that write the note. */
.note-panel__hide {
  margin-left: auto;
}

.note-panel__hide {
  background: none;
  border: 0;
  color: #6b6257;
  cursor: pointer;
  font-size: 0.95em;
  padding: 0;
}

.note-panel__hide:hover {
  color: #4e0d0d;
}

/* --------------------------------------------------------- the editor's skin

   EasyMDE ships its own greys and its own borders; these are the site's. Only
   the frame is touched - the toolbar's behaviour and layout are its own. */

.note-panel .EasyMDEContainer .CodeMirror {
  background-color: #fff;
  border: 1px solid #dcd8c4;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  color: #3a352c;
  font-family: inherit;
  font-size: 1.05em;
  line-height: 1.8;
  min-height: 220px;
  padding: 10px 12px;
}

.note-panel .editor-toolbar {
  background-color: #fdfdf8;
  border: 1px solid #dcd8c4;
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  opacity: 1;
}

.note-panel .editor-toolbar button {
  color: #6b6257;
}

.note-panel .editor-toolbar button:hover,
.note-panel .editor-toolbar button.active {
  background-color: #f2ede0;
  border-color: #e0dcc8;
  color: #be7123;
}

.note-panel .CodeMirror-cursor {
  border-left-color: #4e0d0d;
}

/* EasyMDE's fullscreen stacks itself at 8 and 9, which is above a bare page and
   below every piece of chrome this site puts over one: the navbar sits at 50,
   the 专业 drawer at 60 and its handle at 70, 回到顶部 at 1000. The toolbar went
   under the navbar the moment the reader was scrolled anywhere but the top of
   the page, so full screen and 并排预览 were modes with no visible way out of
   them - only Esc, which nothing on the page says.

   The order inside the editor is EasyMDE's own, only lifted clear. */
.note-panel .EasyMDEContainer .CodeMirror-fullscreen {
  z-index: 1200;
}

.note-panel .editor-toolbar.fullscreen,
.note-panel .editor-preview-side {
  z-index: 1201;
}

/* The editor's own preview panes are given .note-body as well (previewClass in
   lesson-note.js), so the note is set the same way while it is being written as
   it is on 笔记本 and in the export. */
.note-panel .editor-preview,
.note-panel .editor-preview-side {
  background-color: #fdfdf8;
}

/* --------------------------------------------- a note as it reads back

   Markdown output, so the elements are whatever the reader wrote. Set for a
   long Chinese paragraph rather than for code. */

.note-body {
  color: #3a352c;
  font-size: 1.02em;
  line-height: 1.9;
  overflow-wrap: break-word;
}

.note-body > *:first-child {
  margin-top: 0;
}

.note-body > *:last-child {
  margin-bottom: 0;
}

.note-body p {
  margin: 0 0 0.9em;
}

.note-body h1,
.note-body h2,
.note-body h3,
.note-body h4 {
  color: #4e0d0d;
  line-height: 1.5;
  margin: 1.2em 0 0.5em;
}

.note-body h1 {
  font-size: 1.3em;
}

.note-body h2 {
  font-size: 1.18em;
}

.note-body h3,
.note-body h4 {
  font-size: 1.06em;
}

/* Tailwind's preflight strips list markers site-wide (ol, ul, menu { list-style:
   none; padding: 0 }), which is right for a nav and wrong for a note: a reader
   who wrote a list got a stack of unmarked lines back. */
.note-body ul,
.note-body ol {
  margin: 0 0 0.9em;
  padding-left: 1.6em;
}

.note-body ul {
  list-style: disc;
}

.note-body ol {
  list-style: decimal;
}

.note-body ul ul {
  list-style: circle;
}

.note-body li {
  margin-bottom: 0.3em;
}

.note-body blockquote {
  border-left: 3px solid #e0dcc8;
  color: #6b6257;
  margin: 0 0 0.9em;
  padding: 0 0 0 14px;
}

.note-body a {
  color: #8a4b1c;
  overflow-wrap: anywhere;
}

.note-body code {
  background-color: #f5f1e6;
  border-radius: 4px;
  font-size: 0.92em;
  padding: 1px 5px;
}

.note-body pre {
  background-color: #f5f1e6;
  border-radius: 8px;
  overflow-x: auto;
  padding: 10px 12px;
}

.note-body pre code {
  background: none;
  padding: 0;
}

.note-body hr {
  border: 0;
  border-top: 1px solid #e0dcc8;
  margin: 1.2em 0;
}

/* A note can hold a table, and a wide one scrolls in its own box rather than
   pushing the page sideways. */
.note-body table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  width: max-content;
  max-width: 100%;
}

.note-body th,
.note-body td {
  border: 1px solid #e0dcc8;
  padding: 6px 10px;
}

.note-body th {
  background-color: #fdfdf8;
}

/* ------------------------------------------------------------ 笔记本 page */

.nb-page {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 16px 40px;
  text-align: left;
}

.nb-head__title {
  color: #4e0d0d;
  font-size: 1.6em;
  margin: 18px 0 6px;
}

.nb-head__title small {
  color: #8a7a6a;
  font-size: 0.55em;
  font-weight: normal;
  margin-left: 10px;
}

.nb-head__lead {
  color: #6b6257;
  line-height: 1.8;
  margin: 0 0 14px;
}

.nb-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.nb-search {
  align-items: center;
  display: flex;
  flex: 1 1 20em;
  gap: 8px;
  min-width: 0;
}

.nb-search__input {
  background-color: #fff;
  border: 1px solid #dcd8c4;
  border-radius: 999px;
  box-sizing: border-box;
  color: #3a352c;
  flex: 1 1 auto;
  font-size: 1em;
  min-width: 0;
  padding: 8px 16px;
}

.nb-search__input:focus {
  border-color: #be7123;
  outline: none;
}

.nb-search__go,
.nb-search__clear {
  background-color: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 999px;
  color: #6b6257;
  cursor: pointer;
  flex: none;
  font-size: 0.95em;
  padding: 8px 16px;
  text-decoration: none;
}

.nb-search__go {
  color: #be7123;
}

.nb-search__go:hover,
.nb-search__clear:hover {
  background-color: #fdf6ea;
}

/* The look of it is .export-link in style.css, shared with every other 导出;
   only where it sits belongs to this page. */
.nb-tools__export {
  flex: none;
  margin-left: auto;
}

.nb-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.nb-note {
  background-color: #fff;
  border: 1px solid #e0dcc8;
  border-radius: 10px;
  overflow: hidden;
}

.nb-note__summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  padding: 12px 16px;
}

.nb-note__summary::-webkit-details-marker {
  display: none;
}

.nb-note__summary:hover {
  background-color: #fdfdf8;
}

.nb-note__kind {
  background-color: #f2ede0;
  border-radius: 999px;
  color: #8a5a20;
  flex: none;
  font-size: 0.8em;
  padding: 2px 10px;
}

.nb-note__where {
  color: #4e0d0d;
  flex: 1 1 14em;
  font-weight: 600;
  min-width: 0;
}

.nb-note__course {
  color: #8a7a6a;
  display: block;
  font-size: 0.85em;
  font-weight: normal;
  margin-top: 2px;
}

/* The opening of the note on the closed row: a page of headings alone said
   nothing about which note was which. */
.nb-note__peek {
  color: #6b6257;
  flex: 1 1 100%;
  font-size: 0.92em;
  line-height: 1.6;
}

.nb-note[open] .nb-note__peek {
  display: none;
}

.nb-note__body {
  border-top: 1px solid #f0ecdd;
  padding: 14px 16px 16px;
}

.nb-note__open {
  color: #8a4b1c;
  display: inline-block;
  font-size: 0.9em;
  margin-top: 12px;
  text-decoration: none;
}

.nb-note__open:hover {
  text-decoration: underline;
}

.nb-empty {
  background-color: #fdfdf8;
  border: 1px dashed #dcd8c4;
  border-radius: 10px;
  color: #6b6257;
  line-height: 1.9;
  margin: 0;
  padding: 22px 20px;
  text-align: center;
}

@media (max-width: 640px) {
  .nb-tools__export {
    margin-left: 0;
  }

  .nb-search {
    flex: 1 1 100%;
  }
}