/* Move modal content down without breaking scroll */
#preAssessmentModal .modal-dialog {
  margin-top: 80px;
  margin-bottom: 24px;
}

/* Ensure the modal never exceeds the viewport height */
#preAssessmentModal .modal-content {
  max-height: calc(100vh - 120px); /* 80 top + ~40 breathing room */
  overflow: hidden;               /* content scroll should be in body */
}

/* Make content scrollable */
#preAssessmentModal .modal-body {
  overflow-y: auto;
  max-height: calc(100vh - 220px); /* header+footer allowance */
}

/* =========================
   Audio Notes — narrow functional card
   ========================= */
.ppl-audio-note-card{
  align-items:center;
  background:#ffffff;
  border:1px solid rgba(16,45,108,.10);
  border-left:5px solid #1c46a5;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(16,45,108,.07);
  display:grid;
  gap:14px;
  grid-template-columns:58px minmax(0, 1fr);
  margin:16px 0;
  overflow:hidden;
  padding:14px 18px;
}

.ppl-audio-note-play{
  align-items:center;
  background:#102d6c;
  border:0;
  border-radius:999px;
  color:#dcf465;
  cursor:pointer;
  display:grid;
  font-size:1rem;
  height:54px;
  justify-items:center;
  padding:0;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  width:54px;
}

.ppl-audio-note-play:hover,
.ppl-audio-note-play:focus-visible{
  background:#1c46a5;
  box-shadow:0 10px 24px rgba(16,45,108,.18);
  outline:none;
  transform:translateY(-1px);
}

.ppl-audio-note-play:active{
  transform:scale(.98);
}

.ppl-audio-note-play.is-playing{
  background:#1c46a5;
}

.ppl-audio-note-play i{
  margin-left:2px;
}

.ppl-audio-note-play.is-playing i{
  margin-left:0;
}

.ppl-audio-note-body{
  min-width:0;
}

.ppl-audio-note-top{
  align-items:center;
  display:flex;
  gap:12px;
  margin-bottom:6px;
  min-width:0;
}

.ppl-audio-note-kicker{
  align-items:center;
  background:#eef3ff;
  border:1px solid rgba(16,45,108,.06);
  border-radius:999px;
  color:#1c46a5;
  display:inline-flex;
  flex:0 0 auto;
  font-size:.86rem;
  font-weight:950;
  gap:7px;
  line-height:1;
  min-height:28px;
  padding:6px 12px;
  white-space:nowrap;
}

.ppl-audio-note-kicker i{
  font-size:.76rem;
}

.ppl-audio-note-sub{
  color:#6b7280;
  display:block;
  font-size:.9rem;
  font-weight:700;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ppl-audio-note-player{
  display:block;
  height:34px;
  max-width:none;
  width:100%;
  accent-color:#102d6c;
  filter:saturate(.95);
}

.ppl-audio-note-player::-webkit-media-controls-panel{
  background-color:#eef3ff;
}

/* Dark mode */
html[data-theme="dark"] .ppl-audio-note-card{
  background:#132244;
  border-color:rgba(219,230,251,.14);
  border-left-color:#dcf465;
  box-shadow:none;
}

html[data-theme="dark"] .ppl-audio-note-play{
  background:#08152f;
  color:#dcf465;
}

html[data-theme="dark"] .ppl-audio-note-play:hover,
html[data-theme="dark"] .ppl-audio-note-play:focus-visible,
html[data-theme="dark"] .ppl-audio-note-play.is-playing{
  background:#102d6c;
}

html[data-theme="dark"] .ppl-audio-note-kicker{
  background:rgba(220,244,101,.10);
  border-color:rgba(220,244,101,.18);
  color:#dcf465;
}

html[data-theme="dark"] .ppl-audio-note-sub{
  color:#c6cfec;
}

html[data-theme="dark"] .ppl-audio-note-player::-webkit-media-controls-panel{
  background-color:#e8eefb;
}

/* Mobile */
@media (max-width:560px){
  .ppl-audio-note-card{
    gap:11px;
    grid-template-columns:48px minmax(0, 1fr);
    padding:12px 14px;
  }

  .ppl-audio-note-play{
    height:46px;
    width:46px;
  }

  .ppl-audio-note-top{
    gap:8px;
  }

  .ppl-audio-note-kicker{
    font-size:.78rem;
    min-height:26px;
    padding:5px 9px;
  }

  .ppl-audio-note-sub{
    font-size:.8rem;
  }

  .ppl-audio-note-player{
    height:32px;
  }
}

@media (max-width:420px){
  .ppl-audio-note-sub{
    display:none;
  }
}

/* Study assistant discovery hint */
.study-assistant-hint {
    position: fixed;
    left: 24px;
    bottom: 82px;
    z-index: 1041;
    width: min(285px, calc(100vw - 36px));
    border: 1px solid rgba(7, 80, 86, 0.14);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(21, 35, 43, 0.16);
    padding: 10px 36px 10px 10px;
}

.study-assistant-hint[hidden] { display: none !important; }

.study-assistant-hint::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 1px solid rgba(7, 80, 86, 0.14);
    border-bottom: 1px solid rgba(7, 80, 86, 0.14);
    transform: rotate(45deg);
}

.study-assistant-hint__message {
    appearance: none;
    border: 0;
    background: transparent;
    color: #33484f;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 750;
    cursor: pointer;
}

.study-assistant-hint__message i {
    color: var(--ppl-blaze-orange);
    font-size: 1rem;
    margin-top: 1px;
}

.study-assistant-hint__close {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #738087;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.study-assistant-hint__close:hover { background: #f3f5f5; }

@media (max-width: 620px) {
    .study-assistant-hint {
        left: 14px;
        bottom: 74px;
        width: min(255px, calc(100vw - 28px));
    }
}

html[data-theme="dark"] .study-assistant-hint {
    background: #132244;
    border-color: rgba(219, 230, 251, 0.16);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .study-assistant-hint::after {
    background: #132244;
    border-color: rgba(219, 230, 251, 0.16);
}
html[data-theme="dark"] .study-assistant-hint__message { color: #dbe6fb; }
html[data-theme="dark"] .study-assistant-hint__close { color: rgba(219, 230, 251, 0.72); }

/* Floating Chat Icon */
.chat-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: var(--ppl-blaze-orange);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1040;
}

.chat-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.chat-float .chat-icon {
    max-height: 50px;   /* shrink it down */
    max-width: 50px;    /* optional, for square scaling */
    width: auto;        /* keep aspect ratio */
    height: auto;       /* keep aspect ratio */
    object-fit: contain;
}


/* Chat Popup */
.chat-popup {
    position: fixed;
    top: 10%; 
    max-width: 400px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 2000;
}

/* Default to centered on small screens */
@media (max-width: 768px) {
    .chat-popup {
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }
}

/* Align to the left with margin on large screens */
@media (min-width: 769px) {
    .chat-popup {
        left: 20px; /* Adjust left margin to your preference */
    }
}

.chat-header {
    background-color: var(--ppl-deep-sea-green);
    color: #fff;
    padding: 10px 15px;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header .close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 3.5rem;
    cursor: pointer;
}

.chat-body {
    display: flex;
    flex-direction: column;
    height: 400px;
    padding: 15px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #007bff #f1f1f1;
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: #007bff;
    border-radius: 4px;
}

.chat-messages .user-message,
.chat-messages .reply-message {
    margin: 5px 0;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 80%;
    word-wrap: break-word;
}

.chat-messages .user-message {
    background-color: #d1ecf1;
    align-self: flex-end;
}

.chat-messages .reply-message {
    background-color: #e9ecef;
    align-self: flex-start;
}

#chatInput {
    width: 100%;
    height: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    resize: none;
    margin-bottom: 10px;
}

.send-btn {
    background-color: var(--ppl-deep-sea-green);
    color: #fff;
    border: none;
    padding: 12px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    width: 100%;
}

.send-btn:hover {
    transform: translateY(-3px);
}

/* Tooltip for Floating Icon */
.chat-float[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--ppl-deep-sea-green);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 1100;
    margin-left: 20px;
}


/* Notes title container */
.notes-title-container {
    text-align: center;
    margin: 20px 0;
}

