/* 学习笔记: 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;
}

/* Under a player: the note keeps the video's column rather than the page's
   width, which used to push the player itself off a laptop screen. */
.note-panel--play {
  margin: 8px auto 0;
  max-width: var(--play-width);
}

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