@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lato:wght@400;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Open+Sans:ital,wght@0,400;0,600;1,400&family=Roboto:wght@400;500&display=swap");

/* Quill font classes: editor + learner output (same class names on spans). */
.lesson-quill-wrap .ql-font-system-ui,
.learning-point-rich-text .ql-font-system-ui {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.lesson-quill-wrap .ql-font-inter,
.learning-point-rich-text .ql-font-inter {
  font-family: "Inter", system-ui, sans-serif;
}
.lesson-quill-wrap .ql-font-roboto,
.learning-point-rich-text .ql-font-roboto {
  font-family: "Roboto", system-ui, sans-serif;
}
.lesson-quill-wrap .ql-font-open-sans,
.learning-point-rich-text .ql-font-open-sans {
  font-family: "Open Sans", system-ui, sans-serif;
}
.lesson-quill-wrap .ql-font-lato,
.learning-point-rich-text .ql-font-lato {
  font-family: "Lato", system-ui, sans-serif;
}
.lesson-quill-wrap .ql-font-merriweather,
.learning-point-rich-text .ql-font-merriweather {
  font-family: "Merriweather", Georgia, serif;
}
.lesson-quill-wrap .ql-font-georgia,
.learning-point-rich-text .ql-font-georgia {
  font-family: Georgia, "Times New Roman", Times, serif;
}
.lesson-quill-wrap .ql-font-times,
.learning-point-rich-text .ql-font-times {
  font-family: "Times New Roman", Times, serif;
}
.lesson-quill-wrap .ql-font-palatino,
.learning-point-rich-text .ql-font-palatino {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
}
.lesson-quill-wrap .ql-font-garamond,
.learning-point-rich-text .ql-font-garamond {
  font-family: Garamond, "Palatino Linotype", serif;
}
.lesson-quill-wrap .ql-font-arial,
.learning-point-rich-text .ql-font-arial {
  font-family: Arial, Helvetica, sans-serif;
}
.lesson-quill-wrap .ql-font-verdana,
.learning-point-rich-text .ql-font-verdana {
  font-family: Verdana, Geneva, sans-serif;
}
.lesson-quill-wrap .ql-font-tahoma,
.learning-point-rich-text .ql-font-tahoma {
  font-family: Tahoma, Geneva, sans-serif;
}
.lesson-quill-wrap .ql-font-trebuchet,
.learning-point-rich-text .ql-font-trebuchet {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.lesson-quill-wrap .ql-font-courier,
.learning-point-rich-text .ql-font-courier {
  font-family: "Courier New", Courier, monospace;
}
.lesson-quill-wrap .ql-font-consolas,
.learning-point-rich-text .ql-font-consolas {
  font-family: Consolas, "Lucida Console", Monaco, monospace;
}
.lesson-quill-wrap .ql-font-serif,
.learning-point-rich-text .ql-font-serif {
  font-family: Georgia, "Times New Roman", Times, serif;
}
.lesson-quill-wrap .ql-font-sans-serif,
.learning-point-rich-text .ql-font-sans-serif {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.lesson-quill-wrap .ql-font-monospace,
.learning-point-rich-text .ql-font-monospace {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* Override Quill Snow's hardcoded "Sans Serif" default label for font picker */
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before {
  content: "Default";
}
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before {
  content: "Default";
}

/* Readable names in the font dropdown (admin only). */
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="system-ui"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="system-ui"]::before {
  content: "System UI";
  font-family: system-ui, sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="inter"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="inter"]::before {
  content: "Inter";
  font-family: "Inter", sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before {
  content: "Roboto";
  font-family: "Roboto", sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="open-sans"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="open-sans"]::before {
  content: "Open Sans";
  font-family: "Open Sans", sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lato"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lato"]::before {
  content: "Lato";
  font-family: "Lato", sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="merriweather"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="merriweather"]::before {
  content: "Merriweather";
  font-family: "Merriweather", serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before {
  content: "Georgia";
  font-family: Georgia, serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before {
  content: "Times New Roman";
  font-family: "Times New Roman", serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="palatino"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="palatino"]::before {
  content: "Palatino";
  font-family: "Palatino Linotype", Palatino, serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before {
  content: "Garamond";
  font-family: Garamond, serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
  content: "Arial";
  font-family: Arial, sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before {
  content: "Verdana";
  font-family: Verdana, sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before {
  content: "Tahoma";
  font-family: Tahoma, sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet"]::before {
  content: "Trebuchet MS";
  font-family: "Trebuchet MS", sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before {
  content: "Courier New";
  font-family: "Courier New", monospace !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="consolas"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="consolas"]::before {
  content: "Consolas";
  font-family: Consolas, monospace !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "Serif (generic)";
  font-family: Georgia, serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "Sans-serif (generic)";
  font-family: system-ui, sans-serif !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "Monospace (generic)";
  font-family: ui-monospace, monospace !important;
}

/* Legacy class-based sizes (content saved before numeric px sizes). */
.lesson-quill-wrap .ql-editor .ql-size-small,
.learning-point-rich-text .ql-size-small {
  font-size: 0.75em;
}
.lesson-quill-wrap .ql-editor .ql-size-large,
.learning-point-rich-text .ql-size-large {
  font-size: 1.5em;
}
.lesson-quill-wrap .ql-editor .ql-size-huge,
.learning-point-rich-text .ql-size-huge {
  font-size: 2.5em;
}

/* Never show Quill’s size picker — we use custom px input (also covers cached old JS). */
.lesson-quill-wrap .ql-toolbar .ql-picker.ql-size {
  display: none !important;
}

/* Custom font size (px) — number input in toolbar (no Quill size dropdown). */
.lesson-quill-wrap .quill-custom-font-size,
.program-quill-wrap .quill-custom-font-size {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.lesson-quill-wrap .quill-custom-font-size-label,
.program-quill-wrap .quill-custom-font-size-label {
  font-size: 11px;
  color: #999999;
  white-space: nowrap;
  cursor: default;
}
.lesson-quill-wrap .quill-custom-font-size-input,
.program-quill-wrap .quill-custom-font-size-input {
  width: 2.75rem;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid #2a2a2a;
  background: #050505;
  color: #dddddd;
  font-size: 12px;
  text-align: center;
}
.lesson-quill-wrap .quill-custom-font-size-input:focus,
.program-quill-wrap .quill-custom-font-size-input:focus {
  outline: none;
  border-color: #e0b24a;
}
.lesson-quill-wrap .quill-size-step,
.program-quill-wrap .quill-size-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.25rem;
  border: 1px solid #2a2a2a;
  background: #111111;
  color: #bbbbbb;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.lesson-quill-wrap .quill-size-step:hover,
.program-quill-wrap .quill-size-step:hover {
  background: #1e1e1e;
  color: #ffffff;
  border-color: #e0b24a;
}
.lesson-quill-wrap .quill-size-step:active,
.program-quill-wrap .quill-size-step:active {
  background: #252525;
}

/* Learner + shared: formatted HTML from Quill (admin body). */
.learning-point-rich-text {
  word-break: break-word;
}
.learning-point-rich-text p {
  margin: 0.5em 0;
}
.learning-point-rich-text p:first-child {
  margin-top: 0;
}
.learning-point-rich-text p:last-child {
  margin-bottom: 0;
}
.learning-point-rich-text h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.75em 0 0.35em;
}
.learning-point-rich-text h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.65em 0 0.3em;
}
.learning-point-rich-text h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.55em 0 0.25em;
}
.learning-point-rich-text ul,
.learning-point-rich-text ol {
  margin: 0.5em 0 0.5em 1.25rem;
  padding: 0;
}
.learning-point-rich-text blockquote {
  margin: 0.5em 0;
  padding-left: 1rem;
  border-left: 3px solid #3a3a3a;
  color: #bbbbbb;
}
.learning-point-rich-text pre {
  margin: 0.5em 0;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #2a2a2a;
  background: #050505;
  overflow-x: auto;
  font-size: 0.85em;
}
.learning-point-rich-text a {
  color: #e0b24a;
  text-decoration: underline;
}
.learning-point-rich-text a:hover {
  color: #f2c866;
}

/* Admin Quill (dark) */
.lesson-quill-wrap .ql-toolbar {
  border-color: #2a2a2a;
  border-radius: 0.75rem 0.75rem 0 0;
  background: #0b0b0b;
}
.lesson-quill-wrap .ql-toolbar .ql-stroke {
  stroke: #bbbbbb;
}
.lesson-quill-wrap .ql-toolbar .ql-fill {
  fill: #bbbbbb;
}
.lesson-quill-wrap .ql-toolbar .ql-picker {
  color: #dddddd;
}
.lesson-quill-wrap .ql-snow .ql-toolbar button:hover,
.lesson-quill-wrap .ql-snow .ql-toolbar button:focus-visible,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-label:hover,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-label.ql-active,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-item:hover,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #e0b24a !important;
}
.lesson-quill-wrap .ql-snow .ql-toolbar button:hover .ql-stroke,
.lesson-quill-wrap .ql-snow .ql-toolbar button.ql-active .ql-stroke,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: #e0b24a !important;
}
.lesson-quill-wrap .ql-snow .ql-toolbar button:hover .ql-fill,
.lesson-quill-wrap .ql-snow .ql-toolbar button.ql-active .ql-fill,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.lesson-quill-wrap .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill {
  fill: #e0b24a !important;
}
.lesson-quill-wrap .ql-snow .ql-toolbar button.ql-active {
  color: #e0b24a !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font {
  width: 18rem !important;
  min-width: 18rem !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label {
  width: 100% !important;
  padding-right: 1.5rem;
  white-space: nowrap !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item {
  max-width: none;
  white-space: nowrap !important;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  display: inline-block;
  width: max-content;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-overflow: clip;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-options {
  width: 18rem;
  min-width: 18rem;
}
.lesson-quill-wrap .ql-toolbar .ql-picker-options {
  background: #111111;
  border-color: #2a2a2a;
}

/* Font list: ~5 visible rows, rest scroll (Quill items ≈ 2rem each). */
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-options {
  max-height: calc(5 * 2rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #3a3a3a #111111;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-options::-webkit-scrollbar {
  width: 8px;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-options::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 4px;
}
.lesson-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-options::-webkit-scrollbar-track {
  background: #111111;
}

.lesson-quill-wrap .ql-container {
  border-color: #2a2a2a;
  border-radius: 0 0 0.75rem 0.75rem;
  background: #050505;
  color: #dddddd;
  font-size: 15px;
  min-height: 220px;
}
.lesson-quill-wrap .ql-editor {
  min-height: 220px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Keep the blue selection highlight visible even when focus moves to the
   size input or any other toolbar control. Browsers hide "inactive"
   selections by default — this overrides that. */
.ql-editor::selection,
.ql-editor *::selection {
  background: rgba(0, 114, 240, 0.35);
  color: inherit;
}
.lesson-quill-wrap .ql-editor.ql-blank::before {
  color: #777777;
  font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────────────
   Learner reflection Quill editor (dark theme — mirrors lesson-quill-wrap)
   Used on modules/detail.html for inline reflection answer editors.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   Learner reflection Quill editor (dark theme — mirrors lesson-quill-wrap)
   Used on modules/detail.html for inline reflection answer editors.
   ───────────────────────────────────────────────────────────────────────── */

.quill-reflection-editor .ql-toolbar.ql-snow {
  border: 1px solid #2a2a2a;
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0;
  background: #0b0b0b;
  flex-wrap: wrap;
}
.quill-reflection-editor .ql-container.ql-snow {
  border: 1px solid #2a2a2a;
  border-radius: 0 0 0.75rem 0.75rem;
  background: #000000;
  color: #dddddd;
  font-size: 14px;
  /* Cancel out lesson-quill-wrap's 220px min-height and Quill Snow's height:100% */
  height: auto !important;
  min-height: 100px !important;
}
.quill-reflection-editor .ql-editor {
  min-height: 100px;
  height: auto;
  padding: 0.875rem 1rem;
  line-height: 1.7;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.quill-reflection-editor .ql-editor.ql-blank::before {
  color: #555555;
  font-style: normal;
}
/* Toolbar icons */
.quill-reflection-editor .ql-toolbar .ql-stroke {
  stroke: #bbbbbb;
}
.quill-reflection-editor .ql-toolbar .ql-fill {
  fill: #bbbbbb;
}
.quill-reflection-editor .ql-toolbar .ql-picker {
  color: #dddddd;
}
/* Hover / active states — gold accent */
.quill-reflection-editor .ql-snow.ql-toolbar button:hover,
.quill-reflection-editor .ql-snow.ql-toolbar button:focus-visible,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-label:hover,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-item:hover,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
  color: #e0b24a !important;
}
.quill-reflection-editor .ql-snow.ql-toolbar button:hover .ql-stroke,
.quill-reflection-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: #e0b24a !important;
}
.quill-reflection-editor .ql-snow.ql-toolbar button:hover .ql-fill,
.quill-reflection-editor .ql-snow.ql-toolbar button.ql-active .ql-fill,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.quill-reflection-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill {
  fill: #e0b24a !important;
}
.quill-reflection-editor .ql-snow.ql-toolbar button.ql-active {
  color: #e0b24a !important;
}
/* Dropdown panels */
.quill-reflection-editor .ql-toolbar .ql-picker-options {
  background: #111111;
  border-color: #2a2a2a;
  border-radius: 0.5rem;
}
/* Font picker width */
.quill-reflection-editor .ql-snow .ql-picker.ql-font {
  width: 16rem !important;
  min-width: 16rem !important;
}
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label {
  width: 100% !important;
  padding-right: 1.5rem;
  white-space: nowrap !important;
}
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-options {
  width: 16rem;
  min-width: 16rem;
  max-height: calc(5 * 2rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #3a3a3a #111111;
}
/* Font names in dropdown */
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  white-space: nowrap !important;
}
/* Content font classes (same span classes as lesson editor) */
.quill-reflection-editor .ql-font-system-ui { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.quill-reflection-editor .ql-font-inter      { font-family: "Inter", system-ui, sans-serif; }
.quill-reflection-editor .ql-font-roboto     { font-family: "Roboto", system-ui, sans-serif; }
.quill-reflection-editor .ql-font-open-sans  { font-family: "Open Sans", system-ui, sans-serif; }
.quill-reflection-editor .ql-font-lato       { font-family: "Lato", system-ui, sans-serif; }
.quill-reflection-editor .ql-font-merriweather { font-family: "Merriweather", Georgia, serif; }
.quill-reflection-editor .ql-font-georgia    { font-family: Georgia, "Times New Roman", Times, serif; }
.quill-reflection-editor .ql-font-times      { font-family: "Times New Roman", Times, serif; }
.quill-reflection-editor .ql-font-palatino   { font-family: "Palatino Linotype", Palatino, Georgia, serif; }
.quill-reflection-editor .ql-font-garamond   { font-family: Garamond, "Palatino Linotype", serif; }
.quill-reflection-editor .ql-font-arial      { font-family: Arial, Helvetica, sans-serif; }
.quill-reflection-editor .ql-font-verdana    { font-family: Verdana, Geneva, sans-serif; }
.quill-reflection-editor .ql-font-tahoma     { font-family: Tahoma, Geneva, sans-serif; }
.quill-reflection-editor .ql-font-trebuchet  { font-family: "Trebuchet MS", Helvetica, sans-serif; }
.quill-reflection-editor .ql-font-courier    { font-family: "Courier New", Courier, monospace; }
.quill-reflection-editor .ql-font-consolas   { font-family: Consolas, "Lucida Console", Monaco, monospace; }
.quill-reflection-editor .ql-font-serif      { font-family: Georgia, "Times New Roman", Times, serif; }
.quill-reflection-editor .ql-font-sans-serif { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.quill-reflection-editor .ql-font-monospace  { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
/* Readable font names in the learner dropdown */
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="system-ui"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="system-ui"]::before   { content: "System UI";           font-family: system-ui, sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="inter"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="inter"]::before        { content: "Inter";               font-family: "Inter", sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before       { content: "Roboto";              font-family: "Roboto", sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="open-sans"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="open-sans"]::before    { content: "Open Sans";           font-family: "Open Sans", sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lato"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lato"]::before         { content: "Lato";                font-family: "Lato", sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="merriweather"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="merriweather"]::before { content: "Merriweather";         font-family: "Merriweather", serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before      { content: "Georgia";             font-family: Georgia, serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before        { content: "Times New Roman";     font-family: "Times New Roman", serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="palatino"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="palatino"]::before     { content: "Palatino";            font-family: "Palatino Linotype", serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before     { content: "Garamond";            font-family: Garamond, serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before        { content: "Arial";               font-family: Arial, sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before      { content: "Verdana";             font-family: Verdana, sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before       { content: "Tahoma";              font-family: Tahoma, sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet"]::before    { content: "Trebuchet MS";        font-family: "Trebuchet MS", sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before      { content: "Courier New";         font-family: "Courier New", monospace !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="consolas"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="consolas"]::before     { content: "Consolas";            font-family: Consolas, monospace !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before        { content: "Serif (generic)";     font-family: Georgia, serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before   { content: "Sans-serif (generic)"; font-family: system-ui, sans-serif !important; }
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.quill-reflection-editor .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before    { content: "Monospace (generic)"; font-family: ui-monospace, monospace !important; }

/* ── Styled audio player ────────────────────────────────────────────────── */
.lp-audio-player {
  accent-color: #E0B24A;
  height: 36px;
  border-radius: 0.75rem;
  outline: none;
}
.lp-audio-player::-webkit-media-controls-panel {
  background-color: #111111;
  border-radius: 0.75rem;
}
.lp-audio-player::-webkit-media-controls-play-button {
  filter: invert(0.9) sepia(1) saturate(3) hue-rotate(5deg);
}
.lp-audio-player::-webkit-media-controls-timeline {
  accent-color: #E0B24A;
}