/* Notes title */
.notes-title {
    font-size: 2.5em;
    color: var(--text-color-primary);
    padding: 10px;
    border-bottom: 2px solid var(--underline-color);
    display: inline-block;
    background: var(--title-background);
    border-radius: 10px;
    transition: background 0.3s;
}

.notes-title:hover {
    background: var(--title-background-hover);
}

/* Author info */
.author-info {
    margin-bottom: 20px;
    font-size: 0.9rem;
}


/* Sidebar styles */
h5.sidebar-title {
    margin-top: 15px;
    font-weight: bold;
}

.sidebar {
    background: transparent;
    border: 1px solid black;
    color: #41715b;
    padding: 2px;
    max-height: fit-content;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    transition: background-color 0.3s;
    margin-top: 20px;
    margin-bottom: 50px;
}

.sidebar-title {
    font-size: 1.25rem;
    color: #41715b;
    margin-bottom: 15px;
}

/* Sticky sidebar for larger screens */
@media (min-width: 766px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

/* Normal sidebar flow for small screens */
@media (max-width: 765px) {
    .sidebar {
        position: static;
        height: auto;
    }
}

/* Button styles for the mcqs */
.buttn {
    font-size: 1rem;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    margin-bottom: 20px;
    padding: 8px 12px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
}

.buttn:hover {
    transform: translateY(-2px);
}

.btn-answer {
    border: 1px solid var(--ppl-deep-sea-green);
    background-color: transparent;
    color: var(--ppl-deep-sea-green);
}

.btn-answer:hover {
    background-color: var(--ppl-deep-sea-green);
    color: white;
}

.btn-the-correct {
    background-color: green !important;
    color: white !important;
    border: none !important;
}

.btn-the-wrong {
    background-color: red !important;
    color: white !important;
    border: none !important;
}

/* =========================
   Disabled MCQ Buttons
   ========================= */

.all-btn-disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Remove hover lift once disabled */
.all-btn-disabled:hover{
  transform: none !important;
}

/* If disabled but correct → keep correct styling visible */
.all-btn-disabled.btn-the-correct{
  opacity: 1;
}

/* If disabled but wrong → slightly dim */
.all-btn-disabled.btn-the-wrong{
  opacity: 0.8;
}

/* =========================
   Correct Confetti Particles
   ========================= */

.btn-confetti-host{
  position: relative; /* needed so particles can anchor to the button */
  overflow: visible;  /* allow particles to fly out */
}

.confetti{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(22,35,42,0.18));
  will-change: transform, opacity;
}

/* Variation shapes */
.confetti--dot{ border-radius: 999px; }
.confetti--sq { border-radius: 3px; }
.confetti--tri{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--confetti-color, #FF5804);
  background: transparent !important;
  border-radius: 0;
}

/* Floating animation (uses CSS vars for direction + rotation) */
@keyframes confettiFloat{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(0.9);
  }
  10%{ opacity: 1; }
  100%{
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(var(--dx, 0px), var(--dy, -70px))
      rotate(var(--rot, 220deg))
      scale(1.0);
  }
}

/* =========================
   Wrong Answer Animation
   ========================= */

@keyframes nopeShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}

.wrong-animate-once {
  animation: nopeShake 280ms ease;
}

/* Explanation section */
.explanation {
    display: none;
    padding: 10px;
    border-radius: 4px;
    background-color: #d9edf7; /* info-like blue */
    color: #003550;
    border: 1px solid #bce8f1;
}

/* Flashcard Styles */
/* Flashcard Hint for title */
.flashcard-hint{
  margin: 6px 0;
  text-align: center;

  font-size: 13px;
  font-weight: 700;

  color: rgba(22,35,42,0.55); /* Muted Mirage */
  letter-spacing: -0.01em;
}

.flashcard-hint i{
  font-size: 0.85em;
  color: rgba(22,35,42,0.45);
}

.flashcard {
    width: 100%;
    height: 200px; /* Fixed height for cards */
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 30px;
    background: var(--ppl-deep-sea-green);
    color: var(--ppl-wild-sand)
}

.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--ppl-mirage);
    border: 2px solid var(--ppl-mirage);
    transform: rotateY(180deg);
    padding: 30px;
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.title:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Main content adjustments */
.main-content {
    margin-top: 20px;
}

/* Flashcard section */
#flashcardSection {
    clear: both;
}

/* Center the buttons */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between the buttons */
    margin-top: 50px; /* Space from top */
}

/* Style the "More Flashcards" button */
.flashcards-btn {
    background: linear-gradient(135deg, #40916c, #2d6a4f); /* Gradient background */
    border: none;
    border-radius: 50px; /* Rounded corners */
    color: white;
    font-size: 1.2rem;
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.flashcards-btn:hover {
    background: linear-gradient(135deg, #2d6a4f,#40916c); /* Reverse gradient on hover */
}

.flashcards-btn:focus {
    outline: none; /* Remove focus outline */
}

.flashcards-btn:active {
    transform: scale(1); /* Reset the scale on click */
}

/* Style the "More MCQs" button */
.mcqs-btn {
    background: linear-gradient(135deg, #40916c, #2d6a4f); /* Gradient background */
    border: none;
    border-radius: 50px; /* Rounded corners */
    color: white;
    font-size: 1.2rem;
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.mcqs-btn:hover {
    background: linear-gradient(135deg, #2d6a4f,#40916c); /* Reverse gradient on hover */
}

.mcqs-btn:focus {
    outline: none; /* Remove focus outline */
}

.mcqs-btn:active {
    transform: scale(1); /* Reset the scale on click */
}

.content-area{
    padding: 10px 10px 20px;
    border-radius: 20px;
}

/* For the mcqs and flashcards btn in the toc*/
.txt-color{
    color: #0056b3;
    font-size: 1.2rem;
}

/* General styles for the notes content container */
#notesContent {
    margin: 1.5rem 0; /* Moderate spacing */
    line-height: 1.6; /* Optimal readability */
    color: #333; /* Base text color */
    font-family: 'Raleway', sans-serif; /* Modern, clean font */
    font-size: 1rem; /* Standardized text size */
}

/* Horizontal separator for major sections */
#notesContent > hr {
    border: none;
    border-top: 1.5px solid #ddd; /* Subtle divider */
    margin: 1.5rem 0; /* Slightly reduced spacing */
}

/* Headings */
#notesContent > h1 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ppl-deep-sea-green);
    margin-bottom: 1.2rem;
    margin-top: 1.5rem;
    border-top: 2px solid var(--ppl-deep-sea-green);
    padding-top: 1.5rem;
    padding-bottom: 0.3rem;
}

#notesContent > h1:first-of-type {
    border-top: none;
}

#notesContent > h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--ppl-deep-sea-green);;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    border-top: 1.5px solid var(--ppl-deep-sea-green);
    padding-bottom: 0.2rem;
    padding-top: 1rem;
}

#notesContent > h2:first-of-type {
    border-top: none;
}

#notesContent > h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ppl-deep-sea-green);
    margin-top: 1.2rem;
    border-top: 1px solid var(--ppl-deep-sea-green);
    padding-top: 0.8rem;
}

#notesContent > h4,
#notesContent > h5,
#notesContent > h6 {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--ppl-deep-sea-green);
    margin-bottom: 0.6rem;
    margin-top: 1rem;
    border-top: 1px solid var(--ppl-deep-sea-green);
    padding-top: 0.6rem;
}

/* Paragraphs */
#notesContent > p {
    margin-bottom: 0.6rem;
    color: #272727;
    font-size: 1rem;
}

/* Lists */
#notesContent > ul,
#notesContent > ol {
    padding-left: 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

#notesContent > ul > li,
#notesContent > ol > li {
    margin-bottom: 0.5rem;
    padding-left: 0.3rem;
}

.key-ps {
    max-width: 100%;         /* don’t allow it to expand */
    overflow-x: hidden;      /* hide accidental overflow */
    word-wrap: break-word;   /* break long words */
    overflow-wrap: anywhere; /* force wrap for very long tokens */
}

.key-ps ul {
    padding-left: 1rem;    /* keep bullets indented properly */
    margin: 0;
}

.key-ps ul li {
    padding-left: 0.3rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.key-ps pre, 
.key-ps code {
    white-space: pre-wrap;   /* allow wrapping inside code */
    word-break: break-word;
}

/* Links */
#notesContent > a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #0056b3;
}

