/* 阅读 App · 书里的互动 (一起阅读 6b): other people's marks on the reading page, the window, 待查看, 互动, the settings pages. js/apps/reading-social.js. Everything under .rd-root. */
/* other people's marks: a soft highlight (the colour keeps the text at 4.5:1) and a line under it. The line is text-decoration, which is painted over the backgrounds of the marks inside it: the user's own mark lies on top and both are still seen */
.rd-root .rd-mo{background:var(--hl);border-radius:3px;text-decoration-line:underline;text-decoration-color:var(--ln);text-decoration-thickness:2px;text-underline-offset:calc(2px + var(--d,0) * 3px);text-decoration-skip-ink:none}
.rd-root .rd-nb.rd-no{box-shadow:0 0 0 .5px rgba(0,0,0,.2)}
/* something new: a glow until it has been seen (on the screen for a second, or opened) */
.rd-root .rd-rp-in .rd-mo.rd-new{animation:rdNew 1.8s ease-in-out infinite}
.rd-root .rd-nb.rd-new{animation:rdNewBadge 1.8s ease-in-out infinite}
@keyframes rdNew{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ln) 55%,transparent)}}
@keyframes rdNewBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.rd-root .rd-rp-in .rd-mo.rd-new{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--ln) 55%,transparent)}.rd-root .rd-nb.rd-new{animation:none;outline:1.5px solid var(--rp-ink)}}
/* a slip at the end of a chapter */
.rd-root .rd-slipcard{display:block;box-sizing:border-box;cursor:pointer;width:100%;margin:22px 0 6px;padding:12px 16px;border:.5px dashed color-mix(in srgb,var(--rp-ink2) 60%,transparent);border-radius:14px;background:color-mix(in srgb,var(--rp-ink) 5%,transparent);color:var(--rp-ink);font:inherit;font-size:14px;text-align:center;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.rd-root .rd-slipcard.rd-new{border-style:solid;border-color:var(--rp-ink)}
.rd-root .rd-slipcard:not(.rd-new){color:var(--rp-ink2)}
.rd-root .rd-so-slip{font-size:15px;line-height:1.9;white-space:pre-wrap;word-break:break-word;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--ink2) 8%,transparent);margin-top:8px}
/* the window */
.rd-root .rd-so-win{display:flex;flex-direction:column;gap:14px;max-height:52vh;overflow-y:auto;scrollbar-width:none;margin-top:6px}
.rd-root .rd-so-win::-webkit-scrollbar{display:none}
.rd-root .rd-so-blk{display:flex;flex-direction:column;gap:6px}
.rd-root .rd-so-who{display:flex;align-items:center;gap:7px;font-size:13px}
.rd-root .rd-so-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.rd-root .rd-spm{font-style:normal;margin-left:4px;color:var(--accd);font-size:.9em}
.rd-root .rd-so-r{margin-top:2px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--ink2) 6%,transparent)}
.rd-root .rd-so-r p{margin:2px 0 0;font-size:13.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.rd-root .rd-so-d1{margin-left:14px}
.rd-root .rd-so-d2{margin-left:28px}
.rd-root .rd-so-cmp{margin:8px 0 2px}
/* 待查看, 互动 */
.rd-root .rd-pc{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;font-size:10.5px;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--accd);white-space:nowrap}
.rd-root .rd-bk .rd-pc{margin:3px 0 0}
.rd-root .rd-so-row{cursor:pointer;align-items:flex-start}
.rd-root .rd-so-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--bg1);background:var(--ink2);flex-shrink:0;box-shadow:none}
.rd-root .rd-so-lock{background:color-mix(in srgb,var(--ink2) 20%,transparent);color:var(--ink2)}
.rd-root .rd-so-q{margin-top:3px;font-size:13px;line-height:1.6;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.rd-root .rd-so-n{margin-top:2px;font-size:12.5px;line-height:1.6;color:var(--ink2);word-break:break-word}
.rd-root .rd-so-sub{padding:0 0 6px 42px}
.rd-root .rd-so-i{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:.5px solid var(--line);cursor:pointer}
.rd-root .rd-so-i>div{flex:1;min-width:0}
.rd-root .rd-so-grp .rd-so-arr{transition:transform var(--mo-fast,.15s)}
.rd-root .rd-so-grp.rd-open .rd-so-arr{transform:rotate(90deg)}
.rd-root .rd-so-tabs{display:flex;width:100%;margin:14px 0 4px}
.rd-root .rd-so-tabs button{flex:1}
.rd-root .rd-so-tabs small{font-size:10.5px;opacity:.8}
/* settings */
.rd-root .rd-so-prow{flex-wrap:wrap;align-items:center}
.rd-root .rd-so-sw{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.rd-root .rd-so-sw input[type=color]{width:26px;height:26px;padding:0;border:0;background:none;margin-left:4px}
.rd-root .rd-so-x{border:0;background:none;font:inherit;font-size:12px;color:var(--accd);padding:4px 6px}
.rd-root .rd-so-badges{display:flex;flex-direction:column;gap:8px}
.rd-root .rd-so-brow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.rd-root .rd-so-brow .rd-field{width:72px;text-align:center}