.rd-tally {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
}
.rd-edition {
position: relative;
}
.rd-edition-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
list-style: none;
color: var(--color-text);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.rd-edition-toggle::-webkit-details-marker {
display: none;
}
.rd-edition-toggle:hover {
background: var(--color-surface-hover);
}
.rd-edition-toggle .fa-chevron-down {
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.rd-edition[open] .rd-edition-toggle .fa-chevron-down {
transform: rotate(180deg);
}
.rd-edition-list {
position: absolute;
inset-block-start: calc(100% + var(--space-2xs));
inset-inline-end: 0;
z-index: var(--z-dropdown);
inline-size: min(22rem, calc(100vw - 2 * var(--space-md)));
max-block-size: min(60vh, 28rem);
margin: 0;
padding: var(--space-2xs);
overflow-y: auto;
border: 1px solid var(--paper-edge);
border-radius: var(--paper-radius);
background: var(--paper-surface);
box-shadow: var(--paper-shadow);
list-style: none;
white-space: normal;
}
.rd-edition-list a {
display: flex;
align-items: baseline;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--color-text);
text-decoration: none;
}
.rd-edition-list a:hover {
background: var(--color-surface-hover);
}
.rd-edition-list a[aria-current="true"] {
background: var(--color-primary-active-bg);
color: var(--color-primary-on-tint);
font-weight: var(--font-weight-medium);
}
.rd-edition-abbr {
flex: none;
min-inline-size: 5ch;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.rd-continue {
margin-block: 0 var(--space-xl);
}
.rd-continue-link {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--paper-edge);
border-radius: var(--paper-radius);
background: var(--paper-surface);
box-shadow: var(--paper-shadow);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.rd-continue-link:hover {
background: var(--color-surface-hover);
}
.rd-continue-icon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-md);
background: var(--color-primary-active-bg);
color: var(--color-primary);
}
.rd-continue-body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-2xs);
min-inline-size: 0;
}
.rd-continue-body .dst-overline {
margin: 0;
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.rd-continue-title {
font-family: var(--font-title-serif);
font-size: calc(var(--font-size-lg) * var(--title-serif-scale));
font-weight: var(--font-weight-medium);
line-height: var(--leading-snug);
}
.rd-continue-detail {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.rd-continue-cta {
flex: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
white-space: nowrap;
}
[dir="rtl"] .rd-continue-cta .fa-arrow-right {
transform: scaleX(-1);
}
.rd-start {
margin-block-end: var(--space-xl);
}
@media (width > 640px) {
.rd-start .bk-books {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
}
.rd-shelf {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
gap: var(--space-2xs) var(--space-sm);
margin: 0 calc(-1 * var(--space-sm));
padding: 0;
list-style: none;
}
.rd-book-link {
display: block;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
font-family: var(--font-title-serif);
font-size: calc(var(--font-size-base) * var(--title-serif-scale));
font-weight: var(--font-weight-medium);
line-height: var(--leading-snug);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.rd-book-link:hover {
background: var(--color-surface-hover);
color: var(--color-primary);
}
.rd-book-chev {
margin-inline-start: var(--space-2xs);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
vertical-align: middle;
}
.rd-book.is-open .rd-book-chev {
transform: rotate(180deg);
color: inherit;
}
.rd-book.is-open .rd-book-link {
background: var(--color-primary-active-bg);
color: var(--color-primary-on-tint);
}
.rd-panel {
margin-block: var(--space-sm) var(--space-md);
padding: var(--space-md) var(--space-lg) var(--space-lg);
border: 1px solid var(--paper-edge);
border-radius: var(--paper-radius);
background: var(--paper-surface);
box-shadow: var(--paper-shadow);
}
.rd-panel-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2xs) var(--space-md);
margin-block-end: var(--space-sm);
}
.rd-panel-title {
margin: 0;
font-family: var(--font-title-serif);
font-size: calc(var(--font-size-lg) * var(--title-serif-scale));
font-weight: var(--font-weight-medium);
line-height: var(--leading-snug);
}
.rd-panel-about {
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.rd-chapters {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
gap: var(--space-2xs);
margin: 0;
padding: 0;
list-style: none;
}
.rd-chapters a {
display: flex;
align-items: center;
justify-content: center;
min-block-size: 2.75rem;
border-radius: var(--radius-md);
background: var(--color-surface-hover);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
color: var(--color-text);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.rd-chapters a:hover {
background: var(--color-primary-active-bg);
color: var(--color-primary-on-tint);
}
@media (width <= 640px) {
.rd-edition-list {
inset-inline: 0 auto;
}
.rd-continue-link {
flex-wrap: wrap;
padding: var(--space-md);
}
.rd-continue-cta {
flex-basis: 100%;
padding-inline-start: calc(40px + var(--space-md));
}
.rd-shelf {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-inline: 0;
}
.rd-panel {
padding: var(--space-md);
}
}