#notesContent > a:hover {
    color: #003d80;
    border-bottom-color: #003d80;
}

#notesContent > img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 10px;
    margin: auto;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

/* For flow charts and normal codes set by js */
.mathjax {
    display: block;          /* Avoid flex for math blocks */
    text-align: center;      /* Center horizontally */
    overflow-x: auto;        /* Horizontal scroll if needed */
    overflow-y: hidden;      /* Prevent unwanted vertical scroll */
    white-space: pre;        /* Preserve line breaks, unlike nowrap */
    max-width: 100%;         /* Prevent container from exceeding page width */
}

.mathjax-placeholder {
    background-color: #eef2ff;           /* soft lavender/blue */
    border-left: 5px solid #6366f1;      /* indigo for "info" */
    padding: 1rem;
    border-radius: 6px;
    font-family: monospace;
    color: #374151;                      /* neutral text */
    line-height: 1.6;
    margin-bottom: 1rem;
}

.mermaid {
  display: block;             /* let content flow, not center */
  margin: 1rem 0;
  overflow-x: auto;           /* enable horizontal scrolling */
  overflow-y: hidden;
  position: relative;         /* needed for fade overlay */
  -webkit-overflow-scrolling: touch;
}

/* breathing room already handled by JS viewBox padding */
.mermaid svg {
  display: block;
  max-width: none;
  margin: 0 auto;                  /* no auto-centering */
}

.mermaid-placeholder {
    background-color: #fdf6e3;         /* soft yellow */
    border-left: 5px solid #eab308;   /* amber warning-ish tone */
    padding: 1rem;
    border-radius: 6px;
    font-family: monospace;
    color: #4b5563;                   /* neutral text color */
    line-height: 1.6;
    margin-bottom: 1rem;
}


/* For long diagrams */
.scroll-hint {
  text-align: center;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #555;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}

/* Blockquote Styling */
#notesContent > blockquote {
    border-left: 3px solid var(--ppl-blaze-orange);
    padding-left: 0.8rem;
    margin: 1rem 0;
    font-style: italic;
    color: #555;
}

/* Wrapper for scrollable tables */
#notesContent .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
}

/* Tables */
#notesContent table {
    border-collapse: collapse;
    margin: 1.5rem auto;
    font-size: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 1rem;
    min-width: 500px;   /* 🔑 ensures scroll instead of squish */
    width: auto;        /* table takes natural width */
}

/* Headers */
#notesContent th {
    background: #f5f5f5;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #ddd;
    white-space: nowrap; /* prevent header text from breaking */
}

/* Cells */
#notesContent td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    white-space: nowrap; /* keep cells inline, rely on scroll */
}

/* Zebra striping */
#notesContent tr:nth-child(even) td {
    background: #fafafa;
}

/* Hover effect */
#notesContent tr:hover td {
    background: #f0f7ff;
}

/* Phones & small tablets 768 px and below */
@media (max-width: 767.98px) {
    /* Body text */
    #notesContent           { font-size: 0.95rem; }

    /* Headings */
    #notesContent > h1      { font-size: 1.8rem; }
    #notesContent > h2      { font-size: 1.5rem; }
    #notesContent > h3      { font-size: 1.3rem; }
    #notesContent > h4,
    #notesContent > h5,
    #notesContent > h6      { font-size: 1.15rem; }

    /* Paragraphs & lists */
    #notesContent > p,
    #notesContent > ul,
    #notesContent > ol      { font-size: 0.95rem; }
}

/* Extra-small devices (most phones) 576 px and below */
@media (max-width: 575.98px) {
    #notesContent           { font-size: 0.9rem; }

    #notesContent > h1      { font-size: 1.6rem; }
    #notesContent > h2      { font-size: 1.4rem; }
    #notesContent > h3      { font-size: 1.2rem; }
    #notesContent > h4,
    #notesContent > h5,
    #notesContent > h6      { font-size: 1.05rem; }

    #notesContent > p,
    #notesContent > ul,
    #notesContent > ol      { font-size: 0.9rem; }
}

/* =========================
   TOC Wrapper
   ========================= */

.toc-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* =========================
   Section Header
   ========================= */

