/* Bible Study Editor — web. Calm, focused, neutral. */ :root { --bg: #f3f1ec; --panel: #ffffff; --panel-2: #faf9f6; --ink: #222018; --ink-soft: #6b675d; --ink-faint: #9b968a; --line: #e7e2d9; --hair: rgba(40,34,24,0.07); --accent: #6a5acd; --blue: #3a6ea5; --green: #4a8c5b; --blue-tint: rgba(58, 110, 165, 0.07); --green-tint: rgba(74, 140, 91, 0.07); /* Per-phase accent — set on as you move through the four phases. Observation=blue, Interpretation=red, Application=green, Synthesis=gold. */ --phase: #3a6ea5; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(40,34,24,0.05); --shadow-card: 0 1px 2px rgba(40,34,24,0.04), 0 12px 28px -18px rgba(40,34,24,0.24); --shadow-lift: 0 2px 6px rgba(40,34,24,0.06), 0 22px 44px -22px rgba(40,34,24,0.30); --serif: Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } #app { display: flex; flex-direction: column; height: 100vh; position: relative; } /* ---- Top bar ---- */ .topbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; position: relative; z-index: 20; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--hair); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px -14px rgba(40,34,24,0.4); } .brand { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; letter-spacing: -0.2px; } .brand .brand-name { background: linear-gradient(90deg, var(--phase), color-mix(in srgb, var(--phase) 60%, var(--ink))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-mark { width: 22px; height: 22px; display: block; transition: stroke 0.4s ease; } .brand-mark .lens, .brand-mark .lens-inner, .brand-mark .handle { stroke: var(--phase); transition: stroke 0.4s ease; } .brand-mark .lens-inner { opacity: 0.5; } .title-field { font-size: 14px; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 5px 8px; border-radius: 6px; width: 220px; color: var(--ink); } .title-field:hover { border-color: var(--line); } .title-field:focus { outline: none; border-color: var(--accent); background: var(--panel-2); } .ref-wrap { display: flex; align-items: center; gap: 4px; } .ref-icon { font-size: 13px; opacity: 0.6; } .ref-field { font-size: 13px; border: 1px solid var(--line); background: var(--panel-2); padding: 5px 8px; border-radius: 6px; width: 240px; color: var(--ink); } .ref-field:focus { outline: none; border-color: var(--accent); } .spacer { flex: 1; } .save-status { font-size: 12px; color: var(--ink-faint); min-width: 54px; text-align: right; } .btn { font-size: 13px; padding: 6px 13px; border: 1px solid var(--hair); background: var(--panel); color: var(--ink); border-radius: 9px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, border-color 0.15s ease; } .btn:hover { background: #fbf9f6; box-shadow: var(--shadow-card); transform: translateY(-1px); border-color: color-mix(in srgb, var(--phase) 24%, var(--hair)); } .btn:active { transform: translateY(0.5px); box-shadow: var(--shadow-sm); } .btn.small { padding: 4px 10px; font-size: 12px; border-radius: 8px; } .btn.primary { color: #fff; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--phase) 88%, white), var(--phase)); box-shadow: 0 1px 2px rgba(40,34,24,0.12), 0 8px 20px -10px color-mix(in srgb, var(--phase) 70%, transparent); } .btn.primary:hover { filter: brightness(1.04); } /* ---- Tabs ---- */ .tabs { display: flex; align-items: center; gap: 5px; padding: 7px 14px; background: rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); } .tab { font-size: 13px; padding: 6px 14px; border: none; background: transparent; color: var(--ink-soft); border-radius: 9px; cursor: pointer; transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .tab:hover { background: rgba(40,34,24,0.05); } .tab.is-active { color: #fff; font-weight: 600; background: linear-gradient(180deg, color-mix(in srgb, var(--phase) 90%, white), var(--phase)); box-shadow: 0 1px 2px rgba(40,34,24,0.12), 0 8px 18px -9px color-mix(in srgb, var(--phase) 70%, transparent); } .tab:disabled { color: var(--ink-faint); cursor: default; } .tab-hint { margin-left: 14px; font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Phase / panes ---- */ .phase { flex: 1; display: flex; flex-direction: column; min-height: 0; } .marks-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); align-items: center; } .mark-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); cursor: pointer; user-select: none; color: var(--ink); } .mark-chip:hover { background: var(--panel-2); } .mark-chip[disabled] { opacity: 0.4; cursor: default; } .mark-chip .swatch { width: 14px; height: 11px; border-radius: 2px; display: inline-block; } .toolbar-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; } .clear-chip { color: var(--ink-soft); } .panes { flex: 1; display: flex; min-height: 0; } .notes-pane { width: 250px; min-width: 190px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel-2); } .notes-pane.observations { border-right: none; border-left: 1px solid var(--line); width: 280px; } .notes-pane.questions { background: linear-gradient(var(--blue-tint), var(--blue-tint)), var(--panel-2); } .notes-pane.observations { background: linear-gradient(var(--green-tint), var(--green-tint)), var(--panel-2); } .notes-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); } .notes-title { font-weight: 700; font-size: 15px; } .questions .notes-title { color: var(--blue); } .observations .notes-title { color: var(--green); } .add-note { font-size: 18px; line-height: 1; border: none; background: transparent; cursor: pointer; color: var(--ink-soft); padding: 2px 6px; border-radius: 6px; } .add-note:hover { background: rgba(0,0,0,0.05); } .questions .add-note { color: var(--blue); } .observations .add-note { color: var(--green); } .notes-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; } .note-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; } .note-card textarea { border: none; resize: vertical; min-height: 48px; font-family: var(--sans); font-size: 14px; color: var(--ink); background: transparent; width: 100%; } .note-card textarea:focus { outline: none; } .note-anchors { display: flex; flex-wrap: wrap; gap: 4px; } .anchor-chip { font-size: 11.5px; padding: 2px 6px; border-radius: 4px; background: rgba(106,90,205,0.12); border: 1px solid rgba(106,90,205,0.3); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; max-width: 100%; } .anchor-chip .x { cursor: pointer; opacity: 0.6; } .anchor-chip .x:hover { opacity: 1; } .note-actions { display: flex; gap: 8px; align-items: center; } .note-actions button { font-size: 12px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 2px 4px; border-radius: 4px; } .note-actions button:hover { background: rgba(0,0,0,0.05); } .note-actions .link-btn:disabled { opacity: 0.4; cursor: default; } .note-actions .spacer { flex: 1; } .note-dev-btn { font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 5px; } .note-dev-btn.o { color: var(--green); } .note-dev-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent) !important; } .note-dev-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; } /* ---- Passage pane ---- */ .passage-pane { flex: 1; display: flex; flex-direction: column; min-width: 360px; background: var(--panel); } .passage-scroll { flex: 1; overflow-y: auto; position: relative; } .passage-view { font-family: var(--serif); font-size: 18px; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; padding: 20px 24px; color: var(--ink); min-height: 100%; outline: none; } .passage-view ::selection { background: rgba(106,90,205,0.28); } .passage-view.empty::before { content: 'Paste your passage with “Edit text”, then mark it.'; color: var(--ink-faint); font-style: italic; } .passage-edit { display: none; width: 100%; height: 100%; min-height: 300px; border: none; padding: 20px 24px; font-family: var(--serif); font-size: 18px; line-height: 1.7; resize: none; color: var(--ink); background: var(--panel); } .passage-edit:focus { outline: none; } .passage-pane.editing .passage-view { display: none; } .passage-pane.editing .passage-edit { display: block; } .passage-foot { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--panel-2); } .passage-hint { font-size: 12px; color: var(--ink-faint); } /* ---- Marks toolbar wrap (toolbar + palette button) ---- */ .marks-toolbar-wrap { display: flex; align-items: flex-start; background: var(--panel); border-bottom: 1px solid var(--line); } .marks-toolbar-wrap .marks-toolbar { flex: 1; border-bottom: none; } .palette-btn { margin: 6px 12px; white-space: nowrap; } /* ---- Modal ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; z-index: 50; } .modal-backdrop[hidden] { display: none; } .modal { background: var(--panel); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); width: 680px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; padding: 18px; } .modal-head { display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 18px; font-weight: 700; } .modal-sub { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 12px; } .palette-rows { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .palette-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-bottom: 1px solid var(--line); } .palette-row input[type="color"] { width: 38px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; padding: 0; } .palette-row .pal-label { flex: 1; min-width: 120px; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; } .palette-row select { font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); } .palette-row .pal-preview { width: 84px; font-family: var(--serif); font-size: 14px; text-align: center; padding: 2px 4px; border-radius: 4px; } .palette-row .pal-del { border: none; background: transparent; cursor: pointer; color: var(--ink-soft); font-size: 14px; padding: 4px; } .palette-row .pal-del:hover { color: #c0392b; } .palette-row .pal-symbol { width: 38px; text-align: center; font-size: 16px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; } .pal-symbol-wrap { display: flex; align-items: center; gap: 2px; } .pal-symbol-pick { border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; cursor: pointer; font-size: 14px; padding: 3px 6px; line-height: 1; } .pal-symbol-pick:hover { background: var(--panel); border-color: var(--accent); } .pal-move { display: flex; flex-direction: column; gap: 1px; } .pal-move-btn { border: 1px solid var(--line); background: var(--panel-2); border-radius: 4px; cursor: pointer; font-size: 8px; line-height: 1; padding: 2px 4px; color: var(--ink-soft); } .pal-move-btn:hover:not(:disabled) { background: var(--panel); color: var(--accent); } .pal-move-btn:disabled { opacity: 0.3; cursor: default; } /* Symbol picker popover */ .symbol-pop { position: fixed; z-index: 80; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); padding: 10px; width: 286px; max-height: 70vh; overflow-y: auto; } .symbol-pop-h { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; margin: 8px 0 4px; } .symbol-pop-h:first-child { margin-top: 0; } .symbol-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } .symbol-cell { border: 1px solid transparent; background: var(--panel-2); border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; padding: 5px 0; } .symbol-cell:hover { border-color: var(--accent); background: var(--panel); } .symbol-clear { margin-top: 10px; width: 100%; border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; cursor: pointer; font-size: 12px; padding: 6px; color: var(--ink-soft); } .symbol-clear:hover { color: #c0392b; border-color: #c0392b; } /* Auto-growing text fields: JS sizes them to their content, so hide the scrollbar and the manual drag handle. (#passageEdit keeps its scroll box.) */ textarea:not(#passageEdit) { overflow: hidden; resize: none; } /* Named-palette switcher (top of the palette modal) */ .palette-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); } .pal-switch-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .pal-set-select { min-width: 150px; } /* Category symbol drawn on the marked passage text */ .mark-icon { font-size: 0.95em; vertical-align: 0.28em; line-height: 1; font-weight: 700; margin: 0 1px 0 2px; user-select: none; pointer-events: none; } .modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .modal-foot .spacer { flex: 1; } /* ---- Choose passage picker ---- */ .passage-modal { width: 560px; } .passage-picker { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } .pp-row { display: flex; flex-direction: column; gap: 4px; } .pp-row-split { flex-direction: row; gap: 10px; } .pp-field { display: flex; flex-direction: column; gap: 4px; flex: 1; } .pp-label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; } .pp-select { font-size: 14px; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: inherit; width: 100%; } .pp-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); cursor: pointer; } .pp-preview-wrap { display: flex; flex-direction: column; gap: 4px; } .pp-preview-label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; } .pp-preview { font-family: var(--serif); font-size: 14px; line-height: 1.5; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; max-height: 160px; overflow-y: auto; color: var(--ink-soft); } .pp-preview .pp-vn { font-size: 10px; font-weight: 700; color: var(--accent, #6a5acd); vertical-align: super; margin-right: 2px; } .pp-warn { font-size: 12px; color: #c0392b; } /* ---- About modal ---- */ .about-modal { width: 640px; } .about-body { overflow-y: auto; font-size: 14px; line-height: 1.6; } .about-body h3 { font-size: 14.5px; margin: 18px 0 6px; color: var(--accent, #6a5acd); } .about-body p { margin: 8px 0; } .about-body ul { margin: 8px 0; padding-left: 22px; } .about-body li { margin: 3px 0; } .about-body code { font-size: 12.5px; background: var(--bg); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); } .about-foot { font-weight: 600; color: var(--accent, #6a5acd); margin-top: 16px; } /* ---- Sub-mode toggle ---- */ .submode-bar { display: flex; align-items: center; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); } .submode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .submode { font-size: 13px; padding: 5px 14px; border: none; background: var(--panel-2); color: var(--ink-soft); cursor: pointer; } .submode + .submode { border-left: 1px solid var(--line); } .submode.is-active { background: var(--accent); color: #fff; font-weight: 600; } .submode-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } .submode-view[hidden] { display: none; } /* ---- Sections sub-view ---- */ .sections-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); } .sections-hint { font-size: 12px; color: var(--ink-faint); } .sections-body { flex: 1; display: flex; min-height: 0; } .sections-passage-col { width: 44%; min-width: 300px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); } .sections-list-col { flex: 1; display: flex; flex-direction: column; background: var(--panel-2); } .sections-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 16px; } .section-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .section-card .sec-head { display: flex; align-items: center; gap: 8px; } .section-card .sec-title { flex: 1; font-size: 15px; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; } .section-card .sec-title:hover { border-color: var(--line); } .section-card .sec-title:focus { outline: none; border-color: var(--accent); background: var(--panel-2); } .section-card .sec-ref { width: 130px; font-size: 12.5px; border: 1px solid var(--line); background: var(--panel-2); padding: 4px 6px; border-radius: 6px; } .section-card .sec-del { border: none; background: transparent; cursor: pointer; color: var(--ink-soft); font-size: 14px; } .section-card .sec-del:hover { color: #c0392b; } .section-card .sec-snippet { font-family: var(--serif); font-size: 13.5px; line-height: 1.5; background: var(--panel-2); border-radius: 6px; padding: 8px 10px; color: var(--ink); max-height: 110px; overflow-y: auto; white-space: pre-wrap; } .section-card .sec-field-label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); } .section-card .sec-paraphrase { font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; min-height: 46px; font-family: var(--sans); color: var(--ink); width: 100%; } .section-card .sec-paraphrase:focus { outline: none; border-color: var(--accent); } .section-card .sec-rel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); } .section-card .sec-rel select { font-size: 12.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); } .sections-empty { color: var(--ink-faint); font-size: 14px; padding: 20px; text-align: center; } /* create/divide rows: number chip + open button */ .section-card .sec-num { min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; } .section-card .sec-open { border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; } .section-card .sec-open:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .ws-source { margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); width: 100%; box-sizing: border-box; } /* ---- Section focus workspace ---- */ #secFocus { flex: 1; display: flex; flex-direction: column; min-height: 0; } #secFocus[hidden], #secCreate[hidden], #secEmpty[hidden] { display: none; } .sec-headfields { display: flex; gap: 10px; padding: 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); } .sec-headfields .sec-title { flex: 1; font-size: 15px; font-weight: 600; border: 1px solid var(--line); background: var(--panel); padding: 6px 8px; border-radius: 6px; } .sec-headfields .sec-ref { width: 170px; font-size: 12.5px; border: 1px solid var(--line); background: var(--panel); padding: 6px 8px; border-radius: 6px; } .sec-headfields .sec-title:focus, .sec-headfields .sec-ref:focus { outline: none; border-color: var(--accent); } .sec-focus-body { flex: 1; display: flex; min-height: 0; } .sec-focus-main { width: 55%; min-width: 320px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); min-height: 0; } .sec-para-wrap { flex: 0 0 auto; padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); background: var(--panel-2); } .sec-para-wrap .sec-field-label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); } .sec-paraphrase-focus { font-size: 13.5px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-family: var(--sans); color: var(--ink); width: 100%; min-height: 46px; box-sizing: border-box; } .sec-paraphrase-focus:focus { outline: none; border-color: var(--accent); } .sec-rel-wrap { flex: 0 0 auto; padding: 6px 14px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); background: var(--panel-2); } .sec-rel-label { font-weight: 600; } .sec-rel-select { font-size: 12.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); max-width: 340px; } .sec-focus-notes { flex: 1; display: flex; min-height: 0; } .sec-focus-notes .notes-pane { flex: 1; width: auto; } .sec-hint { border-top: 1px solid var(--line); } /* ---- Paragraph / clause toolbar ---- */ .para-toolbar { display: flex; align-items: center; gap: 10px; padding: 5px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); } .para-label { font-weight: 600; } .indent-group { display: inline-flex; align-items: center; gap: 6px; } .indent-level { font-family: ui-monospace, monospace; width: 16px; text-align: center; } .para-sep { width: 1px; height: 16px; background: var(--line); } .para-rel { font-size: 12.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); max-width: 320px; } .para-rel-label { color: var(--ink-soft); } .para-hint { color: var(--ink-faint); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .para-toolbar.disabled { opacity: 0.5; } /* ---- Passage paragraphs, labels, spotlight ---- */ .passage-view .para { position: relative; } .passage-view .para.has-label::before { content: '[' attr(data-label) '] '; font-style: italic; color: var(--accent); font-family: var(--sans); font-size: 0.82em; } .passage-view.spotlighting .spot-off { opacity: 0.28; transition: opacity 0.15s; } .passage-view.spotlighting .spot-on { background-color: rgba(255, 214, 64, 0.55) !important; border-radius: 3px; box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5); } .passage-view.readonly { font-size: 16px; } /* ---- Interpretation workspace ---- */ .section-nav { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--panel); border-bottom: 1px solid var(--line); } .section-select { font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); max-width: 360px; } .section-count { font-size: 12px; color: var(--ink-faint); } .nav-arrows { display: inline-flex; gap: 4px; } .interp-passage-strip { max-height: 150px; overflow-y: auto; background: var(--panel); border-bottom: 1px solid var(--line); } .interp-passage-strip.collapsed { display: none; } .interp-body { flex: 1; display: flex; min-height: 0; } .interp-left { width: 44%; min-width: 300px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel-2); } .interp-right { flex: 1; display: flex; flex-direction: column; background: var(--panel-2); } .interp-col-head { font-size: 13px; font-weight: 700; color: var(--ink-soft); padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); } .interp-scroll { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .ref-note-card { background: var(--panel); border-radius: 10px; padding: 11px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; } .ref-note-card.q { border-left: 3px solid var(--blue); } .ref-note-card.o { border-left: 3px solid var(--green); } .ref-note-head { display: flex; align-items: center; gap: 6px; } .ref-kind { font-size: 10px; font-weight: 700; color: #fff; padding: 1.5px 6px; border-radius: 99px; } .ref-kind.q { background: var(--blue); } .ref-kind.o { background: var(--green); } .ref-note-text { font-size: 14px; font-weight: 600; flex: 1; } .ref-note-input { flex: 1; font-size: 14px; font-weight: 600; font-family: var(--sans); color: var(--ink); border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: transparent; line-height: 1.35; } .ref-note-input:hover { border-color: var(--line); } .ref-note-input:focus { outline: none; border-color: var(--blue); background: var(--panel); } .ref-note-input::placeholder { font-weight: 400; color: var(--ink-faint); } .add-interp-q { margin-top: 8px; font-weight: 600; } .bring-in-warn { font-size: 12px; color: #9a5b16; background: #fdf3e6; border: 1px solid #f0d6a8; border-radius: 6px; padding: 6px 8px; margin: 8px 0 4px; } .bring-in-select { width: 100%; font-size: 12.5px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; background: var(--panel-2); color: var(--ink); margin-bottom: 4px; } .ref-develop-btn { font-size: 16px; border: none; background: transparent; cursor: pointer; padding: 2px 4px; border-radius: 6px; } .ref-develop-btn.q { color: var(--blue); } .ref-develop-btn.o { color: var(--green); } .ref-develop-btn:hover { background: rgba(0,0,0,0.05); } .ref-anchor { font-size: 12px; font-style: italic; color: var(--ink-soft); } .ref-dev-block { font-size: 13px; color: var(--ink); } .ref-dev-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; } .ref-empty { color: var(--ink-faint); font-size: 13px; } /* Possible interpretations + thrust (right column) */ .pi-section-title { font-size: 16px; font-weight: 700; } /* A question's (or the whole section's) readings, grouped together */ .pi-group { margin: 10px 0; padding-left: 10px; border-left: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); } .pi-group.seg { border-left-color: var(--line); } .pi-group-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .pi-group-label { font-size: 13px; font-weight: 700; color: var(--ink); } .pi-group.seg .pi-group-label { color: var(--ink-soft); } .pi-group-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; margin-bottom: 6px; } .pi-move { font-size: 11px; max-width: 130px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; background: var(--panel-2); color: var(--ink-soft); } .pi-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px; display: flex; flex-direction: column; gap: 7px; margin-bottom: 7px; } .pi-card.chosen { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); background: var(--green-tint); } .pi-head { display: flex; align-items: center; gap: 8px; } .pi-num { font-weight: 700; color: var(--ink-soft); } .pi-choose { font-size: 12px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; padding: 2px 8px; cursor: pointer; } .pi-choose.is-chosen { background: var(--green); color: #fff; border-color: var(--green); } .pi-del { border: none; background: transparent; cursor: pointer; color: var(--ink-soft); } .pi-field-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); } .pi-text, .pi-args, .pi-diff { font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; min-height: 38px; font-family: var(--sans); width: 100%; color: var(--ink); } .pi-source { font-size: 12.5px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; width: 100%; color: var(--ink-soft); } .thrust-box { background: var(--panel); border: 1px solid rgba(106,90,205,0.3); border-radius: 10px; padding: 11px; display: flex; flex-direction: column; gap: 7px; } .thrust-row { display: flex; align-items: flex-start; gap: 8px; } .thrust-row label { width: 60px; text-align: right; font-size: 12.5px; color: var(--ink-soft); padding-top: 6px; } .thrust-row textarea { flex: 1; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; min-height: 34px; font-family: var(--sans); color: var(--ink); } .phase-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--panel-2); } .phase-empty-icon { font-size: 40px; color: var(--accent); opacity: 0.6; } .phase-empty-title { font-size: 18px; font-weight: 700; } .phase-empty-msg { font-size: 14px; color: var(--ink-soft); max-width: 420px; text-align: center; } /* ---- Develop overlay ---- */ .develop-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); z-index: 30; } .develop-view[hidden] { display: none; } .develop-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); } .develop-kind { font-weight: 700; } .develop-body { flex: 1; display: flex; min-height: 0; } .develop-left { width: 42%; min-width: 320px; border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; } .develop-right { flex: 1; overflow-y: auto; background: var(--panel-2); padding: 18px; } .dev-section { margin-bottom: 18px; } .dev-section h3 { font-size: 15px; margin: 0 0 4px; } .dev-hint { font-size: 12px; color: var(--ink-soft); margin: 0 0 6px; } .dev-textarea { width: 100%; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 9px; resize: vertical; font-family: var(--sans); color: var(--ink); background: var(--panel); } .dev-note-text { width: 100%; font-size: 15px; font-weight: 600; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-family: var(--sans); color: var(--ink); } .xref-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: flex-start; } .xref-ref { width: 150px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; } .xref-note { flex: 1; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; resize: vertical; min-height: 32px; font-family: var(--sans); } .xref-trans { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .xref-trans-label { font-size: 12px; color: var(--ink-soft); } .xref-trans-select { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--panel-2); color: var(--ink); } .xref-del, .ws-del { border: none; background: transparent; cursor: pointer; color: var(--ink-soft); padding: 4px; } .add-row-btn { font-size: 13px; color: var(--accent); border: none; background: transparent; cursor: pointer; padding: 4px 0; } .ws-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px; margin-bottom: 10px; } .ws-step { margin-top: 8px; } .ws-step-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .ws-step-num { font-size: 10px; color: #fff; background: var(--accent); width: 17px; height: 17px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; } .ws-field { width: 100%; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; margin-top: 3px; font-family: var(--sans); resize: vertical; } .ws-sub { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; } .ws-sub label { width: 120px; text-align: right; font-size: 12px; color: var(--ink-soft); } .dev-badges { display: flex; gap: 5px; } .dev-badge { font-size: 9px; font-weight: 700; color: #fff; padding: 1.5px 6px; border-radius: 99px; } .dev-badge.interp { background: var(--blue); } .dev-badge.appl { background: #d98324; } /* ---- Application editor ---- */ .app-section-title { font-size: 16px; font-weight: 700; color: #c8741b; } .app-block { margin-bottom: 16px; } .app-block > .app-label { font-size: 13px; font-weight: 700; margin-bottom: 4px; } .app-block .app-hint { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; } .app-field { width: 100%; font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; min-height: 44px; font-family: var(--sans); color: var(--ink); background: var(--panel); } .app-field.emph { border-color: #e0a458; background: #fff8ee; } .facts-list { display: flex; flex-direction: column; gap: 6px; } .fact-row { display: flex; gap: 8px; align-items: flex-start; } .fact-check { font-size: 15px; width: 20px; padding-top: 6px; color: var(--ink-faint); } .fact-row.filled .fact-check { color: #d98324; } .fact-meta { width: 150px; flex-shrink: 0; padding-top: 4px; } .fact-name { font-size: 13px; font-weight: 700; } .fact-row:not(.filled) .fact-name { color: var(--ink-soft); } .fact-hint { font-size: 11px; color: var(--ink-faint); } .fact-input { flex: 1; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; resize: vertical; min-height: 30px; font-family: var(--sans); color: var(--ink); } .bridge-box { border: 1px solid #e8c89a; background: #fffaf2; border-radius: 10px; padding: 10px; } .bridge-opt { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; cursor: pointer; } .bridge-opt input { margin: 0; } .bridge-opt .bn { font-size: 13.5px; } .bridge-opt .bh { font-size: 11.5px; color: var(--ink-faint); font-style: italic; } .settled-box { background: var(--panel); border-radius: 10px; padding: 11px; margin-bottom: 12px; } .settled-box.thrust { border: 1px solid rgba(106,90,205,0.3); } .settled-box.chosen { border: 1px solid var(--green); background: var(--green-tint); } .settled-label { font-size: 11px; font-weight: 700; margin-bottom: 4px; } .settled-label.thrust { color: var(--accent); } .settled-label.chosen { color: var(--green); } .settled-text { font-size: 13.5px; } .settled-sub { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: 4px; } .commit-row { display: flex; gap: 10px; align-items: center; } .commit-row input[type=date] { font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 5px; } /* ---- Synthesis ---- */ .synth-scroll { flex: 1; overflow-y: auto; padding: 24px; } .synth-inner { max-width: 920px; margin: 0 auto; } .synth-title { font-size: 26px; font-weight: 700; } .synth-title .ref { font-size: 16px; color: var(--ink-soft); font-weight: 400; margin-left: 10px; } .synth-sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 18px; } .exidea-card { background: rgba(106,90,205,0.06); border: 1px solid rgba(106,90,205,0.3); border-radius: 12px; padding: 16px; margin-bottom: 24px; } .exidea-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .exidea-title { font-size: 19px; font-weight: 700; color: var(--accent); } .exidea-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; } .exidea-row label { width: 84px; text-align: right; font-size: 13px; color: var(--ink-soft); padding-top: 7px; } .exidea-row.statement label { font-weight: 700; color: var(--accent); } .exidea-row textarea { flex: 1; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; min-height: 36px; font-family: var(--sans); color: var(--ink); background: var(--panel); } .exidea-row.statement textarea { font-weight: 600; } .exidea-draft { margin-top: 6px; } .exidea-draft label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; } .exidea-draft textarea { width: 100%; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; min-height: 50px; font-family: var(--sans); color: var(--ink); background: var(--panel); } .synth-section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .synth-sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .synth-sec-title { font-size: 18px; font-weight: 700; } .synth-sec-ref { font-size: 14px; color: var(--ink-soft); } .synth-sec-edit { margin-left: auto; font-size: 12px; color: var(--accent); border: none; background: transparent; cursor: pointer; } .synth-thrust { font-style: italic; color: var(--accent); margin-bottom: 8px; } .synth-block-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-top: 12px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; } .synth-text { font-size: 14px; line-height: 1.55; margin-bottom: 6px; } .synth-chosen { background: var(--green-tint); border-left: 3px solid var(--green); border-radius: 6px; padding: 8px 10px; font-size: 14px; } .synth-note { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; } .synth-note.q { border-left: 3px solid var(--blue); } .synth-note.o { border-left: 3px solid var(--green); } .synth-note-q { font-size: 14px; font-weight: 600; margin-bottom: 4px; } .synth-note-q .k { font-size: 10px; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 99px; margin-right: 6px; } .synth-note-q .k.q { background: var(--blue); } .synth-note-q .k.o { background: var(--green); } .synth-mini-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: 6px; } .synth-rel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); margin-top: 10px; } .synth-rel .b { font-weight: 700; } .synth-app-grid { font-size: 13.5px; } .synth-app-item { margin-bottom: 5px; } .synth-app-item .lbl { font-weight: 700; color: #c8741b; } .synth-empty { color: var(--ink-faint); font-size: 14px; padding: 20px; text-align: center; } /* ---- Print / PDF document ---- */ #printRoot { display: none; } @media print { @page { margin: 0.8in; } html, body { height: auto; background: #fff; } #app, .modal-backdrop, .develop-view { display: none !important; } #printRoot { display: block; color: #000; font-family: var(--sans); -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* Print document styles (apply in both, scoped to #printRoot; only shown in print) */ #printRoot .p-title { font-size: 24px; font-weight: 700; margin: 0 0 2px; } #printRoot .p-ref { font-size: 15px; color: #444; font-weight: 400; margin-left: 8px; } #printRoot .p-h1 { font-size: 17px; font-weight: 700; color: #4b3fa0; margin: 18px 0 6px; break-after: avoid; } #printRoot .p-h2 { font-size: 14px; font-weight: 700; margin: 12px 0 4px; break-after: avoid; } #printRoot .p-h3 { font-size: 12px; font-weight: 700; color: #555; margin: 8px 0 2px; break-after: avoid; } #printRoot .p-body { font-size: 12px; line-height: 1.5; margin: 0 0 6px; } #printRoot .p-passage { font-family: var(--serif); font-size: 12px; line-height: 1.55; white-space: pre-wrap; margin: 4px 0 10px; } #printRoot .p-passage .para { position: relative; } #printRoot .p-passage .para.has-label::before { content: '[' attr(data-label) '] '; font-style: italic; color: #3a6ea5; font-family: var(--sans); font-size: 0.85em; } #printRoot .p-idea { border: 1px solid #b6abe6; background: #f3f1fb; border-radius: 8px; padding: 10px; margin: 6px 0 12px; break-inside: avoid; } #printRoot .p-idea .lbl { font-weight: 700; color: #4b3fa0; } /* ===== Magnify — visual polish: phase theming, soft depth, gentle borders ===== */ /* Per-phase background wash on the active working area */ main.phase { background: radial-gradient(135% 60% at 50% 0%, color-mix(in srgb, var(--phase) 7%, transparent), transparent 55%), var(--bg); transition: background 0.4s ease; } /* Soft, diffused focus rings in the active phase color */ .title-field:focus, .ref-field:focus, .section-select:focus, .pp-select:focus, .passage-edit:focus, .exidea-row textarea:focus, .exidea-draft textarea:focus { outline: none; border-color: color-mix(in srgb, var(--phase) 48%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase) 14%, transparent); } /* Soften structural dividers (Post-Neumorphism: faint delineation, not heavy lines) */ .notes-pane, .notes-pane.observations, .interp-left, .interp-right, .passage-pane, .section-nav, .interp-passage-strip, .marks-toolbar, .marks-toolbar-wrap, .submode-bar, .submode-toggle, .submode + .submode, .section-select, .exidea-row textarea, .exidea-draft textarea, .synth-section, .synth-note, .note-card { border-color: var(--hair) !important; } /* Active sub-mode toggle picks up the phase */ .submode.is-active { background: var(--phase); } /* Note cards: quiet depth, lift on focus */ .note-card { box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; } .note-card:focus-within { box-shadow: var(--shadow-card); } /* Section / synthesis cards: soft elevation */ .synth-section { box-shadow: var(--shadow-card); } /* Modals: soft depth + faint glass backdrop */ .modal { box-shadow: var(--shadow-lift); border: 1px solid var(--hair); } .modal-backdrop { background: rgba(28,38,54,0.30); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* keyboard-only focus ring on tabs (no stray outline on click) */ .tab:focus { outline: none; } .tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--phase) 55%, transparent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } } #printRoot .p-field { margin: 0 0 4px; font-size: 12px; } #printRoot .p-field .lbl { font-weight: 700; color: #555; } #printRoot .p-section { break-inside: avoid; border-top: 1.5px solid #ccc; padding-top: 8px; margin-top: 14px; } #printRoot .p-thrust { font-style: italic; color: #4b3fa0; font-size: 12.5px; margin: 2px 0 6px; } #printRoot .p-note { border-left: 2px solid #bbb; padding-left: 8px; margin: 6px 0; break-inside: avoid; } #printRoot .p-note.q { border-color: #3a6ea5; } #printRoot .p-note.o { border-color: #4a8c5b; } #printRoot .p-chosen { background: #eef7f0; border-left: 2px solid #4a8c5b; padding: 5px 8px; font-size: 12px; margin: 4px 0; } #printRoot .p-pi { margin: 4px 0; font-size: 12px; } #printRoot .p-pi .num { font-weight: 700; } #printRoot .p-pi .star { color: #4a8c5b; font-weight: 700; } #printRoot .p-app-item { font-size: 12px; margin: 2px 0; } #printRoot .p-app-item .lbl { font-weight: 700; color: #c8741b; } #printRoot .p-rel { font-size: 12px; color: #4b3fa0; margin-top: 8px; } #printRoot .p-ws { border: 1px solid #ddd; border-radius: 6px; padding: 6px 8px; margin: 4px 0; break-inside: avoid; } #printRoot .p-ws .w { font-weight: 700; } #printRoot .p-sub { font-size: 11.5px; margin: 1px 0; } #printRoot .p-sub .lbl { color: #666; } /* ===== Magnify v2 — new features (background, marks, dots, xref, shortcuts) ===== */ /* Mark-all toggle in the marks toolbar */ .mark-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); margin-left: 8px; cursor: pointer; user-select: none; } .mark-all input { accent-color: var(--phase); } /* Phase tab content dots */ .tab { position: relative; } .tab.has-content::after { content: ''; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--phase) 80%, white); } .tab.is-active.has-content::after { background: rgba(255,255,255,0.9); } /* Background / Context modal */ .background-modal { width: 640px; } .background-body { overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 4px; } .bg-section { display: flex; flex-direction: column; gap: 8px; } .bg-sec-title { font-size: 14px; font-weight: 700; color: var(--phase); } .bg-sec-sub { font-size: 12px; color: var(--ink-soft); margin-top: -4px; } .bg-field { display: flex; flex-direction: column; gap: 3px; } .bg-label { font-size: 12.5px; font-weight: 600; } .bg-hint { font-size: 11.5px; color: var(--ink-soft); } .bg-area { font-size: 13.5px; font-family: var(--sans); color: var(--ink); width: 100%; resize: vertical; border: 1px solid var(--hair); border-radius: 8px; padding: 7px 9px; background: rgba(40,34,24,0.025); line-height: 1.45; } .bg-area:focus { outline: none; border-color: color-mix(in srgb, var(--phase) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase) 13%, transparent); background: var(--panel); } .bg-select { font-size: 13.5px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--hair); background: var(--panel); max-width: 320px; } .bg-prompts { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .bg-prompts li { font-size: 12.5px; color: var(--ink-soft); } .bg-wsh { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Cross-reference verse preview */ .xref-wrap { display: flex; flex-direction: column; gap: 4px; } .xref-preview { font-family: var(--serif); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); background: color-mix(in srgb, var(--blue) 6%, transparent); border-left: 2px solid color-mix(in srgb, var(--blue) 40%, transparent); border-radius: 0 6px 6px 0; padding: 5px 9px; margin-left: 2px; } /* Keyboard shortcuts modal */ .shortcuts-modal { width: 440px; } .shortcuts-body { display: flex; flex-direction: column; gap: 8px; } .sc-row { display: flex; gap: 12px; font-size: 13px; align-items: baseline; } .sc-keys { flex-shrink: 0; min-width: 150px; font-weight: 600; color: var(--ink); } .sc-row span:last-child { color: var(--ink-soft); } /* ===== Magnify v3 — read view, word-study panel, verse numbers, note section ===== */ /* Verse numbers as non-selectable superscripts */ .vnum { font-size: 0.62em; font-weight: 700; color: var(--phase); vertical-align: super; margin-right: 3px; -webkit-user-select: none; user-select: none; opacity: 0.85; } .passage-view .vnum::selection { background: transparent; } /* Note-card section assignment */ .note-section { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; } .note-section-lbl { font-size: 11px; color: var(--ink-faint); } .note-section select { font-size: 11.5px; padding: 2px 5px; border-radius: 6px; border: 1px solid var(--hair); background: var(--panel); color: var(--ink-soft); max-width: 150px; } /* Read view modal */ .read-modal { width: 780px; max-width: 94vw; } .read-body { overflow-y: auto; padding: 4px 6px 4px 2px; font-size: 14px; line-height: 1.55; } .read-body .p-title { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 2px; } .read-body .p-ref { font-size: 14px; color: var(--ink-soft); font-weight: 400; margin-left: 8px; } .read-body .p-h1 { font-size: 15px; font-weight: 800; color: var(--phase); margin: 22px 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--hair); text-transform: uppercase; letter-spacing: 0.04em; } .read-body .p-h2 { font-size: 15px; font-weight: 700; margin: 16px 0 4px; } .read-body .p-h3 { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.03em; } .read-body .p-field { font-size: 13.5px; margin: 4px 0; } .read-body .p-field .lbl, .read-body .p-sub .lbl { font-weight: 700; } .read-body .p-idea { border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 10px; padding: 12px 14px; margin: 8px 0 14px; } .read-body .p-idea .p-h2 { color: var(--accent); margin-top: 0; } .read-body .p-passage { font-family: var(--serif); font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin: 6px 0 12px; background: var(--panel-2); border-radius: 8px; padding: 10px 12px; } .read-body .p-passage .para { position: relative; } .read-body .p-passage .para.has-label::before { content: '[' attr(data-label) '] '; font-style: italic; color: var(--blue); font-family: var(--sans); font-size: 0.82em; } .read-body .p-section { border-top: 1px solid var(--hair); padding-top: 8px; margin-top: 14px; } .read-body .p-thrust { font-style: italic; color: var(--accent); margin: 4px 0 8px; } .read-body .p-pi { font-size: 13.5px; margin: 6px 0 2px; } .read-body .p-pi .num { font-weight: 700; } .read-body .p-pi .star { color: var(--gold); font-weight: 700; } .read-body .p-note { border-left: 3px solid var(--line); padding: 4px 0 4px 10px; margin: 8px 0; } .read-body .p-note.q { border-left-color: var(--blue); } .read-body .p-note.o { border-left-color: var(--green); } .read-body .p-ws { border: 1px solid var(--hair); border-radius: 8px; padding: 7px 10px; margin: 6px 0; background: var(--panel-2); } .read-body .p-ws .w { font-weight: 700; } .read-body .p-sub { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0; } .read-body .p-rel { font-size: 12.5px; font-style: italic; color: var(--accent); margin: 10px 0 4px; } /* Word-studies panel */ .ws-modal { width: 680px; max-width: 94vw; } .ws-panel-body { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .ws-group-head { font-size: 13px; font-weight: 700; color: var(--phase); margin-bottom: 4px; } .ws-list { display: flex; flex-direction: column; gap: 8px; } .ws-note-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 8px 0 2px; }