/* ================================================================
   HIGHLIGHT.CSS — the Study question highlighter
   (../../conceptual/tutor/highlight.js, Seth 2026-10-11): yellow marks in a
   question's text and the small Highlight / Delete highlight button.
   ================================================================ */

:root {
  --dd-hl-bg: rgb(250 204 21 / 0.36);
  --dd-hl-chosen: rgb(250 204 21 / 0.6);
}
:root[data-theme="light"] {
  --dd-hl-bg: rgb(253 224 71 / 0.75);
  --dd-hl-chosen: rgb(250 204 21 / 1);
}

mark.dd-hl {
  background: var(--dd-hl-bg);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: inherit;
  cursor: pointer;
  padding: 0.05em 0;
}
mark.dd-hl:focus-visible { outline: 2px solid var(--warn); outline-offset: 1px; }
mark.dd-hl.is-chosen {
  background: var(--dd-hl-chosen);
  box-shadow: 0 0 0 1px rgb(var(--warn-rgb) / 0.8);
}

.dd-hl-pill {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.22);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  position: fixed;
  white-space: nowrap;
  z-index: 10050;
}
.dd-hl-pill:hover { border-color: var(--warn); }
.dd-hl-pill[hidden] { display: none; }