.section-header {
  width: min(100%, 900px);
  margin: 40px auto 32px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;

  padding: 22px 26px;
  border-radius: 18px;

  background: var(--ppl-surface, #ffffff);
  border: 1px solid rgba(22,35,42,0.08);
  box-shadow: 0 18px 38px rgba(22,35,42,0.08);

  overflow: hidden;
}

/* Critical for long text inside flex */
.section-header__titles {
  min-width: 0;
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Shared title behavior */
.section-header__chapter,
.section-header__subchapter {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Keep icons aligned nicely with wrapped text */
.section-header__chapter i,
.section-header__subchapter i {
  flex: 0 0 auto;
  margin-top: 0.15em;
}

/* Chapter Title */
.section-header__chapter {
  margin: 0;

  display: flex;
  align-items: flex-start;
  gap: 0.45rem;

  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.08;
  font-weight: 1000;
  letter-spacing: -0.035em;
  color: var(--ppl-mirage);
}

/* Subchapter */
.section-header__subchapter {
  margin: 0;

  display: flex;
  align-items: flex-start;
  gap: 0.45rem;

  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.28;
  font-weight: 800;
  color: var(--ppl-deep-sea-green);
}

/* Accent divider */
.section-header__titles::after {
  content: "";
  width: 60px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--ppl-blaze-orange);
}

/* Back link */
.section-header__back {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  padding: 9px 12px;
  border-radius: 999px;

  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;

  color: var(--ppl-deep-sea-green);
  background: rgba(7,80,86,0.06);
  border: 1px solid rgba(7,80,86,0.10);
  text-decoration: none;
  white-space: nowrap;

  transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}

.section-header__back:hover {
  transform: translateX(-3px);
  opacity: 0.9;
  background: rgba(7,80,86,0.09);
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 680px) {
  .section-header {
    width: calc(100% - 24px);
    margin: 24px auto 22px;

    flex-direction: column;
    align-items: stretch;
    gap: 16px;

    padding: 18px 16px;
    border-radius: 16px;
  }

  .section-header__titles {
    width: 100%;
  }

  .section-header__chapter {
    font-size: clamp(21px, 7vw, 28px);
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .section-header__subchapter {
    font-size: 0.96rem;
    line-height: 1.35;
  }

  .section-header__titles::after {
    width: 52px;
    height: 3px;
    margin-top: 8px;
  }

  .section-header__back {
    width: max-content;
    max-width: 100%;
    align-self: flex-start;

    padding: 8px 11px;
    font-size: 0.84rem;
  }
}

@media (max-width: 420px) {
  .section-header {
    width: calc(100% - 18px);
    padding: 16px 14px;
  }

  .section-header__chapter {
    font-size: 1.38rem;
  }

  .section-header__subchapter {
    font-size: 0.9rem;
  }

  .section-header__chapter,
  .section-header__subchapter {
    gap: 0.38rem;
  }
}

/* =========================
   TOC Header
   ========================= */

.toc-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.toc-header span{
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ppl-mirage);
  letter-spacing: -0.01em;
}

/* Optional: subtle green background for TOC container */
.toc-container{
  background: rgba(7,80,86,0.05);
  border-radius: 16px;
  padding: 18px;
}

/* Responsive */
@media (max-width: 768px){
  .toc-context{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Toggle Button */
.toggle-btn {
background: transparent;
border: none;
cursor: pointer;
position: relative;
width: 40px;
height: 40px;
}

.toggle-btn .menu-icon {
width: 25px;
height: 2px;
background: var(--ppl-deep-sea-green);
display: block;
position: relative;
transition: all 0.3s ease-in-out;
}

.toggle-btn .menu-icon::before,
.toggle-btn .menu-icon::after {
content: "";
width: 25px;
height: 2px;
background: var(--ppl-deep-sea-green);
display: block;
position: absolute;
transition: all 0.3s ease-in-out;
}

.toggle-btn .menu-icon::before {
top: -8px;
}

.toggle-btn .menu-icon::after {
top: 8px;
}

/* X Effect */
.toggle-btn.open .menu-icon {
transform: rotate(45deg);
background: #ff6347;
}

.toggle-btn.open .menu-icon::before {
transform: rotate(90deg);
top: 0;
}

.toggle-btn.open .menu-icon::after {
opacity: 0;
}

/* TOC Container */
.toc-container {
display: none; /* Hidden initially */
padding: 1rem;
background: transparent;
width: 100%;
}

/* Display when expanded */
.toc-container.expanded {
display: block;
}

/* TOC List */
.toc-list {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}

.toc-list li {
margin: 0.8rem 0;
padding-left: calc(1rem * var(--level, 0)); /* Indentation by level */
font-size: calc(1.4rem - var(--level, 0) * 0.1rem); /* Font size decreases with level */
font-weight: calc(600 - var(--level, 0) * 100); /* Weight decreases with level */
}

.toc-list li a {
text-decoration: none;
color: var(--ppl-mirage);
transition: all 0.2s ease;
}

.toc-list li a:hover {
    text-decoration: underline;
}
  
/* === Mobile-friendly TOC sizing === */

/* Small tablets & large phones  (≤ 768 px) */
@media (max-width: 767.98px) {
    /* Header label */
    .toc-header span {
        font-size: 1rem;
    }

    /* For the mcqs and flashcards btn in the toc*/
    .txt-color{
        font-size: 1rem;
    }

    /* Hamburger / X button */
    .toggle-btn {
        width: 32px;
        height: 32px;
    }

    .toggle-btn .menu-icon,
    .toggle-btn .menu-icon::before,
    .toggle-btn .menu-icon::after {
        width: 22px;
    }

    /* TOC items: consistent font size, alignment based on level */
    .toc-list li {
        margin: 0.6rem 0;
        font-size: 1.05rem;
        text-align: center;
    }

    .toc-list li[level="0"] {
        text-align: left;
    }
}

/* key points gem */
.key-points-gem{
    color: var(--ppl-blaze-orange);
}

.question-card-actions {
    min-height: 20px;
}

.question-issue-icon-btn {
    position: relative;
    width: 25px;
    height: 25px;
    padding: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1;
    opacity: 0.55;
    transition:
        opacity 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease;
}

.question-issue-icon-btn:hover,
.question-issue-icon-btn:focus {
    opacity: 1;
    background: #f8fafc;
    transform: translateY(-1px);
}

/* Not yet reported: very subtle */
.question-issue-icon-btn--idle {
    color: #94a3b8;
}

.question-issue-icon-btn--idle:hover,
.question-issue-icon-btn--idle:focus {
    color: #c2410c;
}

/* Already reported: color-coded but still quiet */
.question-issue-icon-btn--reported {
    color: #f59e0b;
    opacity: 0.75;
    cursor: not-allowed;
}

.question-issue-icon-btn--reported:hover {
    background: transparent;
    transform: none;
}

/* Custom hover label */
.question-issue-icon-btn::after {
    content: attr(aria-label);
    position: absolute;
    top: 50%;
    right: 125%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.3rem 0.45rem;
    border-radius: 0.45rem;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 20;
}

.question-issue-icon-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 105%;
    transform: translateY(-50%);
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent #0f172a;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 20;
}

.question-issue-icon-btn:hover::after,
.question-issue-icon-btn:hover::before,
.question-issue-icon-btn:focus::after,
.question-issue-icon-btn:focus::before {
    opacity: 1;
    visibility: visible;
}

/* =========================
   Section Hero (Flashcards and mcqs)
   ========================= */

.section-hero{
  text-align: center;
  margin: 28px 0 36px;
}

.section-hero__title{
  margin: 0;
  font-size: clamp(28px, 3.5vw, 38px);
  letter-spacing: -0.03em;

  color: var(--ppl-mirage);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.section-hero__title i{
  color: var(--ppl-deep-sea-green);
  font-size: 0.9em;
}

/* Orange accent divider */
.section-hero__divider{
  width: 90px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;

  background: var(--ppl-blaze-orange);
}

/* =========================
   Dark Mode
   ========================= */
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .toc-wrapper,
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .toc-container,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .key-ps,
html[data-theme="dark"] .question-container,
html[data-theme="dark"] .chat-popup,
html[data-theme="dark"] .chat-body{
  background: #1a2a33;
  border-color: rgba(232,241,245,0.2);
}

html[data-theme="dark"] .section-header__chapter,
html[data-theme="dark"] .section-header__subchapter,
html[data-theme="dark"] .section-header__back,
html[data-theme="dark"] .toc-header span,
html[data-theme="dark"] .toc-list li a,
html[data-theme="dark"] .section-hero__title,
html[data-theme="dark"] .question-container p,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .key-ps,
html[data-theme="dark"] .flashcard-hint,
html[data-theme="dark"] .chat-header h5,
html[data-theme="dark"] .chat-messages,
html[data-theme="dark"] .text-muted{
  color: rgba(232,241,245,0.94) !important;
}

html[data-theme="dark"] .toggle-btn .menu-icon,
html[data-theme="dark"] .toggle-btn .menu-icon::before,
html[data-theme="dark"] .toggle-btn .menu-icon::after{
  background: rgba(232,241,245,0.9);
}

html[data-theme="dark"] #flashcardBtn,
html[data-theme="dark"] #mcqBtn{
  background: #15242c;
  border: 1px solid rgba(232,241,245,0.25);
  color: rgba(232,241,245,0.95);
}

html[data-theme="dark"] #flashcardBtn:hover,
html[data-theme="dark"] #mcqBtn:hover{
  background: var(--ppl-deep-sea-green);
  color: #fff;
}

html[data-theme="dark"] .flashcard-front,
html[data-theme="dark"] .flashcard-back,
html[data-theme="dark"] #chatInput{
  background: #15242c;
  border-color: rgba(232,241,245,0.2);
  color: rgba(232,241,245,0.93);
}

html[data-theme="dark"] .chat-messages .user-message{
  background: #214552;
  color: rgba(232,241,245,0.95);
}

html[data-theme="dark"] .chat-messages .reply-message{
  background: #15242c;
  color: rgba(232,241,245,0.95);
}
/* Container for notes reader with future ads */
/* =========================
   Notes Reader Ad Rail
   ========================= */
.container-fluid:has(#notesContent){
  max-width:1320px;
}

.container-fluid:has(#notesContent) > .row.mx-0{
  display:block;
  padding-right:320px;
  position:relative;
}

.container-fluid:has(#notesContent) > .row.mx-0::after{
  background:#f7f9ff;
  border:1px dashed rgba(16,24,40,.18);
  border-radius:18px;
  color:#64748b;
  content:"Advert space";
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.04em;
  padding:18px;
  position:absolute;
  right:0;
  text-align:center;
  text-transform:uppercase;
  top:28px;
  width:280px;
}

.container-fluid:has(#notesContent) .toc-wrapper,
.container-fluid:has(#notesContent) .content-area,
.container-fluid:has(#notesContent) .key-ps,
.container-fluid:has(#notesContent) .question-card-actions,
.container-fluid:has(#notesContent) .section-hero,
.container-fluid:has(#notesContent) #flashcards-container,
.container-fluid:has(#notesContent) #mcqs-container{
  margin-left:auto;
  margin-right:auto;
  max-width:940px;
}

.container-fluid:has(#notesContent) #notesContent{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:900px;
}

html[data-theme="dark"] .container-fluid:has(#notesContent) > .row.mx-0::after{
  background:#0f1e3d;
  border-color:rgba(219,230,251,.22);
  color:#c6cfec;
}

@media (max-width: 1100px){
  .container-fluid:has(#notesContent) > .row.mx-0{
    padding-right:0;
  }

  .container-fluid:has(#notesContent) > .row.mx-0::after{
    display:none;
  }
}

/* Container for mockup notes reader */
/* =========================
   Mockup Notes Reader
   ========================= */
.container-fluid:has(#notesContent){
  max-width:1248px;
  padding-left:24px;
  padding-right:24px;
}

.container-fluid:has(#notesContent) > .row.mx-0{
  align-items:start;
  display:grid;
  gap:22px;
  grid-template-columns:minmax(0, 1fr) 300px;
  padding-right:0;
}

.container-fluid:has(#notesContent) > .row.mx-0::after{
  display:none;
}

.container-fluid:has(#notesContent) .main-content{
  display:none;
}

.ppl-noteHero{
  background:#102d6c;
  border-radius:16px;
  color:#ffffff;
  display:grid;
  grid-column:1 / -1;
  grid-template-columns:auto minmax(0, 1fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "actions title"
    "meta meta";
  column-gap:12px;
  margin-top:22px;
  overflow:hidden;
  padding:24px;
  position:relative;
}

.ppl-noteHero::after{
  background:#dcf465;
  border-radius:999px;
  content:"";
  height:74px;
  opacity:.95;
  position:absolute;
  right:28px;
  top:24px;
  width:74px;
}

.ppl-noteHero__eyebrow{
  align-items:center;
  align-self:start;
  background:#ffffff;
  border:1px solid #ece7de;
  border-radius:999px;
  color:#1c46a5;
  display:inline-flex;
  font-size:12px;
  font-weight:900;
  gap:7px;
  grid-area:eyebrow;
  justify-self:start;
  padding:7px 13px;
  position:relative;
  z-index:2;
}

.ppl-noteHero h1{
  align-self:center;
  color:#ffffff;
  font-size:clamp(26px, 4vw, 42px);
  font-weight:950;
  grid-area:title;
  letter-spacing:0;
  line-height:1.05;
  margin:14px 0 8px;
  max-width:760px;
  min-width:0;
  position:relative;
  z-index:2;
}

.ppl-noteHero p{
  color:#c6cfec;
  font-size:14px;
  font-weight:700;
  margin:0;
  position:relative;
  z-index:2;
}

/* Reading + audio row */
.ppl-noteHero__meta{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  grid-area:meta;
  margin-top:10px !important;
}

.ppl-noteHero__meta span{
  align-items:center;
  color:#c6cfec;
  display:inline-flex;
  gap:7px;
  line-height:1.2;
  white-space:nowrap;
}

.ppl-noteHero__meta i{
  color:#dcf465;
  font-size:.9rem;
}

/* Mobile: keep readable, but still compact */
@media (max-width:520px){
  .ppl-noteHero{
    column-gap:8px;
    padding:18px 16px;
  }

  .ppl-noteHero__meta{
    gap:7px 12px;
  }

  .ppl-noteHero__meta span{
    font-size:13px;
  }

  .ppl-noteHero__actions{
    margin:12px 0 7px;
  }

  .ppl-noteHero__back{
    font-size:.7rem;
    gap:5px;
    padding:6px 9px;
  }
}

.container-fluid:has(#notesContent) .toc-wrapper{
  grid-column:2;
  grid-row:2;
  margin:0;
  max-width:none;
  position:sticky;
  top:88px;
}


/* Container for notes reader learning rail */
/* =========================
   Notes Reader Learning Rail
   ========================= */

.container-fluid:has(#notesContent) .ppl-audio-note-card,
.container-fluid:has(#notesContent) .content-area,
.container-fluid:has(#notesContent) .key-ps,
.container-fluid:has(#notesContent) > .row.mx-0 > hr,
.container-fluid:has(#notesContent) > .row.mx-0 > h5,
.container-fluid:has(#notesContent) > .row.mx-0 > .text-center{
  grid-column:1;
  margin-left:0;
  margin-right:0;
  max-width:none;
}

.container-fluid:has(#notesContent) .content-area,
.container-fluid:has(#notesContent) .key-ps{
  background:#ffffff;
  border:1px solid #ece7de;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,45,108,.05), 0 10px 30px rgba(16,45,108,.06);
}

.container-fluid:has(#notesContent) .content-area{
  padding:22px;
}

.container-fluid:has(#notesContent) #notesContent{
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:none;
}

.container-fluid:has(#notesContent) .key-ps{
  padding:20px;
}

.container-fluid:has(#notesContent) > .row.mx-0 > .container-fluid.mb-3{
  grid-column:1 / -1;
  padding-left:0;
  padding-right:0;
}

.ppl-noteAdRail{
  color:#102d6c;
  display:grid;
  gap:12px;
  min-width:0;
  padding:0;
}

.ppl-notesFinishCta{
  background:#ffffff;
  border:1px solid #e6edf8;
  border-radius:18px;
  box-shadow:0 1px 2px rgba(16,45,108,.05), 0 12px 30px rgba(16,45,108,.07);
  display:grid;
  gap:12px;
  padding:14px;
}

.ppl-notesFinishCta__copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.ppl-notesFinishCta__copy > span{
  color:#16232a;
  font-size:.82rem;
  font-weight:1000;
  line-height:1.2;
}

.ppl-notesFinishCta__copy p{
  color:#667085;
  font-size:.78rem;
  font-weight:750;
  line-height:1.45;
  margin:0;
}

.ppl-notesFinishCta__copy p strong{
  color:#102d6c;
  font-weight:1000;
}

.ppl-notesFinishCta__copy small{
  color:#7a8598;
  font-size:.72rem;
  font-weight:700;
  line-height:1.4;
}

.ppl-notesFinishCta__actions{
  display:grid;
  gap:8px;
  grid-template-columns:1fr;
}

.ppl-noteQuickAction{
  align-items:center;
  border:1px solid #dbe6fb;
  border-radius:10px;
  color:#102d6c;
  display:inline-flex;
  font-size:.78rem;
  font-weight:950;
  gap:8px;
  justify-content:flex-start;
  min-height:38px;
  padding:9px 12px;
  text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  width:100%;
}

.ppl-noteQuickAction:hover,
.ppl-noteQuickAction:focus-visible{
  background:#eef3ff;
  border-color:#b8cdf8;
  color:#102d6c;
  outline:none;
  transform:translateY(-1px);
}

.ppl-noteQuickAction--primary{
  background:#1c46a5;
  border-color:#1c46a5;
  color:#ffffff;
}

.ppl-noteQuickAction--primary:hover,
.ppl-noteQuickAction--primary:focus-visible{
  background:#102d6c;
  border-color:#102d6c;
  color:#ffffff;
}

.ppl-noteAdCards{
  display:grid;
  gap:12px;
}

.ppl-notePromoCard{
  border:1px solid #e6edf8;
  border-radius:18px;
  box-shadow:0 1px 2px rgba(16,45,108,.05), 0 12px 30px rgba(16,45,108,.07);
  color:#102d6c;
  display:grid;
  gap:8px;
  min-width:0;
  overflow:hidden;
  padding:14px;
}

.ppl-notePromoCard__badge{
  align-items:center;
  border-radius:999px;
  display:inline-flex;
  font-size:.6rem;
  font-weight:1000;
  justify-self:start;
  letter-spacing:.06em;
  line-height:1;
  padding:5px 8px;
  text-transform:uppercase;
}

.ppl-notePromoCard h3{
  font-size:.9rem;
  font-weight:1000;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0;
}

.ppl-notePromoCard p{
  font-size:.72rem;
  font-weight:720;
  line-height:1.45;
  margin:0;
}

.ppl-notePromoCard__link{
  align-items:center;
  border-radius:10px;
  display:inline-flex;
  font-size:.72rem;
  font-weight:1000;
  gap:7px;
  justify-content:center;
  margin-top:2px;
  min-height:34px;
  padding:8px 10px;
  text-decoration:none;
  transition:transform .16s ease, filter .16s ease, background-color .16s ease;
  width:100%;
}

.ppl-notePromoCard__link:hover,
.ppl-notePromoCard__link:focus-visible{
  outline:none;
  transform:translateY(-1px);
}

.ppl-notePromoCard--exam,
.ppl-notePromoCard--pricing{
  background:#102d6c;
  border-color:#102d6c;
  color:#ffffff;
}

.ppl-notePromoCard--exam .ppl-notePromoCard__badge,
.ppl-notePromoCard--pricing .ppl-notePromoCard__badge{
  background:#dcf465;
  color:#102d6c;
}

.ppl-notePromoCard--exam p,
.ppl-notePromoCard--pricing p{
  color:rgba(255,255,255,.82);
}

.ppl-notePromoCard--exam .ppl-notePromoCard__link,
.ppl-notePromoCard--pricing .ppl-notePromoCard__link{
  background:#dcf465;
  color:#102d6c;
}

.ppl-notePromoCard--books,
.ppl-notePromoCard--pharmaindex{
  background:#f4ffd7;
  border-color:#e4f6a4;
}

.ppl-notePromoCard--books .ppl-notePromoCard__badge,
.ppl-notePromoCard--pharmaindex .ppl-notePromoCard__badge{
  background:#102d6c;
  color:#ffffff;
}

.ppl-notePromoCard--books .ppl-notePromoCard__link,
.ppl-notePromoCard--pharmaindex .ppl-notePromoCard__link{
  background:#1c46a5;
  color:#ffffff;
}

.ppl-notePromoCard--teams{
  background:#eef3ff;
  border-color:#dbe6fb;
}

.ppl-notePromoCard--teams .ppl-notePromoCard__badge{
  background:#102d6c;
  color:#ffffff;
}

.ppl-notePromoCard--teams .ppl-notePromoCard__link{
  background:#ffffff;
  border:1px solid #dbe6fb;
  color:#102d6c;
}

.ppl-notePromoCard--academy{
  background:#fff1e2;
  border-color:#ffd7ad;
}

.ppl-notePromoCard--academy .ppl-notePromoCard__badge{
  background:#ffbf82;
  color:#7a3300;
}

.ppl-notePromoCard--academy .ppl-notePromoCard__link{
  background:#ffffff;
  border:1px solid #ffd7ad;
  color:#102d6c;
}

/* Container for notes reader advert-ready shell */
/* =========================
   Notes Reader With Learning Rail
   ========================= */

.container-fluid:has(#notesContent) > .row.mx-0{
  display:grid;
  grid-template-columns:1fr;
}

.container-fluid:has(#notesContent) .main-content.ppl-noteShell{
  align-items:start;
  display:grid !important;
  gap:22px;
  grid-template-columns:minmax(0, 1fr) 300px;
  width:100%;
}

.container-fluid:has(#notesContent) .main-content.ppl-noteShell .ppl-notePrimary{
  grid-column:1;
  grid-row:1;
  min-width:0;
}

.container-fluid:has(#notesContent) .main-content.ppl-noteShell .toc-wrapper{
  grid-column:auto;
  grid-row:auto;
  margin:0 0 18px;
  max-width:none;
  position:relative;
  top:auto;
}

.container-fluid:has(#notesContent) .main-content.ppl-noteShell .ppl-noteAdRail{
  grid-column:2;
  grid-row:1;
  position:sticky;
  top:96px;
}

.container-fluid:has(#notesContent) .ppl-notePrimary .ppl-audio-note-card,
.container-fluid:has(#notesContent) .ppl-notePrimary .content-area,
.container-fluid:has(#notesContent) .ppl-notePrimary .key-ps,
.container-fluid:has(#notesContent) .ppl-notePrimary > hr,
.container-fluid:has(#notesContent) .ppl-notePrimary > h5,
.container-fluid:has(#notesContent) .ppl-notePrimary > .text-center,
.container-fluid:has(#notesContent) .ppl-notePrimary > .container-fluid.mb-3,
.container-fluid:has(#notesContent) .ppl-notePrimary > .container.mb-3{
  grid-column:auto;
  max-width:none;
}

.container-fluid:has(#notesContent) .ppl-notePrimary > .container-fluid.mb-3,
.container-fluid:has(#notesContent) .ppl-notePrimary > .container.mb-3{
  padding-left:0;
  padding-right:0;
}

html[data-theme="dark"] .container-fluid:has(#notesContent) .content-area,
html[data-theme="dark"] .container-fluid:has(#notesContent) .key-ps,
html[data-theme="dark"] .ppl-notesFinishCta,
html[data-theme="dark"] .ppl-notePromoCard{
  background:#0f1e3d;
  border-color:rgba(219,230,251,.16);
  box-shadow:none;
}

html[data-theme="dark"] .ppl-notesFinishCta__copy > span,
html[data-theme="dark"] .ppl-notesFinishCta__copy p strong,
html[data-theme="dark"] .ppl-notePromoCard h3{
  color:#f7f9ff;
}

html[data-theme="dark"] .ppl-notesFinishCta__copy p,
html[data-theme="dark"] .ppl-notesFinishCta__copy small,
html[data-theme="dark"] .ppl-notePromoCard p{
  color:#c6cfec;
}

html[data-theme="dark"] .ppl-noteQuickAction{
  background:#132244;
  border-color:rgba(219,230,251,.16);
  color:#f7f9ff;
}

html[data-theme="dark"] .ppl-noteQuickAction--primary{
  background:#dcf465;
  border-color:#dcf465;
  color:#102d6c;
}

html[data-theme="dark"] .ppl-notePromoCard--exam,
html[data-theme="dark"] .ppl-notePromoCard--pricing{
  background:#08152f;
  border-color:rgba(220,244,101,.18);
}

html[data-theme="dark"] .ppl-notePromoCard--books,
html[data-theme="dark"] .ppl-notePromoCard--pharmaindex,
html[data-theme="dark"] .ppl-notePromoCard--teams,
html[data-theme="dark"] .ppl-notePromoCard--academy{
  background:#132244;
}

@media (max-width: 980px){
  .container-fluid:has(#notesContent){
    padding-left:12px;
    padding-right:12px;
  }

  .container-fluid:has(#notesContent) > .row.mx-0,
  .container-fluid:has(#notesContent) .main-content.ppl-noteShell{
    grid-template-columns:1fr;
  }

  .container-fluid:has(#notesContent) .toc-wrapper,
  .ppl-noteAdRail,
  .container-fluid:has(#notesContent) .ppl-audio-note-card,
  .container-fluid:has(#notesContent) .content-area,
  .container-fluid:has(#notesContent) .key-ps,
  .container-fluid:has(#notesContent) > .row.mx-0 > hr,
  .container-fluid:has(#notesContent) > .row.mx-0 > h5,
  .container-fluid:has(#notesContent) > .row.mx-0 > .text-center,
  .container-fluid:has(#notesContent) > .row.mx-0 > .container-fluid.mb-3{
    grid-column:1;
    position:static;
  }

  .container-fluid:has(#notesContent) .main-content.ppl-noteShell .ppl-notePrimary{
    grid-column:1;
    grid-row:1;
  }

  .container-fluid:has(#notesContent) .main-content.ppl-noteShell .ppl-noteAdRail{
    grid-column:1;
    grid-row:2;
    margin-top:4px;
    overflow:hidden;
    position:static;
    top:auto;
    width:100%;
  }

  .ppl-noteAdCards{
    display:flex;
    gap:12px;
    margin-right:-12px;
    overflow-x:auto;
    padding:0 12px 4px 0;
    scroll-padding-left:0;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }

  .ppl-notePromoCard{
    flex:0 0 min(282px, 82vw);
    scroll-snap-align:start;
  }

  .ppl-notesFinishCta__actions{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ppl-noteHero::after{
    display:none;
  }
}

@media (max-width: 520px){
  .ppl-notesFinishCta{
    padding:13px;
  }

  .ppl-noteQuickAction{
    font-size:.74rem;
    justify-content:center;
    padding-left:9px;
    padding-right:9px;
  }
}

/* Container for inline flashcard reveal cards */
/* =========================
   Notes Flashcard Reveal Cards
   ========================= */
.ppl-inlineFlashcard{
  background:#ffffff;
  border:1px solid rgba(16,24,40,.09);
  border-radius:20px;
  box-shadow:0 18px 44px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
  padding:20px;
}

.ppl-inlineFlashcard.is-revealed{
  border-color:rgba(28,70,165,.24);
}

.ppl-inlineFlashcard__eyebrow{
  color:#1c46a5;
  font-size:.75rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ppl-inlineFlashcard__question{
  color:#102d6c;
  font-size:1.08rem;
  font-weight:900;
  line-height:1.35;
}

.ppl-inlineFlashcard__answer{
  background:#f7f9ff;
  border:1px solid rgba(28,70,165,.12);
  border-radius:16px;
  color:#234;
  font-size:.95rem;
  font-weight:700;
  line-height:1.65;
  padding:14px 16px;
}

.ppl-inlineFlashcard__answer[hidden]{
  display:none !important;
}

.ppl-inlineFlashcard__toggle{
  align-self:flex-start;
}

html[data-theme="dark"] .ppl-inlineFlashcard{
  background:#132244;
  border-color:rgba(219,230,251,.12);
  box-shadow:none;
}

html[data-theme="dark"] .ppl-inlineFlashcard.is-revealed{
  border-color:rgba(217,255,79,.34);
}

html[data-theme="dark"] .ppl-inlineFlashcard__eyebrow{
  color:#d9ff4f;
}

html[data-theme="dark"] .ppl-inlineFlashcard__question{
  color:#ffffff;
}

html[data-theme="dark"] .ppl-inlineFlashcard__answer{
  background:#0f1e3d;
  border-color:rgba(219,230,251,.1);
  color:#dbe6fb;
}

@media (max-width: 767px){
  .ppl-inlineFlashcard{
    padding:16px;
  }

  .ppl-inlineFlashcard__toggle{
    width:100%;
  }
}

/* finished reading notes cta styles are defined in the Notes Reader Learning Rail section above. */

html[data-theme="dark"] .section-header__chapter,
html[data-theme="dark"] .section-header__subchapter,
html[data-theme="dark"] .section-header__back,
html[data-theme="dark"] .toc-header span,
html[data-theme="dark"] .toc-list li a,
html[data-theme="dark"] .key-ps,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .question-container p,
html[data-theme="dark"] .text-muted {
    color: rgba(232, 241, 245, 0.96) !important;
}

html[data-theme="dark"] .toc-wrapper,
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .toc-container,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .key-ps,
html[data-theme="dark"] .question-container {
    background: #1a2a33 !important;
    border-color: rgba(232, 241, 245, 0.2) !important;
}

html[data-theme="dark"] #flashcardBtn,
html[data-theme="dark"] #mcqBtn {
    background: #15242c !important;
    color: rgba(232, 241, 245, 0.96) !important;
    border: 1px solid rgba(232, 241, 245, 0.24) !important;
}

html[data-theme="dark"] .section-header__chapter,
html[data-theme="dark"] .section-header__subchapter,
html[data-theme="dark"] .section-header__back,
html[data-theme="dark"] .toc-header span,
html[data-theme="dark"] .toc-list li a,
html[data-theme="dark"] .key-ps,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .question-container p,
html[data-theme="dark"] .text-muted {
    color: rgba(232, 241, 245, 0.96) !important;
}

html[data-theme="dark"] .toc-wrapper,
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .toc-container,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .key-ps,
html[data-theme="dark"] .question-container {
    background: #1a2a33 !important;
    border-color: rgba(232, 241, 245, 0.2) !important;
}

html[data-theme="dark"] #flashcardBtn,
html[data-theme="dark"] #mcqBtn {
    background: #15242c !important;
    color: rgba(232, 241, 245, 0.96) !important;
    border: 1px solid rgba(232, 241, 245, 0.24) !important;
}

html[data-theme="dark"] #notesContent,
html[data-theme="dark"] #notesContent p,
html[data-theme="dark"] #notesContent li,
html[data-theme="dark"] #notesContent ul,
html[data-theme="dark"] #notesContent ol,
html[data-theme="dark"] #notesContent h1,
html[data-theme="dark"] #notesContent h2,
html[data-theme="dark"] #notesContent h3,
html[data-theme="dark"] #notesContent h4,
html[data-theme="dark"] #notesContent h5,
html[data-theme="dark"] #notesContent h6,
html[data-theme="dark"] #notesContent span,
html[data-theme="dark"] #notesContent strong,
html[data-theme="dark"] #notesContent em,
html[data-theme="dark"] #notesContent blockquote,
html[data-theme="dark"] #notesContent td,
html[data-theme="dark"] #notesContent th {
    color: rgba(232, 241, 245, 0.96) !important;
}

html[data-theme="dark"] #notesContent a {
    color: #8ad6d9 !important;
}

/* Keep dark ink inside light containers (diagrams/tables/code blocks) */
html[data-theme="dark"] #notesContent .mermaid,
html[data-theme="dark"] #notesContent pre,
html[data-theme="dark"] #notesContent code,
html[data-theme="dark"] #notesContent table,
html[data-theme="dark"] #notesContent th,
html[data-theme="dark"] #notesContent td,
html[data-theme="dark"] #notesContent .table-responsive,
html[data-theme="dark"] #notesContent blockquote {
    color: #16232A !important;
}

html[data-theme="dark"] #notesContent .mermaid *,
html[data-theme="dark"] #notesContent pre *,
html[data-theme="dark"] #notesContent code *,
html[data-theme="dark"] #notesContent table * {
    color: rgba(232, 241, 245, 0.96) !important;
}

/* Mermaid text */
html[data-theme="dark"] #notesContent .mermaid svg text,
html[data-theme="dark"] #notesContent .mermaid svg tspan,
html[data-theme="dark"] #notesContent .mermaid svg .label {
    fill: #16232A !important;
}

/* Mermaid flowchart connectors/arrows */
html[data-theme="dark"] #notesContent .mermaid svg .edgePath .path,
html[data-theme="dark"] #notesContent .mermaid svg path.flowchart-link,
html[data-theme="dark"] #notesContent .mermaid svg .flowchart-link,
html[data-theme="dark"] #notesContent .mermaid svg .arrowheadPath,
html[data-theme="dark"] #notesContent .mermaid svg marker path {
    stroke: #e8f1f5 !important;
    fill: #e8f1f5 !important;
}

/* Generic light-background inline block */
html[data-theme="dark"] #notesContent [style*="background:#fff"],
html[data-theme="dark"] #notesContent [style*="background: #fff"],
html[data-theme="dark"] #notesContent [style*="background-color:#fff"],
html[data-theme="dark"] #notesContent [style*="background-color: #fff"] {
    color: #16232A !important;
}

html[data-theme="dark"] #notesContent [style*="background:#fff"] *,
html[data-theme="dark"] #notesContent [style*="background: #fff"] *,
html[data-theme="dark"] #notesContent [style*="background-color:#fff"] *,
html[data-theme="dark"] #notesContent [style*="background-color: #fff"] * {
    color: #16232A !important;
}

html[data-theme="dark"] #notesContent [style*="background:rgb(255"] *,
html[data-theme="dark"] #notesContent [style*="background: rgb(255"] *,
html[data-theme="dark"] #notesContent [style*="background-color:rgb(255"] *,
html[data-theme="dark"] #notesContent [style*="background-color: rgb(255"] * {
    color: #16232A !important;
}

html[data-theme="dark"] #notesContent [style*="background:#f"] *,
html[data-theme="dark"] #notesContent [style*="background: #f"] *,
html[data-theme="dark"] #notesContent [style*="background-color:#f"] *,
html[data-theme="dark"] #notesContent [style*="background-color: #f"] * {
    color: #16232A !important;
}

/* Dark-shaded table cells should always stay readable */
html[data-theme="dark"] #notesContent td[style*="background:#"],
html[data-theme="dark"] #notesContent td[style*="background-color:#"],
html[data-theme="dark"] #notesContent th[style*="background:#"],
html[data-theme="dark"] #notesContent th[style*="background-color:#"] {
    color: rgba(232, 241, 245, 0.96) !important;
}

/* Keep default table surface readable in dark mode */
html[data-theme="dark"] #notesContent table,
html[data-theme="dark"] #notesContent td,
html[data-theme="dark"] #notesContent th {
    border-color: rgba(232, 241, 245, 0.25) !important;
}

/* If mermaid is on a light surface, force dark connectors/arrows */
html[data-theme="dark"] #notesContent [style*="background:#fff"] .mermaid svg .edgePath .path,
html[data-theme="dark"] #notesContent [style*="background:#fff"] .mermaid svg path.flowchart-link,
html[data-theme="dark"] #notesContent [style*="background:#fff"] .mermaid svg .flowchart-link,
html[data-theme="dark"] #notesContent [style*="background:#fff"] .mermaid svg .arrowheadPath,
html[data-theme="dark"] #notesContent [style*="background:#fff"] .mermaid svg marker path {
    stroke: #16232A !important;
    fill: #16232A !important;
}

html[data-theme="dark"] #notesContent [style*="background-color:#fff"] .mermaid svg .edgePath .path,
html[data-theme="dark"] #notesContent [style*="background-color:#fff"] .mermaid svg path.flowchart-link,
html[data-theme="dark"] #notesContent [style*="background-color:#fff"] .mermaid svg .flowchart-link,
html[data-theme="dark"] #notesContent [style*="background-color:#fff"] .mermaid svg .arrowheadPath,
html[data-theme="dark"] #notesContent [style*="background-color:#fff"] .mermaid svg marker path {
    stroke: #16232A !important;
    fill: #16232A !important;
}

html[data-theme="dark"] .buttn.btn-answer {
    color: #ffffff !important;
}

html[data-theme="dark"] .buttn.btn-answer * {
    color: #ffffff !important;
}

/* Final table/diagram contrast pass (handles light + dark row fills) */
html[data-theme="dark"] #notesContent table td,
html[data-theme="dark"] #notesContent table th {
    color: #16232A !important;
    /* light rows */
}

html[data-theme="dark"] #notesContent td[style*="background:#0"],
html[data-theme="dark"] #notesContent td[style*="background:#1"],
html[data-theme="dark"] #notesContent td[style*="background:#2"],
html[data-theme="dark"] #notesContent td[style*="background:#3"],
html[data-theme="dark"] #notesContent td[style*="background:#4"],
html[data-theme="dark"] #notesContent td[style*="background:#5"],
html[data-theme="dark"] #notesContent td[style*="background:#6"],
html[data-theme="dark"] #notesContent td[style*="background:#7"],
html[data-theme="dark"] #notesContent th[style*="background:#0"],
html[data-theme="dark"] #notesContent th[style*="background:#1"],
html[data-theme="dark"] #notesContent th[style*="background:#2"],
html[data-theme="dark"] #notesContent th[style*="background:#3"],
html[data-theme="dark"] #notesContent th[style*="background:#4"],
html[data-theme="dark"] #notesContent th[style*="background:#5"],
html[data-theme="dark"] #notesContent th[style*="background:#6"],
html[data-theme="dark"] #notesContent th[style*="background:#7"],
html[data-theme="dark"] #notesContent td[style*="background:rgb(0"],
html[data-theme="dark"] #notesContent td[style*="background-color:rgb(0"],
html[data-theme="dark"] #notesContent th[style*="background:rgb(0"],
html[data-theme="dark"] #notesContent th[style*="background-color:rgb(0"] {
    color: rgba(232, 241, 245, 0.96) !important;
    /* dark rows */
}

html[data-theme="dark"] #notesContent .mermaid svg text,
html[data-theme="dark"] #notesContent .mermaid svg tspan,
html[data-theme="dark"] #notesContent .mermaid svg .label,
html[data-theme="dark"] #notesContent .mermaid svg foreignObject div {
    fill: #16232A !important;
    color: #16232A !important;
    stroke: rgba(232, 241, 245, 0.72);
    stroke-width: 0.7px;
    paint-order: stroke fill;
}

html[data-theme="dark"] #notesContent .mermaid svg .edgePath .path,
html[data-theme="dark"] #notesContent .mermaid svg path.flowchart-link,
html[data-theme="dark"] #notesContent .mermaid svg .flowchart-link,
html[data-theme="dark"] #notesContent .mermaid svg .arrowheadPath,
html[data-theme="dark"] #notesContent .mermaid svg marker path {
    stroke: var(--ppl-blaze-orange) !important;
    fill: var(--ppl-blaze-orange) !important;
}

/* Final readability lock for notes diagrams + tables in dark mode */
html[data-theme="dark"] #notesContent .mermaid svg text,
html[data-theme="dark"] #notesContent .mermaid svg tspan,
html[data-theme="dark"] #notesContent .mermaid svg .label,
html[data-theme="dark"] #notesContent .mermaid svg .nodeLabel,
html[data-theme="dark"] #notesContent .mermaid svg foreignObject,
html[data-theme="dark"] #notesContent .mermaid svg foreignObject * {
    fill: #16232A !important;
    color: #16232A !important;
}

html[data-theme="dark"] #notesContent table td,
html[data-theme="dark"] #notesContent table th,
html[data-theme="dark"] #notesContent table td *,
html[data-theme="dark"] #notesContent table th * {
    color: #ff8a3d !important;
}

/* =========================================================
   Reader navigation + Suggested Reads
   ========================================================= */
.ppl-noteHero__actions{
  align-items:center;
  align-self:center;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  grid-area:actions;
  margin:14px 0 8px;
  position:relative;
  z-index:2;
}

.ppl-noteHero__back{
  align-items:center;
  appearance:none;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-size:.76rem;
  font-weight:900;
  gap:7px;
  padding:7px 11px;
  text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}

.ppl-noteHero__back:hover,
.ppl-noteHero__back:focus-visible{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}

.ppl-suggestedReads{
  border-top:1px solid rgba(21,35,43,.10);
  margin-top:22px;
  min-width:0;
  padding-top:18px;
}

.ppl-suggestedReads__head{
  align-items:flex-end;
  display:flex;
  gap:14px;
  justify-content:space-between;
  margin-bottom:11px;
}

.ppl-suggestedReads__head h3{
  color:inherit;
  font-size:1rem;
  font-weight:900;
  margin:6px 0 0;
}

.ppl-suggestedReads__scrollHint{
  align-items:center;
  color:#8b989e;
  display:inline-flex;
  font-size:.65rem;
  font-weight:800;
  gap:6px;
  padding-bottom:3px;
  white-space:nowrap;
}

.ppl-suggestedReads__list{
  display:grid !important;
  gap:11px;
  grid-auto-columns:230px;
  grid-auto-flow:column;
  grid-template-columns:none !important;
  grid-template-rows:1fr;
  justify-content:start;
  max-width:100%;
  min-width:0;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-inline:contain;
  padding:2px 2px 10px;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-color:rgba(21,35,43,.18) transparent;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

.ppl-suggestedReads__list > .ppl-suggestedReadCard{
  align-self:stretch;
  display:grid;
  flex:none !important;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  margin:0 !important;
  min-height:185px;
  min-width:0 !important;
  scroll-snap-align:start;
  width:230px !important;
}

.ppl-suggestedReads__list::-webkit-scrollbar{height:5px}
.ppl-suggestedReads__list::-webkit-scrollbar-track{background:transparent}
.ppl-suggestedReads__list::-webkit-scrollbar-thumb{background:rgba(21,35,43,.16);border-radius:999px}

.ppl-suggestedReads__loading{
  align-items:center;
  color:#718087;
  display:flex;
  flex:0 0 auto;
  font-size:.78rem;
  gap:8px;
  padding:12px 2px;
}

html[data-theme="dark"] .ppl-suggestedReads{
  border-top-color:rgba(219,230,251,.14);
}
html[data-theme="dark"] .ppl-suggestedReads__loading,
html[data-theme="dark"] .ppl-suggestedReads__scrollHint{
  color:rgba(219,230,251,.62);
}
html[data-theme="dark"] .ppl-suggestedReads__list{
  scrollbar-color:rgba(219,230,251,.22) transparent;
}

@media (max-width:767px){
  .ppl-suggestedReads{
    margin-top:17px;
    padding-top:15px;
  }

  .ppl-suggestedReads__list{
    gap:9px;
    grid-auto-columns:min(220px,72vw);
    margin-right:-12px;
    padding-right:12px;
  }

  .ppl-suggestedReads__list > .ppl-suggestedReadCard{
    min-height:175px;
    width:min(220px,72vw) !important;
  }
}


/* vNext10: compact suggested reads strip — one horizontal row, never a vertical stack. */
.ppl-suggestedReads__list{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:230px!important;
  grid-template-columns:none!important;
  grid-template-rows:minmax(175px,1fr)!important;
  align-items:stretch!important;
  justify-content:start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  max-width:100%!important;
  min-width:0!important;
}
.ppl-suggestedReads__list > *{
  width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
  height:100%!important;
  margin:0!important;
  scroll-snap-align:start;
}
.ppl-noteAdRail .ppl-noteAdCards{
  align-content:start;
}
@media(max-width:767px){
  .ppl-suggestedReads__list{
    grid-auto-columns:min(220px,72vw)!important;
  }
  .ppl-suggestedReads__list > *{
    width:min(220px,72vw)!important;
    min-width:min(220px,72vw)!important;
    max-width:min(220px,72vw)!important;
  }
}