/* Lesebibliothek: library cards and the reading column. */
.rd-lib__lead { max-width: 40rem; }
.rd-filters { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; margin: var(--s-4) 0 var(--s-5); }
.rd-filters .field { min-width: 9rem; flex: 1; }
.rd-group { margin: 0 0 var(--s-6); }
.rd-group__title { font-size: var(--fs-18); margin: 0 0 var(--s-3); }
.rd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s-3); }
.rd-card { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; text-align: left; width: 100%;
  padding: var(--s-4); border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--card); color: inherit; cursor: pointer; }
.rd-card:hover { border-color: var(--line-strong); }
.rd-card__title { font-weight: 600; }
.rd-card__en { color: var(--muted); }
.rd-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.rd-band { font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); }
.rd-band--just { background: color-mix(in srgb, var(--das) 18%, var(--card)); color: var(--das); }
.rd-band--easy { background: color-mix(in srgb, var(--der) 16%, var(--card)); color: var(--der); }
.rd-band--challenging { background: color-mix(in srgb, var(--signal) 28%, var(--card)); color: var(--signal-text); }
.rd-band--hard { background: color-mix(in srgb, var(--danger) 16%, var(--card)); color: var(--danger); }

.rd { max-width: 38rem; margin: 0 auto; }
.rd-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-3) 0; }
.rd-body { font-size: calc(var(--rd-size, 20) * 1px); line-height: 1.65; }
.rd-sent { margin: 0 0 0.35em; }
.rd-en { margin: 0 0 1em; color: var(--muted); font-size: 0.85em; }
.rd-w { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0 0.12em; border-radius: 0.2em; cursor: pointer; }
.rd-w:hover, .rd-w:focus-visible { background: var(--paper-sunk); }
.rd-w.is-on { background: color-mix(in srgb, var(--signal) 45%, var(--card)); color: var(--ink); }
.rd.is-focus .rd-w.is-known { opacity: 0.38; }
.rd.is-focus .rd-w.is-new { background: color-mix(in srgb, var(--signal) 28%, var(--card)); box-shadow: inset 0 -2px 0 var(--signal); }
.rd-pop { margin: var(--s-4) 0; padding: var(--s-4); border: var(--bw) solid var(--line-strong); border-radius: var(--r-card); background: var(--card); }
.rd-pop__de { font-size: var(--fs-22); margin: 0; }
.rd-pop__en { margin: var(--s-2) 0; }
.rd-preview { margin: var(--s-3) 0 var(--s-4); }
.rd-q { margin: 0 0 var(--s-4); padding: 0; border: 0; }
.rd-q legend { font-weight: 600; margin-bottom: var(--s-2); }
.rd-series { display: flex; align-items: flex-end; gap: 0.35rem; height: 4.5rem; margin-top: var(--s-3); }
.rd-series span { flex: 1; background: var(--ink); border-radius: 0.2rem 0.2rem 0 0; min-height: 2px; opacity: 0.75; }
.rd-series span[data-empty="1"] { background: var(--line-strong); opacity: 1; min-height: 2px; }