.row-tools {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
column-gap: var(--space-md);
margin-block-start: var(--space-2xs);
}
.row-tool {
display: inline-flex;
align-items: center;
min-block-size: 40px;
margin: calc(var(--space-sm) * -1) calc(var(--space-xs) * -1);
padding: 0 var(--space-xs);
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 400;
line-height: var(--leading-snug);
cursor: pointer;
}
.row-tool:hover {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
}
.row-tool:focus-visible { outline: none; color: var(--color-text); box-shadow: var(--focus-ring); }
.row-tool.is-done { color: var(--color-primary-on-tint); }
.row-tool[aria-expanded="true"] { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
.has-row-tools:has(> .row-tools) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-md);
align-items: baseline;
}
.has-row-tools:has(> .row-tools) > * { grid-column: 1 / -1; }
.has-row-tools:has(> .row-tools) > :first-child { grid-area: 1 / 1; }
.has-row-tools:has(> .row-tools) > .row-tools {
grid-area: 1 / 2;
flex-wrap: nowrap;
margin: 0;
opacity: 0;
}
.row-tool {
min-block-size: 0;
margin-block: calc(var(--space-xs) * -1);
padding-block: var(--space-xs);
}
.has-row-tools:hover > .row-tools,
.has-row-tools:has(:focus-visible) > .row-tools,
.has-row-tools:has(.inline-context-container.is-visible) > .row-tools { opacity: 1; }
}
.inline-context-container {
position: relative;
z-index: 1;
display: none;
margin-top: var(--space-lg);
padding: var(--space-lg);
background: var(--color-surface-hover);
border-radius: var(--radius-md);
font-family: var(--font-serif);
font-size: var(--font-size-base);
line-height: 1.7;
}
.inline-context-container.is-visible {
display: block;
}
.context-verse {
padding: 6px 0;
color: var(--color-text-muted);
}
.context-verse__num {
color: inherit;
text-decoration: none;
font-family: var(--font-sans);
}
.context-verse__num small { color: inherit; }
.context-verse__num:hover,
.context-verse__num:focus-visible { color: var(--color-primary); }
.context-verse.highlighted {
color: var(--color-text);
font-weight: 700;
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
margin: 0 -12px;
padding: 4px 12px;
border-radius: var(--radius-sm);
}
.context-verse.highlighted .context-verse__num,
.context-verse.highlighted > small { color: var(--color-accent-ink); }
.context-more {
margin: var(--space-sm) 0 0;
text-align: end;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
}