/** * Scroll The Word — Verse Card Styles * ───────────────────────────────────── */ /* ── Supplemental Cards (video, map, music, intro, etc.) ─────────────────────── */ .supp-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); /* Same entrance animation as verse cards */ opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease, box-shadow var(--transition); } .supp-card.is-visible { opacity: 1; transform: translateY(0); } .supp-card:hover { box-shadow: var(--shadow-md); } .supp-card__header { display: flex; align-items: center; padding: 10px 14px 0; } .supp-card__badge { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); } .supp-card__body { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; } .supp-card__thumb { width: 80px; height: 54px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--color-border); } .supp-card__content { flex: 1; min-width: 0; } .supp-card__title { font-size: var(--text-base); font-weight: 700; color: var(--color-text-1); margin: 0 0 4px; line-height: 1.3; } .supp-card__desc { font-size: var(--text-sm); color: var(--color-text-3); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .supp-card__footer { padding: 0 14px 12px; } .supp-card__action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px; border: none; background: var(--color-primary); color: #fff; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: opacity var(--transition); } .supp-card__action:hover { opacity: 0.85; } /* Hide supplemental cards when study mode "hide supp" is active */ html.hide-supp .supp-card { display: none; } /* ── Verse card flash / glow (scroll-to target & verse-view) ───────────────── */ @keyframes stw-card-flash { 0% { box-shadow: var(--shadow-sm); border-color: var(--color-border); } 20% { box-shadow: 0 0 0 3px rgba(38, 102, 141, 0.35), var(--shadow-sm); border-color: var(--color-primary); } 60% { box-shadow: 0 0 0 3px rgba(38, 102, 141, 0.20), var(--shadow-sm); border-color: var(--color-primary); } 100% { box-shadow: var(--shadow-sm); border-color: var(--color-border); } } .verse-card--flash { animation: stw-card-flash 2s ease both; } /* ── Verse Card ──────────────────────────────────────────────────────────────── */ .verse-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; /* clips image to card border-radius */ box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0; /* Entrance animation */ opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease, box-shadow var(--transition); } .verse-card.is-visible { opacity: 1; transform: translateY(0); } .verse-card:hover { box-shadow: var(--shadow-md); } /* ── Card Image (sits below the verse body) ─────────────────────────────────── */ /* Override: hide all images when .hide-images is on */ .hide-images .verse-card__image { display: none; } .verse-card__image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex-shrink: 0; border-radius: var(--radius); position: relative; } .verse-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .verse-card:hover .verse-card__image img { transform: scale(1.03); } /* Overlay: verse text on top of fallback images */ .verse-card__image--overlay img { filter: brightness(0.55); } .verse-card__img-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px; text-align: center; pointer-events: none; } .verse-card__img-text { font-family: var(--font-verse); font-size: var(--text-base); font-weight: 600; line-height: 1.65; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); margin: 0 0 8px; } .verse-card__img-ref { font-size: var(--text-xs); font-weight: 600; color: rgba(255,255,255,0.82); letter-spacing: 0.05em; text-transform: uppercase; margin: 0; } /* ── Body wrapper (reference + text + actions) ───────────────────────────────── */ .verse-card__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 16px; } /* ── Reference Header ────────────────────────────────────────────────────────── */ .verse-card__reference { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .verse-card__book { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; } .verse-card__location { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-2); } .verse-card__translation { margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); background-color: var(--color-accent-fill); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; } /* ── Verse Text ──────────────────────────────────────────────────────────────── */ .verse-card__text { position: relative; padding-left: 18px; } /* Highlighted date/time label shown above card in highlights feed */ .verse-card__highlight-date { display: block; font-size: 0.7rem; color: var(--color-text-muted); opacity: 0.6; padding: 6px 16px 0; font-style: italic; letter-spacing: 0.01em; } /* Hidden visually but kept in DOM so copy button can still read the text */ .verse-card__text--hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* When images are hidden globally (js sets .hide-images on ), restore text */ .hide-images .verse-card__text--hidden { position: relative; width: auto; height: auto; padding-left: 18px; clip: auto; white-space: normal; overflow: visible; } /* Left accent bar */ .verse-card__text::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background-color: var(--color-primary-light); border-radius: 2px; } .verse-card__text p { font-family: var(--font-verse); font-size: var(--text-lg); line-height: 1.8; color: var(--color-text); } .verse-card__text p.verse-card__text-grouped { display: flex; flex-direction: column; gap: 10px; line-height: 1.65; } .verse-card__verse-line { display: grid; grid-template-columns: 20px 1fr; align-items: start; column-gap: 10px; } .verse-card__verse-num { font-size: var(--text-xs); color: var(--color-text-3); font-weight: 700; line-height: 1.8; text-align: right; user-select: none; } .verse-card__verse-line-text { display: block; } /* ── Action Buttons ──────────────────────────────────────────────────────────── */ .verse-card__actions { display: flex; align-items: center; justify-content: space-evenly; gap: 4px; border-top: 1px solid var(--color-border); padding-top: 12px; margin-top: 4px; } .action-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: transparent; cursor: pointer; color: var(--color-text-3); transition: background-color var(--transition), color var(--transition), transform 0.15s ease; position: relative; } .action-btn:hover { background-color: var(--color-surface-alt); color: var(--color-primary); } .action-btn:active { transform: scale(0.9); } .action-btn svg { width: 18px; height: 18px; pointer-events: none; } /* Bookmark active state */ .action-btn.bookmark-btn.bookmarked { color: var(--color-accent); } .action-btn.bookmark-btn.bookmarked:hover { color: var(--color-danger); } /* ── Verse highlight colors (applied to text when verse is highlighted) ────── */ .verse-card.is-hl .verse-card__text p { display: inline; background: var(--hl-color, rgba(255, 210, 50, 0.35)); border-radius: 3px; padding: 2px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Grouped verse cards: preserve flex layout; apply highlight per-line */ .verse-card.is-hl .verse-card__text p.verse-card__text-grouped { display: flex; background: none; padding: 0; } .verse-card.is-hl .verse-card__text p.verse-card__text-grouped .verse-card__verse-line-text { background: var(--hl-color, rgba(255, 210, 50, 0.35)); border-radius: 3px; padding: 2px 0; margin: -2px 0; /* cancel layout-height impact of vertical padding */ box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Named highlight color values */ [data-hl-theme="yellow"] { --hl-color: rgba(255, 210, 50, 0.35); } [data-hl-theme="green"] { --hl-color: rgba(72, 187, 120, 0.30); } [data-hl-theme="blue"] { --hl-color: rgba(96, 165, 250, 0.30); } [data-hl-theme="pink"] { --hl-color: rgba(244, 114, 182, 0.25); } [data-hl-theme="purple"] { --hl-color: rgba(167, 139, 250, 0.30); } [data-hl-theme="orange"] { --hl-color: rgba(251, 146, 60, 0.30); } /* Dark theme — slightly brighter for visibility */ [data-theme="dark"][data-hl-theme="yellow"] { --hl-color: rgba(255, 210, 50, 0.25); } [data-theme="dark"][data-hl-theme="green"] { --hl-color: rgba(72, 187, 120, 0.22); } [data-theme="dark"][data-hl-theme="blue"] { --hl-color: rgba(96, 165, 250, 0.22); } [data-theme="dark"][data-hl-theme="pink"] { --hl-color: rgba(244, 114, 182, 0.20); } [data-theme="dark"][data-hl-theme="purple"] { --hl-color: rgba(167, 139, 250, 0.22); } [data-theme="dark"][data-hl-theme="orange"] { --hl-color: rgba(251, 146, 60, 0.22); } /* Copy confirmation */ .action-btn.copy-btn.copied { color: var(--color-success); } /* Copy tooltip */ .action-btn.copy-btn.copied::after { content: 'Copied!'; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background-color: var(--color-text); color: #fff; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; padding: 3px 8px; border-radius: var(--radius-xs); white-space: nowrap; pointer-events: none; } /* Study Tools active state */ .action-btn.study-btn.is-active { color: var(--color-primary); background-color: var(--color-primary-light); } /* ── Study Tools Panel ───────────────────────────────────────────────────────── */ .study-tools { border-top: 2px solid var(--color-primary-light); margin-top: 4px; } .study-tools__tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 0; border-bottom: 1px solid var(--color-border); } .study-tools__tabs::-webkit-scrollbar { display: none; } .study-tab { flex-shrink: 0; padding: 10px 14px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-3); white-space: nowrap; transition: color var(--transition), border-color var(--transition); } .study-tab:hover { color: var(--color-text); } .study-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* Locked (guest) Notes tab */ .study-tab--locked { opacity: 0.45; cursor: pointer; } .study-panel { display: none; padding: 16px 0 4px; flex-direction: column; gap: 12px; } .study-panel.is-active { display: flex; } /* ── Study Tools Modal ─────────────────────────────────────────────────────── */ body.study-tools-open { overflow: hidden; } .study-tools-modal { position: fixed; inset: 0; z-index: 9300; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .study-tools-modal.is-open { opacity: 1; pointer-events: auto; } .study-tools-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 10, 14, 0.48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .study-tools-modal__panel { position: relative; width: min(1040px, calc(100vw - 40px)); height: min(820px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); overflow: hidden; transform: translateY(10px); transition: transform 0.2s ease; } .study-tools-modal.is-open .study-tools-modal__panel { transform: translateY(0); } .study-tools-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); } .study-tools-modal__title { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--color-text-1); } .study-tools-modal__close { border: none; background: transparent; color: var(--color-text-3); width: 34px; height: 34px; border-radius: 8px; font-size: 26px; line-height: 1; cursor: pointer; } .study-tools-modal__close:hover { color: var(--color-text-1); background: var(--color-surface-alt); } .study-tools-modal__body { flex: 1; min-height: 0; display: flex; overflow: auto; padding: 0 16px 16px; } .study-tools-modal .study-tools { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 0; border-top: none; } .study-tools-modal .study-tools__tabs { flex-shrink: 0; position: sticky; top: 0; z-index: 1; background: var(--color-surface); } .study-tools-modal .study-panel { flex: 1; min-height: 0; overflow: auto; padding-bottom: 12px; } @media (max-width: 767px) { .study-tools-modal { padding: 0; } .study-tools-modal__panel { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border-left: none; border-right: none; } .study-tools-modal__header { padding-top: max(12px, env(safe-area-inset-top)); } .study-tools-modal__body { padding: 0 12px calc(14px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; } .study-tools-modal .study-tools { min-width: 0; } .study-tools-modal .study-tools__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; overflow-x: visible; gap: 0; } .study-tools-modal .study-tab { min-width: 0; padding: 10px 12px; white-space: normal; line-height: 1.3; text-align: center; margin-bottom: 0; border-bottom: none; border-radius: 25px; } .study-tools-modal .study-tab.is-active { background: var(--color-bg); border-bottom: none; border-radius: 25px; } .study-tools-modal .study-panel { min-width: 0; } } .study-panel__empty { font-size: var(--text-sm); color: var(--color-text-3); font-style: italic; padding: 8px 0; } /* ── Original Language word bar ─────────────────────────────────────────────── */ .ol-bar-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); margin: 0 0 6px; } .ol-wordbar { display: flex; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--color-border); } /* English bar sits above the OL bar — override base rules that don't apply */ .ol-wordbar--en { margin-top: 0; padding-top: 0; border-top: none; border-bottom: none; padding-bottom: 10px; margin-bottom: 10px; } .ol-chip { position: relative; font-family: var(--font-verse); font-size: var(--text-lg); font-weight: 600; color: var(--color-text-3); background: none; border: none; padding: 0; cursor: pointer; line-height: 1.3; transition: color 0.15s; } .ol-chip:hover { color: var(--color-primary-hover, var(--color-primary)); } .ol-chip[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 4px 10px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; font-style: normal; white-space: nowrap; pointer-events: none; z-index: 20; color: var(--color-text); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* English gloss chips — must come after .ol-chip to win the cascade */ .ol-chip--en { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-2); background: var(--color-surface-2, var(--color-surface)); border: 1px solid var(--color-border); border-radius: 4px; padding: 2px 7px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; line-height: 1.4; /* reset properties inherited from .ol-chip */ position: static; font-size: var(--text-xs); } .ol-chip--en:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); border-color: var(--color-primary); } /* Cross-highlight: applied to both chip types when the paired chip is hovered */ .ol-chip.is-linked { color: var(--color-primary); } .ol-chip--en.is-linked { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); border-color: var(--color-primary); } /* ── Original Language words ─────────────────────────────────────────────────── */ .ol-word { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); scroll-margin-top: 8px; } .ol-word:last-child { border-bottom: none; padding-bottom: 0; } .ol-word__phrase { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); } .ol-word__phrase--en { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; } .ol-word__term { font-family: var(--font-verse); font-size: var(--text-base); font-weight: 600; color: var(--color-primary); font-style: italic; } .ol-word__pronunciation { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 400; color: var(--color-text-2); font-style: normal; } .ol-word__definition { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-2); } /* ── Back to top button (shown when ol-words is tall) ── */ .ol-words__back-top { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 16px; padding: 10px 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); color: var(--color-text-2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background var(--transition, 150ms ease), color var(--transition, 150ms ease); } .ol-words__back-top:hover { background: var(--color-surface-hover, rgba(0,0,0,0.04)); color: var(--color-primary); } /* ── OL verse accordion (grouped / range cards) ──────────────────────────── */ .ol-verse-accordion { display: flex; flex-direction: column; gap: 8px; } .ol-verse-section { border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); overflow: hidden; } .ol-verse-section__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-1); background: var(--color-surface-2, var(--color-surface)); cursor: pointer; user-select: none; list-style: none; transition: background var(--transition, 150ms ease); } /* Remove browser's default triangle */ .ol-verse-section__header::-webkit-details-marker { display: none; } .ol-verse-section__header::marker { display: none; } /* Chevron indicator */ .ol-verse-section__header::after { content: ''; display: block; width: 14px; height: 14px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.2s ease; } .ol-verse-section[open] > .ol-verse-section__header { background: var(--color-surface-hover, rgba(0,0,0,0.03)); } .ol-verse-section[open] > .ol-verse-section__header::after { transform: rotate(180deg); } .ol-verse-section__header:hover { background: var(--color-surface-hover, rgba(0,0,0,0.04)); } /* Ref label (bold, never wraps) and muted verse preview (truncated) */ .ol-verse-section__ref { flex-shrink: 0; } .ol-verse-section__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-3); font-size: var(--text-xs); font-weight: 400; font-style: italic; margin-left: 4px; } .ol-verse-section__body { padding: 14px; border-top: 1px solid var(--color-border); } .study-panel__loading { font-size: var(--text-sm); color: var(--color-text-3); margin: 0; } .def-list { display: flex; flex-direction: column; gap: 3px; } .def-item--primary { display: flex; gap: 6px; color: var(--color-text-2); } .def-item--primary::before { content: '–'; color: var(--color-text-3); flex-shrink: 0; } .def-item--sub { display: flex; gap: 6px; padding-left: 16px; color: var(--color-text-3); font-size: var(--text-xs); } .def-item--sub::before { content: '·'; flex-shrink: 0; } .ol-word__strongs { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-3); font-style: normal; margin-left: 4px; } /* ── Commentary entries ────────────────────────────────────────────────── */ .commentary-entry { display: flex; flex-direction: column; gap: 8px; } .commentary-entry--loading .commentary-entry__text { color: var(--color-text-3); font-style: italic; -webkit-line-clamp: unset; } @keyframes commentary-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } .commentary-loading-dots::after { content: ''; animation: commentary-dots 1.2s steps(1) infinite; } .commentary-entry__source { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; } .commentary-entry__text { font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.75; color: var(--color-text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .commentary-entry__text.is-expanded { display: block; overflow: visible; } .commentary-read-more { align-self: flex-start; background: none; border: none; padding: 0; margin-top: 2px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); cursor: pointer; transition: color var(--transition); } .commentary-read-more:hover { color: var(--color-primary-hover, var(--color-primary)); } /* ── Cross-reference list ────────────────────────────────────────────────── */ .xref-list { display: flex; flex-direction: column; gap: 2px; padding: 0; } .xref-item { display: flex; align-items: center; padding: 6px 10px; border-radius: var(--radius-sm, 4px); cursor: default; outline: none; transition: background var(--transition, 150ms ease); } .xref-item:hover, .xref-item:focus-visible { background: var(--color-surface-hover, rgba(0, 0, 0, 0.06)); } .xref-item__label { font-family: var(--font-ui); font-size: var(--text-sm, 0.85rem); font-weight: 600; color: var(--color-primary); letter-spacing: 0.01em; cursor: pointer; text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .xref-item__label:hover { text-decoration-style: solid; } /* Peek button — visible only on touch / narrow screens */ .xref-item__peek { display: none; align-items: center; justify-content: center; margin-left: 6px; padding: 2px; background: none; border: none; cursor: pointer; color: var(--color-muted, #888); flex-shrink: 0; border-radius: var(--radius-sm, 4px); transition: color 150ms ease; } .xref-item__peek:hover, .xref-item__peek:active { color: var(--color-primary); } .xref-item__peek svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .xref-item__peek .eye-close { display: none; } .xref-item__peek.is-open .eye-open { display: none; } .xref-item__peek.is-open .eye-close { display: block; } .xref-item__peek.is-open { color: var(--color-primary); } @media (hover: none) and (pointer: coarse) { .xref-item__peek { display: inline-flex; } } /* ── Related links list ──────────────────────────────────────────────────── */ .related-links-list { display: flex; flex-direction: column; gap: 2px; padding: 0; } .related-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm, 4px); text-decoration: none; color: inherit; transition: background var(--transition, 150ms ease); } .related-link:hover, .related-link:focus-visible { background: var(--color-surface-hover, rgba(0, 0, 0, 0.06)); } .related-link__source { font-family: var(--font-ui); font-size: var(--text-sm, 0.85rem); font-weight: 600; color: var(--color-primary); white-space: nowrap; } .related-link__meta { font-family: var(--font-ui); font-size: var(--text-xs, 0.75rem); color: var(--color-muted, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .related-link__icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-muted, #888); stroke-linecap: round; stroke-linejoin: round; transition: color 150ms ease; } .related-link:hover .related-link__icon { color: var(--color-primary); } /* ── Translation comparison list ─────────────────────────────────────────── */ .study-translations-list { display: flex; flex-direction: column; gap: 10px; } .study-translation { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; background: var(--color-surface); } .study-translation.is-current { border-color: var(--color-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 24%, transparent); } .study-translation__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .study-translation__label-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .study-translation__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); } .study-translation__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); font-size: var(--text-xs); font-weight: 700; } .study-translation__meta { font-size: var(--text-xs); color: var(--color-text-3); } .study-translation__text { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-2); } /* ── Cross-reference popover ─────────────────────────────────────────────── */ .xref-popover { position: absolute; z-index: 9500; max-width: min(360px, 90vw); background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e0e0e0); border-radius: var(--radius, 8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 10px 14px; pointer-events: auto; opacity: 0; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease; visibility: hidden; } .xref-popover.is-visible { opacity: 1; transform: translateY(0); visibility: visible; } .xref-popover__ref { font-family: var(--font-ui); font-size: var(--text-xs, 0.75rem); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .xref-popover__text { font-family: var(--font-verse, var(--font-body)); font-size: var(--text-sm, 0.875rem); line-height: 1.55; color: var(--color-text, #1a1a1a); } /* ── Featured Verse Card (in right panel) ────────────────────────────────────── */ .verse-card--featured { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); border-color: transparent; color: #fff; } .verse-card--featured .verse-card__book { color: rgba(255, 255, 255, 0.8); } .verse-card--featured .verse-card__location { color: rgba(255, 255, 255, 0.7); } .verse-card--featured .verse-card__translation { background-color: rgba(255, 255, 255, 0.2); color: #fff; } .verse-card--featured .verse-card__text::before { background-color: rgba(255, 255, 255, 0.4); } .verse-card--featured .verse-card__text p { color: #fff; } /* ── Verse of the Day section ─────────────────────────────────────────────────── */ .verse-of-day { display: flex; flex-direction: column; gap: 12px; } .verse-of-day .verse-card--featured { opacity: 1; transform: none; padding: 10px; } .verse-card__votd-footer { display: flex; justify-content: flex-end; padding-top: 8px; } .verse-card__votd-footer .btn--ghost { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); font-size: var(--text-xs); } .verse-card__votd-footer .btn--ghost:hover { background-color: rgba(255,255,255,0.15); color: #fff; } .featured-panel__occasion { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-3); margin-top: 2px; } /* ── Verse View ────────────────────────────────────────────────────────────── Focused single-verse / range view — shown instead of the main feed when navigating to a cross-reference or search result. ────────────────────────────────────────────────────────────────────────── */ .verse-view { display: flex; flex-direction: column; min-height: 100%; animation: verseViewIn 200ms ease both; } @keyframes verseViewIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } /* ── Top bar ── */ .verse-view__bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-border, #e5e7eb); } .verse-view__back, .verse-view__back-placeholder { min-width: 0; flex-shrink: 0; } .verse-view__back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; outline: none; padding: 6px 10px 6px 6px; border-radius: var(--radius-sm, 6px); font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text, #111); cursor: pointer; transition: background var(--transition, 150ms ease); } .verse-view__back svg { width: 18px; height: 18px; flex-shrink: 0; } .verse-view__back:hover { background: var(--color-surface-hover, rgba(0,0,0,0.06)); } .verse-view__label { position: absolute; left: 50%; transform: translateX(-50%); max-width: 50%; font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text, #111); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .verse-view__chapter-btn { flex-shrink: 0; background: none; border: 1px solid var(--color-primary); border-radius: var(--radius-sm, 6px); padding: 5px 12px; font-family: var(--font-ui); font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--color-primary); cursor: pointer; white-space: nowrap; transition: background var(--transition, 150ms ease), color var(--transition, 150ms ease); } .verse-view__chapter-btn:hover { background: var(--color-primary); color: #fff; } /* ── Cards container ── */ .verse-view__cards { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px; max-width: calc(var(--feed-max-width) + 40px); width: 100%; margin: 0 auto; } /* ── Loading state ── */ .verse-view__loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; color: var(--color-text-muted, #6b7280); font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); } /* ═══════════════════════════════════════════════════════════════════════════════ Study View ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Fixed bar (appended to body, pinned to feed column via JS) ── */ .study-view__bar { position: fixed; top: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-border, #e5e7eb); } /* Group context bar — sticky, mirrors feed-location hide/show */ .study-view__group-bar { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 16px; background-color: var(--color-glass-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-3); transform: translateY(0); opacity: 1; transition: transform 0.25s ease, opacity 0.25s ease; will-change: transform, opacity; } .study-view__group-bar.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } .study-view { display: flex; flex-direction: column; min-height: 100%; animation: verseViewIn 200ms ease both; /* padding-top set dynamically by JS to match bar height */ } /* Section navigator — centered absolute, just like verse-view__label */ .study-view__section-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: 55%; pointer-events: auto; } .study-view__section-label { font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text, #111); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; min-width: 0; } .study-view__nav-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; outline: none; padding: 2px 6px; border-radius: var(--radius-sm, 6px); font-size: 1.4rem; line-height: 1; color: var(--color-primary); cursor: pointer; flex-shrink: 0; transition: background var(--transition, 150ms ease), opacity var(--transition); } .study-view__nav-btn:hover { background: var(--color-surface-hover, rgba(0,0,0,0.06)); } .study-view__nav-btn:disabled { opacity: 0.3; cursor: default; } /* ── Pin button (right side of study bar) ── */ .study-view__pin-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; outline: none; padding: 6px; border-radius: var(--radius-sm, 6px); color: var(--color-text-muted, #6b7280); cursor: pointer; flex-shrink: 0; transition: color var(--transition, 150ms ease), background var(--transition, 150ms ease); } .study-view__pin-btn:hover { background: var(--color-surface-hover, rgba(0,0,0,0.06)); color: var(--color-primary, #2563eb); } .study-view__pin-btn--active { color: var(--color-primary, #2563eb); } .study-view__pin-btn--active svg { fill: var(--color-primary, #2563eb); } /* ── Section label — clickable when multi-section ── */ .study-view__section-nav--multi .study-view__section-label { cursor: pointer; border-radius: var(--radius-sm, 6px); padding: 2px 6px; transition: background var(--transition, 150ms ease); user-select: none; } .study-view__section-nav--multi .study-view__section-label:hover { background: var(--color-surface-hover, rgba(0,0,0,0.06)); } .study-view__section-nav--multi .study-view__section-label::after { content: ' ▾'; font-size: 0.75em; opacity: 0.6; } /* ── Section picker dropdown ── */ .study-view__section-picker { position: absolute; top: calc(100% + 1px); left: -12px; right: -12px; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-border, #e5e7eb); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); z-index: 20; max-height: 60vh; overflow-y: auto; padding: 4px 0; } .study-view__picker-item { display: block; width: 100%; text-align: left; padding: 10px 16px; background: none; border: none; border-radius: 0; cursor: pointer; transition: background var(--transition, 150ms ease); } .study-view__picker-item:hover, .study-view__picker-item.is-active { background: var(--color-surface-alt, #f3f4f6); } .study-view__picker-item.is-active .study-view__picker-title { color: var(--color-primary, #1d4ed8); } .study-view__picker-item.is-locked { opacity: 0.5; cursor: default; } .study-view__picker-item.is-locked:hover { background: none; } .study-view__picker-lock { width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px; color: var(--color-text-muted, #6b7280); } .study-view__picker-title { display: block; font-weight: 600; font-size: 0.95rem; color: var(--color-text, #111); } .study-view__picker-refs { display: block; font-size: 0.8rem; color: var(--color-text-muted, #6b7280); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Study header (title + description just below bar) ── */ .study-view__header { padding: 16px 20px 4px; max-width: calc(var(--feed-max-width) + 40px); width: 100%; margin: 0 auto; border-bottom: 1px solid var(--color-border, #e5e7eb); } .study-view__preview-banner { max-width: calc(var(--feed-max-width) + 40px); margin: 12px auto 0; background: #fef3c7; color: #92400e; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; } .study-view__preview-link { color: #92400e; text-decoration: underline; margin-left: 8px; } .study-view__title { font-family: var(--font-serif, Georgia, serif); font-size: var(--text-lg, 1.125rem); font-weight: 700; color: var(--color-text, #111); margin: 0 0 4px; } .study-view__desc { font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #6b7280); margin: 0 0 12px; line-height: 1.5; } /* ── Note card ── */ .study-note-card { background: var(--color-surface-alt, #fefce8); border: 1px solid var(--color-border, #e5e7eb); border-left: 4px solid var(--color-primary); border-radius: var(--radius, 8px); padding: 14px 16px; opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease; } .study-note-card.is-visible { opacity: 1; transform: none; } .study-note-card--inline { background: var(--color-surface, #fff); border-left-color: var(--color-text-muted, #9ca3af); padding: 10px 14px; } .study-note-card__header { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); margin-bottom: 8px; } .study-note-card__header svg { width: 14px; height: 14px; flex-shrink: 0; } .study-note-card--inline .study-note-card__header { color: var(--color-text-muted, #6b7280); } .study-note-card__body { font-family: var(--font-body, Georgia, serif); font-size: var(--text-lg, 1.125rem); color: var(--color-text, #111); line-height: 1.65; } .study-note-card__body p { margin: 0 0 0.75em; } .study-note-card__body p:last-child { margin-bottom: 0; } /* Legacy notes saved before
was allowed are stored with bare
paragraph breaks. Give them the same visual weight as a paragraph gap. */ .study-note-card__body > br { display: block; margin-bottom: 0.75em; } /* Newer notes preserve the contenteditable
structure. Treat top-level divs like paragraphs, but suppress margin-bottom on the empty

spacer divs since the
rule above already adds the gap. */ .study-note-card__body div { margin-bottom: 0.75em; } .study-note-card__body div:has(> br:only-child) { margin-bottom: 0; } .study-note-card__body div:has(> br:only-child) > br { display: none; } .study-note-card__body ul, .study-note-card__body ol { margin: 0.5em 0 0.75em; padding-left: 1.4em; } .study-note-card__body li { margin: 0.25em 0; } .study-note-card__body img { max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: var(--radius-sm, 6px); } /* ── Video card ── */ .study-video-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease; } .study-video-card.is-visible { opacity: 1; transform: none; } .study-video-card__embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ } .study-video-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .study-video-card__title { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm, 0.875rem); color: var(--color-text, #111); margin: 10px 12px 4px; } .study-video-card__caption { font-family: var(--font-ui); font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted, #6b7280); margin: 0 12px 12px; } .study-video-card__link { padding: 16px; } .study-video-card__link a { font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-primary); text-decoration: none; } .study-video-card__link a:hover { text-decoration: underline; } /* ── Section divider (continuous scroll) ── */ .study-section-divider { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 32px 4px 16px; } .study-section-divider__label { font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text-tertiary, #9ca3af); text-align: center; margin: 0; letter-spacing: 0.02em; } .study-section-divider__row { display: flex; align-items: center; gap: 14px; width: 100%; } .study-section-divider__line { flex: 1; height: 1px; background: var(--color-border, #e5e7eb); } .study-section-divider__title { font-family: var(--font-ui); font-size: var(--text-lg, 1.125rem); font-weight: 700; color: var(--color-primary); text-align: center; white-space: nowrap; margin: 0; letter-spacing: 0.01em; } .study-section-divider__title--long { font-size: var(--text-sm, 0.875rem); } /* Study completion banner */ .study-view__complete { display: flex; align-items: center; gap: 14px; padding: 32px 4px 16px; } .study-view__complete-line { flex: 1; height: 1px; background: var(--color-border, #e5e7eb); } .study-view__complete-text { font-family: var(--font-ui); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text-tertiary, #9ca3af); text-align: center; white-space: nowrap; margin: 0; } /* Invisible sentinel at the bottom to trigger next-section loading */ .study-view__sentinel { height: 1px; width: 100%; } /* ── Rich Text Editor (Notes panel) ─────────────────────────────────────────── */ .study-panel[data-panel="notes"] { padding: 8px 0 6px; gap: 4px; } /* View mode: shown when not editing */ .re-view { padding: 10px 12px; font-size: var(--text-sm); line-height: 1.7; color: var(--color-text); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); cursor: text; min-height: 48px; position: relative; } .re-view:empty::after, .re-view--hint::after { content: attr(data-hint); color: var(--color-text-3); font-style: italic; pointer-events: none; } .re-view img, .re-editable img { max-width: 100%; height: auto; display: block; border-radius: 4px; margin: 4px 0; } .re-view blockquote { margin: 6px 0; padding: 6px 12px; border-left: 3px solid var(--color-primary-light); color: var(--color-text-2); font-style: italic; } .re-view ul { padding-left: 20px; margin: 4px 0; } /* Edit mode wrapper */ .re-edit { display: flex; flex-direction: column; gap: 0; } /* Toolbar */ .re-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 5px 8px; background: var(--color-bg); border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .re-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border: none; border-radius: 4px; background: none; cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-2); transition: background var(--transition), color var(--transition); } .re-btn:hover, .re-btn.is-active { background: var(--color-primary-light); color: var(--color-primary); } .re-btn--sm { font-size: var(--text-xs); padding: 0 8px; color: var(--color-text-3); } .re-sep { display: inline-block; width: 1px; height: 18px; background: var(--color-border); margin: 0 4px; flex-shrink: 0; } .re-sep--flex { flex: 1; background: none; width: auto; } /* Color picker trigger */ .re-color-wrap { position: relative; display: inline-flex; align-items: center; } .re-color-swatch { width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--color-border); cursor: pointer; background: #e65100; padding: 0; transition: border-color var(--transition), transform var(--transition); flex-shrink: 0; } .re-color-swatch:hover { border-color: var(--color-primary); transform: scale(1.1); } /* Color popover */ .re-color-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.18); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 180px; } .re-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .re-color-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform var(--transition), border-color var(--transition); } .re-color-dot:hover, .re-color-dot.is-selected { transform: scale(1.25); border-color: var(--color-border-strong); } .re-color-hex { display: flex; align-items: center; gap: 6px; } .re-color-hex input[type="text"] { flex: 1; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 6px; font-size: var(--text-xs); font-family: var(--font-ui); background: var(--color-bg); color: var(--color-text); min-width: 0; } .re-color-hex-apply { padding: 5px 10px; background: var(--color-primary); color: #fff; border: none; border-radius: 6px; font-size: var(--text-xs); font-family: var(--font-ui); cursor: pointer; white-space: nowrap; } .re-color-reset { width: 100%; padding: 5px; background: none; border: 1px solid var(--color-border); border-radius: 6px; font-size: var(--text-xs); font-family: var(--font-ui); color: var(--color-text-2); cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; } .re-color-reset__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--color-border); } .re-color-reset:hover { background: var(--color-bg); } /* Editable area */ .re-editable { min-height: 100px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-surface); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.7; color: var(--color-text); outline: none; word-break: break-word; } .re-editable:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); } .re-editable:empty::before { content: attr(data-placeholder); color: var(--color-text-3); pointer-events: none; } .re-editable blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--color-primary-light); color: var(--color-text-2); font-style: italic; } .re-editable p { margin: 0 0 0.75em; } .re-editable p:last-child { margin-bottom: 0; } .re-editable ul { padding-left: 20px; margin: 4px 0; } /* Footer */ .re-warning { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin: 6px 0; background: var(--color-warning-fill, #fff8e1); border: 1px solid var(--color-warning-border, #ffe082); border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-2); } .re-warning span { flex: 1; } .re-warning__close { flex-shrink: 0; background: none; border: none; padding: 0 2px; font-size: 1rem; line-height: 1; color: var(--color-text-3); cursor: pointer; } .re-warning__close:hover { color: var(--color-text); } .re-footer { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 0; gap: 8px; } .re-status { font-size: var(--text-xs); color: var(--color-text-3); min-height: 18px; } .re-status--error { color: var(--color-danger); } .re-reflections-link { font-size: var(--text-xs); color: var(--color-primary); text-decoration: none; white-space: nowrap; } .re-reflections-link:hover { text-decoration: underline; } /* Plain-text note textarea (member role) */ .re-plain-textarea { width: 100%; box-sizing: border-box; min-height: 100px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.7; color: var(--color-text); outline: none; resize: vertical; display: block; } .re-plain-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); }