.favorites-wrapper {
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: 0 var(--space-sm);
}
.fav-eyebrow {
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.page-head {
margin: 0 0 var(--space-xl);
}
.page-eyebrow {
display: block;
margin-bottom: 11px;
font-family: var(--font-display);
font-size: var(--font-size-3xs);
font-weight: 800;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-primary);
}
.page-title {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.02em;
font-size: clamp(1.7rem, 4vw, 2.4rem);
line-height: 1.15;
margin: 0 0 14px;
text-wrap: balance;
color: var(--color-text);
}
.page-lede {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: 1.68;
color: var(--color-text-muted);
max-width: 62ch;
text-wrap: pretty;
}
.page-rule {
height: 1px;
margin: var(--space-lg) 0 0;
border: 0;
background: linear-gradient(90deg, var(--color-primary), var(--color-border) 30%, transparent);
opacity: 0.55;
}
.spotlight-card {
position: relative;
background: var(--gradient-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-xl);
margin-bottom: var(--space-lg);
box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--color-surface-solid) 50%, transparent) inset;
text-align: center;
overflow: hidden;
}
.spotlight-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
opacity: 0.5;
background: var(--gradient-divider);
}
.spotlight-eyebrow {
font-family: var(--font-display);
font-size: var(--font-size-3xs);
font-weight: 800;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
opacity: 0.8;
margin: 0 0 var(--space-md);
}
.spotlight-content { position: relative; z-index: 1; transition: opacity var(--transition-fast); }
.spotlight-content.is-rolling { opacity: 0.18; }
.spotlight-ref {
font-family: var(--font-display);
font-size: var(--font-size-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text);
margin: var(--space-md) 0 0;
}
.spotlight-ref a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
.spotlight-ref a:hover { color: var(--color-primary); }
.spotlight-text {
font-family: var(--font-serif);
line-height: 1.65;
color: var(--color-text);
max-width: 56ch;
margin: 0 auto;
letter-spacing: 0.01em;
text-rendering: geometricprecision;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.spotlight-text::after {
content: "";
display: block;
width: 60px;
height: 2px;
margin: var(--space-lg) auto 0;
background: var(--gradient-divider);
opacity: 0.4;
}
.spotlight-footer {
margin-top: var(--space-lg);
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.spotlight-shuffle-btn,
.spotlight-context-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
border-radius: var(--radius-full);
text-decoration: none;
cursor: pointer;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.spotlight-shuffle-btn:hover,
.spotlight-context-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.spotlight-shuffle-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stat-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.stat-tile {
flex: 1;
min-width: 120px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 11px 14px;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.stat-value {
font-family: var(--font-display);
font-size: var(--font-size-lg);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
.stat-label {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
opacity: 0.85;
}
.fav-controls {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.fav-controls-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.fav-controls-spacer { flex: 1 1 0; min-width: 0; }
.fav-search {
position: relative;
flex: 1;
min-width: 0;
}
.fav-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
pointer-events: none;
}
.fav-search-input {
width: 100%;
padding: 9px 38px 9px 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface-solid);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-md);
outline: none;
transition: border-color var(--transition-fast);
}
.fav-search-input:focus { border-color: var(--color-primary); }
.fav-search-input::placeholder { color: var(--color-text-muted); }
.fav-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 4px 6px;
font-size: var(--font-size-sm);
}
.control-group { display: flex; align-items: center; gap: var(--space-xs); }
.control-label {
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
white-space: nowrap;
}
.custom-select {
appearance: none;
background-color: transparent;
border: none;
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 600;
color: var(--color-text);
padding-right: 1.4rem;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
background-size: 0.6rem auto;
}
.custom-select:focus-visible { outline: none; color: var(--color-primary); }
.sort-direction-btn {
background: transparent;
border: none;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
}
.sort-direction-btn:hover { color: var(--color-text); }
.sort-direction-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fav-tools { position: relative; }
.fav-tools-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.fav-tools-btn:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.fav-tools-menu {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 20;
min-width: 220px;
padding: var(--space-sm);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.fav-tools-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px var(--space-xs) 8px;
}
.fav-tools-label {
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.size-btn-group { display: inline-flex; gap: 4px; }
.size-btn {
width: 30px;
height: 30px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.size-btn.active {
background: var(--color-primary);
color: var(--color-primary-contrast);
border-color: var(--color-primary);
}
.fav-tools-divider {
height: 1px;
background: var(--color-border);
margin: var(--space-xs) 0;
}
.fav-tools-action {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px var(--space-xs);
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
text-align: left;
cursor: pointer;
transition: background var(--transition-fast);
}
.fav-tools-action i { color: var(--color-text-muted); width: 1rem; text-align: center; }
.fav-tools-action:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.fav-tools-action:disabled { opacity: 0.4; cursor: not-allowed; }
.search-result-count {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-weight: 500;
margin-bottom: var(--space-sm);
}
.favorites-list-wrap { display: block; }
.favorites-list-wrap.is-carded {
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
overflow: hidden;
margin-bottom: var(--space-md);
}
.verse-grid {
list-style: none;
display: block;
padding: 0;
margin: 0;
}
.fav-group-header {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 12px 16px 9px;
background: color-mix(in srgb, var(--color-text) 2.5%, transparent);
border-bottom: 1px solid var(--lectern-seam);
color: var(--color-text-muted);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
}
.fav-group-header::after { content: ""; flex: 1; height: 1px; background: var(--lectern-seam); }
.fav-group-count {
font-weight: 600;
letter-spacing: 0.02em;
opacity: 0.65;
text-transform: none;
font-variant-numeric: tabular-nums;
}
.verse-tile {
position: relative;
display: grid;
grid-template-columns: 128px minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 16px;
row-gap: 7px;
padding: 14px 16px 14px 18px;
border-bottom: 1px solid var(--lectern-seam);
transition: background var(--transition-fast);
}
.favorites-list-wrap > ul:last-child > .verse-tile:last-child { border-bottom: 0; }
.verse-tile:hover { background: color-mix(in srgb, var(--color-text) 2%, transparent); }
.verse-tile::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--tile-accent, transparent);
opacity: 0.6;
}
.verse-tile-ref {
grid-column: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
margin: 0;
}
.verse-tile-ref a {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--font-size-sm);
letter-spacing: 0.01em;
color: var(--color-primary);
text-decoration: none;
}
.verse-tile-ref a:hover { text-decoration: underline; text-underline-offset: 2px; }
.verse-tile-body { grid-column: 2; min-width: 0; }
.verse-tile-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--font-serif);
line-height: 1.55;
color: var(--color-text);
text-decoration: none;
}
.verse-tile-text[dir="rtl"] { text-align: right; }
.verse-tile-ref[dir="rtl"] { align-items: flex-start; }
.spotlight-text[dir="rtl"] { direction: rtl; }
a.verse-tile-text:hover { color: var(--color-text); }
.verse-tile-foot {
grid-column: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 7px;
white-space: nowrap;
}
.verse-tile-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.fav-vibe-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fav-lang {
font-size: var(--font-size-3xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
background: var(--color-border);
padding: 1px 6px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.verse-tile-actions, .page-row-actions { display: flex; gap: 4px; }
.tile-action {
width: 30px;
height: 30px;
border-radius: var(--radius-full);
border: 1px solid transparent;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xs);
transition: color var(--transition-fast), background var(--transition-fast);
}
.tile-action:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text-muted) 12%, transparent); }
.delete-btn:hover { color: var(--color-danger, #d4574e); }
@media (hover: hover) and (pointer: fine) {
.verse-tile-actions { opacity: 0; transition: opacity var(--transition-fast); }
.verse-tile:hover .verse-tile-actions,
.verse-tile:focus-within .verse-tile-actions { opacity: 1; }
}
.category-browser { margin-bottom: var(--space-md); }
.category-browser-title { color: var(--color-text-muted); margin: 0 0 var(--space-sm); }
.category-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.category-chip {
--cat: var(--color-primary);
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-surface-solid);
font-family: var(--font-display);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.category-chip:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--cat) 55%, var(--color-border)); }
.category-chip.is-active { color: var(--color-text); border-color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, transparent); }
.category-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.category-count {
font-size: var(--font-size-2xs);
padding: 1px 6px;
border-radius: var(--radius-full);
background: color-mix(in srgb, currentcolor 14%, transparent);
font-variant-numeric: tabular-nums;
}
.collections-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.collection-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 13px;
font-family: var(--font-display);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-muted);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.collection-chip i { font-size: 0.78em; opacity: 0.8; }
.collection-chip:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.collection-chip.is-active {
background: var(--color-primary);
color: var(--color-primary-contrast);
border-color: var(--color-primary);
}
.collection-count {
font-size: var(--font-size-2xs);
padding: 1px 6px;
border-radius: var(--radius-full);
background: color-mix(in srgb, currentcolor 16%, transparent);
font-variant-numeric: tabular-nums;
}
.collection-chip--new {
color: var(--color-primary);
border-style: dashed;
background: transparent;
}
.collection-chip--new:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.collection-manage {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: calc(var(--space-md) * -0.5) 0 var(--space-md);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.collection-manage-label strong { color: var(--color-text); font-weight: 600; }
.collection-manage-btn {
background: none;
border: none;
color: var(--color-primary);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
padding: var(--space-2xs) var(--space-xs);
}
.collection-manage-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.collection-manage-btn--danger { color: var(--color-danger, #d4574e); }
.collection-empty {
padding: var(--space-xl) var(--space-lg);
text-align: center;
color: var(--color-text-muted);
font-size: var(--font-size-md);
line-height: 1.6;
}
.collection-empty i { opacity: 0.7; }
.verse-note {
display: flex;
align-items: flex-start;
gap: 7px;
width: 100%;
margin-top: var(--space-sm);
padding: 0;
background: none;
border: none;
border-left: 2px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
padding-left: 10px;
text-align: left;
cursor: pointer;
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--color-text-muted);
}
.verse-note i { font-size: var(--font-size-2xs); margin-top: 3px; opacity: 0.7; flex-shrink: 0; }
.verse-note:hover { color: var(--color-text); }
.verse-meta-note { font-size: var(--font-size-2xs); opacity: 0.75; }
.note-editor { margin-top: var(--space-sm); }
.note-input {
width: 100%;
min-height: 64px;
resize: vertical;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--font-size-sm);
line-height: 1.5;
outline: none;
}
.note-input:focus { border-color: var(--color-primary); }
.note-editor-actions { display: flex; gap: var(--space-xs); margin-top: 6px; }
.note-save, .note-cancel {
padding: 5px 14px;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
border: 1px solid var(--color-border);
}
.note-save { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.note-save:hover { opacity: 0.9; }
.note-cancel { background: transparent; color: var(--color-text-muted); }
.note-cancel:hover { color: var(--color-text); }
.tile-collections { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-sm); }
.tile-collection-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--font-size-3xs);
font-weight: 600;
font-family: var(--font-display);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-primary) 9%, transparent);
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-full);
}
.tile-collection-chip i { font-size: 0.85em; opacity: 0.7; }
.tile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-sm); }
.fav-tag {
--tag: var(--color-primary);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border: 0;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--tag) 13%, transparent);
color: var(--tag);
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.fav-tag:hover { background: color-mix(in srgb, var(--tag) 22%, transparent); }
.fav-tag.is-active {
background: color-mix(in srgb, var(--tag) 20%, transparent);
box-shadow: inset 0 0 0 1.5px var(--tag);
}
.tag-popover { width: 250px; }
.tag-pop-current { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 4px 9px; }
.fav-tag.is-editing { cursor: default; padding-right: 5px; }
.tag-remove {
display: inline-flex;
align-items: center;
background: none;
border: 0;
color: inherit;
opacity: 0.65;
cursor: pointer;
padding: 0 1px;
font-size: 0.72em;
}
.tag-remove:hover { opacity: 1; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px 9px; }
.tag-suggest-chip {
padding: 3px 9px;
border: 1px dashed var(--color-border);
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 600;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tag-suggest-chip:hover { color: var(--color-primary); border-color: var(--color-primary); }
.tile-action.is-set { color: var(--color-primary); }
.collect-popover {
position: absolute;
z-index: 60;
width: 240px;
max-width: calc(100vw - 16px);
padding: var(--space-sm);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.collect-popover-title {
margin: 2px 4px 8px;
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.collect-rows { max-height: 220px; overflow-y: auto; }
.collect-row {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 8px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
text-align: left;
cursor: pointer;
transition: background var(--transition-fast);
}
.collect-row:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.collect-row i { color: var(--color-text-muted); width: 1rem; text-align: center; }
.collect-row.is-on i { color: var(--color-primary); }
.collect-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collect-row-count { font-size: var(--font-size-2xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.collect-empty { padding: var(--space-sm); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.collect-new {
display: flex;
gap: 6px;
margin-top: var(--space-xs);
padding-top: var(--space-xs);
border-top: 1px solid var(--color-border);
}
.collect-new-input {
flex: 1;
min-width: 0;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
outline: none;
}
.collect-new-input:focus { border-color: var(--color-primary); }
.collect-new-add {
padding: 6px 12px;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-primary-contrast);
border: none;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
}
.collect-new-add:hover { opacity: 0.9; }
.saved-pages { margin-top: var(--space-lg); }
.saved-pages-header {
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
}
.saved-pages-list {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.page-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-solid);
border-bottom: 1px solid var(--color-border);
}
.page-row:last-child { border-bottom: none; }
.page-kind-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--font-size-3xs);
font-weight: 600;
font-family: var(--font-display);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
padding: 3px 8px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.page-row-link {
flex: 1;
min-width: 0;
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-row-link:hover { color: var(--color-primary); }
.page-row-date {
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.text-size-small .verse-tile-text { font-size: var(--font-size-md); }
.text-size-small .spotlight-text { font-size: clamp(1.1rem, 2.6vw, 1.25rem); }
.text-size-medium .verse-tile-text { font-size: var(--font-size-base); }
.text-size-medium .spotlight-text { font-size: clamp(1.3rem, 3.2vw, 1.55rem); }
.text-size-large .verse-tile-text { font-size: var(--font-size-lg); }
.text-size-large .spotlight-text { font-size: clamp(1.5rem, 3.8vw, 1.85rem); }
.pagination-container {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-lg);
padding: var(--space-sm);
}
.page-btn {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-full);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
color: var(--color-text);
font-weight: 600;
font-size: var(--font-size-sm);
cursor: pointer;
}
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-info { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 600; }
.fav-empty {
text-align: center;
padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) * 1.4);
color: var(--color-text-muted);
}
.fav-empty-ghosts {
display: flex;
justify-content: center;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.ghost-tile {
width: 84px;
height: 64px;
border-radius: var(--radius-md);
border: 1px dashed color-mix(in srgb, var(--color-text-muted) 35%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface-soft) 60%, transparent), transparent);
}
.ghost-tile:nth-child(2) { opacity: 0.7; }
.ghost-tile:nth-child(3) { opacity: 0.45; }
.fav-empty-title {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 400;
font-style: italic;
color: var(--color-text);
margin: 0 0 var(--space-sm);
}
.fav-empty-text {
font-size: var(--font-size-md);
line-height: 1.6;
max-width: 42ch;
margin: 0 auto var(--space-lg);
}
.fav-empty-actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.fav-empty-cta {
display: inline-block;
padding: 10px 22px;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-primary-contrast);
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 600;
}
.fav-empty-cta:hover { opacity: 0.9; color: var(--color-primary-contrast); }
.fav-empty-link {
background: none;
border: none;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.fav-empty-link:hover { color: var(--color-text); }
.export-reminder {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-md);
padding: 12px 15px;
margin-bottom: var(--space-md);
background: color-mix(in srgb, var(--color-accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
line-height: 1.55;
color: var(--color-text);
}
.export-reminder-lead {
color: color-mix(in srgb, var(--color-accent) 75%, var(--color-text));
font-size: var(--font-size-md);
flex-shrink: 0;
}
.export-reminder-text { flex: 1; min-width: 150px; color: var(--color-text-muted); }
.export-reminder-action {
padding: 7px 15px;
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.export-reminder-action:hover { background: var(--color-surface-hover); color: var(--color-text); }
.export-reminder-dismiss {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-lg);
line-height: 1;
flex-shrink: 0;
}
.export-reminder-dismiss:hover { color: var(--color-text); }
.undo-toast {
position: fixed;
bottom: var(--dock-float);
left: 50%;
transform: translateX(-50%);
z-index: var(--z-toast);
gap: var(--space-md);
justify-content: center;
cursor: default;
}
.undo-toast.show { transform: translateX(-50%); }
.undo-toast-btn {
background: none;
border: none;
color: var(--color-primary);
font-weight: 700;
font-size: var(--font-size-sm);
cursor: pointer;
font-family: var(--font-sans);
text-decoration: underline;
text-underline-offset: 2px;
}
.thread { margin: var(--space-xxl) auto 0; }
.movement { margin-bottom: var(--space-xxl); position: relative; }
.movement:last-child { margin-bottom: 0; }
.movement-head { margin-bottom: var(--space-lg); }
.movement-rule { display: flex; align-items: baseline; gap: 14px; }
.movement-num {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--font-size-xs);
letter-spacing: 0.06em;
color: var(--color-primary);
min-width: 1.9em;
}
.movement-label {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--font-size-xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text);
white-space: nowrap;
}
.movement-line { flex: 1; height: 1px; background: var(--color-border); opacity: 0.75; transform: translateY(-3px); }
.movement-count {
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
opacity: 0.7;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.movement-lede {
margin: 9px 0 0 calc(1.9em + 14px);
font-size: var(--font-size-sm);
line-height: 1.65;
color: var(--color-text-muted);
max-width: 56ch;
text-wrap: pretty;
}
.unlock {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-lg);
padding: var(--space-lg);
border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
border-radius: var(--radius-lg);
background: linear-gradient(135deg,
color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-solid)),
color-mix(in srgb, var(--color-primary) 3%, var(--color-surface-solid)));
}
.unlock-mark {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
display: grid;
place-items: center;
font-size: var(--font-size-base);
background: var(--color-primary);
color: var(--color-primary-contrast);
}
.unlock-body { min-width: 0; }
.unlock-title { margin: 0 0 5px; font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); }
.unlock-text { margin: 0; font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-muted); max-width: 58ch; }
.unlock-list {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin: 11px 0 0;
padding: 0;
list-style: none;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.unlock-list li { display: inline-flex; align-items: center; gap: 7px; }
.unlock-list i { color: var(--color-primary); font-size: 0.72em; }
.unlock-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.unlock-actions .btn-solid {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 17px;
border: 0;
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: 700;
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast);
}
.unlock-actions .btn-solid:hover { background: var(--color-primary-hover); }
.unlock-actions .btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 15px;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.unlock-actions .btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
@media (width <= 760px) {
.unlock { grid-template-columns: auto 1fr; gap: var(--space-md); padding: var(--space-md); }
.unlock-actions { grid-column: 1 / -1; flex-direction: row; }
.unlock-actions .btn-solid, .unlock-actions .btn-ghost { flex: 1; }
}
.saved-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: var(--radius-full);
font-size: var(--font-size-2xs);
font-weight: 600;
letter-spacing: 0.01em;
background: color-mix(in srgb, var(--color-accent) 16%, transparent);
color: color-mix(in srgb, var(--color-accent) 72%, var(--color-text));
}
.saved-tag i { font-size: 0.85em; opacity: 0.75; }
.saved-tag--account {
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text));
}
.keep-account {
margin: var(--space-md) 0 0;
font-size: var(--font-size-sm);
line-height: 1.6;
color: var(--color-text-muted);
max-width: 62ch;
}
.keep-signin-link {
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: var(--color-primary);
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.keep-signin-link:hover { color: var(--color-primary-hover); }
@media (width <= 760px) {
.stat-tile { min-width: calc(50% - var(--space-sm)); }
.movement-count { display: none; }
}
@media (width <= 640px) {
.spotlight-card { padding: var(--space-lg) var(--space-md); }
.verse-tile {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 6px;
padding: 13px 14px 13px 16px;
}
.verse-tile-ref {
grid-column: 1;
flex-direction: row;
align-items: baseline;
gap: 8px;
}
.verse-tile-body { grid-column: 1; }
.verse-tile-foot {
grid-column: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.fav-controls { gap: var(--space-xs); }
.fav-search { flex-basis: 100%; order: -1; }
.export-reminder { flex-wrap: wrap; }
.export-reminder-text { flex-basis: 100%; order: -1; }
.verse-tile-actions { opacity: 1; }
.page-row-date { display: none; }
.movement-lede { margin-left: 0; }
}
@media (width <= 380px) {
.stat-tile { min-width: 100%; }
}