/* ============================================= READER V8 — True Notion-Style ============================================= */ /* Fonts loaded via in HTML for faster rendering */ /* ===== CSS VARIABLES ===== */ :root { --color-bg: #faf9f5; --color-surface: #ffffff; --color-carbon: #191918; --color-graphite: #4a4946; --color-silver: #8a8780; --color-muted: #d6d3cc; --color-accent: #c4704a; --color-focus: #f5f0e8; --color-border: rgba(60, 50, 40, 0.08); --color-text: var(--color-carbon); --color-text-light: var(--color-silver); /* Vocab underline colors (kept at 0.6 opacity via usage) */ --color-known-line: #8cb98e; --color-learning-line: #d4b478; --color-missed-line: #c87c6f; --color-advanced-line: #7a9baa; --color-known-text: #4a7a4d; --color-learning-text: #a07830; --color-missed-text: #9a4f42; --color-advanced-text: #4a7a8a; --color-known: var(--color-known-line); --color-learning: var(--color-learning-line); --color-missed: var(--color-missed-line); --color-advanced: var(--color-advanced-line); /* Vocab hover backgrounds (subtle) */ --bg-known: rgba(140, 185, 142, 0.15); --bg-learning: rgba(212, 180, 120, 0.15); --bg-unknown: rgba(200, 124, 111, 0.15); --bg-advanced: rgba(122, 155, 170, 0.15); /* Typography — canonical tokens */ --font-serif: 'Crimson Text', serif; --font-sans: 'DM Sans', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace; --font-ipa: 'Source Sans 3', 'Gentium Plus', 'Gentium', 'Charis SIL', sans-serif; /* Aliases (backward compat) */ --font-main: var(--font-serif); --font-ui: var(--font-sans); --font-data: var(--font-mono); --font-primary: var(--font-sans); /* Spacing (8px base rhythm) Note: these intentionally differ from archiv.css --space-* tokens (e.g. --spacing-lg: 32px here vs --space-lg: 24px in archiv). Different page contexts require different spacing scales. */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 48px; /* Sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Line height */ --leading-tight: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Subtle backgrounds */ --bg-subtle: rgba(0, 0, 0, 0.02); --bg-tag: rgba(0, 0, 0, 0.05); --border-subtle: rgba(0, 0, 0, 0.05); /* Morphology */ --morph-root: var(--color-carbon); --morph-pre: #c4704a; --morph-der: #8a6b8a; --morph-infl: #6a7daa; --morph-clitic: #5a8a7a; --morph-inter: #8a8780; --morph-fusion: #5a5a55; --morph-sep-border: 2px dashed #c4704a; /* Punctuation spacing */ --gap-word: 10px; --gap-punct: 3px; --gap-pull-punct: -3px; --grammar-highlight-bg: #FFF9C4; --phrase-highlight-bg: #E0F2F1; --line-color: #BDBDBD; /* POS colors */ --pos-noun: #6a9bcc; --pos-verb: #c4704a; --pos-adj: #788c5d; --pos-adv: #c4944a; --pos-pron: #8a6b8a; --pos-det: #5a8a8a; --pos-stat: #8a8780; /* POS dot (lighter variants for grammar dots) */ --pos-noun-dot: #b0ccdf; --pos-verb-dot: #ddb5a5; --pos-adj-dot: #b5c4a0; --pos-adv-dot: #ddc8a0; --pos-pron-dot: #c4b0c4; --pos-det-dot: #b0cccc; --pos-stat-dot: #c4c0bb; /* Syntax tree */ --tree-line: #595959; /* Layout */ --top-bar-height: 40px; --left-panel-width: 240px; --left-panel-collapsed: 0px; --focus-panel-width: 380px; } /* ===== DARK MODE ===== */ [data-theme="dark"] { --color-bg: #141413; --color-surface: #1e1d1b; --color-carbon: #f5f4f0; --color-graphite: #a8a59e; --color-silver: #787570; --color-muted: #4a4845; --color-focus: #2a2926; --color-accent: #d4896a; --color-border: rgba(255, 245, 230, 0.1); --bg-subtle: rgba(255, 245, 230, 0.05); --bg-tag: rgba(255, 245, 230, 0.1); --border-subtle: rgba(255, 245, 230, 0.1); --bg-known: rgba(140, 185, 142, 0.1); --bg-learning: rgba(212, 180, 120, 0.1); --bg-unknown: rgba(200, 124, 111, 0.1); --bg-advanced: rgba(122, 155, 170, 0.1); --morph-root: #f5f4f0; --morph-pre: #d4896a; --morph-der: #b090b0; --morph-infl: #8a9dbb; --morph-clitic: #7aaa9a; --morph-inter: #8a8780; --morph-fusion: #8a8780; --morph-sep-border: 2px dashed #d4896a; --grammar-highlight-bg: #4A4A28; --phrase-highlight-bg: #1A3E3E; --line-color: #616161; /* POS colors (slightly brighter for dark mode) */ --pos-noun: #8ab5dd; --pos-verb: #d4896a; --pos-adj: #98ac7d; --pos-adv: #d4b46a; --pos-pron: #aa8baa; --pos-det: #7aaaaa; --pos-stat: #a8a59e; --pos-noun-dot: #8ab5dd; --pos-verb-dot: #d4896a; --pos-adj-dot: #98ac7d; --pos-adv-dot: #d4b46a; --pos-pron-dot: #aa8baa; --pos-det-dot: #7aaaaa; --pos-stat-dot: #a8a59e; /* Syntax tree */ --tree-line: #787570; } /* POS highlighting: subtle underlines on .word-core */ body.show-pos-noun .word-text[data-pos="NOUN"] .word-core, body.show-pos-noun .word-text[data-pos="PROPN"] .word-core { border-bottom: 2px solid var(--pos-noun) !important; } body.show-pos-verb .word-text[data-pos="VERB"] .word-core, body.show-pos-verb .word-text[data-pos="AUX"] .word-core { border-bottom: 2px solid var(--pos-verb) !important; } body.show-pos-adj .word-text[data-pos="ADJ"] .word-core { border-bottom: 2px solid var(--pos-adj) !important; } body.show-pos-adv .word-text[data-pos="ADV"] .word-core { border-bottom: 2px solid var(--pos-adv) !important; } body.show-pos-pron .word-text[data-pos="PRON"] .word-core { border-bottom: 2px solid var(--pos-pron) !important; } body.show-pos-det .word-text[data-pos="DET"] .word-core { border-bottom: 2px solid var(--pos-det) !important; } body.show-pos-stat .word-text[data-pos="ADP"] .word-core, body.show-pos-stat .word-text[data-pos="CCONJ"] .word-core, body.show-pos-stat .word-text[data-pos="SCONJ"] .word-core, body.show-pos-stat .word-text[data-pos="PART"] .word-core { border-bottom: 2px solid var(--pos-stat) !important; } /* ===== SKIP LINK (Accessibility) ===== */ .skip-link { position: absolute; top: -100px; left: 16px; padding: 8px 16px; background: var(--color-accent); color: var(--color-bg); font-family: var(--font-ui); font-size: 14px; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; z-index: 10000; transition: top 0.2s ease; } .skip-link:focus { top: 8px; } /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; font-family: var(--font-ui); font-size: 14px; color: var(--color-carbon); background: var(--color-bg); -webkit-font-smoothing: antialiased; } button { font-family: var(--font-ui); cursor: pointer; } /* ============================================= TOP BAR — transparent, no border ============================================= */ .top-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--top-bar-height); background: transparent; border-bottom: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 200; font-family: var(--font-ui); font-size: 13px; } .top-bar-left { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .top-bar-back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--color-graphite); font-weight: 500; white-space: nowrap; transition: color 0.15s; } .top-bar-back:hover { color: var(--color-carbon); } .top-bar-sep { color: var(--color-silver); font-size: 12px; } .top-bar-crumb { color: var(--color-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-bar-scene { color: var(--color-carbon); font-weight: 600; } .top-bar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .top-bar-btn { background: none; border: none; color: var(--color-graphite); padding: 6px; border-radius: var(--radius-sm); text-decoration: none; display: inline-flex; align-items: center; transition: all 0.15s; min-width: 28px; min-height: 28px; } .top-bar-btn:hover { background: var(--bg-tag); color: var(--color-carbon); } .top-bar-btn:active { transform: scale(0.93); } .top-bar-btn.active { color: var(--color-accent); } /* Theme toggle icons */ html:not([data-theme="dark"]) #sun-icon { display: none; } [data-theme="dark"] #moon-icon { display: none; } /* ============================================= MAIN LAYOUT — 2-Column + Focus on demand ============================================= */ .reader-layout { display: grid; grid-template-columns: var(--left-panel-width) 1fr 0px; grid-template-rows: 1fr; height: calc(100vh - var(--top-bar-height)); margin-top: var(--top-bar-height); transition: grid-template-columns 0.25s ease; } body.analysis-open .reader-layout { grid-template-columns: var(--left-panel-width) 1fr var(--focus-panel-width); } body.left-panel-collapsed .reader-layout { grid-template-columns: 0px 1fr 0px; } body.left-panel-collapsed.analysis-open .reader-layout { grid-template-columns: 0px 1fr var(--focus-panel-width); } /* ============================================= LEFT PANEL — Navigation only (240px) ============================================= */ .left-panel { background: var(--color-surface); border-right: 1px solid var(--color-border); overflow: hidden; transition: width 0.25s ease; min-width: 0; } body.left-panel-collapsed .left-panel { width: 0; border-right: none; overflow: hidden; } .left-panel-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; padding-bottom: 40px; } /* Panel Sections (Accordion) */ .panel-section { border-bottom: none; } .panel-section + .panel-section { border-top: 1px solid var(--color-border); } .panel-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; background: none; border: none; border-bottom: 1px solid transparent; font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-silver); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .panel-section-header:hover { color: var(--color-graphite); border-bottom-color: var(--color-border); } .panel-chevron { transition: transform 0.2s, scale 0.2s; flex-shrink: 0; } .panel-section-header:hover .panel-chevron { scale: 1.1; } .panel-section-header[aria-expanded="false"] .panel-chevron { transform: rotate(-90deg); } .panel-section-body { padding: 0 16px 16px; animation: fadeInBody 150ms ease-out; } @keyframes fadeInBody { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Panel Form Fields */ .panel-field { margin-bottom: 8px; } .panel-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-silver); margin-bottom: 4px; } .panel-select { width: 100%; font-family: var(--font-ui); font-size: 13px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-carbon); cursor: pointer; transition: border-color 0.15s; } .panel-select:hover { border-color: var(--color-graphite); } .panel-select:focus { outline: none; border-color: var(--color-accent); } .panel-value { font-size: 13px; font-weight: 600; color: var(--color-carbon); } /* Hide sidebar sections relocated to toolbar/palette */ .panel-section[data-section="controls"], .panel-section[data-section="grammar"], .panel-section[data-section="lens"] { display: none; } /* ============================================= CANVAS (Center) — 800px max, 96px padding ============================================= */ .canvas { overflow-y: auto; overflow-x: hidden; background: var(--color-bg); } .canvas-inner { max-width: 800px; margin: 0 auto; padding: 40px clamp(24px, 5vw, 96px) 120px; } /* ===== TITLE TREATMENT (Notion-style) ===== */ .canvas-header { margin-bottom: 16px; } .canvas-composer-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-silver); margin-bottom: 4px; } .canvas-title { font-family: var(--font-main); font-weight: 700; font-size: 2.5rem; color: var(--color-carbon); letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 4px; } .canvas-subtitle { font-family: var(--font-ui); font-size: 1rem; color: var(--color-silver); font-weight: 400; } /* ===== PAGE PROPERTIES ROW ===== */ .page-properties { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 12px 0; margin-bottom: 24px; border-top: 1px solid var(--color-border); font-family: var(--font-ui); font-size: 13px; color: var(--color-silver); } .page-prop { display: inline-flex; align-items: center; gap: 6px; } .page-prop-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-silver); } .page-prop-value { color: var(--color-graphite); font-weight: 500; } .page-prop select { font-family: var(--font-ui); font-size: 13px; padding: 2px 6px; border: none; background: transparent; color: var(--color-graphite); cursor: pointer; font-weight: 500; border-radius: 4px; transition: background 0.15s; } .page-prop select:hover { background: var(--bg-tag); } .page-prop select:focus { outline: none; background: var(--bg-tag); } .page-prop .mini-bar { width: 60px; height: 3px; background: var(--color-border); border-radius: 2px; display: inline-block; vertical-align: middle; } .page-prop .mini-bar-fill { height: 100%; border-radius: 2px; display: block; } .page-prop .mini-bar-fill.vocab { background: var(--pos-adj); } .page-prop .mini-bar-fill.semantic { background: var(--color-accent); } /* ===== TABS — Hidden in V8 ===== */ .tabs { display: none; } .tab-button { display: none; } .tab-content { display: none; } .tab-content.active { display: block; } /* ===== TEXT CONTAINER ===== */ .text-container { position: relative; } .prose-content { font-family: var(--font-main); font-size: 1.1rem; line-height: var(--leading-relaxed); color: var(--color-graphite); } .prose-tab-header { margin-bottom: 16px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-silver); } .prose-section-title { margin-bottom: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--color-carbon); } /* ============================================= FOCUS PANEL (Right) — on demand ============================================= */ #focus-panel { background: var(--color-surface); border-left: 1px solid var(--color-border); overflow-y: auto; overflow-x: hidden; position: relative; transform: translateX(100%); transition: transform 0.2s ease; } body.analysis-open #focus-panel { transform: translateX(0); } #focus-panel-content { padding: 20px 20px 24px; transition: opacity 0.15s ease; } .focus-panel-placeholder { padding: 40px 20px; color: var(--color-silver); text-align: center; font-size: 13px; } #close-focus-panel { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 24px; color: var(--color-graphite); cursor: pointer; padding: 4px 8px; border-radius: 4px; line-height: 1; z-index: 10; transition: all 0.15s; } #close-focus-panel:hover { background: var(--bg-tag); color: var(--color-carbon); } /* ============================================= FLOATING TOOLBAR ============================================= */ .floating-toolbar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 300; transition: opacity 0.3s ease; } .toolbar-main { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .toolbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: none; background: transparent; color: var(--color-graphite); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; position: relative; } .toolbar-btn:hover { background: var(--bg-tag); color: var(--color-carbon); } .toolbar-btn:active { transform: scale(0.95); } .toolbar-btn.active { background: var(--bg-tag); color: var(--color-accent); } .toolbar-sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 2px; } /* Toolbar sub-rows (vocab filters, grammar chips) */ .toolbar-subrow { display: none; align-items: center; gap: 4px; padding: 4px 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .toolbar-subrow.visible { display: flex; } .toolbar-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--color-graphite); background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; cursor: pointer; transition: all 0.15s; } .toolbar-chip:hover { background: var(--bg-tag); } .toolbar-chip.active { color: var(--color-carbon); border-color: var(--color-carbon); background: var(--bg-tag); } /* ============================================= COMMAND PALETTE ============================================= */ .command-palette-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1000; align-items: flex-start; justify-content: center; padding-top: 20vh; } .command-palette-overlay.visible { display: flex; } .command-palette { width: 480px; max-width: 90vw; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); overflow: hidden; animation: palette-in 0.15s ease; } @keyframes palette-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .command-palette-input { width: 100%; padding: 16px 20px; font-family: var(--font-ui); font-size: 16px; border: none; background: transparent; color: var(--color-carbon); outline: none; border-bottom: 1px solid var(--color-border); } .command-palette-input::placeholder { color: var(--color-silver); } .command-palette-results { max-height: 320px; overflow-y: auto; padding: 8px 0; } .command-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; transition: background 0.1s; font-family: var(--font-ui); font-size: 14px; color: var(--color-graphite); } .command-item:hover, .command-item.selected { background: var(--bg-tag); color: var(--color-carbon); } /* ============================================= VOCAB CHIPS (legacy, hidden in sidebar) ============================================= */ .vocab-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; margin-bottom: 12px; } .vocab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--color-graphite); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 999px; cursor: pointer; transition: all 0.15s; } .vocab-chip:hover { background: var(--bg-tag); } .vocab-chip.active { background: var(--bg-tag); color: var(--color-carbon); border-color: var(--color-carbon); } .vocab-chip.active[data-vocab-target="known"] { border-color: var(--color-known-text); } .vocab-chip.active[data-vocab-target="learning"] { border-color: var(--color-learning-text); } .vocab-chip.active[data-vocab-target="missed"] { border-color: var(--color-missed-text); } .vocab-chip.active[data-vocab-target="advanced"] { border-color: var(--color-advanced-text); } .vocab-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .vocab-dot[data-vocab="known"] { background: var(--color-known); } .vocab-dot[data-vocab="learning"] { background: var(--color-learning); } .vocab-dot[data-vocab="missed"] { background: var(--color-missed); } .vocab-dot[data-vocab="advanced"] { background: var(--color-advanced); } /* ===== GRAMMAR CHIPS (legacy, hidden in sidebar) ===== */ .grammar-toggles { display: flex; flex-wrap: wrap; gap: 6px; } .grammar-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--color-graphite); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-subtle); cursor: pointer; transition: all 0.15s; } .grammar-chip:hover { background: var(--bg-tag); } .grammar-chip.active { border-color: var(--color-carbon); color: var(--color-carbon); background: var(--bg-tag); } .grammar-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--color-muted); } .grammar-dot[data-pos="noun"] { background: var(--pos-noun-dot); } .grammar-dot[data-pos="verb"] { background: var(--pos-verb-dot); } .grammar-dot[data-pos="adj"] { background: var(--pos-adj-dot); } .grammar-dot[data-pos="adv"] { background: var(--pos-adv-dot); } .grammar-dot[data-pos="pron"] { background: var(--pos-pron-dot); } .grammar-dot[data-pos="det"] { background: var(--pos-det-dot); } .grammar-dot[data-pos="stat"] { background: var(--pos-stat-dot); } .grammar-chip[data-pos-target="noun"].active { border-color: var(--pos-noun); } .grammar-chip[data-pos-target="verb"].active { border-color: var(--pos-verb); } .grammar-chip[data-pos-target="adj"].active { border-color: var(--pos-adj); } .grammar-chip[data-pos-target="adv"].active { border-color: var(--pos-adv); } .grammar-chip[data-pos-target="pron"].active { border-color: var(--pos-pron); } /* ===== LENS ITEMS (hidden in sidebar) ===== */ .lens-items { display: flex; flex-wrap: wrap; gap: 6px; } .lens-item { font-family: var(--font-ui); font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-subtle); color: var(--color-silver); cursor: pointer; transition: all 0.15s; font-weight: 600; opacity: 0.7; } .lens-item:hover { color: var(--color-text); opacity: 1; } .lens-item.active { opacity: 1; color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); } /* ===== STATS ===== */ .stats-grid { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--color-border); padding-top: 10px; } .stat-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .stat-label { color: var(--color-silver); width: 60px; flex-shrink: 0; font-weight: 600; text-transform: uppercase; font-size: 10px; } .stat-value { font-family: var(--font-data); font-weight: 600; color: var(--color-carbon); font-size: 12px; text-align: right; } .mini-bar { flex: 1; height: 3px; background: var(--color-border); border-radius: 2px; } .mini-bar-fill { height: 100%; border-radius: 2px; } .mini-bar-fill.vocab { background: var(--pos-adj); } .mini-bar-fill.semantic { background: var(--color-accent); } /* ===== CAST LIST ===== */ .cast-list { display: flex; flex-direction: column; gap: 2px; } .cast-item { font-family: var(--font-ui); font-size: 13px; padding: 7px 10px; color: var(--color-graphite); cursor: pointer; border-left: 3px solid transparent; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s, border-color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cast-item:hover { color: var(--color-carbon); background: var(--bg-subtle); border-left-color: var(--color-muted); } .cast-item.active { color: var(--color-accent); background: var(--bg-tag); border-left-color: var(--color-accent); font-weight: 600; } /* Cast count badge */ .cast-count { float: right; font-size: 11px; color: var(--color-silver); font-weight: 400; min-width: 20px; text-align: right; } /* Cast toolbar — segmented control */ .cast-toolbar { display: flex; gap: 0; padding: 6px 0 8px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 6px; } .cast-toolbar button { font-family: var(--font-ui); font-size: 11px; padding: 2px 8px; border: 1px solid var(--color-border); border-right: none; border-radius: 0; background: var(--color-bg); color: var(--color-graphite); cursor: pointer; transition: all 0.15s; } .cast-toolbar button:first-child { border-radius: 3px 0 0 3px; } .cast-toolbar button:last-child, .cast-toolbar button.cast-clear-filter { border-right: 1px solid var(--color-border); border-radius: 0 3px 3px 0; } .cast-toolbar button:hover { background: var(--bg-subtle); color: var(--color-carbon); } .cast-toolbar .cast-clear-filter { margin-left: auto; color: var(--color-accent); border-color: var(--color-accent); border-right: 1px solid var(--color-accent); } /* Highlight mode: selected character's blocks stand out, others recede */ .dialogue-block.cast-highlighted { background: rgba(196, 112, 74, 0.04); } .dialogue-block.cast-highlighted .speaker { color: var(--color-accent); } /* Dimmed: other characters' blocks — readable but secondary */ .dialogue-block.cast-dimmed .speaker { color: var(--color-silver); } .dialogue-block.cast-dimmed .lines, .dialogue-block.cast-dimmed .line-content-wrapper { color: var(--color-silver); } .dialogue-block.cast-dimmed:hover .lines, .dialogue-block.cast-dimmed:hover .line-content-wrapper { color: var(--color-graphite); } /* Dark mode highlight tint */ [data-theme="dark"] .dialogue-block.cast-highlighted { background: rgba(212, 137, 106, 0.06); } /* ===== AUDIO CONTROLS ===== */ .audio-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .play-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--color-carbon); border: none; color: var(--color-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s; flex-shrink: 0; } .play-btn:hover { transform: scale(1.05); } .speed-controls { display: flex; gap: 4px; } .speed-btn, .loop-btn { font-family: var(--font-ui); font-size: 11px; padding: 4px 8px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--color-silver); border-radius: 999px; cursor: pointer; transition: all 0.15s; font-weight: 600; } .speed-btn:hover, .loop-btn:hover { color: var(--color-carbon); background: var(--bg-tag); } .speed-btn.active, .loop-btn.active { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); } /* ===== EXPORT ===== */ .export-tools { display: flex; gap: 6px; } .export-btn { font-family: var(--font-ui); font-size: 12px; padding: 6px 12px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--color-graphite); border-radius: 6px; cursor: pointer; text-decoration: none; font-weight: 600; transition: all 0.15s; } .export-btn:hover { border-color: var(--color-carbon); color: var(--color-carbon); } /* ===== GENERATE PANEL ===== */ .generate-tools { display: flex; flex-direction: column; gap: 0; } .generate-all-btn { font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--color-graphite); border-radius: 6px; cursor: pointer; transition: all 0.15s; margin-bottom: 12px; width: 100%; } .generate-all-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--bg-subtle)); } .generate-all-btn:disabled { opacity: 0.5; pointer-events: none; } .generate-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .generate-group:last-child { margin-bottom: 0; } .generate-group-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-silver); margin-bottom: 1px; } .generate-btn { font-family: var(--font-ui); font-size: 12px; padding: 6px 10px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--color-graphite); border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.15s; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .generate-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } .generate-btn.generate-running { opacity: 0.6; pointer-events: none; animation: gen-pulse 1.5s ease-in-out infinite; } .generate-btn.generate-done { border-color: #34a853; color: #34a853; background: color-mix(in srgb, #34a853 8%, var(--bg-subtle)); } @keyframes gen-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.3; } } .generate-btn-label { flex: 1; text-align: left; font-size: 12px; } .generate-btn-count { font-family: var(--font-data); font-size: 10px; color: var(--color-silver); margin-left: 8px; } .generate-status { font-family: var(--font-ui); font-size: 11px; padding: 6px 0; margin-top: 6px; } .generate-status-loading { color: var(--color-accent); } .generate-status-ok { color: #34a853; } .generate-status-error { color: #ea4335; } /* ===== SEARCH STRIP ===== */ .search-strip { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .search-strip #lemma-search { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--color-border); padding: 6px 0; font-family: var(--font-ui); font-size: 12px; color: var(--color-carbon); outline: none; } .search-strip #lemma-search:focus { border-bottom-color: var(--color-accent); } .search-strip #lemma-search::placeholder { color: var(--color-silver); } .search-strip #search-clear { background: transparent; border: none; color: var(--color-silver); cursor: pointer; font-size: 14px; padding: 2px 4px; } .search-strip #search-results { font-size: 11px; color: var(--color-silver); white-space: nowrap; } /* ===== DNA STRIP ===== */ .dna-strip-container { width: 100%; margin-bottom: 10px; } .dna-strip { display: flex; height: 6px; width: 100%; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.03); cursor: pointer; } .dna-segment { height: 100%; transition: opacity 0.2s ease; } .dna-segment.known { background: var(--color-known); } .dna-segment.missed { background: var(--color-missed); } .dna-segment.learning { background: var(--color-learning); } .dna-segment.advanced { background: var(--color-advanced); } /* ============================================= LIBRETTO CONTENT — Typography & Lines ============================================= */ /* Dialogue Block — whitespace only, no borders */ .dialogue-block { margin-bottom: 28px; } /* Speaker name — small-caps sans-serif, graphite, editorial style */ .speaker { font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; color: var(--color-graphite); margin-bottom: 10px; cursor: pointer; } .speaker:hover { color: var(--color-accent); } .heading-block { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--color-carbon); margin: 48px 0 16px; padding: 16px 0 0 12px; border-left: 3px solid var(--color-accent); border-top: 1px solid var(--color-border); } .heading-block:first-child { margin-top: 0; border-top: none; padding-top: 0; } .stage-direction-block { font-family: var(--font-ui); font-size: 0.85rem; font-style: italic; color: var(--color-silver); margin: 20px 0; padding: 8px 24px; } /* Line — no borders, whitespace separation */ .line { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 6px 0; border-bottom: none; cursor: pointer; transition: background 0.1s; position: relative; align-items: flex-start; border-radius: 4px; } .line:hover { background-color: var(--bg-subtle); } .line-gutter { display: flex; align-items: flex-start; gap: 4px; flex-direction: column; } .line-number { color: var(--color-silver); font-family: var(--font-data); font-size: 11px; opacity: 0; text-align: center; width: 100%; transition: opacity 0.15s; } .line:hover .line-number { opacity: 0.4; } /* Speak button */ .speak-btn { background: none; border: none; cursor: pointer; color: var(--color-silver); opacity: 0; transition: opacity 0.15s; padding: 2px; display: flex; align-items: center; } .line:hover .speak-btn { opacity: 0.6; } .speak-btn:hover { opacity: 1 !important; color: var(--color-accent); } /* Token Stacks */ .line-content-wrapper { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: baseline; } /* One annotation layer hidden — intermediate spacing */ body.hide-ipa:not(.study-mode):not(.hide-translations) .token-stack:not(.punct-stack), body.hide-translations:not(.study-mode):not(.hide-ipa) .token-stack:not(.punct-stack) { margin-right: 7px; } /* Both layers hidden — natural prose spacing */ body.hide-ipa.hide-translations:not(.study-mode) .token-stack:not(.punct-stack) { margin-right: 5px; } .token-stack { display: inline-flex; flex-direction: row; align-items: first baseline; text-align: center; } .token-stack:not(.punct-stack) { margin-right: var(--gap-word); transition: margin-right 0.2s; } .token-core { display: inline-flex; flex-direction: column; align-items: center; } .token-stack.punct-stack { vertical-align: baseline; } .punct { font-family: var(--font-main); font-size: 1.35rem; font-weight: 400; color: var(--color-carbon); line-height: 1.45; cursor: default; border-bottom: none !important; } /* ===== PUNCTUATION SPACING ===== */ /* Punctuation: flush left against preceding word, small gap before next */ .punct-stack { margin-right: var(--gap-punct); } /* Inline punctuation attached to word text (flush, no gap) */ .punct-after { font-family: var(--font-main); font-size: 1.35rem; font-weight: 400; color: var(--color-carbon); } /* Trailing punctuation moved outside .token-core — align to word baseline */ .token-stack > .punct-after { align-self: flex-start; line-height: 1.45; } /* Elision: token ending with apostrophe (j', l', d') → flush with next word */ .token-stack.elision { margin-right: 0 !important; } /* Clitic: token starting with connector (-moi, 's) → preceding token flush */ .token-stack.before-clitic { margin-right: 0 !important; } /* Joining punct: standalone hyphen/apostrophe between words → flush after too */ .punct-stack.joining-punct { margin-right: 0 !important; } /* Word with leading punct (opening quote/bracket): pull close */ .token-stack.has-before-punct { margin-left: var(--gap-pull-punct); } /* Word */ .word { font-family: var(--font-main); font-weight: 400; font-size: 1.35rem; color: var(--color-carbon); cursor: pointer; transition: all 0.15s; line-height: 1.45; padding: 1px 3px; border-radius: 3px; } .word-text { cursor: pointer; border-radius: 3px; padding: 1px 3px; margin: 0 -3px; transition: all 0.15s; font-weight: 400; white-space: nowrap; } /* Vocab underlines — on .word-core inside .word-text, hidden by default */ .word-core { border-bottom: 2px solid transparent; border-radius: 3px; padding-bottom: 1px; } /* Vocab underlines visible when body has .vocab-layer-active */ body.vocab-layer-active .word-text.known .word-core { border-bottom-color: var(--color-known-line); } body.vocab-layer-active .word-text.learning .word-core { border-bottom-color: var(--color-learning-line); } body.vocab-layer-active .word-text.missed .word-core, body.vocab-layer-active .word-text.unknown .word-core { border-bottom-color: var(--color-missed-line); } body.vocab-layer-active .word-text.advanced .word-core, body.vocab-layer-active .word-text.advanced_1 .word-core, body.vocab-layer-active .word-text.advanced_2 .word-core, body.vocab-layer-active .word-text.advanced_3 .word-core { border-bottom-color: var(--color-advanced-line); } body.vocab-layer-active .word-text.unanalyzed .word-core { border-bottom-color: var(--color-silver); } /* Hover highlights — background on .word-core only (excludes punctuation) */ .word-text.known:hover { color: var(--color-known-text); } .word-text.known:hover .word-core { background-color: var(--bg-known); } .word-text.learning:hover { color: var(--color-learning-text); } .word-text.learning:hover .word-core { background-color: var(--bg-learning); } .word-text.missed:hover, .word-text.unknown:hover { color: var(--color-missed-text); } .word-text.missed:hover .word-core, .word-text.unknown:hover .word-core { background-color: var(--bg-unknown); } .word-text.advanced:hover, .word-text.advanced_1:hover, .word-text.advanced_2:hover, .word-text.advanced_3:hover { color: var(--color-advanced-text); } .word-text.advanced:hover .word-core, .word-text.advanced_1:hover .word-core, .word-text.advanced_2:hover .word-core, .word-text.advanced_3:hover .word-core { background-color: var(--bg-advanced); } .word-text.unanalyzed:hover .word-core { background-color: var(--color-focus); } .word-text.vocab-filtered .word-core { border-bottom-color: transparent !important; } .word-text.grammar-highlight { background-color: var(--grammar-highlight-bg) !important; } /* IPA — 0.85rem, silver */ .ipa-text { font-family: 'Source Sans 3', var(--font-ui); font-size: 0.85rem; color: var(--color-silver); line-height: 1.4; margin-top: 1px; display: block; } /* Collapse empty IPA/gloss rows */ .ipa-text:empty, .glossing:empty { display: none; } /* Glossing — 0.8rem, silver */ .glossing { font-family: 'Source Sans 3', var(--font-ui); font-size: 0.8rem; color: var(--color-silver); margin-top: 0; text-align: center; white-space: nowrap; } /* Translated line */ .translated-line { font-family: var(--font-main); font-size: 1.2rem; color: var(--color-carbon); } .original-text-note { font-size: 12px; color: var(--color-silver); font-style: italic; margin-top: 4px; } /* Search highlight */ .search-highlight { background: #ffeb3b !important; color: #000 !important; padding: 1px 3px; border-radius: 2px; box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.3); } [data-theme="dark"] .search-highlight { background: #fdd835 !important; } /* ===== LAYER VISIBILITY ===== */ /* Regular toggle: collapse space */ body.hide-translations:not(.study-mode) .glossing { display: none; } body.hide-ipa:not(.study-mode) .ipa-text { display: none; } /* Study mode: transparent pills with hover reveal */ body.study-mode.hide-translations .glossing { color: transparent !important; background: rgba(0, 0, 0, 0.05) !important; border-radius: 3px; cursor: help; user-select: none; min-width: 30px; display: inline-block; transition: all 0.2s; } body.study-mode.hide-translations .glossing:hover { color: var(--color-text) !important; background: transparent !important; } body.study-mode.hide-ipa .ipa-text { color: transparent !important; background: rgba(0, 0, 0, 0.05) !important; border-radius: 3px; cursor: help; user-select: none; min-width: 30px; display: inline-block; transition: all 0.2s; } body.study-mode.hide-ipa .ipa-text:hover { color: var(--color-text) !important; background: transparent !important; } /* Dark mode pills (study mode only) */ [data-theme="dark"].study-mode.hide-translations .glossing, [data-theme="dark"].study-mode.hide-ipa .ipa-text { background: rgba(255, 255, 255, 0.1) !important; } /* ===== DEPENDENCY LINES & TOOLTIP ===== */ #dependency-line-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } #dependency-path { stroke: var(--line-color); stroke-width: 1.5px; fill: none; stroke-dasharray: 4 4; transition: opacity 0.2s; opacity: 0; } #grammar-tooltip { position: fixed; display: none; background: var(--color-carbon); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-family: var(--font-ui); pointer-events: none; z-index: 1000; white-space: nowrap; } /* ============================================= MORPHOLOGY DIAGRAM ============================================= */ .morph-container { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; align-items: flex-end; margin-top: 12px; padding: 16px 12px; background: rgba(0, 0, 0, 0.02); border-radius: var(--radius-md); } .morph-unit { display: flex; flex-direction: column; align-items: center; padding: 0 4px; transition: all 0.15s; } .morph-unit:hover { background: rgba(0, 0, 0, 0.05); } .morph-text { font-family: var(--font-main); font-size: 1.3rem; color: var(--color-carbon); line-height: 1.4; text-align: center; border-bottom: 3px solid transparent; padding-bottom: 3px; } .morph-label { font-family: var(--font-data); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-top: 4px; } .type-root .morph-text { border-bottom-color: var(--morph-root); } .type-root .morph-label { color: var(--morph-root); } .type-pre .morph-text { border-bottom-color: var(--morph-pre); } .type-pre .morph-label { color: var(--morph-pre); } .type-sep .morph-text { border-bottom: var(--morph-sep-border); } .type-sep .morph-label { color: var(--morph-pre); } .type-der .morph-text { border-bottom-color: var(--morph-der); } .type-der .morph-label { color: var(--morph-der); } .type-infl .morph-text { border-bottom-color: var(--morph-infl); } .type-infl .morph-label { color: var(--morph-infl); } .type-clitic .morph-text { border-bottom-color: var(--morph-clitic); } .type-clitic .morph-label { color: var(--morph-clitic); } .type-inter .morph-text { border-bottom-color: var(--morph-inter); color: var(--color-silver); font-style: italic; } .type-inter .morph-label { color: var(--morph-inter); } .type-fusion .morph-text { border-bottom: 3px double var(--morph-fusion); } .type-fusion .morph-label { color: var(--morph-fusion); } /* Focus panel morphology overrides */ #focus-panel .morph-container { gap: 8px; padding: 16px; border-radius: 8px; } #focus-panel .morph-unit { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--color-surface); } #focus-panel .morph-unit.type-root { border-color: var(--morph-root); } #focus-panel .morph-unit.type-pre { border-color: var(--morph-pre); } #focus-panel .morph-unit.type-der { border-color: var(--morph-der); } #focus-panel .morph-unit.type-infl { border-color: var(--morph-infl); } #focus-panel .morph-unit.type-clitic { border-color: var(--morph-clitic); } #focus-panel .morph-unit.type-inter { border-color: var(--morph-inter); } #focus-panel .morph-unit.type-fusion { border-color: var(--morph-fusion); } #focus-panel .morph-unit.type-sep { border-style: dashed; border-color: var(--morph-pre); } /* ===== SYNTAX TREE ===== */ .gen-tree ul { padding-top: 16px; position: relative; display: flex; justify-content: center; margin: 0; padding-left: 0; } .gen-tree li { list-style-type: none; position: relative; padding: 16px 4px 0; display: flex; flex-direction: column; align-items: center; } .gen-tree li::before, .gen-tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 1.5px solid var(--tree-line); width: 50%; height: 16px; } .gen-tree li::after { right: auto; left: calc(50% - 0.75px); width: calc(50% + 0.75px); border-left: 1.5px solid var(--tree-line); } .gen-tree li:only-child::after, .gen-tree li:only-child::before { display: none; } .gen-tree li:only-child { padding-top: 0; } .gen-tree li:first-child::before, .gen-tree li:last-child::after { border: 0 none; } .gen-tree li:last-child::before { border-right: 1.5px solid var(--tree-line); right: calc(50% - 0.75px); width: calc(50% + 0.75px); } .gen-tree .node-card { position: relative; z-index: 2; background: transparent; border: none; padding: 4px; } /* Focus panel syntax tree */ #focus-panel .gen-tree ul { list-style: none; padding-left: 24px; } #focus-panel .gen-tree li { position: relative; padding: 8px 0; } #focus-panel .gen-tree li::before { content: ''; position: absolute; left: -16px; top: 0; bottom: 50%; border-left: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); width: 12px; } #focus-panel .gen-tree li::after { display: none; } #focus-panel .node-card { display: inline-block; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 6px 12px; } /* ============================================= SCENE BLOCKS (Full Libretto Mode) ============================================= */ .scene-block { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: none; } .scene-block-header { margin-bottom: 20px; padding-bottom: 12px; border-bottom: none; } .scene-block-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-silver); margin-bottom: 6px; } .scene-block-title { font-family: var(--font-main); font-size: 1.4rem; font-weight: 600; color: var(--color-carbon); margin: 0; } /* Infinite scroll sentinel */ .infinite-scroll-sentinel { height: 80px; display: flex; align-items: center; justify-content: center; color: var(--color-silver); font-size: 13px; } .infinite-scroll-sentinel::after { content: 'Loading more...'; } /* ===== SIDEBAR TIMELINE (inside left panel) ===== */ .panel-section-timeline { display: none; } body.full-libretto-mode .panel-section-timeline { display: block; } .panel-section-timeline .panel-section-body { max-height: 300px; overflow-y: auto; } .panel-section[data-section="cast"] .panel-section-body { max-height: 300px; overflow-y: auto; } .sidebar-act { position: relative; margin-bottom: 12px; padding-left: 16px; } .sidebar-act-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-silver); margin-bottom: 6px; } .sidebar-act-line { position: absolute; left: 5px; top: 24px; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--color-border) 70%, transparent); } .sidebar-act:last-child .sidebar-act-line { display: none; } .sidebar-scenes { display: flex; flex-direction: column; gap: 2px; } .sidebar-scene { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; margin-left: -8px; border-radius: 4px; text-decoration: none; color: inherit; transition: background 0.15s; cursor: pointer; } .sidebar-scene:hover { background: rgba(184, 98, 62, 0.08); } .sidebar-scene.active { background: rgba(184, 98, 62, 0.15); box-shadow: inset 2px 0 0 var(--color-accent); } .sidebar-scene.active .sidebar-scene-title { color: var(--color-carbon); font-weight: 600; } .sidebar-scene-shape { flex-shrink: 0; width: 12px; height: 12px; margin-top: 2px; transition: transform 0.15s; } .sidebar-scene:hover .sidebar-scene-shape { transform: scale(1.15); } .sidebar-scene-shape.shape-aria { border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-accent); } .sidebar-scene-shape.shape-duet { width: 11px; height: 11px; transform: rotate(45deg); background: var(--color-surface); border: 2px solid var(--color-accent); } .sidebar-scene-shape.shape-ensemble { border-radius: 2px; background: var(--color-surface); border: 2px solid var(--color-accent); } .sidebar-scene-shape.shape-chorus { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: var(--color-accent); width: 14px; height: 12px; } .sidebar-scene-shape.shape-recit { width: 7px; height: 7px; border-radius: 50%; background: var(--color-silver); opacity: 0.5; margin-top: 4px; margin-left: 2px; } .sidebar-scene:hover .sidebar-scene-shape.shape-aria, .sidebar-scene:hover .sidebar-scene-shape.shape-duet, .sidebar-scene:hover .sidebar-scene-shape.shape-ensemble { background: var(--color-accent); } .sidebar-scene:hover .sidebar-scene-shape.shape-duet { transform: rotate(45deg) scale(1.15); } .sidebar-scene:hover .sidebar-scene-shape.shape-recit { opacity: 1; } .sidebar-scene-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .sidebar-scene-title { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--color-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-scene-meta { font-family: var(--font-ui); font-size: 10px; color: var(--color-silver); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .timeline-loading { text-align: center; padding: 24px 16px; color: var(--color-silver); font-size: 12px; } /* ============================================= FOCUS PANEL TABS ============================================= */ .focus-panel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); padding: 0 16px; background: var(--color-surface); position: sticky; top: 0; z-index: 5; } .focus-tab { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--color-silver); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .focus-tab:hover { color: var(--color-carbon); } .focus-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; } .focus-tab:focus { outline: none; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1024px) { .reader-layout { grid-template-columns: 0px 1fr 0px; } body.analysis-open .reader-layout { grid-template-columns: 0px 1fr 0px; } .left-panel { position: fixed; top: var(--top-bar-height); left: 0; bottom: 0; width: var(--left-panel-width); z-index: 150; transform: translateX(-100%); transition: transform 0.25s ease; } body:not(.left-panel-collapsed) .left-panel { transform: translateX(-100%); } #focus-panel { position: fixed; top: var(--top-bar-height); right: 0; bottom: 0; width: 100%; max-width: 400px; z-index: 150; } .canvas-inner { padding: 24px 16px 120px; } .floating-toolbar { bottom: 16px; } } @media (max-width: 640px) { .top-bar-crumb:not(.top-bar-scene) { display: none; } .top-bar-sep:not(:last-of-type) { display: none; } #focus-panel { max-width: 100%; } .canvas-inner { padding: 16px 12px 100px; } .canvas-title { font-size: 1.8rem; } .floating-toolbar { bottom: 12px; width: calc(100% - 24px); } .toolbar-main { width: 100%; justify-content: space-around; } .toolbar-subrow { width: 100%; justify-content: center; flex-wrap: wrap; } } /* Small screens: compact toolbar */ @media (max-width: 380px) { .toolbar-btn { width: 30px; height: 28px; font-size: 11px; } .toolbar-main { padding: 4px 6px; gap: 2px; } .toolbar-sep { height: 16px; margin: 0 1px; } } /* ===== FOCUS STATES ===== */ .grammar-chip:focus-visible, .tab-button:focus-visible, .speed-btn:focus-visible, button:focus-visible, .word:focus-visible, .toolbar-btn:focus-visible, .toolbar-chip:focus-visible, .command-item:focus-visible, .top-bar-btn:focus-visible, .focus-tab:focus-visible, .cast-item:focus-visible, .panel-section-header:focus-visible, .panel-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Remove default focus ring for mouse users */ :focus:not(:focus-visible) { outline: none; } /* ===== HIGH CONTRAST ===== */ @media (prefers-contrast: more) { .word-text.known::after { content: ' \2713'; font-size: 0.7em; } .word-text.missed::after, .word-text.unknown::after { content: ' \2022'; font-size: 0.7em; } .word-text.learning::after { content: ' ~'; font-size: 0.7em; } } /* ===== PRINT ===== */ @media print { body { background: white; color: black; } .top-bar, .left-panel, #focus-panel, .floating-toolbar, .command-palette-overlay, button { display: none !important; } .reader-layout { display: block; margin-top: 0; height: auto; } .canvas { overflow: visible; } .canvas-inner { max-width: none; padding: 0; } .word-text.known .word-core { border-bottom: 2px solid black; background: none; } .word-text.learning .word-core { border-bottom: 2px dotted black; background: none; } .word-text.missed .word-core, .word-text.unknown .word-core { border-bottom: 2px dashed black; background: none; } .line { page-break-inside: avoid; } * { background-color: transparent !important; } } /* ============================================= GROVE REFERENCE BLOCK & PANEL ============================================= */ /* Source badge */ .source-badge { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-silver); background: var(--bg-tag); padding: 2px 6px; border-radius: 3px; margin-left: 8px; } /* Opera Reference — used in focus panel reference tab */ .ref-block-summary { font-family: var(--font-ui); font-size: 13px; color: var(--color-graphite); line-height: 1.6; } .ref-block-summary .ref-meta-line { margin-bottom: 4px; } .ref-block-summary .ref-meta-label { color: var(--color-silver); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Cast table inside reference block */ .ref-cast-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-family: var(--font-ui); font-size: 13px; } .ref-cast-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-silver); padding: 6px 8px; border-bottom: 1px solid var(--color-border); } .ref-cast-table td { padding: 6px 8px; color: var(--color-graphite); border-bottom: 1px solid var(--border-subtle); vertical-align: top; } .ref-cast-table tr { cursor: pointer; transition: background 0.1s; } .ref-cast-table tr:hover { background: var(--bg-subtle); } .ref-cast-table .ref-role-name { font-weight: 600; color: var(--color-carbon); } .ref-cast-table .ref-voice-type { font-style: italic; color: var(--color-silver); } /* Cast tooltip (reuses grammar-tooltip pattern) */ .ref-tooltip { position: fixed; display: none; background: var(--color-carbon); color: var(--color-bg); padding: 6px 10px; border-radius: 6px; font-size: 12px; font-family: var(--font-ui); pointer-events: none; z-index: 1000; max-width: 280px; line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .ref-tooltip .ref-tooltip-voice { font-style: italic; opacity: 0.8; } .ref-tooltip .ref-tooltip-desc { display: block; margin-top: 2px; opacity: 0.9; font-size: 11px; } /* Reference Panel search results */ .ref-panel-search { width: 100%; padding: 10px 12px; font-family: var(--font-ui); font-size: 14px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-carbon); outline: none; margin-bottom: 12px; transition: border-color 0.15s; } .ref-panel-search:focus { border-color: var(--color-accent); } .ref-panel-search::placeholder { color: var(--color-silver); } .ref-panel-group-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-silver); padding: 8px 0 4px; } .ref-panel-result { display: flex; align-items: baseline; gap: 8px; padding: 8px 4px; cursor: pointer; border-radius: 4px; transition: background 0.1s; font-family: var(--font-ui); font-size: 13px; color: var(--color-graphite); } .ref-panel-result:hover { background: var(--bg-subtle); color: var(--color-carbon); } .ref-panel-result-name { font-weight: 600; color: var(--color-carbon); } .ref-panel-result-meta { font-size: 12px; color: var(--color-silver); } /* Reference detail card (in focus panel) */ .ref-detail-card { font-family: var(--font-ui); } .ref-detail-card h2 { font-family: var(--font-main); font-size: 1.8rem; font-weight: 600; color: var(--color-carbon); margin: 0 0 4px; } .ref-detail-card .ref-detail-subtitle { font-size: 13px; color: var(--color-silver); margin-bottom: 16px; } .ref-detail-card .ref-detail-section { margin-bottom: 16px; } .ref-detail-card .ref-detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-silver); margin-bottom: 4px; } .ref-detail-card .ref-detail-value { font-size: 13px; color: var(--color-graphite); line-height: 1.5; } .ref-no-data { font-family: var(--font-ui); font-size: 13px; color: var(--color-silver); font-style: italic; padding: 8px 0; } /* ===== DARK MODE EXTRAS ===== */ [data-theme="dark"] .sidebar-scene:hover { background: rgba(212, 137, 106, 0.08); } [data-theme="dark"] .sidebar-scene.active { background: rgba(212, 137, 106, 0.15); } [data-theme="dark"] .sidebar-scene-shape.shape-aria, [data-theme="dark"] .sidebar-scene-shape.shape-duet, [data-theme="dark"] .sidebar-scene-shape.shape-ensemble { background: var(--color-bg); border-color: var(--color-accent); } [data-theme="dark"] .sidebar-scene-shape.shape-chorus { background: var(--color-accent); } [data-theme="dark"] .sidebar-scene:hover .sidebar-scene-shape.shape-aria, [data-theme="dark"] .sidebar-scene:hover .sidebar-scene-shape.shape-duet, [data-theme="dark"] .sidebar-scene:hover .sidebar-scene-shape.shape-ensemble { background: var(--color-accent); } [data-theme="dark"] #focus-panel { box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .floating-toolbar .toolbar-main, [data-theme="dark"] .floating-toolbar .toolbar-subrow { background: rgba(30, 29, 27, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .command-palette { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } /* ============================================= FOCUS PANEL — Literary Minimalist Redesign ============================================= */ /* --- Banners (replaces Material Design colors) --- */ .focus-banner { border-left: 3px solid var(--color-silver); background: var(--bg-subtle); border-radius: 0 6px 6px 0; padding: 12px 16px; margin-bottom: 16px; } .focus-banner-title { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; color: var(--color-graphite); text-transform: uppercase; letter-spacing: 0.05em; } .focus-banner-text { font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-silver); margin: 4px 0 0 0; } .focus-banner.banner-info { border-left-color: var(--color-accent); } .focus-banner.banner-warn { border-left-color: var(--color-silver); } /* --- Sentence Summary (LLM HTML) --- */ .sentence-summary { font-family: var(--font-main); font-size: 1rem; line-height: 1.7; color: var(--color-text-light); margin-bottom: 24px; } .sentence-summary h3 { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-silver); margin: 20px 0 8px 0; } .sentence-summary h3:first-child { margin-top: 0; } .sentence-summary p { font-family: var(--font-main); font-size: 1rem; line-height: 1.7; color: var(--color-text-light); margin: 0 0 12px 0; } .sentence-summary ul, .sentence-summary ol { padding-left: 20px; margin: 0 0 12px 0; } .sentence-summary li { font-family: var(--font-main); font-size: 0.95rem; line-height: 1.6; color: var(--color-text-light); margin-bottom: 4px; } .sentence-summary strong { font-weight: 600; } /* --- Clause Cards --- */ .clause-card { position: relative; border-left: 2px solid var(--color-graphite); padding: 12px 0 12px 16px; margin-bottom: 16px; } .clause-card:last-child { margin-bottom: 0; } .clause-card.clause-main { border-left-color: var(--color-carbon); } .clause-card.clause-subordinate { border-left-color: var(--color-graphite); } .clause-card.clause-conditional { border-left-color: var(--color-accent); } .clause-type-label { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-silver); margin-bottom: 6px; } .clause-text { font-family: var(--font-main); font-size: 1.05rem; font-style: italic; line-height: 1.5; color: var(--color-carbon); margin-bottom: 6px; } .clause-function { font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-silver); } /* --- Syntax Tree (focus panel overrides) --- */ #focus-panel .gen-tree { padding: 0; } #focus-panel .gen-tree > ul { padding-left: 0; } #focus-panel .gen-tree > ul > li { padding-top: 0; } #focus-panel .gen-tree > ul > li::before { display: none; } #focus-panel .gen-tree > ul > li > .node-card { border-left: 2px solid var(--color-accent); padding-left: 12px; border-radius: 0; background: transparent; border-top: none; border-right: none; border-bottom: none; } #focus-panel .gen-tree .role-label { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700; color: var(--color-silver); text-transform: uppercase; letter-spacing: 0.04em; } #focus-panel .gen-tree .node-word { font-family: var(--font-main); font-size: 1rem; color: var(--color-carbon); } #focus-panel .gen-tree li:hover > .node-card { background: var(--bg-subtle); } /* --- Morphology: reassembled word --- */ .morph-reassembled { font-family: var(--font-main); font-size: 1.2rem; color: var(--color-carbon); text-align: center; margin-bottom: 8px; letter-spacing: 0.02em; } /* --- Word Header IPA --- */ .word-header-ipa { font-family: var(--font-ipa); font-size: 1rem; color: var(--color-silver); margin-top: 2px; } /* --- Focus section label (reusable) --- */ .focus-section-label { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; color: var(--color-silver); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } /* --- Morph tag tooltips --- */ .morph-unit[data-tooltip] { position: relative; cursor: help; } .morph-unit[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-carbon); color: var(--color-bg); font-family: var(--font-sans); font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 10; pointer-events: none; } /* --- Dark mode overrides for new classes --- */ [data-theme="dark"] .focus-banner { background: rgba(255, 245, 230, 0.03); } [data-theme="dark"] .clause-card.clause-main { border-left-color: var(--color-carbon); } [data-theme="dark"] .clause-card.clause-subordinate { border-left-color: var(--color-graphite); } [data-theme="dark"] .clause-card.clause-conditional { border-left-color: var(--color-accent); } /* Sentence text block */ .focus-sentence-text { background: var(--bg-subtle); border-left: 2px solid var(--color-accent); border-radius: 0 6px 6px 0; padding: 14px 16px 16px; margin-bottom: 24px; } .sent-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sent-label { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-silver); } .focus-sentence-text .sent-line { font-family: var(--font-main); font-size: 1.2rem; line-height: 1.55; color: var(--color-carbon); } .sent-speak-btn { background: none; border: none; cursor: pointer; color: var(--color-accent); padding: 2px 4px; opacity: 0.65; transition: opacity 0.15s; display: inline-flex; align-items: center; } .sent-speak-btn:hover { opacity: 1; } /* ===== SKELETON LOADING ===== */ .skeleton-container { padding: 48px 0; max-width: 640px; margin: 0 auto; transition: opacity 0.3s ease; } .skeleton-line { height: 16px; margin-bottom: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--color-focus) 25%, var(--color-border) 50%, var(--color-focus) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease infinite; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== EMPTY STATES ===== */ .empty-state { text-align: center; padding: 32px 16px; color: var(--color-silver); font-family: var(--font-ui); } .empty-state-title { font-size: 14px; font-weight: 600; color: var(--color-graphite); margin-bottom: 4px; } .empty-state-hint { font-size: 12px; color: var(--color-silver); } /* ===== KEYBOARD SHORTCUTS OVERLAY ===== */ .shortcuts-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1100; display: flex; align-items: center; justify-content: center; } .shortcuts-panel { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); width: 480px; max-width: 90vw; max-height: 80vh; overflow-y: auto; } .shortcuts-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 16px; border-bottom: 1px solid var(--color-border); } .shortcuts-title { font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--color-carbon); margin: 0; } .shortcuts-close { background: none; border: none; font-size: 24px; color: var(--color-graphite); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); line-height: 1; } .shortcuts-close:hover { background: var(--bg-tag); color: var(--color-carbon); } .shortcuts-body { padding: 16px 24px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .shortcuts-group:last-child { grid-column: 1 / -1; } .shortcuts-group-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-silver); margin: 0 0 8px; } .shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-family: var(--font-ui); font-size: 13px; color: var(--color-graphite); } .shortcut-row kbd { display: inline-block; padding: 2px 8px; background: var(--bg-tag); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--color-graphite); min-width: 24px; text-align: center; } [data-theme="dark"] .shortcuts-panel { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================= AUTH + TIER GATING ============================================= */ .top-bar-auth { display: flex; align-items: center; margin-right: 8px; } .auth-user { display: flex; align-items: center; gap: 6px; } .auth-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .auth-avatar-placeholder { width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--font-ui); text-transform: uppercase; } .auth-signout-btn { background: none; border: none; color: var(--color-muted); font-size: 11px; font-family: var(--font-ui); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); } .auth-signout-btn:hover { color: var(--color-carbon); background: var(--bg-hover); } /* Gated toolbar buttons */ .toolbar-btn.gated { opacity: 0.4; position: relative; cursor: not-allowed; } .toolbar-btn.gated::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%; } /* Upgrade CTA banner */ .upgrade-cta { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; margin: 0 auto 12px; max-width: 720px; background: var(--bg-tag); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 13px; color: var(--color-graphite); } .cta-text { flex: 1; } .cta-waitlist-btn { background: var(--color-accent); color: white; border: none; padding: 4px 12px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 12px; font-weight: 600; cursor: pointer; margin-left: 8px; } .cta-waitlist-btn:hover { opacity: 0.9; } .cta-dismiss { background: none; border: none; color: var(--color-muted); font-size: 18px; cursor: pointer; padding: 0 4px; margin-left: 8px; line-height: 1; } .cta-dismiss:hover { color: var(--color-carbon); }