.fa-quote-left {
  margin-right: 3px;
}

.fa-quote-right {
  margin-left: 3px;
}

.box {
  position: relative;
  margin-left: 20px;
}

.box:before {
  position: absolute;
  left: -20px;
  content: "";
  height: 15px;
  width: 15px;
  margin-bottom: 15px;
  border: 1px solid black;
  margin-top: 4px;
}

.box.red:before {
  background-color: #eb4310;
}

.box.green:before {
  background-color: #69f730;
}

ul.no-bullets {
  list-style: none;
}

#question_text img,
#answer_explanation img {
  margin: 20px 0;
  border-radius: 10px;
}


#answer_explanation hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: .25;
}

.question-choice img {
  display: block;
  margin-top: 20px;
}

/* Scraped gallery widget from source books: no JS/lightbox implemented here,
   so the preview thumbnail is just a full-size duplicate and the "+" is dead. */
.image-prev-row,
.expand-image {
  display: none;
}


#one_step_block,
#rapid_review_block,
#clinical_pearl_block {
  margin: 40px 0;
}

#one_step_block h3 img,
#rapid_review_block h3 img {
  width: 118px;
  height: auto;
}

/* Clinical Pearl has no banner asset (the other two headers are inherited Rosh
   images), so its heading is text. Amber keeps it visually distinct from the
   explanation above it, the way the source book prints it. */
#clinical_pearl_block {
  border-left: 4px solid #d97706;
  background: #fffbeb;
  border-radius: 8px;
  padding: 14px 18px;
}

#clinical_pearl_block h3 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
}

/* Old Rosh imports carry class="ullist" on their lists; scraped imports go
   through sanitize(), which strips every class, so the same look is keyed on
   the trusted wrappers instead: #rapid-review-data (import) and
   .rapid-review-body (drafts preview). */
.ullist,
#rapid-review-data ul,
.rapid-review-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ullist>li,
#rapid-review-data ul>li,
.rapid-review-body ul>li {
  position: relative;
  padding-left: 1.3em;
}

.ullist>li::before,
#rapid-review-data ul>li::before,
.rapid-review-body ul>li::before {
  content: '✔️';
  position: absolute;
  left: 0;
  font-size: 0.75em;
  color: green;
}

/* Nested lists: use a simple dot and indent */
.ullist .ullist,
#rapid-review-data ul ul,
.rapid-review-body ul ul {
  margin-left: 1rem;
}

.ullist .ullist>li,
#rapid-review-data ul ul>li,
.rapid-review-body ul ul>li {
  position: relative;
  padding-left: 1.1em;
}

.ullist .ullist>li::before,
#rapid-review-data ul ul>li::before,
.rapid-review-body ul ul>li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #6b7280;
}

.bold {
  font-weight: bold;
}

#one_step_answer {
  display: block;
  margin: 10px 0;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.025em;
  color: #ffffff;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(13, 148, 136, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

#one_step_answer:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 25px rgba(13, 148, 136, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

#one_step_answer:active {
  transform: translateY(0);
  box-shadow:
    0 3px 10px rgba(13, 148, 136, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%);
}

#one_step_answer:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(13, 148, 136, 0.4),
    0 8px 25px rgba(13, 148, 136, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.rapid_review_block.normal-hide {
  display: none;
}


/* Global htmx loader: slim indeterminate bar pinned to the top of the
   viewport. Every htmx request shows it (hx-indicator="#loader" is inherited
   from <body>); the appear-delay keeps fast responses from flashing it. */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s ease;
}

#loader.htmx-request {
  opacity: 1;
  transition: opacity 0.15s ease 0.18s;
}

#loader::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #2563eb, #0d9488);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.45);
}

#loader.htmx-request::before {
  animation: loaderSweep 1.1s ease-in-out infinite;
}

@keyframes loaderSweep {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(280%);
  }
}

/* Question-change animation: a clear slide-and-settle re-triggered from JS
   when navigating between questions. opacity/transform only — compositor
   friendly, no layout work. */
.question-swap-in {
  animation: questionIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes questionIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-swap-in {
    animation: none;
  }
}