/* Text highlights: marks in the page and the small bar, editor and list. Neutral colours that work on every page theme. */
:root { --hl-yellow: rgba(250, 204, 21, .5); --hl-green: rgba(74, 222, 128, .42); --hl-blue: rgba(96, 165, 250, .42); --hl-pink: rgba(244, 114, 182, .42); --hl-orange: rgba(251, 146, 60, .5);
  --hl-ui-bg: #fff; --hl-ui-fg: #13203a; --hl-ui-line: #13203a40; --hl-ui-accent: #e0561f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl-yellow: rgba(250, 204, 21, .38); --hl-green: rgba(74, 222, 128, .32); --hl-blue: rgba(96, 165, 250, .36); --hl-pink: rgba(244, 114, 182, .36); --hl-orange: rgba(251, 146, 60, .4); --hl-ui-bg: #1b2a47; --hl-ui-fg: #f2f5fa; --hl-ui-line: #ffffff40; } }
:root[data-theme="dark"] { --hl-yellow: rgba(250, 204, 21, .38); --hl-green: rgba(74, 222, 128, .32); --hl-blue: rgba(96, 165, 250, .36); --hl-pink: rgba(244, 114, 182, .36); --hl-orange: rgba(251, 146, 60, .4); --hl-ui-bg: #1b2a47; --hl-ui-fg: #f2f5fa; --hl-ui-line: #ffffff40; }
mark.rlhl { color: inherit; background: var(--hl-yellow); border-radius: 2px; padding: 0; cursor: pointer; }
mark.rlhl[data-c="green"], .rlhl-sw[data-c="green"], .rlhl-item[data-c="green"]::before { background: var(--hl-green); }
mark.rlhl[data-c="blue"], .rlhl-sw[data-c="blue"], .rlhl-item[data-c="blue"]::before { background: var(--hl-blue); }
mark.rlhl[data-c="pink"], .rlhl-sw[data-c="pink"], .rlhl-item[data-c="pink"]::before { background: var(--hl-pink); }
mark.rlhl[data-c="orange"], .rlhl-sw[data-c="orange"], .rlhl-item[data-c="orange"]::before { background: var(--hl-orange); }
mark.rlhl[data-c="yellow"], .rlhl-sw[data-c="yellow"], .rlhl-item[data-c="yellow"]::before { background: var(--hl-yellow); }
mark.rlhl-note, tspan.rlhl-note { border-bottom: 2px dotted currentColor; }
/* text inside an SVG diagram cannot take a background: it gets a halo of the highlight colour instead */
tspan.rlhl { paint-order: stroke; stroke: var(--hl-yellow); stroke-width: 7px; stroke-linejoin: round; cursor: pointer; }
tspan.rlhl[data-c="green"] { stroke: var(--hl-green); } tspan.rlhl[data-c="blue"] { stroke: var(--hl-blue); } tspan.rlhl[data-c="pink"] { stroke: var(--hl-pink); } tspan.rlhl[data-c="orange"] { stroke: var(--hl-orange); }
.katex mark.rlhl { padding: 0; border-radius: 0; }
mark.rlhl:focus-visible { outline: 2px solid var(--hl-ui-accent); outline-offset: 1px; }
mark.rlhl-flash { animation: rlhl-flash 1.6s ease-out; }
@keyframes rlhl-flash { 0%, 40% { outline: 3px solid var(--hl-ui-accent); outline-offset: 2px; } 100% { outline: 3px solid transparent; outline-offset: 2px; } }
@media (prefers-reduced-motion: reduce) { mark.rlhl-flash { animation: none; outline: 3px solid var(--hl-ui-accent); } }
.rlhl-ui { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--hl-ui-fg); }
.rlhl-bar, .rlhl-pop, .rlhl-panel { position: fixed; z-index: 9990; background: var(--hl-ui-bg); border: 1px solid var(--hl-ui-line); border-radius: 12px; box-shadow: 0 6px 24px #0005; }
.rlhl-bar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; }
.rlhl-bar[hidden], .rlhl-pop[hidden], .rlhl-panel[hidden], .rlhl-fab[hidden] { display: none; }
.rlhl-sw { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; border: 2px solid var(--hl-ui-line); cursor: pointer; padding: 0; }
.rlhl-sw[aria-pressed="true"] { border-color: var(--hl-ui-fg); box-shadow: 0 0 0 2px var(--hl-ui-bg), 0 0 0 4px var(--hl-ui-fg); }
.rlhl-sw:focus-visible, .rlhl-txt:focus-visible, .rlhl-fab:focus-visible, .rlhl-item:focus-visible { outline: 2px solid var(--hl-ui-accent); outline-offset: 2px; }
.rlhl-txt { font: 600 13px system-ui, sans-serif; cursor: pointer; border-radius: 8px; border: 1px solid var(--hl-ui-line); background: transparent; color: inherit; padding: 6px 10px; min-height: 32px; }
.rlhl-txt:hover { background: var(--hl-ui-line); } .rlhl-danger { color: #c0392b; } :root[data-theme="dark"] .rlhl-danger { color: #ff8a80; }
.rlhl-pop { width: min(22rem, calc(100vw - 16px)); padding: 10px; display: grid; gap: 8px; }
.rlhl-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rlhl-lab { font-weight: 600; margin-left: 4px; }
.rlhl-quote { margin: 0; font-style: italic; opacity: .85; max-height: 5.5em; overflow: auto; }
.rlhl-ta { width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: transparent; border: 1px solid var(--hl-ui-line); border-radius: 8px; padding: 6px 8px; resize: vertical; }
.rlhl-fab { position: fixed; z-index: 9980; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font: 600 13px system-ui, sans-serif; cursor: pointer; background: var(--hl-ui-bg); color: var(--hl-ui-fg); border: 1px solid var(--hl-ui-line); border-radius: 999px; padding: 8px 12px; box-shadow: 0 2px 10px #0004; }
.rlhl-panel { left: 14px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); width: min(24rem, calc(100vw - 28px)); max-height: 60vh; overflow: auto; padding: 10px 12px; }
.rlhl-h { font-size: 15px; margin: 0 0 6px; } .rlhl-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.rlhl-item { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid var(--hl-ui-line); border-radius: 8px; padding: 6px 8px 6px 26px; cursor: pointer; position: relative; }
.rlhl-item::before { content: ''; position: absolute; left: 8px; top: 9px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--hl-ui-line); }
.rlhl-pn { margin: 2px 0 0 4px; font-size: 13px; opacity: .85; white-space: pre-wrap; } .rlhl-all { font-weight: 600; color: var(--hl-ui-accent); }
@media print { .rlhl-ui { display: none !important; } mark.rlhl { background: transparent; border-bottom: 1px solid #888; } }