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

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