.page-main {
--page-edge: var(--space-md);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-lg);
padding-inline: var(--page-edge);
padding-block: var(--space-lg) 0;
}
.main-search-container { max-width: var(--rail-hero); width: 100%; }
.content-modules-container {
width: 100%;
max-width: var(--rail-content);
display: flex;
flex-direction: column;
gap: var(--space-xl);
padding-block-end: var(--space-xl);
}
.content-modules-container > * { margin: 0; }
.lectern-card {
position: relative;
width: 100%;
max-width: var(--rail-page);
display: flex;
flex-direction: column;
padding: 0;
border: 1px solid var(--paper-edge);
border-radius: var(--paper-radius);
background: var(--paper-surface);
box-shadow: var(--paper-shadow);
overflow: visible;
}
.lectern-card::before {
content: "";
position: absolute;
inset-inline: var(--paper-radius);
top: -1px;
height: 1px;
background: var(--edge-catch);
opacity: 0.9;
pointer-events: none;
}
.verse-reel-viewport > * { position: relative; z-index: var(--z-base); }
.lectern-card > :is(.lectern-seam, .verse-reel-viewport, .verse-lenses, .verse-interactions, .verse-toolbar, .lectern-keep) {
position: relative;
z-index: var(--z-base);
}
.lectern-card > .lectern-seam { z-index: calc(var(--z-base) + 1); }
.lectern-seam {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-md) var(--space-md) 0 var(--space-lg);
}
.seam-state { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.seam-state .seam-range {
display: inline-flex;
align-items: center;
gap: 5px;
padding-inline-start: var(--space-sm);
border-inline-start: 1px solid var(--lectern-seam);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.seam-state .seam-range[hidden] { display: none; }
.seam-state .seam-range::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--range-color, currentcolor); }
.seam-audio {
--seam-ink: 14px;
--seam-pad: calc((var(--nav-control, 44px) - var(--seam-ink)) / 2);
box-sizing: content-box;
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--seam-ink);
padding: var(--seam-pad) var(--space-xs);
margin-block: calc(var(--seam-pad) * -1);
margin-inline: calc(var(--space-2xs) - var(--space-xs)) calc(var(--space-xs) * -1);
border: none;
background-color: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color var(--transition-fast);
}
.seam-audio > i { font-size: var(--font-size-2xs); width: 1.15em; text-align: center; }
.seam-audio:hover { color: var(--color-text); }
.seam-audio.is-on { color: var(--color-primary); }
.seam-audio:focus-visible { outline: 0; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.seam-tools { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.seam-aa {
display: inline-grid;
place-items: center;
width: 36px;
height: 32px;
margin-block: -9px;
padding: 0;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.seam-aa .typo-aa { font-family: var(--font-serif); font-size: var(--font-size-md); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.seam-aa:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.seam-aa:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
@media (width <= 715px) {
.seam-tools .seam-aa { display: none; }
}
.typo-selector-wrapper:has(.font-dropdown.is-open) .seam-aa { color: var(--color-primary); background: var(--color-primary-active-bg); }
.seam-version {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.seam-ordinal[hidden] { display: none; }
.seam-ordinal {
display: inline-flex;
align-items: baseline;
gap: 0.3em;
padding-inline-start: var(--space-sm);
border-inline-start: 1px solid var(--lectern-seam);
font-family: var(--font-sans);
font-variant-numeric: tabular-nums lining-nums;
font-size: var(--font-size-xs);
line-height: 1;
color: var(--color-text-muted);
}
.seam-ordinal-n { font-weight: 600; color: var(--color-text-muted); }
.seam-ordinal { white-space: nowrap; }
@media (width <= 380px) {
.lectern-seam { padding-inline-start: var(--space-md); }
.seam-state { gap: var(--space-xs); }
.seam-state .seam-range,
.seam-ordinal { padding-inline-start: var(--space-xs); }
.seam-aa { width: 32px; }
}
@media (width <= 440px) {
.lectern-seam:has(.seam-range:not([hidden])) :is(.seam-ordinal-of, .seam-audio > span) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.verse-reel-viewport { min-height: 0; padding: var(--space-lg) var(--space-lg) 0; }
.verse-reel-track { min-height: 168px; display: flex; align-items: center; }
.verse-reel-slide { width: 100%; }
.verse-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding-block-end: var(--space-md); }
.verse-content figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; }
.verse-text { max-width: 50rem; margin: 0; text-align: center; text-wrap: pretty; }
.verse-reference { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.verse-reference-link {
font-family: var(--font-title-serif);
font-size: calc(var(--font-size-base) * var(--title-serif-scale));
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-text);
}
.verse-reference-link-icon {
display: inline-block;
inline-size: 0.62em;
block-size: 0.62em;
margin-inline-start: 0.45em;
vertical-align: -0.03em;
background-color: currentcolor;
-webkit-mask: var(--glyph-leave) center / contain no-repeat;
mask: var(--glyph-leave) center / contain no-repeat;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
.verse-reference-link:hover .verse-reference-link-icon { color: var(--color-primary); }
.verse-passage-context {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: min(100%, 42ch);
margin: calc(var(--space-sm) - var(--space-md)) auto 0;
font-family: var(--font-title-serif);
font-style: italic;
font-weight: 400;
font-size: calc(var(--font-size-sm) * var(--title-serif-scale));
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--color-text-muted);
text-decoration: none;
text-align: center;
}
.verse-passage-context:hover { color: var(--color-primary); }
.verse-lenses {
padding-inline: var(--space-md);
border-block-start: 1px solid var(--lectern-seam);
background: var(--lectern-desk);
}
.verse-lenses-pill {
display: flex;
justify-content: flex-start;
gap: var(--space-xs);
padding: 0;
margin-inline: auto;
width: fit-content;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
overscroll-behavior-inline: contain;
border: 0;
border-radius: 0;
background: none;
}
.verse-lenses-pill::-webkit-scrollbar { display: none; }
.lens-tab {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
padding: 14px 14px 12px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: inset 0 -2px 0 transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 500;
letter-spacing: 0;
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), box-shadow var(--transition-fast);
}
.lens-tab i, .lens-tab .insight-icon { font-size: 0.9em; color: var(--color-text-muted); transition: color var(--transition-fast); }
.lens-tab .lens-glyph {
display: inline-block;
flex-shrink: 0;
font-size: 1em;
inline-size: 1.1em;
block-size: 1.1em;
background-color: currentcolor;
-webkit-mask: var(--lens-glyph) center / contain no-repeat;
mask: var(--lens-glyph) center / contain no-repeat;
}
.lens-glyph--context { --lens-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5.5h14M5 18.5h14' opacity='.5'/><path d='M5 10h14M5 14h10'/></svg>"); }
.lens-glyph--echoes { --lens-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6.5' cy='12' r='2.2'/><path d='M11.2 7.8a6 6 0 0 1 0 8.4'/><path d='M14.8 4.8a10.2 10.2 0 0 1 0 14.4'/></svg>"); }
.lens-glyph--compare { --lens-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='7.5' height='14' rx='1.5'/><rect x='13' y='5' width='7.5' height='14' rx='1.5'/><path d='M5.6 9h3.4M5.6 12h3.4M15.1 9h3.4M15.1 12h3.4'/></svg>"); }
.lens-tab:hover { color: var(--color-text); }
.lens-tab:focus-visible { outline: 0; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.lens-tab[aria-selected="true"] {
color: var(--color-text);
box-shadow: inset 0 -2px 0 var(--color-primary);
}
.lens-tab[aria-selected="true"] :is(i, .insight-icon) { color: var(--color-primary); }
.verse-lenses-panels { margin-top: 0; }
.lens-panel { display: none; overflow: hidden; }
.lens-panel.is-open { display: block; }
.lens-panel.lens-overflow { overflow: visible; }
.lens-panel.is-open .lens-panel-inner { margin-block: var(--space-sm) var(--space-md); }
.lens-panel-inner {
min-height: 0;
max-width: var(--measure);
margin-inline: auto;
padding: var(--space-md);
border: 1px solid var(--lectern-seam);
border-radius: var(--radius-lg);
background: var(--color-surface-solid);
font-size: var(--font-size-md);
line-height: 1.65;
}
.lens-panel-inner :is(.insight-body, .insight-footer) { background: none; }
.lens-context-wrapper .peek-vline { display: flex; gap: var(--space-sm); padding-block: 3px; }
.lens-context-wrapper .peek-vn { flex: none; min-width: 2ch; text-align: end; font-variant-numeric: tabular-nums; font-size: var(--font-size-2xs); color: var(--color-text-muted); text-decoration: none; }
.lens-context-wrapper .peek-vt { font-family: var(--font-serif); }
.lens-context-wrapper .peek-vline--hl { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-radius: var(--radius-sm); }
.lens-loading, .lens-empty { margin: 0; text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
@media (width <= 715px) {
.lens-panel-inner :is(
.echoes-lenses,
.echoes-lens,
.insight-body,
.verse-compare
) { padding-inline: 0; }
}
.lens-panel-inner :is(
.context-text-wrapper,
.echoes-lenses,
.echoes-lens:first-child,
.insight-body,
.verse-compare-rows
) { padding-block-start: 0; }
.verse-interactions__row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2px;
}
.verse-interactions .reaction-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 0 0 auto;
width: auto;
height: auto;
min-width: 0;
padding: 5px 8px;
border: 0;
border-radius: var(--radius-full);
background: transparent;
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.verse-interactions .reaction-button:hover,
.verse-interactions .reaction-button:focus-visible { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.verse-interactions .reaction-button__icon { width: 1.05rem; height: 1.05rem; opacity: 0.8; transition: opacity var(--transition-fast); }
.verse-interactions .reaction-button:hover .reaction-button__icon,
.verse-interactions .reaction-button:focus-visible .reaction-button__icon,
.verse-interactions .reaction-button.active .reaction-button__icon { opacity: 1; }
.verse-interactions .reaction-button:active { transform: scale(0.94); }
.verse-interactions .reaction-button.active .reaction-button__icon { animation: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) pop; }
@media (prefers-reduced-motion: reduce) {
.verse-interactions .reaction-button.active .reaction-button__icon { animation: none; }
}
.verse-interactions { padding: var(--space-lg) var(--space-md) var(--space-lg); border-top: 0; background: none; }
.verse-interactions .reaction-button__count {
position: static;
min-width: 0;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
font: inherit;
line-height: 1;
color: inherit;
}
.verse-interactions .reaction-button__count:empty { display: none; }
.verse-interactions .reaction-button.active { background: color-mix(in srgb, var(--rx, var(--color-primary)) 14%, transparent); color: var(--rx, var(--color-primary)); }
.verse-interactions .reaction-button[data-type="heart"] { --rx: var(--color-reaction-heart); }
.verse-interactions .reaction-button[data-type="prayer"] { --rx: var(--color-reaction-prayer); }
.verse-interactions .reaction-button[data-type="crown"] { --rx: var(--color-reaction-crown); }
.verse-interactions .reaction-button[data-type="cross_emoji"] { --rx: var(--color-reaction-cross); }
.verse-interactions .reaction-button[data-type="sparkles"] { --rx: var(--color-reaction-sparkles); }
.verse-interactions .reaction-button[data-type="praise_emoji"] { --rx: var(--color-accent); }
@media (width <= 480px) {
.verse-interactions { padding-inline: var(--space-sm); }
.verse-interactions__row { gap: 0; }
.verse-interactions .reaction-button { gap: 4px; padding: 5px; }
.verse-interactions .reaction-button__icon { width: 1rem; height: 1rem; }
}
.verse-toolbar.console {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
margin: 0;
padding: 11px var(--space-md);
border-block-start: 1px solid var(--lectern-seam);
background: var(--lectern-desk);
}
.console-group { display: flex; align-items: center; gap: var(--space-xs); }
.console-group--read { flex: 1 1 0; min-width: fit-content; justify-content: flex-start; }
.console-group--draw { flex: 0 0 auto; }
.console-group--keep { flex: 1 1 0; min-width: fit-content; justify-content: flex-end; }
.console-controls { display: flex; align-items: center; gap: var(--space-xs); }
.console-step {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 0;
border-radius: var(--radius-full);
background: none;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.console-step:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.console-step:disabled { opacity: 0.25; cursor: default; }
.console-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--lectern-seam);
border-radius: var(--radius-full);
background: var(--color-surface-solid);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.console-btn > i, .console-btn .typo-aa { font-size: var(--font-size-md); color: var(--color-text-muted); transition: color var(--transition-fast); }
.console-btn .typo-aa { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.02em; }
.console-btn:hover { border-color: var(--color-primary); background: var(--color-primary-active-bg); }
.console-btn:hover > i, .console-btn:hover .typo-aa { color: var(--color-primary); }
.console-btn:disabled { opacity: 0.4; cursor: default; }
.console-btn.is-active,
.console-btn[aria-expanded="true"] { border-color: var(--color-primary); background: var(--color-primary-active-bg); color: var(--color-primary); }
.console-btn.is-active > i { color: var(--color-primary); }
.console-btn:has(> .console-btn-label) { width: auto; padding: 0 13px; }
.console-btn--history { width: auto; padding: 0 13px; }
.console-btn--history .console-history-count { font-variant-numeric: tabular-nums; font-size: var(--font-size-sm); }
.share-menu-wrap { display: inline-flex; }
.share-menu {
position: fixed;
top: 0;
left: 0;
z-index: var(--z-popover);
display: flex;
flex-direction: column;
min-width: 13rem;
padding: 6px;
border: 1px solid var(--lectern-seam);
border-radius: var(--radius-lg);
background: var(--color-surface-solid);
box-shadow: var(--lectern-menu-shadow);
}
.share-menu-item {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: 10px var(--space-sm);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 500;
text-align: start;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.share-menu-item > i { flex: none; color: var(--color-text-muted); }
.share-menu-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.share-menu-item:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.share-menu-item:disabled { opacity: 0.4; cursor: default; }
.console-btn[hidden], .console-dock-btn[hidden] { display: none; }
.console-btn--range.is-active { border-color: var(--color-primary); }
@media (width <= 900px) {
.verse-toolbar.console { gap: var(--space-xs); padding: 9px var(--space-sm); }
.console-group, .console-controls { gap: 6px; }
.console-btn { width: 40px; height: 40px; }
.console-btn:has(> .console-btn-label) { padding: 0 11px; }
.console-btn > i, .console-btn .typo-aa { font-size: var(--font-size-sm); }
.console-step { width: 30px; height: 30px; }
.next-verse-button.split-main,
.split-toggle { height: 46px; }
.next-verse-button.split-main { padding: 0 18px; font-size: var(--font-size-md); }
.next-verse-button.split-main .icon { font-size: var(--font-size-md); }
.split-toggle { min-width: 46px; }
.split-button-container:has(.split-toggle.is-active) .next-verse-button.split-main { padding: 0 13px; }
}
@media (width <= 820px) {
.console-btn--history:has(> .console-btn-label) { width: 40px; padding: 0; gap: 0; }
.console-btn--history .console-history-count { display: none; }
}
@media (width <= 780px) {
.console-btn.typo-trigger .console-btn-label,
.console-btn--range .console-btn-label { display: none; }
.console-btn.typo-trigger, .console-btn--range { width: 40px; padding: 0; gap: 0; }
}
.range-dot {
width: 10px;
height: 10px;
flex: none;
border-radius: 50%;
border: 2px solid var(--range-color, color-mix(in srgb, var(--color-text-muted) 65%, transparent));
background: var(--range-color, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--range-color, transparent) 25%, transparent);
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.console-group--draw .split-button-container { flex: 0 0 auto; }
.pace-menu {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: var(--z-popover);
width: 262px;
padding: var(--space-sm);
border: 1px solid var(--lectern-seam);
border-radius: var(--radius-lg);
background: var(--color-surface-solid);
box-shadow: var(--lectern-menu-shadow);
}
.pace-menu[hidden] { display: none; }
.console-group--draw { position: relative; }
.pace-start {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: 10px var(--space-sm);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 600;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.pace-start:hover { background: var(--color-primary-active-bg); color: var(--color-primary); }
.pace-start > i { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pace-start:hover > i { color: var(--color-primary); }
.pace-start.is-running { color: var(--color-danger); }
.pace-start.is-running > i { color: var(--color-danger); }
.pace-menu-sep { height: 1px; margin: var(--space-xs) 0; background: var(--lectern-seam); }
.pace-menu-head {
padding: var(--space-xs) var(--space-sm) 6px;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.pace-opt {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0 var(--space-sm);
width: 100%;
padding: 8px var(--space-sm);
border: 0;
border-radius: var(--radius-md);
background: transparent;
text-align: start;
cursor: pointer;
transition: background var(--transition-fast);
}
.pace-opt:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.pace-opt[aria-pressed="true"] { background: var(--color-primary-active-bg); }
.pace-opt-name { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); }
.pace-opt[aria-pressed="true"] .pace-opt-name { color: var(--color-primary); }
.pace-opt-desc { grid-column: 1; font-family: var(--font-sans); font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.pace-opt-check { grid-column: 2; grid-row: 1 / span 2; font-size: var(--font-size-sm); color: var(--color-primary); opacity: 0; }
.pace-opt[aria-pressed="true"] .pace-opt-check { opacity: 1; }
@media (width <= 715px) {
.pace-menu { width: min(262px, calc(100vw - 24px)); }
}
.typo-dropdown, .range-dropdown {
border: 1px solid var(--lectern-seam);
border-radius: var(--radius-lg);
background: var(--color-surface-solid);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: var(--lectern-menu-shadow);
z-index: var(--z-dropdown);
}
.typo-dropdown {
inset-block: calc(100% + var(--space-xs)) auto;
inset-inline: auto 0;
width: min(340px, calc(100vw - 2 * var(--space-md)));
margin: 0;
padding: 6px;
gap: 2px;
transform: translateY(-6px);
}
.typo-dropdown.is-open { transform: none; }
[dir="rtl"] .typo-dropdown { right: auto; left: 0; }
@media (width <= 715px) {
.typo-dropdown,
[dir="rtl"] .typo-dropdown {
position: fixed;
inset: 0 auto auto 0;
max-height: calc(100dvh - var(--header-height) - var(--dock-float) - var(--space-lg));
overflow-y: auto;
overscroll-behavior: contain;
transform: translateY(6px);
}
.typo-dropdown.is-open { transform: none; }
}
.typo-dropdown .typo-section + .typo-section,
.typo-dropdown .typo-section { padding-top: 0; border-top: 0; }
.typo-dropdown .typo-section { border-block-start: 1px solid var(--lectern-seam); }
.typo-section + .typo-section { border-block-start: 1px solid var(--lectern-seam); }
.typo-panel-title {
padding: 2px var(--space-xs) var(--space-2xs);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-muted);
}
.typo-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-xs) var(--space-sm);
padding: var(--space-xs);
border-block-start: 1px solid var(--lectern-seam);
}
.typo-row-label {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
white-space: nowrap;
}
.typo-row-label--block { display: block; padding: var(--space-xs) var(--space-xs) 6px; }
.typo-row-label .size-value-display { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.typo-seg {
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--lectern-seam);
border-radius: var(--radius-md);
background: var(--lectern-desk);
}
.typo-seg--fill { margin: var(--space-xs); }
.size-slider-wrapper { display: flex; flex: 1 0 auto; align-items: center; gap: 2px; }
.size-slider-wrapper .size-slider { flex: 1 1 96px; width: auto; min-width: 96px; margin-inline: 4px; }
.size-step,
.typo-dropdown .size-reset-btn {
display: inline-grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: calc(var(--radius-md) - 2px);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-serif);
font-size: var(--font-size-xs);
line-height: 1;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.size-step--large { font-size: var(--font-size-lg); }
.typo-dropdown .size-reset-btn { font-family: var(--font-sans); font-size: var(--font-size-2xs); }
.size-step:hover,
.typo-dropdown .size-reset-btn:hover { background: var(--color-surface-solid); color: var(--color-text); }
.typo-style-section { display: flex; gap: 2px; }
.typo-style-btn[hidden] { display: none; }
.typo-style-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1 1 0;
min-width: 0;
height: 32px;
padding: 0 var(--space-sm);
border: 0;
border-radius: calc(var(--radius-md) - 2px);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.typo-style-btn:hover { color: var(--color-text); }
.typo-style-btn.is-active,
.typo-style-btn[aria-pressed="true"] {
background: var(--color-surface-solid);
color: var(--color-text);
box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 14%, transparent);
}
.typo-dropdown ul.typo-faces {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
list-style: none;
margin: 0;
padding: 0 var(--space-xs) var(--space-xs);
}
.typo-dropdown ul.typo-faces > li { display: block; min-width: 0; }
.font-option {
display: grid;
justify-items: center;
gap: 2px;
width: 100%;
padding: 8px 4px 7px;
border: 1px solid var(--lectern-seam);
border-radius: var(--radius-md);
background: var(--color-surface-solid);
color: var(--color-text-muted);
text-align: center;
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.font-option-ag { font-size: var(--font-size-xl); line-height: 1.15; color: var(--color-text); }
.font-option-name {
max-width: 100%;
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
line-height: 1.25;
overflow-wrap: anywhere;
text-wrap: balance;
}
.font-option:hover { border-color: color-mix(in srgb, var(--color-text-muted) 50%, var(--lectern-seam)); color: var(--color-text); }
.font-option.is-active,
.font-option.active { border-color: var(--color-primary); background: var(--color-primary-active-bg); color: var(--color-primary); }
.font-option.is-active::before { content: none; }
.font-option[data-font="default-serif"] { font-family: merriweather, serif; }
.font-option[data-font="crimson"] { font-family: "Crimson Pro", "Crimson Pro Fallback", serif; }
.font-option[data-font="garamond"] { font-family: "EB Garamond", serif; }
.font-option[data-font="libre-baskerville"] { font-family: "Libre Baskerville", serif; }
.font-option[data-font="playfair"] { font-family: "Playfair Display", serif; }
.font-option[data-font="cardo"] { font-family: cardo, serif; }
.font-option[data-font="im-fell"] { font-family: "IM Fell English", serif; }
.font-option[data-font="georgia"] { font-family: georgia, serif; }
.font-option[data-font="default-sans"] { font-family: var(--font-sans); }
@media (width <= 380px) {
.typo-style-btn { gap: 4px; padding-inline: var(--space-xs); font-size: var(--font-size-xs); }
.typo-dropdown ul.typo-faces { gap: 4px; }
.font-option { padding: 6px 2px 5px; }
.font-option-ag { font-size: var(--font-size-lg); }
}
.font-dropdown:not(.is-open, .is-primed) .font-option { font-family: var(--font-serif); }
.range-apply-hint {
margin: 0;
padding: var(--space-sm) var(--space-md) var(--space-md);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
text-align: center;
}
.range-customise {
display: flex;
align-items: center;
gap: var(--space-sm);
inline-size: 100%;
min-block-size: 44px;
margin: 0 0 var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-family: var(--font-sans);
text-align: start;
cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.range-customise:hover {
background: var(--color-surface-hover);
border-color: var(--color-border);
}
.range-customise:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.range-customise > .fas {
flex: 0 0 auto;
color: var(--color-primary);
}
.range-customise__text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-inline-size: 0;
}
.range-customise__label {
font-size: var(--font-size-sm);
font-weight: 600;
}
.range-customise__summary {
color: var(--color-text-muted);
font-size: var(--font-size-2xs);
overflow-wrap: break-word;
}
.range-customise__go {
flex: 0 0 auto;
color: var(--color-text-muted);
font-size: 0.75em;
}
.range-panel-mobile .range-customise { inline-size: calc(100% - var(--space-sm) * 2); margin-inline: var(--space-sm); }
.range-panel-mobile { display: block; }
.range-panel-mobile .range-readout,
.range-panel-mobile .range-slider,
.range-panel-mobile .range-ends { padding-inline: var(--space-sm); }
.range-panel-mobile .range-scale { margin-inline: var(--space-sm); }
.range-panel-mobile .range-slider { box-sizing: border-box; }
.range-panel-mobile .range-panel-head { padding: 0 var(--space-sm); margin-bottom: var(--space-sm); }
.range-panel-mobile .range-apply-hint { padding: var(--space-sm) var(--space-sm) 0; }
.range-dot--dock { width: 14px; height: 14px; }
.save-favorite-trigger:has(> i.fas.fa-heart) {
border-color: color-mix(in srgb, var(--color-reaction-heart) 55%, transparent);
background: color-mix(in srgb, var(--color-reaction-heart) 14%, transparent);
color: var(--color-reaction-heart);
}
.save-favorite-trigger > i.fas.fa-heart { color: var(--color-reaction-heart); }
.save-favorite-trigger:hover > i.fas.fa-heart { color: var(--color-reaction-heart); }
.lectern-keep { display: none; }
@media (width <= 715px) {
.lectern-keep {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: var(--space-sm) var(--space-md);
border-block-start: 1px solid var(--lectern-seam);
background: var(--lectern-desk);
border-bottom-left-radius: calc(var(--radius-xl) - 1px);
border-bottom-right-radius: calc(var(--radius-xl) - 1px);
}
}
.lectern-keep-history { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.lectern-keep-pill { min-width: 7.5rem; }
.lectern-keep-count { font-variant-numeric: tabular-nums; }
.lectern-keep-rule { flex: none; width: 1px; height: 24px; background: var(--lectern-seam); }
@media (width >= 716px) {
.lectern-card .verse-toolbar.console {
border-bottom-left-radius: var(--radius-xl);
border-bottom-right-radius: var(--radius-xl);
}
}
.verse-reel-list-head {
position: sticky;
top: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-xs) 6px;
background: var(--color-surface-solid);
z-index: var(--z-base);
}
.verse-reel-list-head:has(.verse-reel-map-btn) {
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
column-gap: var(--space-sm);
}
.verse-reel-map-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
margin-inline-start: auto;
padding: 0 var(--space-sm);
border: 1px solid var(--color-rule);
border-radius: var(--radius-full);
background: var(--color-panel);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
}
.verse-reel-map-btn:hover { background: var(--color-well-strong); }
.verse-reel-map-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.verse-reel-map-new {
padding: 1px 6px;
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-accent-contrast);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: 0.02em;
}
.verse-reel-list-title {
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--color-text-muted);
}
.verse-reel-list-summary,
.verse-reel-list-day-count {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-muted);
white-space: nowrap;
}
.verse-reel-list-day {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-xs) 4px;
}
.verse-reel-list-day-label {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.verse-reel-list-session {
flex: none;
height: 1px;
margin: 6px var(--space-md);
background: var(--color-primary);
}
.verse-reel-list-device {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-sm) var(--space-md) 4px;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
color: var(--color-text-muted);
}
.verse-reel-list-device > span { flex: none; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verse-reel-list-device::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-primary);
}
.verse-reel-list-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 3px var(--space-sm);
width: 100%;
padding: 10px var(--space-md);
border: 0;
border-inline-start: 2px solid transparent;
border-radius: var(--radius-md);
background: transparent;
text-align: start;
cursor: pointer;
transition: background var(--transition-fast);
}
.verse-reel-list-item:hover { background: var(--lectern-desk); }
.verse-reel-list-item:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.verse-reel-list-item.is-active {
background: color-mix(in srgb, var(--color-accent) 8%, transparent);
border-inline-start-color: var(--color-accent);
}
.verse-reel-list-ref {
font-family: var(--font-title-serif);
font-size: calc(var(--font-size-sm) * var(--title-serif-scale));
font-weight: 600;
font-variant-caps: small-caps;
letter-spacing: 0.04em;
line-height: 1.25;
color: var(--color-text);
}
.verse-reel-list-item.is-active .verse-reel-list-ref { color: var(--color-accent-ink); }
.verse-reel-list-meta {
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.verse-reel-list-time {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-muted);
}
.verse-reel-list-via {
font-size: var(--font-size-3xs);
color: var(--color-text-muted);
}
.verse-reel-list-badge {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.verse-reel-list-preview {
grid-column: 1 / -1;
min-width: 0;
overflow: hidden;
font-family: var(--font-title-serif);
font-size: calc(var(--font-size-sm) * var(--title-serif-scale));
font-weight: 400;
font-style: normal;
line-height: 1.45;
color: var(--color-text-muted);
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-action-bar.console-dock {
display: none;
align-items: stretch;
justify-content: space-between;
gap: var(--space-sm);
padding-inline: var(--space-sm);
}
.console-dock-group { display: flex; align-items: stretch; gap: var(--space-xs); flex: 0 1 clamp(108px, 28vw, 150px); min-width: 0; }
.console-dock-group:last-of-type { justify-content: flex-end; }
.console-dock-btn, .console-dock-next {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
height: var(--dock-bar-item);
padding: 0 6px;
border: 0;
cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast);
}
.console-dock-btn {
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
flex: 1 1 auto;
min-width: 44px;
padding-inline: 2px;
}
.console-dock-btn > i { font-size: var(--font-size-lg); height: 20px; line-height: 20px; }
.console-dock-btn .mobile-typo-icon { font-family: var(--font-serif); font-size: var(--font-size-lg); font-weight: 600; letter-spacing: -0.02em; height: 20px; line-height: 20px; }
.console-dock-btn .range-dot--dock { margin-block: 3px; }
.console-dock-label {
max-width: 100%;
overflow-x: clip;
text-overflow: ellipsis;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.console-dock-btn:hover, .console-dock-btn.is-active { color: var(--color-primary); background: var(--color-primary-active-bg); }
.console-dock-next {
flex: 1 1 auto;
width: auto;
min-width: 104px;
flex-direction: row;
gap: 7px;
padding-inline: var(--space-md);
}
.console-dock-next .console-dock-label { font-size: var(--font-size-2xs); font-weight: 700; }
.console-dock-next:hover { color: var(--color-primary-contrast); }
.mobile-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-md) var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.content-modules-container { counter-reset: movement; }
.randomness-suite-roman::before { counter-increment: movement; content: counter(movement, upper-roman) "."; }
.verse-study { display: flex; flex-direction: column; gap: var(--space-xl); width: 100%; min-width: 0; }
.verse-study:empty { margin-block-end: calc(-1 * var(--space-xl)); }
:root[data-js] .verse-study[aria-busy="true"]:empty { min-height: 100vh; margin-block-end: 0; }
.movement { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; min-width: 0; }
.movement[hidden] { display: none; }
#movement-keep:not(:has(.promo-slot > *:not([hidden]))) { display: none; }
.randomness-suite-divider { display: flex; align-items: baseline; gap: var(--space-sm); width: 100%; }
.randomness-suite-roman {
font-family: var(--font-display);
font-size: var(--font-size-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-accent-ink);
letter-spacing: 0.04em;
}
.randomness-suite-label {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text);
}
.randomness-suite-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-border), transparent); }
.randomness-suite-count {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
}
.promo-tile, .tl-strip, .feat-article, .articles-grid,
.vs-book, .vs-words, .vs-henry, .vs-father {
position: relative;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface-solid) 66%, transparent);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.promo-tile:hover, .feat-article:hover {
border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
box-shadow: var(--shadow-md);
}
.tl-strip { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md); }
.tl-strip[hidden] { display: none; }
.tl-strip-body { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.tl-strip-icon { font-size: var(--font-size-xl); color: var(--color-accent); }
.tl-strip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-strip-label { font-size: var(--font-size-3xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-accent-ink); }
.tl-strip-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); }
.tl-strip-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.tl-strip-desc:empty { display: none; }
.tl-strip-meter { grid-column: 1 / -1; height: 3px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-border) 60%, transparent); overflow: hidden; }
.tl-strip-meter > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width var(--transition-base); }
.tl-strip-go { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 0 15px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.vs-overline {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-accent-ink);
}
.vs-more {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
}
.vs-more i { font-size: var(--font-size-xs); transition: transform var(--transition-fast); }
.vs-more:hover i { transform: translateX(3px); }
[dir="rtl"] .vs-more i { transform: scaleX(-1); }
.vs-book { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding: var(--space-lg); }
.vs-book--plate { grid-template-columns: minmax(150px, 28%) minmax(0, 1fr); }
.vs-book-plate { margin: 0; color: var(--color-text); --art-accent: var(--color-accent); }
.vs-book-plate svg { display: block; width: 100%; height: auto; }
.vs-book-body { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.vs-book-title {
margin: 0;
font-family: var(--font-title-serif);
font-size: calc(var(--font-size-xl) * var(--title-serif-scale));
font-weight: 600;
line-height: 1.2;
color: var(--color-text);
text-wrap: balance;
}
.vs-book-range { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.vs-book-summary { max-width: var(--measure); margin: 0; font-family: var(--font-serif); font-size: var(--font-size-sm); line-height: 1.65; color: var(--color-text-muted); }
.vs-strip { display: flex; gap: 3px; height: 6px; margin-block: var(--space-xs); }
.vs-strip-seg { position: relative; flex-basis: 0; min-width: 4px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-border) 85%, transparent); }
.vs-strip-seg.is-here { background: var(--color-accent); }
.vs-strip-tick { position: absolute; inset-block: -4px; width: 2px; margin-inline-start: -1px; border-radius: var(--radius-full); background: var(--color-text); }
.vs-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.vs-action {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 15px;
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
border-radius: var(--radius-full);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.vs-action:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-active-bg); }
.vs-action--primary { border-color: transparent; background: var(--color-primary); color: var(--color-primary-contrast); }
.vs-action--primary:hover { border-color: transparent; background: var(--color-primary-hover); color: var(--color-primary-contrast); }
[dir="rtl"] .vs-action i { transform: scaleX(-1); }
.vs-words { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
.vs-words-hint { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.vs-interlinear { display: flex; flex-wrap: wrap; gap: var(--space-xs) 2px; margin: 0; padding: 0; list-style: none; }
.vs-word {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: var(--space-xs) var(--space-sm) var(--space-sm);
border-radius: var(--radius-md);
color: inherit;
text-align: center;
text-decoration: none;
transition: background var(--transition-fast);
}
.vs-word.strongs-word-link { border-bottom: 0; }
.vs-word.strongs-word-link .vs-w-orig { border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 30%, transparent); }
a.vs-word:hover { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
a.vs-word:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; }
.vs-w-orig { font-family: var(--font-serif); font-size: var(--font-size-2xl); line-height: 1.35; color: var(--color-text); }
.vs-interlinear[lang="he"] .vs-w-orig { font-size: var(--font-size-3xl); }
a.vs-word:hover .vs-w-orig { color: var(--color-primary); }
.vs-w-xlit { font-family: var(--font-serif); font-size: var(--font-size-2xs); font-style: italic; color: var(--color-text-muted); }
.vs-w-gloss { max-width: 13ch; font-family: var(--font-sans); font-size: var(--font-size-2xs); line-height: 1.3; color: var(--color-text-muted); }
.vs-keywords {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--space-md) var(--space-lg);
padding-block-start: var(--space-md);
border-block-start: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
}
.vs-keyword { min-width: 0; }
.vs-keyword-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-sm); margin: 0 0 4px; }
.vs-keyword-word { font-family: var(--font-title-serif); font-size: calc(var(--font-size-md) * var(--title-serif-scale)); font-weight: 600; color: var(--color-text); }
.vs-keyword-xlit { font-family: var(--font-serif); font-size: var(--font-size-xs); font-style: italic; color: var(--color-text-muted); }
.vs-keyword-num { font-family: var(--font-sans); font-size: var(--font-size-3xs); font-weight: 700; letter-spacing: var(--tracking-overline); color: var(--color-accent-ink); }
.vs-keyword-note { margin: 0; font-family: var(--font-serif); font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-muted); }
.vs-voices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.vs-voices--two { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.vs-henry { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }
.vs-henry-intro { margin: 0; font-family: var(--font-serif); font-size: var(--font-size-sm); line-height: 1.65; color: var(--color-text); }
.vs-henry-heads { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vs-henry-heads li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); font-family: var(--font-serif); font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text); }
.vs-henry-roman { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-accent-ink); }
.vs-fathers { display: flex; flex-direction: column; gap: var(--space-md); }
.vs-father { margin: 0; padding: var(--space-lg); }
.vs-father-quote { margin: 0; font-family: var(--font-serif); font-size: var(--font-size-sm); font-style: italic; line-height: 1.65; color: var(--color-text); }
.vs-father-quote::before { content: "\201C"; margin-inline-end: 2px; font-family: var(--font-title-serif); font-size: var(--font-size-2xl); font-style: normal; line-height: 0; vertical-align: -0.3em; color: var(--color-accent); }
.vs-father-cite { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-sm); margin-block-start: var(--space-sm); font-family: var(--font-sans); font-size: var(--font-size-xs); }
.vs-father-name { font-weight: 600; color: var(--color-text); }
.vs-father-year { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.vs-father-source { flex-basis: 100%; font-family: var(--font-serif); font-size: var(--font-size-2xs); font-style: italic; color: var(--color-text-muted); }
.art-card.vs-ask::before { content: none; }
.art-card.vs-ask .art-cat { display: inline-flex; color: var(--color-accent-ink); }
.art-card.vs-ask .art-cat::before { content: none; }
.art-card.vs-ask .art-cat i { margin-inline-end: 3px; }
@media (width <= 640px) {
.vs-book, .vs-words, .vs-henry, .vs-father { padding: var(--space-md); }
.vs-book--plate { grid-template-columns: minmax(0, 1fr); }
.vs-book-plate { width: min(100%, 210px); justify-self: center; }
.art-card.vs-ask { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.art-card.vs-ask .art-arrow { grid-column: 2; grid-row: 1 / span 2; }
.vs-voices--two { grid-template-columns: minmax(0, 1fr); }
.vs-w-orig { font-size: var(--font-size-xl); }
.vs-interlinear[lang="he"] .vs-w-orig { font-size: var(--font-size-2xl); }
.vs-word { padding: var(--space-xs) var(--space-xs) var(--space-sm); }
}
.articles { display: flex; flex-direction: column; gap: var(--space-md); counter-reset: art; }
.feat-article { display: block; padding: var(--space-lg); text-decoration: none; color: inherit; }
.feat-body { display: flex; flex-direction: column; gap: var(--space-sm); }
.feat-tagrow { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: nowrap; min-width: 0; }
.feat-tagrow::before {
counter-increment: art;
content: counter(art, decimal-leading-zero);
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
}
.art-cat {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
max-width: 100%;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 600;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--cat, var(--color-primary));
}
.art-cat::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentcolor; }
.feat-tagrow .art-cat { align-items: baseline; line-height: 1.5; }
.art-cat > span { min-width: 0; overflow-wrap: anywhere; }
.feat-title { font-family: var(--font-title-serif); font-size: calc(var(--font-size-xl) * var(--title-serif-scale)); font-weight: 600; line-height: 1.25; color: var(--color-text); text-wrap: balance; }
.feat-dek { font-family: var(--font-serif); font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-muted); max-width: var(--measure); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-go { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); }
.feat-go i { transition: transform var(--transition-fast); }
.feat-article:hover .feat-go i { transform: translateX(3px); }
.articles-grid { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.art-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border: 0;
border-radius: 0;
text-decoration: none;
color: inherit;
background: transparent;
box-shadow: none;
transition: background var(--transition-fast);
}
.art-card > * { min-width: 0; }
.art-card .art-title { overflow-wrap: anywhere; }
.art-card + .art-card { border-block-start: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent); }
.art-card:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow: none; }
.art-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.art-card::before {
counter-increment: art;
content: counter(art, decimal-leading-zero);
position: static;
inset: auto;
width: auto;
height: auto;
background: none;
border-radius: 0;
opacity: 1;
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
}
.art-title { font-family: var(--font-title-serif); font-size: calc(var(--font-size-md) * var(--title-serif-scale)); font-weight: 600; line-height: 1.35; color: var(--color-text); }
.art-card .art-cat { display: none; }
.art-arrow { font-size: var(--font-size-xs); color: var(--color-text-muted); transition: transform var(--transition-fast), color var(--transition-fast); }
.art-card:hover .art-arrow { color: var(--color-primary); transform: translateX(3px); }
.promo-slot { display: block; }
.promo-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-lg); padding: var(--space-lg); overflow: hidden; }
.promo-tile[hidden] { display: none; }
.promo-tile-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.promo-tile-label { font-family: var(--font-sans); font-size: var(--font-size-3xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-accent-ink); }
.promo-tile-title { font-family: var(--font-title-serif); font-size: calc(var(--font-size-lg) * var(--title-serif-scale)); font-weight: 600; color: var(--color-text); }
.promo-tile-desc { font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text-muted); max-width: 46ch; }
.promo-tile-actions { display: inline-flex; align-items: center; gap: var(--space-md); margin-top: 5px; flex-wrap: wrap; }
.promo-tile-primary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; }
.promo-tile-secondary { position: relative; z-index: var(--z-base); display: inline-flex; align-items: center; min-height: 24px; font-size: var(--font-size-sm); color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-border); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.promo-tile-secondary:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); }
.promo-tile-shot { display: block; width: auto; max-height: 128px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.promo-tile-shot--dark, .dark-mode .promo-tile-shot--light { display: none; }
.dark-mode .promo-tile-shot--dark { display: block; }
.promo-tile-hit { position: absolute; inset: 0; z-index: 0; }
.promo-tile-logos { display: grid; grid-template-columns: repeat(2, 40px); gap: 10px; }
.promo-tile-logo { display: block; width: 40px; height: 40px; color: var(--color-text); }
.promo-tile-logo svg { display: block; width: 100%; height: 100%; }
.promo-tile-plate { display: block; width: 168px; color: var(--color-text); --art-accent: var(--color-accent); }
.promo-tile-plate svg { display: block; width: 100%; height: auto; }
.promo-tile-grid { display: block; }
.promo-tile-grid rect { fill: var(--color-surface-solid); stroke: var(--color-border); stroke-width: 1.2; }
.promo-tile-grid text { font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--color-accent-ink); }
.promo-tile--line { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.promo-tile--line .promo-tile-body { gap: 3px; }
.promo-tile--line .promo-tile-title { font-size: calc(var(--font-size-md) * var(--title-serif-scale)); }
.promo-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-primary-active-bg); color: var(--color-primary); font-size: var(--font-size-md); }
.promo-tile-go { font-size: var(--font-size-xs); color: var(--color-text-muted); transition: transform var(--transition-fast), color var(--transition-fast); }
.promo-tile--line:hover .promo-tile-go { color: var(--color-primary); transform: translateX(3px); }
[dir="rtl"] .promo-tile--line:hover .promo-tile-go { transform: scaleX(-1) translateX(3px); }
button.promo-tile-hit { padding: 0; border: 0; background: none; cursor: pointer; }
.promo-tile-hit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-lg); }
.card-trivia-dialog { display: flex; flex-direction: column; gap: var(--space-md); max-width: 34rem; }
.card-trivia-q { margin: 0; padding-inline-end: 36px; font-family: var(--font-title-serif); font-size: calc(var(--font-size-lg) * var(--title-serif-scale)); font-weight: 600; line-height: var(--leading-snug); color: var(--color-text); }
.card-trivia-options { display: flex; flex-direction: column; gap: var(--space-sm); }
.card-trivia-option { min-height: 44px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-solid); color: var(--color-text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.card-trivia-option:hover:not(:disabled) { border-color: var(--color-primary); }
.card-trivia-option:disabled { cursor: default; }
.card-trivia-option.is-right { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface-solid)); }
.card-trivia-option.is-wrong { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface-solid)); }
.card-trivia-result { margin: 0; font-weight: 600; color: var(--color-text); }
.card-trivia-why { margin: 0; font-size: var(--font-size-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.card-trivia-why a { color: var(--color-primary); text-underline-offset: 3px; }
.card-trivia-next { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.card-trivia-next .promo-tile-primary { text-decoration: none; }
button.promo-tile-secondary { padding: 0; border: 0; background: none; font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.card-trivia-result[hidden], .card-trivia-why[hidden], .card-trivia-next[hidden] { display: none; }
.randomness-proof.randomness-proof--line {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface-solid) 40%, transparent);
box-shadow: none;
}
.randomness-proof--line .randomness-proof-badge { font-size: var(--font-size-lg); color: var(--color-accent-ink); flex: none; }
.randomness-proof--line .randomness-proof-body { margin: 0; font-size: var(--font-size-xs); line-height: 1.55; color: var(--color-text-muted); }
.randomness-proof--line .randomness-proof-body code { font-family: var(--font-mono); font-size: 0.92em; color: var(--color-text); }
.randomness-proof--line .randomness-archive-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary); text-decoration: none; margin-inline-start: auto; border-bottom: 0; padding-bottom: 0; }
.randomness-proof--line .randomness-archive-link:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; background-color: transparent; }
.calendar-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px var(--space-sm);
margin: 0;
padding-inline: var(--space-md);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
line-height: 1.55;
color: var(--color-text-muted);
}
.calendar-line > i { color: var(--color-accent-ink); }
.calendar-line a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.calendar-line a:hover { color: var(--color-primary); text-decoration-color: currentcolor; }
.calendar-line a:focus-visible { outline: 0; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.calendar-line-feast::before { content: "·"; margin-inline-end: var(--space-sm); }
@media (width <= 715px) {
.page-main { --page-edge: var(--space-sm); gap: var(--space-md); padding-inline: var(--page-edge); }
.content-modules-container { gap: var(--space-lg); }
.verse-reel-viewport { padding: var(--space-md) var(--space-md) var(--space-sm); }
.verse-content { padding-block: var(--space-md); }
.verse-content figure { gap: var(--space-sm); }
.verse-text { padding-block: var(--space-sm); }
.verse-reference { margin-top: var(--space-sm); padding-top: var(--space-md); }
.verse-toolbar.console { display: none; }
.mobile-action-bar.console-dock { display: flex; }
.verse-lenses { padding-inline: var(--space-2xs); }
.verse-lenses-pill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; width: 100%; overflow: visible; }
.lens-tab {
flex-direction: column;
justify-content: flex-start;
gap: 5px;
min-width: 0;
padding: 12px 2px 10px;
font-size: var(--font-size-xs);
line-height: 1.2;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
hyphens: auto;
}
.lens-tab i, .lens-tab .insight-icon { font-size: var(--font-size-md); height: 1rem; line-height: 1rem; }
.lens-tab .insight-icon { width: 1rem; }
.lens-tab .lens-glyph { inline-size: 1rem; block-size: 1rem; }
.feat-article { padding: var(--space-md); }
.feat-title { font-size: calc(var(--font-size-lg) * var(--title-serif-scale)); }
.promo-tile { gap: var(--space-md); padding: var(--space-md); }
.promo-tile:has(.promo-tile-shot), .promo-tile--art { grid-template-columns: 1fr auto; }
.promo-tile:not(:has(.promo-tile-shot), .promo-tile--art, .promo-tile--line) { grid-template-columns: 1fr; }
.promo-tile-shot { max-height: 108px; align-self: center; }
.promo-tile-plate { width: 108px; }
.promo-tile-logos { grid-template-columns: repeat(2, 32px); gap: 8px; }
.promo-tile-logo { width: 32px; height: 32px; }
.promo-tile-grid { width: 80px; height: 80px; }
.tl-strip { grid-template-columns: 1fr; }
.tl-strip-go { grid-column: 1; grid-row: auto; justify-self: stretch; justify-content: center; }
.randomness-proof.randomness-proof--line { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-sm) var(--space-md); }
.randomness-proof--line .randomness-archive-link { grid-column: 2; justify-self: start; margin-inline-start: 0; }
.randomness-suite-count { display: none; }
}
@media (width <= 640px) {
.verse-passage-context { font-size: calc(var(--font-size-xs) * var(--title-serif-scale)); }
.art-card { gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
}
@media (width <= 380px) {
.verse-interactions .reaction-button { padding: 5px 4px; gap: 3px; }
.verse-interactions__row { gap: 0; }
.verse-interactions .reaction-button__icon { width: 0.95rem; height: 0.95rem; }
.console-dock-label { font-size: 9px; }
.console-dock-next { min-width: 96px; padding-inline: var(--space-sm); }
}
@media (width <= 360px) {
.page-main { --page-edge: var(--edge-compact); }
.content-modules-container { padding-inline: 0; }
}