/* read-marks.css v1.0.0 - styles for read-marks.js.
   Tokens (all optional): --rm-done (colour of "read"), --rm-on-done (tick on that colour), --rm-dim, --rm-line. */

/* the mark-as-read button at the end of a unit */
[data-rm-toggle] { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--rm-line, rgba(128, 128, 128, .35)); border-radius: 999px;
  background: none; color: var(--rm-dim, GrayText); font: inherit; cursor: pointer; transition: color .2s, border-color .2s; }
[data-rm-toggle]:hover { color: inherit; border-color: currentColor; }
[data-rm-toggle] .rmk-i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color .2s, border-color .2s; }
[data-rm-toggle] .rmk-i svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s; }
[data-rm-toggle].rmk-read { color: var(--rm-done, currentColor); border-color: transparent; }
[data-rm-toggle].rmk-read .rmk-i { background: var(--rm-done, currentColor); border-color: var(--rm-done, currentColor); color: var(--rm-on-done, #fff); }
[data-rm-toggle].rmk-read .rmk-i svg { opacity: 1; }
[data-rm-toggle].rmk-just .rmk-i { animation: rmk-pop .55s ease-out; }
@keyframes rmk-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* counts */
[data-rm-count] { font-variant-numeric: tabular-nums; }

/* the ribbon: one tick per unit, grouped */
.rmk-ribbon { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.rmk-grp { display: inline-flex; gap: 3px; }
.rmk-tick { -webkit-appearance: none; appearance: none; width: 9px; height: 16px; padding: 0; margin: 0; border: 1px solid var(--rm-line, rgba(128, 128, 128, .45)); border-radius: 2px; background: none; cursor: pointer; }
.rmk-tick:hover { border-color: currentColor; }
.rmk-tick.rmk-read { background: var(--rm-done, currentColor); border-color: var(--rm-done, currentColor); }
.rmk-tick.rmk-here { box-shadow: 0 0 0 2px var(--rm-bg, Canvas), 0 0 0 3.5px currentColor; }
.rmk-tick:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { [data-rm-toggle], [data-rm-toggle] .rmk-i, [data-rm-toggle] .rmk-i svg { transition: none; } [data-rm-toggle].rmk-just .rmk-i { animation: none; } }
@media print { [data-rm-toggle], .rmk-ribbon { display: none !important; } }