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

/* 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"] .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"] {
    /* A height, not a ceiling: the panel is a desk beside the text, and one that
       grows with the note pushed its own save button off the bottom of the
       window - and moved every time a line was added. */
    height: calc(100vh - 82px);
    margin-top: 0;
    overscroll-behavior: contain;
    position: sticky;
    top: 70px;
  }

  /* 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;
    /* A height, not a ceiling: the editor inside takes what the panel leaves,
       so a panel measured by its content would collapse around it. */
    height: min(62dvh, 620px);
    max-width: 720px;
    overscroll-behavior: contain;
    position: fixed;
    transform: translateX(-50%);
    width: min(calc(100% - 16px), 720px);
    z-index: 1100;
  }
}

/* ------------------------------------------- a panel that owns its own height */

/* Three of the panels are sized by the window rather than by what is in them:
   the sheet over a player, the docked notebook beside a 法本, and the 经文笔记
   card. In all three the panel itself was what scrolled, so a long note pushed
   the title, the passage and the save button out through the top and bottom of
   the card - and the 法本 panel grew instead, past the bottom of the window.
   The frame is fixed and the writing surface scrolls inside it. */
.note-panel--dz,
.note-panel--play[data-note-overlay="1"],
.note-panel--read[data-note-docked="1"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.note-panel--dz > *,
.note-panel--play[data-note-overlay="1"] > *,
.note-panel--read[data-note-docked="1"] > * {
  flex: none;
}

.note-panel--dz .EasyMDEContainer,
.note-panel--play[data-note-overlay="1"] .EasyMDEContainer,
.note-panel--read[data-note-docked="1"] .EasyMDEContainer {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.note-panel--dz .EasyMDEContainer > *,
.note-panel--play[data-note-overlay="1"] .EasyMDEContainer > *,
.note-panel--read[data-note-docked="1"] .EasyMDEContainer > * {
  flex: none;
}

/* CodeMirror sizes itself to its content, which with nothing above it scrolling
   would grow the box straight over the save button. It is given the rest of the
   panel as a definite height instead - `height: 0` plus the grow factor - and
   left to scroll its own .CodeMirror-scroll, which is what it expects to do.
   Scrolling the .CodeMirror box itself puts a second scroller around the one
   CodeMirror is already running, and the two fight for every wheel event. */
.note-panel--dz .EasyMDEContainer .CodeMirror,
.note-panel--play[data-note-overlay="1"] .EasyMDEContainer .CodeMirror,
.note-panel--read[data-note-docked="1"] .EasyMDEContainer .CodeMirror {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  /* No padding on the scrolling box. CodeMirror sizes its scroller against this
     element's height and adds its own 50px of overscroll to it, and padding here
     pushed the last lines of a long note out through the bottom of the box,
     where nothing could scroll them back into view. The room goes inside, on
     the lines, which is where CodeMirror expects to find it. */
  padding: 0;
}

.note-panel--dz .CodeMirror-lines,
.note-panel--play[data-note-overlay="1"] .CodeMirror-lines,
.note-panel--read[data-note-docked="1"] .CodeMirror-lines {
  padding: 10px 12px;
}

/* The plain textarea, for the moment before the editor arrives: it is the
   writing surface until then, so it takes the same room. */
.note-panel--dz .note-panel__input,
.note-panel--play[data-note-overlay="1"] .note-panel__input,
.note-panel--read[data-note-docked="1"] .note-panel__input {
  flex: 1 1 auto;
  min-height: 0;
}

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

/* ---------------------------------------------------- 经文笔记 in the canon

   One panel aimed at one note among many, rather than the six readers' one note
   each. What the note is about has to stay in front of the reader while they
   write about it, and a note that hangs off a sentence can be deleted - the
   lesson notes cannot, because there is nowhere for the lesson to go. */
.note-panel__quote {
  background-color: #fbf6e8;
  border-left: 3px solid #e0c45c;
  color: #4a4436;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  line-height: 1.8;
  margin: 0 0 8px;
  max-height: 8em;
  overflow-y: auto;
  padding: 6px 10px;
}

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

.note-panel__drop {
  background: none;
  border: 0;
  color: #a0522d;
  cursor: pointer;
  font-size: 0.85em;
  margin-left: auto;
  padding: 4px 6px;
}

.note-panel__drop:hover {
  text-decoration: underline;
}

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

/* The reader is on a page of scripture, not over a player, so the notebook is a
   sheet in the bottom-right corner: the passage it is about stays readable. */
.note-panel--dz {
  border-color: #d2c6ac;
  /* Clear of the 返回顶部 disc, which owns this corner and paints at z-index
     1000: at 16px the panel's bottom-right rounding sat under it. */
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  box-shadow: -8px 0 30px rgba(20, 15, 10, 0.28);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  /* As tall as the 法本 notebook: top and bottom both pinned, so the height is
     the window's rather than a short card's, and the editor inside takes
     whatever the head, the quote and the buttons leave. The top clears the
     reader's own bar - 记到此处 and 我的书签 stay clickable with the notebook
     open. */
  height: auto;
  overflow: hidden;
  top: 104px;
  overscroll-behavior: contain;
  position: fixed;
  right: 16px;
  width: min(440px, calc(100vw - 32px));
  /* Above the 本经笔记 drawer, which opens it. */
  z-index: 62;
}

/* The mark's colour, changed from beside the note rather than from a selection
   toolbar that is gone by the time the reader has an opinion about it. */
/* In the title row, between the name of the panel and the way out of it. */
.note-panel__colors {
  display: flex;
  gap: 6px;
  margin-left: auto;
  padding: 0;
}

.note-panel__color {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  height: 18px;
  padding: 0;
  width: 18px;
}

/* The one in force reads as pressed: a ring rather than a tick, because the
   swatch is the label and a mark over it would hide the colour. */
.note-panel__color[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px #fffdf6,
    0 0 0 4px #6f3717;
}

.note-panel__color:focus-visible {
  outline: 2px solid #be7123;
  outline-offset: 3px;
}

.note-panel__color--c0 {
  background-color: #fdf3c0;
}

.note-panel__color--c1 {
  background-color: #dcf0d2;
}

.note-panel__color--c2 {
  background-color: #d9e8fa;
}

.note-panel__color--c3 {
  background-color: #fadbe6;
}

.note-panel--dz .note-panel__quote {
  max-height: 5.4em;
  overflow-y: auto;
}

@media screen and (max-width: 600px) {
  .note-panel--dz {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    left: 0;
    height: 80dvh;
    right: 0;
    top: auto;
    width: auto;
  }
}