/* =============================================
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 archive.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);
/* Gated feature tokens */
--gated-accent-soft: rgba(196, 112, 74, 0.08);
--gated-accent-mid: rgba(196, 112, 74, 0.15);
--gated-accent-border: rgba(196, 112, 74, 0.25);
/* 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: 300px;
}
/* ===== 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);
/* Gated feature tokens (dark) */
--gated-accent-soft: rgba(212, 137, 106, 0.06);
--gated-accent-mid: rgba(212, 137, 106, 0.12);
--gated-accent-border: rgba(212, 137, 106, 0.2);
--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 var(--ease-standard);
}
.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-accent); }
.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);
}
/* Compact label sitting next to an icon inside .top-bar-btn (e.g. JSON / PDF). */
.top-bar-btn-label {
margin-left: 6px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
.top-bar-btn-label { display: none; }
}
.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 — 3-Column with Always-On Focus Rail (T1-B, Sprint 6)
Design (Reader.jsx:335 + styles.css:135) is `.lc-reader-grid`:
grid-template-columns: 240px minmax(0,1fr) 300px;
gap: 40px;
We map onto production's --left-panel-width (240px) and
--focus-panel-width (300px) and add the 40px column gap that
Sprint 3 missed.
============================================= */
.reader-layout {
display: grid;
grid-template-columns: var(--left-panel-width) minmax(0, 1fr) var(--focus-panel-width);
grid-template-rows: 1fr;
column-gap: 40px;
height: calc(100vh - var(--top-bar-height));
margin-top: var(--top-bar-height);
transition: grid-template-columns 0.25s var(--ease-standard);
}
/* Analysis-open is now a content-state, not a column-width state — the right
rail is always visible. Class still toggled by reader-analysis.js for any
tab/content side-effects. */
body.left-panel-collapsed .reader-layout {
grid-template-columns: 0px minmax(0, 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 var(--ease-standard);
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;
}
.canvas-scene-intro {
font-family: var(--font-ui);
font-size: 0.95rem;
color: var(--color-silver);
line-height: 1.55;
margin: 12px 0 4px;
max-width: 60ch;
}
.canvas-scene-intro strong {
color: var(--color-carbon);
font-weight: 600;
}
/* ===== 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); }
.page-prop-value a {
color: var(--color-accent);
text-decoration: none;
border-bottom: 1px dotted currentColor;
transition: border-bottom-style 0.15s, color 0.15s;
}
.page-prop-value a:hover {
border-bottom-style: solid;
}
/* External-link indicator for target=_blank anchors inside prop values,
so users can see they will leave the page (UX audit #20). */
.page-prop-value a[target="_blank"]::after {
content: "\2197"; /* ↗ */
display: inline-block;
margin-left: 3px;
font-size: 0.85em;
opacity: 0.7;
}
/* ===== 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) — always visible (T1-B)
============================================= */
#focus-panel {
background: var(--color-surface);
border-left: 1px solid var(--color-border);
overflow-y: auto;
overflow-x: hidden;
position: relative;
/* Always visible per design's `.lc-sidebar`. Empty state shows
lc-focus-empty placeholder; reader-analysis.js fills #focus-panel-content
when a word is clicked. */
}
/* Hide the close button when nothing is focused — closing a permanent rail
is misleading. Showing only when `body.analysis-open` keeps it useful as
a "back to empty state" affordance. */
body:not(.analysis-open) #close-focus-panel { display: none; }
/* =============================================
Sprint 6b — Hide legacy left-panel sections that have replacement homes.
Once `.lc-reader-bar` renders the IPA/Translation/JSON/PDF/theme controls
and `.page-properties` renders Source/Language, the legacy duplicates in
the left panel are visual noise. Markup stays in DOM so JS bindings keep
working (reader-v8.js:924-930 already prefers `#prop-source-select` over
`#source-select`); we just hide the visual duplicate.
Lens stays visible — it still owns the Lines/Study toggles that haven't
been ported to the top bar yet. Generate, Vocab, Cast, Grammar, Structure
stay visible — they have no design replacement.
============================================= */
body:has(.lc-reader-bar) .panel-section[data-section="controls"],
body:has(.lc-reader-bar) .panel-section[data-section="export"] {
display: none;
}
#focus-panel-content {
padding: 20px 20px 24px;
transition: opacity 0.15s var(--ease-standard);
}
.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 var(--ease-standard);
}
.toolbar-main {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.toolbar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
height: 28px;
border: none;
background: transparent;
color: var(--color-graphite);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: all 0.15s;
position: relative;
white-space: nowrap;
}
.toolbar-btn:hover {
background: var(--bg-tag);
color: var(--color-carbon);
}
.toolbar-btn:active {
transform: scale(0.95);
background: rgba(196, 112, 74, 0.12);
}
.toolbar-btn.active {
background: var(--bg-tag);
color: var(--color-accent);
}
.toolbar-group {
display: flex;
align-items: center;
gap: 3px;
}
.toolbar-group-label {
display: none;
}
.toolbar-group-buttons {
display: flex;
align-items: center;
gap: 4px;
}
.toolbar-sep {
width: 1px;
height: 20px;
background: var(--color-border);
margin: 0 4px;
align-self: center;
}
/* 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 — ported to .lc-cmdk-* at end of file (from Claude Design bundle). */
/* =============================================
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;
flex-direction: column;
gap: 8px;
}
.audio-controls-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.audio-label {
font-size: 11px;
color: var(--color-silver);
min-width: 38px;
font-weight: 600;
}
.audio-select {
font-family: var(--font-ui);
font-size: 11px;
padding: 3px 6px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 6px;
color: var(--color-carbon);
cursor: pointer;
flex: 1;
min-width: 0;
}
.play-btn, .stop-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, .stop-btn:hover { transform: scale(1.05); }
.stop-btn { background: var(--color-silver); }
.speed-controls {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.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);
}
/* Audio range */
.audio-range-row { font-size: 11px; }
.audio-range-text { color: var(--color-carbon); font-weight: 500; }
.audio-clear-range-btn {
font-family: var(--font-ui);
font-size: 10px;
padding: 2px 8px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 999px;
color: var(--color-silver);
cursor: pointer;
}
.audio-clear-range-btn:hover { color: var(--color-carbon); background: var(--bg-tag); }
/* Sidebar progress bar */
.audio-progress-bar {
height: 3px;
background: var(--border-subtle);
border-radius: 2px;
position: relative;
margin-top: 4px;
}
.audio-progress-fill {
height: 100%;
background: var(--color-accent);
border-radius: 2px;
transition: width 0.3s;
width: 0%;
}
.audio-progress-text {
position: absolute;
right: 0;
top: -16px;
font-size: 10px;
color: var(--color-silver);
}
/* Line highlighting during playback */
.line.audio-active {
background: var(--bg-tag);
border-left: 3px solid var(--color-accent);
transition: background 0.2s;
}
/* Range markers */
.line.audio-range-start { border-left: 3px solid var(--color-range-start, #4caf50); }
.line.audio-range-end { border-left: 3px solid var(--color-range-end, #ff9800); }
.line.audio-in-range { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
/* Active line takes precedence over range markers */
.line.audio-active.audio-range-start,
.line.audio-active.audio-range-end { border-left: 3px solid var(--color-accent); }
/* Toolbar play button animation */
.toolbar-btn.audio-playing {
color: var(--color-accent);
animation: audio-pulse 2s infinite;
}
@keyframes audio-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Toolbar progress bar */
.toolbar-progress {
height: 3px;
background: var(--border-subtle);
border-radius: 2px;
overflow: hidden;
margin-top: 2px;
}
.toolbar-progress-fill {
height: 100%;
background: var(--color-accent);
border-radius: 2px;
transition: width 0.3s;
width: 0%;
}
/* ===== 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 var(--ease-standard);
}
.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.
Step 6c-2: bumped margin-bottom 28px→32px to match design's lc-stanza
(32px) editorial rhythm. The design treats each stanza as a discrete
visual unit; production's dialogue-block plays the same role. The
extra 4px gives speakers more breathing room without adding borders.
Source: docs/design/claude-design-export/project/ui_kits/webapp/styles.css:167
.lc-stanza-block{...margin-bottom:32px} */
.dialogue-block {
margin-bottom: 32px;
}
/* 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);
}
/* UX audit 2026-04-19: scene-heading anchors on opera full-libretto.
Inherit heading color so the link looks like a heading, not a link,
but gain a subtle underline on hover to signal clickability. */
.heading-block .heading-link {
color: inherit;
text-decoration: none;
}
.heading-block .heading-link:hover {
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-underline-offset: 4px;
}
.heading-block:first-child {
margin-top: 0;
border-top: none;
padding-top: 0;
}
/* Stage direction — italic graphite editorial parenthetical.
Step 6c-3: bumped color from --color-silver (tertiary, too quiet) to
--color-graphite (secondary). Stage directions carry real performance
information (entrances, gestures, scene-setting) and were getting lost
at silver weight. The italic + parenthesis-wrapped text keeps them
visually distinct from libretto without disappearing.
Source: docs/design's editorial intent — italic graphite parenthetical
per project memory feedback-focus-panel-design.md & design conversation. */
.stage-direction-block {
font-family: var(--font-ui);
font-size: 0.85rem;
font-style: italic;
color: var(--color-graphite);
margin: 20px 0;
padding: 8px 24px;
}
/* Line — no borders, whitespace separation.
Step 6c-2: bumped vertical padding 6px→8px for editorial breathing room
matching design's lc-line (12px 0). Production keeps the per-word
token-stack flex layout (which adds its own internal vertical space
from .ipa-text + .glossing) so 8px is the right midpoint between
design's 12px (no internal stacks) and the prior 6px (cramped).
border-left from .line.audio-active and .line.sentence-* survives
because horizontal padding stays 0; sentence-* rules then set their
own padding-left:6px independently.
Source: docs/design/claude-design-export/project/ui_kits/webapp/styles.css:175
.lc-line{padding:12px 0;border-bottom:1px dashed ...} */
.line {
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
padding: 8px 0;
border-bottom: none;
cursor: pointer;
/* Step 6c-4: bumped 0.1s→0.15s + narrowed background→background-color
to match .word/.word-text canvas timing. Hover only mutates
background-color (.line:hover { background-color: var(--bg-subtle) }),
so the shorthand was overscoped. */
transition: background-color 0.15s;
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;
}
.sentence-segment-span {
display: inline;
padding: 1px 0;
}
.sentence-segment-span.is-start {
border-left: 2px solid var(--color-accent);
padding-left: 4px;
}
.sentence-segment-span.is-end {
border-bottom: 1px dotted var(--color-accent);
padding-bottom: 1px;
}
/* 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 — Step 6c-4: tightened transitions to explicit property list.
Each interactive word span carries BOTH .word and .word-text classes
(verified live: 9,546 elements with both). The page renders ~9k of
these on a typical libretto, so 'transition: all' was firing on every
animatable property (transform, padding, border-radius, opacity,
font-weight, etc.) on every hover. Narrowed to background-color +
color + border-color which are the only properties .word-text:hover
variants actually change (see .word-text.{known,learning,...}:hover
rules below). Same 150ms duration preserved. */
.word {
font-family: var(--font-main);
font-weight: 400;
font-size: 1.35rem;
color: var(--color-carbon);
cursor: pointer;
transition: background-color 0.15s, color 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: background-color 0.15s, color 0.15s, border-color 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: 0;
}
/* 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 — bumped to 0.95rem for singers who need to read ʊ/ə/ɐ/ɐ̯ glyphs
without squinting. Audit 2026-04-23 caught the previous 0.85rem
rendering ʊ as ambiguous with o at typical viewing distances. Feature
settings unlock accurate small-caps rendering in Source Sans 3. */
.ipa-text {
font-family: 'Source Sans 3', 'DejaVu Sans', var(--font-ui);
font-size: 0.95rem;
font-feature-settings: "ss01", "ss02", "calt";
color: var(--color-silver);
line-height: 1.45;
letter-spacing: 0.01em;
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;
overflow-wrap: break-word;
}
/* 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):not(.gated-translations) .glossing {
display: none;
}
/* Gated translation skeletons — placeholder bars where translations would be */
body.gated-translations .glossing:empty {
display: block;
align-self: stretch;
font-size: 0.8rem;
}
body.gated-translations .glossing:empty::before {
content: '';
display: block;
width: 100%;
height: 0.8em;
margin: 4px auto 0;
background: var(--color-silver);
border-radius: 2px;
opacity: 0.2;
}
[data-theme="dark"] body.gated-translations .glossing:empty::before {
opacity: 0.15;
}
/* Sentence translation toggle — hides in focus panel and inline */
body.hide-sentence-trans .sentence-translation-panel,
body.hide-sentence-trans .sentence-translation-inline {
display: none;
}
/* Tier-gated content hiding (belt-and-suspenders — server strips fields too) */
body.hide-sentence-analysis .sentence-translation-panel,
body.hide-sentence-analysis .sentence-translation-inline,
body.hide-sentence-analysis .sentence-structure-panel,
body.hide-sentence-analysis .sentence-summary-panel,
body.hide-sentence-analysis .prose-panel {
display: none;
}
body.hide-singing-ipa .ipa-singing { display: none; }
body.hide-grammar .grammar-overlay { display: none; }
/* Anchor scroll target offset — keeps #line-N deep links from landing
under the fixed top-bar. Applied to any line-anchored element so
scrollIntoView({block: 'start'}) clears the header. */
[id^="line-"],
[data-original-line] {
scroll-margin-top: calc(var(--top-bar-height) + 16px);
}
/* Sentence translation inline — beneath last line of each sentence group */
.sentence-translation-inline {
font-family: var(--font-ui);
font-size: 0.82rem;
font-style: italic;
color: var(--color-silver);
padding: 2px 28px 8px 4px;
/* T3-C: relative anchor for the hover-revealed pencil affordance,
and right-side padding so the icon doesn't overlap text. */
position: relative;
line-height: 1.4;
}
/* T3-C: hover-revealed pencil on the inline sentence translation.
Reuses the design source's .lc-line-tr-pencil class so the same
visual treatment applies on both the design's .lc-stanza-block
surface (T3-B, deferred) and production's .sentence-translation-inline.
Click handler is wired by reader-full-libretto.js → calls
window.LCTranslationFeedback.openModal with the canonical ctx
shape used by reader-analysis.js's focus-panel button. */
.sentence-translation-inline .lc-line-tr-pencil {
position: absolute;
right: 4px;
top: 2px;
width: 18px;
height: 18px;
color: var(--text-tertiary, var(--color-silver));
opacity: 0;
cursor: pointer;
transition: opacity 120ms, color 120ms;
border: none;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sentence-translation-inline:hover .lc-line-tr-pencil,
.sentence-translation-inline .lc-line-tr-pencil:focus-visible {
opacity: 1;
}
.sentence-translation-inline .lc-line-tr-pencil:hover {
color: var(--color-accent, var(--accent-primary));
}
/* Study mode: hide-then-reveal on hover */
body.study-mode.hide-sentence-trans .sentence-translation-inline {
display: inline-block;
color: transparent;
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
cursor: help;
user-select: none;
min-width: 60px;
transition: all 0.2s;
}
body.study-mode.hide-sentence-trans .sentence-translation-inline:hover {
color: var(--color-text);
background: transparent;
}
/* Sentence boundary indicators — subtle left border for multi-line sentences */
.line.sentence-start {
border-left: 2px solid var(--color-accent-muted, rgba(100, 149, 237, 0.25));
border-top-left-radius: 3px;
padding-left: 6px;
margin-top: 2px;
}
.line.sentence-mid {
border-left: 2px solid var(--color-accent-muted, rgba(100, 149, 237, 0.25));
padding-left: 6px;
}
.line.sentence-end {
border-left: 2px solid var(--color-accent-muted, rgba(100, 149, 237, 0.25));
border-bottom-left-radius: 3px;
padding-left: 6px;
margin-bottom: 2px;
}
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;
}
.lc-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;
}
.lc-focus-tab:hover {
color: var(--color-carbon);
}
.lc-focus-tab.active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
font-weight: 600;
}
.lc-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;
}
.canvas {
grid-column: 2;
}
.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 var(--ease-standard);
}
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;
/* T2-B fix: re-instate the off-screen drawer behaviour on
tablet/mobile. Sprint 3's T1-B changed the desktop rule to
keep #focus-panel always visible (3-col grid puts it in the
right rail), but forgot the responsive case where the grid
collapses to a single column — without a transform, the
fixed-position panel overlays the entire libretto. Restore
the slide-in/out pattern; reader-analysis.js already toggles
`body.analysis-open` when a word is clicked. */
transform: translateX(100%);
transition: transform 0.25s var(--ease-standard);
}
body.analysis-open #focus-panel {
transform: translateX(0);
}
.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 {
/* T2-B (2026-04-27): On mobile the new .lc-m-tabbar is fixed
at bottom:0 (56px tall). Lift the lens toolbar above it so
the two strips don't overlap; iOS safe-area inset added so
it clears the home-bar gesture region. */
bottom: calc(56px + env(safe-area-inset-bottom, 0) + 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 {
padding: 3px 7px;
height: 26px;
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, .lc-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, .lc-cmdk-scrim, 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.90);
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);
}
/* Dark-mode command-palette shadow moved into the .lc-cmdk-* block at end of file. */
/* =============================================
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); }
.focus-banner-cta {
display: inline-block;
margin-top: 10px;
padding: 6px 14px;
font-family: var(--font-ui);
font-size: 0.82rem;
color: white;
background: var(--color-accent);
border: none;
border-radius: var(--radius-sm, 4px);
cursor: pointer;
}
.focus-banner-cta:hover { opacity: 0.9; }
/* --- 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: 1.05rem;
color: var(--color-graphite);
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 var(--ease-standard);
}
.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 var(--ease-standard) 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: 1;
position: relative;
cursor: pointer;
color: var(--color-silver);
transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.toolbar-btn.gated::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 6px;
height: 6px;
background: var(--color-accent);
border-radius: 50%;
opacity: 0.7;
transition: opacity 200ms var(--ease-standard);
animation: gated-dot-pulse 600ms ease-in-out 2;
}
.toolbar-btn.gated:hover {
background: var(--gated-accent-soft);
color: var(--color-graphite);
}
.toolbar-btn.gated:hover::after {
opacity: 1;
}
@keyframes gated-dot-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.5); }
}
/* Gated tooltip */
.gated-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--color-surface);
border: 1px solid var(--gated-accent-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
0 0 0 1px var(--gated-accent-soft);
padding: 12px 16px;
max-width: 240px;
z-index: 400;
animation: gatedTooltipIn 150ms ease-out;
pointer-events: auto;
}
.gated-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--gated-accent-border);
}
.gated-tooltip::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--color-surface);
z-index: 1;
}
.gated-tooltip-feature {
font-family: var(--font-ui);
font-weight: 500;
font-size: 13px;
color: var(--color-carbon);
margin-bottom: 6px;
line-height: var(--leading-normal);
}
.gated-tooltip-cta {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--color-accent);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.gated-tooltip-cta:hover {
text-decoration: underline;
}
@keyframes gatedTooltipIn {
from { opacity: 0; transform: translateX(-50%) translateY(4px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
[data-theme="dark"] .gated-tooltip {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
0 0 0 1px var(--gated-accent-soft);
}
/* Gated overlay for locked content sections */
.gated-overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 16px;
margin: 8px 0;
background: linear-gradient(135deg, var(--gated-accent-soft) 0%, transparent 60%), var(--bg-subtle);
border: 1px solid var(--gated-accent-border);
border-radius: var(--radius-md);
text-align: center;
cursor: pointer;
transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.gated-overlay:hover {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--gated-accent-soft);
}
.gated-lock-icon {
margin-bottom: 6px;
opacity: 0.7;
line-height: 1;
}
/* Free / sign-in tier — terracotta key (the brand accent). */
.gated-lock-icon--key {
color: var(--accent-primary, var(--color-accent));
}
/* Pro tier — gilt gold spark, distinct from the Free terracotta. */
.gated-lock-icon--spark {
color: var(--tier-pro-accent, #b8944a);
}
/* Backwards-compat default (no tier modifier yet). */
.gated-lock-icon:not(.gated-lock-icon--key):not(.gated-lock-icon--spark) {
color: var(--accent-primary, var(--color-accent));
}
.gated-lock-icon svg {
width: 18px;
height: 18px;
}
.gated-label {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--color-graphite);
margin-bottom: 6px;
}
.gated-action {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--color-accent);
cursor: pointer;
padding: 5px 14px;
border: 1px solid var(--gated-accent-border);
border-radius: var(--radius-sm);
background: transparent;
transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.gated-action:hover {
background: var(--color-accent);
color: white;
}
.gated-nav-disabled {
pointer-events: none;
opacity: 0.85;
cursor: default;
user-select: none;
}
.gated-timeline {
position: relative;
}
.gated-timeline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom, transparent, var(--color-bg) 90%);
pointer-events: none;
z-index: 1;
}
.timeline-gated-cta {
text-align: center;
padding: 14px 12px;
font-size: 13px;
font-family: var(--font-ui);
font-weight: 600;
color: var(--color-accent);
cursor: pointer;
border-top: 1px solid var(--gated-accent-border);
background: var(--gated-accent-soft);
position: relative;
z-index: 2;
transition: background 200ms var(--ease-standard);
}
.timeline-gated-cta:hover {
background: var(--gated-accent-mid);
}
/* T2-C — Soft-skin redesign of the anonymous CTA banner. The legacy
.upgrade-cta wrapper used to draw its own border + gradient bg + flex
row; the new markup (auth.js showUpgradeCTA) renders a centered
.lc-focus-lock--free.lc-anon-card inside, which owns the visual
identity. The wrapper is now just a layout shell that constrains
width + provides positioning context for the dismiss button. */
.upgrade-cta {
position: relative;
margin: 0 auto 16px;
max-width: 540px;
font-family: var(--font-ui);
color: var(--color-graphite);
}
.upgrade-cta .lc-focus-lock {
/* The lock card already has its own padding + border + bg — drop
the default 8px stack margin so the wrapper margin is the only
vertical offset. */
margin: 0;
}
/* Dismiss × on the upgrade CTA — sits on top-right of the wrapper. */
.cta-dismiss {
position: absolute;
top: 8px;
right: 8px;
background: none;
border: none;
color: var(--color-muted);
font-size: 14px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
opacity: 0.5;
z-index: 1;
}
.cta-dismiss:hover {
color: var(--color-carbon);
opacity: 1;
}
/* Newsletter opt-in modal */
.newsletter-modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.newsletter-modal {
background: var(--bg-page, #fff);
border-radius: var(--radius-md, 8px);
padding: 24px 28px;
max-width: 360px;
width: 90%;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
font-family: var(--font-ui);
}
.newsletter-modal-title {
font-size: 16px;
font-weight: 600;
margin: 0 0 12px;
color: var(--color-text);
}
.newsletter-modal-label {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: var(--color-graphite);
margin-bottom: 16px;
cursor: pointer;
line-height: 1.4;
}
.newsletter-modal-btn {
display: block;
width: 100%;
padding: 8px 0;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-sm, 4px);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.newsletter-modal-btn:hover { opacity: 0.9; }
/* Scene page overrides — no line-gutter, so disable grid on .line */
.scene-content .line {
display: block;
grid-template-columns: none;
gap: 0;
padding: 4px 0;
}
/* ===== Textual Variant Highlights =====
Word + superscript marker for LiederNet variant readings. The dashed
underline was dropped because `.variant-word` sits inside `.word-core`,
which already uses `border-bottom` for the vocab and POS layers — two
underlines on the same word read as visual noise. Hover background + the
terracotta `` carry the affordance. */
.variant-word {
cursor: pointer;
position: relative;
white-space: nowrap;
border-radius: 2px;
}
.variant-word:hover,
.variant-word:focus-visible {
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.variant-word:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
}
.variant-sup {
font-size: 0.65em;
vertical-align: super;
color: var(--color-accent);
margin-left: 1px;
font-weight: 600;
line-height: 0;
}
/* Variant popover */
.variant-popover {
position: absolute;
z-index: 1000;
background: var(--bg-secondary, #fff);
border: 1px solid var(--border-subtle, #ddd);
border-radius: 8px;
padding: 12px 16px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
max-width: 320px;
font-size: 0.875rem;
line-height: 1.5;
}
.variant-popover-header {
font-weight: 600;
font-size: 0.8125rem;
color: var(--text-secondary, #666);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.variant-popover-original {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle, #eee);
}
.variant-popover-alt {
padding: 3px 0;
}
.variant-composer {
font-weight: 500;
color: var(--color-accent);
}
/* Dark mode */
[data-theme="dark"] .variant-popover {
background: var(--bg-secondary, #1e1e1e);
border-color: var(--border-subtle, #333);
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* ========== RELATED WORKS (More by This Composer) ========== */
/* "More from {composer}" — horizontal card rail per Reader.jsx Section B.17.
Cards use the standard paper-surface pattern (1px border + radius-lg + shadow-sm).
Rail scrolls horizontally on overflow; cards have a fixed min-width so they don't
collapse on wide viewports with few entries. */
.related-works {
max-width: 1180px;
margin: 64px auto 32px;
padding: 32px 32px 24px;
border-top: 1px solid var(--border-subtle, var(--color-border, #e5e5e0));
}
.related-works-head {
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.related-works-title {
font-family: var(--font-interface, 'DM Sans', sans-serif);
font-size: 22px;
font-weight: 600;
letter-spacing: var(--tracking-tight, -0.02em);
color: var(--text-primary, var(--color-carbon, #191918));
margin: 0;
}
.related-works-rail {
list-style: none;
padding: 4px 0 12px;
margin: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 1fr);
gap: 16px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.related-works-card-li { scroll-snap-align: start; }
.related-works-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 20px 18px;
background: var(--color-surface, var(--bg-secondary, #ffffff));
border: 1px solid var(--border-subtle, #e5e0d8);
border-radius: var(--radius-lg, 12px);
box-shadow: var(--shadow-sm);
text-decoration: none;
color: var(--text-primary);
transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
height: 100%;
}
.related-works-card:hover {
border-color: var(--border-default, #d6d3cc);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.related-works-card-kicker {
font-size: 11px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow, 0.08em);
text-transform: uppercase;
color: var(--text-tertiary, var(--color-silver, #8a8780));
}
.related-works-card-title {
font-size: 16px;
font-weight: 600;
line-height: var(--leading-snug, 1.35);
color: var(--text-primary);
/* Clamp to 2 lines so cards line up at equal heights */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-works-card-year {
margin-top: auto;
font-size: 12px;
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
}
/* =============================================
FOCUS PANEL — Structural Redesign
============================================= */
/* --- C1: Sticky Header --- */
/* Sticks below the tab bar. top: 37px accounts for tab bar height
(13px font × ~1.2 line-height + 20px padding + 1px border ≈ 37px) */
.focus-sticky-header {
position: sticky;
top: 37px;
z-index: 4;
background: var(--color-surface);
padding: 16px 0 16px;
margin: 0 -20px 16px;
padding-left: 20px;
padding-right: 20px;
border-bottom: 1px solid var(--color-border);
}
/* --- Dictionary headword (sticky header content) --- */
.dict-headword {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.dict-headword-word {
font-family: var(--font-main);
font-weight: 700;
font-size: 1.6rem;
font-style: italic;
line-height: 1.2;
color: var(--color-carbon);
margin: 0;
}
.dict-headword-ipa {
font-family: var(--font-ipa);
font-size: 1rem;
color: var(--color-graphite);
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.dict-headword-form {
font-family: var(--font-sans);
font-size: 0.8rem;
color: var(--color-silver);
margin-top: 4px;
}
/* --- Dictionary section (always visible, not collapsible) --- */
.focus-dict-section {
margin-bottom: 20px;
}
/* --- C2: Word Header (compact) --- */
.word-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.word-header-title {
font-family: var(--font-main);
font-weight: 600;
font-size: 1.8rem;
line-height: 1.15;
color: var(--color-carbon);
margin: 0;
}
.word-header-speak {
background: none;
border: none;
cursor: pointer;
color: var(--color-accent);
padding: 2px;
display: inline-flex;
align-items: center;
opacity: 0.7;
transition: opacity 0.15s;
}
.word-header-speak:hover { opacity: 1; }
.word-pos-tag {
font-family: var(--font-data);
font-size: 0.75rem;
font-weight: 700;
color: var(--color-carbon);
background: var(--bg-tag);
padding: 4px 10px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* POS-colored tag variants */
.word-pos-tag.pos-noun { background: rgba(106, 155, 204, 0.15); color: var(--pos-noun); }
.word-pos-tag.pos-verb { background: rgba(196, 112, 74, 0.15); color: var(--pos-verb); }
.word-pos-tag.pos-adj { background: rgba(120, 140, 93, 0.15); color: var(--pos-adj); }
.word-pos-tag.pos-adv { background: rgba(196, 148, 74, 0.15); color: var(--pos-adv); }
.word-pos-tag.pos-pron { background: rgba(138, 107, 138, 0.15); color: var(--pos-pron); }
.word-pos-tag.pos-det { background: rgba(90, 138, 138, 0.15); color: var(--pos-det); }
.word-pos-tag.pos-cconj, .word-pos-tag.pos-sconj { background: var(--bg-tag); color: var(--color-graphite); }
.word-pos-tag.pos-adp { background: var(--bg-tag); color: var(--color-graphite); }
.word-grammar-tags {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.word-grammar-detail {
font-family: var(--font-sans);
font-size: 0.75rem;
color: var(--color-graphite);
}
/* --- C3: Grammar Snapshot Strip --- */
.grammar-snapshot {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
padding: 10px 0;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
font-family: var(--font-sans);
font-size: 0.8rem;
color: var(--color-graphite);
}
.grammar-snapshot-item {
display: flex;
align-items: baseline;
gap: 4px;
}
.grammar-snapshot-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-silver);
}
.grammar-snapshot-value {
text-transform: capitalize;
}
/* --- C5: Definition (Tier 2) --- */
.focus-definition {
font-family: var(--font-main);
font-size: 1rem;
line-height: 1.55;
color: var(--color-graphite);
margin: 0 0 20px 0;
}
/* --- C6: Collapsible Sections --- */
.focus-collapsible {
margin-bottom: 16px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
overflow: hidden;
}
.focus-collapsible[open] {
border-color: var(--color-border);
}
.focus-collapsible-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
cursor: pointer;
user-select: none;
list-style: none;
transition: background 0.15s;
}
.focus-collapsible-header:hover {
background: var(--bg-subtle);
}
.focus-collapsible-header::-webkit-details-marker { display: none; }
.focus-collapsible-header .focus-section-label {
margin-bottom: 0;
}
.focus-collapsible-chevron {
width: 14px;
height: 14px;
color: var(--color-silver);
transition: transform 0.2s var(--ease-standard);
flex-shrink: 0;
}
.focus-collapsible[open] .focus-collapsible-chevron {
transform: rotate(90deg);
}
.focus-collapsible-body {
padding: 0 16px 16px;
}
/* --- C7: Dictionary Entry Classes --- */
.dict-entry {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}
.dict-entry:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.dict-form-arrow {
font-size: 0.9rem;
color: var(--color-silver);
margin-bottom: 6px;
}
.dict-form-arrow em {
color: var(--color-carbon);
}
.dict-form-descriptions {
margin: 0 0 8px 0;
padding-left: 20px;
font-size: 0.8rem;
color: var(--color-silver);
line-height: 1.5;
}
.dict-pos-badge {
display: inline-block;
font-family: var(--font-data);
font-size: 0.75rem;
font-weight: 700;
color: var(--color-carbon);
background: var(--bg-tag);
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.dict-ipa {
font-family: var(--font-ipa);
font-size: 0.95rem;
color: var(--color-silver);
margin-bottom: 6px;
}
.dict-senses {
margin: 4px 0;
padding-left: 20px;
font-size: 0.9rem;
line-height: 1.5;
color: var(--color-carbon);
}
.dict-sense-match {
background: rgba(196, 112, 74, 0.1);
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
}
.dict-translations-line {
font-size: 0.95rem;
color: var(--color-carbon);
margin-bottom: 12px;
}
.dict-etymology {
font-size: 0.85rem;
color: var(--color-graphite);
line-height: 1.5;
font-style: italic;
margin-bottom: 12px;
}
/* --- C8: Morphology (bare, no wrapper) --- */
.focus-morph-section {
margin-bottom: 20px;
}
/* --- C9: Frequency Footer --- */
.focus-freq-note {
font-family: var(--font-sans);
font-size: 0.75rem;
color: var(--color-silver);
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
}
/* --- C10: Sentence Pair Block --- */
.focus-sentence-pair {
background: var(--bg-subtle);
border-left: 2px solid var(--color-accent);
border-radius: 0 6px 6px 0;
padding: 14px 16px;
margin-bottom: 20px;
}
.focus-sentence-pair .sent-divider {
border: none;
border-top: 1px dashed var(--color-border);
margin: 12px 0;
}
.focus-sentence-pair .sent-translation {
font-family: var(--font-main);
font-size: 1.05rem;
font-style: italic;
line-height: 1.55;
color: var(--color-carbon);
}
/* --- C11: Sentence Selector Tabs --- */
.sentence-selector {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 20px;
}
.sentence-selector-btn {
padding: 6px 12px;
border: none;
background: transparent;
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.85rem;
text-align: left;
border-left: 2px solid transparent;
color: var(--color-silver);
transition: all 0.15s;
}
.sentence-selector-btn.active {
border-left-color: var(--color-accent);
font-weight: 600;
color: var(--color-text);
}
.sentence-selector-btn:hover {
color: var(--color-text);
}
/* --- C12: View Title --- */
.focus-view-title {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 700;
color: var(--color-carbon);
letter-spacing: -0.01em;
margin: 0 0 20px 0;
}
/* --- Tab content badges --- */
.lc-focus-tab[data-has-content]::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-accent);
display: inline-block;
margin-left: 6px;
vertical-align: middle;
}
/* --- C13: Dark Mode Overrides (structural redesign) --- */
[data-theme="dark"] .focus-sentence-pair { background: rgba(255, 245, 230, 0.03); }
[data-theme="dark"] .sentence-translation-panel { background: rgba(212, 137, 106, 0.08); }
[data-theme="dark"] .focus-collapsible { border-color: rgba(255, 245, 230, 0.08); }
[data-theme="dark"] .focus-collapsible[open] { border-color: rgba(255, 245, 230, 0.12); }
[data-theme="dark"] .dict-sense-match { background: rgba(196, 112, 74, 0.12); }
[data-theme="dark"] .focus-sticky-header { background: var(--color-surface); }
/* Translation correction suggest button (Phase 2 of per-sentence feedback). */
.tc-suggest-btn {
padding: 3px 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-accent, #c4704a);
background: transparent;
border: 1px solid var(--color-accent, #c4704a);
border-radius: 3px;
cursor: pointer;
white-space: nowrap;
}
.tc-suggest-btn:hover {
background: var(--color-accent, #c4704a);
color: white;
}
.tc-submitted-badge {
font-size: 11px;
color: var(--color-silver, #888);
font-style: italic;
}
/* Community-corrected translation badge (Phase 5 of feedback loop). */
.tc-corrected-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-size: 10px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: #1d7a3a;
background: #e8f5ec;
border: 1px solid #bce5c8;
border-radius: 999px;
vertical-align: middle;
}
[data-theme="dark"] .tc-corrected-badge {
color: #a5e0b8;
background: rgba(46, 204, 113, 0.12);
border-color: rgba(46, 204, 113, 0.35);
}
/* =============================================
COMMAND PALETTE (Cmd+K) — ported from Claude Design
Source: docs/design/claude-design-export/project/ui_kits/webapp/styles.css:1023-1154
============================================= */
.lc-kbd {
font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
font-size: 11px;
color: var(--text-tertiary);
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--border-subtle);
}
.lc-cmdk-scrim {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(20, 15, 12, 0.38);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 13vh;
animation: lcCmdKFade 140ms ease-out;
}
@keyframes lcCmdKFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lcCmdKDialog { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .lc-cmdk-scrim { background: rgba(0, 0, 0, 0.55); }
.lc-cmdk-dialog {
width: 640px;
max-width: calc(100vw - 32px);
max-height: 70vh;
background: var(--bg-primary);
border: 1px solid var(--border-default);
border-radius: 14px;
box-shadow: 0 24px 64px rgba(20, 15, 12, 0.22), 0 2px 8px rgba(20, 15, 12, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
animation: lcCmdKDialog 160ms cubic-bezier(.2, .8, .2, 1);
}
[data-theme="dark"] .lc-cmdk-dialog {
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.lc-cmdk-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-primary);
}
.lc-cmdk-search-icon { color: var(--text-tertiary); display: flex; align-items: center; }
.lc-cmdk-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font: inherit;
font-family: var(--font-interface);
font-size: 16px;
color: var(--text-primary);
padding: 4px 0;
}
.lc-cmdk-input::placeholder { color: var(--text-tertiary); }
.lc-cmdk-back {
background: none;
border: 1px solid var(--border-subtle);
border-radius: 6px;
width: 28px;
height: 28px;
cursor: pointer;
color: var(--text-secondary);
font-size: 16px;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lc-cmdk-back:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.lc-cmdk-esc {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 10px;
color: var(--text-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 2px 6px;
text-transform: uppercase;
letter-spacing: .05em;
}
.lc-cmdk-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.lc-cmdk-group { padding: 2px 0; }
.lc-cmdk-group-head {
font-family: var(--font-interface);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--text-tertiary);
padding: 10px 20px 4px;
text-transform: uppercase;
}
.lc-cmdk-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 20px;
cursor: pointer;
border-left: 2px solid transparent;
transition: background 80ms;
}
.lc-cmdk-row-main { flex: 1; min-width: 0; }
.lc-cmdk-row-kicker {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--text-tertiary);
text-transform: uppercase;
margin-bottom: 1px;
display: none; /* only surface in search/submenu views and on highlighted row */
}
.lc-cmdk-row--hl .lc-cmdk-row-kicker { display: block; }
.lc-cmdk-row-label {
font-size: 14px;
color: var(--text-primary);
font-weight: 450;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-interface);
}
.lc-cmdk-chev { color: var(--text-tertiary); font-weight: 400; }
.lc-cmdk-row-desc {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-interface);
}
.lc-cmdk-row-kbd { flex-shrink: 0; min-width: 28px; text-align: center; }
.lc-cmdk-row--hl {
background: var(--bg-secondary);
border-left-color: var(--accent-primary);
}
.lc-cmdk-row--hl .lc-cmdk-row-label { color: var(--accent-primary); }
.lc-cmdk-empty {
padding: 32px 20px;
text-align: center;
color: var(--text-tertiary);
font-size: 13px;
font-family: var(--font-interface);
}
.lc-cmdk-foot {
display: flex;
gap: 18px;
align-items: center;
padding: 10px 16px;
border-top: 1px solid var(--border-subtle);
background: var(--bg-secondary);
font-size: 11px;
color: var(--text-tertiary);
font-family: var(--font-interface);
}
.lc-cmdk-foot .lc-kbd { margin-right: 4px; font-size: 10px; padding: 1px 5px; min-width: 0; }
/* Mobile (≤640px): full-screen modal */
@media (max-width: 640px) {
.lc-cmdk-scrim { padding-top: 0; align-items: stretch; }
.lc-cmdk-dialog {
width: 100%;
max-width: 100%;
max-height: 100vh;
height: 100vh;
border-radius: 0;
border: none;
}
.lc-cmdk-header { padding: 14px 14px; gap: 12px; }
.lc-cmdk-input { font-size: 16px; }
.lc-cmdk-row { padding: 14px 18px; }
.lc-cmdk-row-label { font-size: 15px; }
.lc-cmdk-row-desc { font-size: 12px; }
.lc-cmdk-foot { flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; }
.lc-cmdk-foot > span { font-size: 10px; }
}
/* =============================================================
FOCUS PANEL — Step 6a Claude Design refresh (PR 13).
Visual-only restyle on top of the existing #focus-panel /
.lc-focus-tab / .focus-banner / .focus-section-label markup.
No JS hooks renamed; reader-v8.js initFocusTabs/switchFocusTab
and reader-analysis.js displaySentenceAnalysis still target
#focus-panel-content, .lc-focus-tab[data-tab=...], .focus-banner-*.
Ported from docs/design/claude-design-export/project/ui_kits/
webapp/FocusPanel.jsx + styles.css (.lc-focus-*).
============================================================= */
/* Tabs row — bump to design's denser baseline + brighter active state */
.focus-panel-tabs {
gap: 2px;
padding: 0 14px;
}
.lc-focus-tab {
font-size: 12.5px;
padding: 11px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
}
.lc-focus-tab.active {
color: var(--accent-primary, var(--color-accent));
border-bottom-color: var(--accent-primary, var(--color-accent));
}
/* Pro badge on Context tab when user is anonymous/free.
Gilt gold hue from the tier-pro-accent token (added in Step 2). */
.lc-focus-tab-pro-badge {
font-family: var(--font-ui, var(--font-interface));
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
background: var(--tier-pro-tint, #f2ecdb);
color: var(--tier-pro-accent, #b8944a);
border: 1px solid color-mix(in srgb, var(--tier-pro-accent, #b8944a) 30%, transparent);
line-height: 1.1;
}
.lc-focus-tab.active .lc-focus-tab-pro-badge {
background: var(--tier-pro-accent, #b8944a);
color: #fff;
border-color: transparent;
}
/* Admin badge on Reference tab when user is admin */
.lc-focus-tab-admin-badge {
font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: .04em;
text-transform: lowercase;
padding: 2px 5px;
border-radius: 3px;
background: var(--bg-tertiary);
color: var(--text-tertiary);
border: 1px solid var(--border-subtle);
line-height: 1.1;
}
/* Rich empty state — replaces the legacy .focus-panel-placeholder
single-line text. Mirrors design's FocusPanel.FocusEmpty: dotted
ring + smile + headline + helper copy with kbd shortcut chips. */
.lc-focus-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 56px 22px 40px;
color: var(--text-tertiary, var(--color-silver));
}
.lc-focus-empty-mark {
color: var(--text-tertiary, var(--color-silver));
margin-bottom: 18px;
opacity: 0.85;
}
.lc-focus-empty-title {
font-family: var(--font-ui, var(--font-interface));
font-size: 15px;
font-weight: 600;
color: var(--text-primary, var(--color-carbon));
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.lc-focus-empty-body {
font-family: var(--font-ui, var(--font-interface));
font-size: 12.5px;
line-height: 1.55;
color: var(--text-tertiary, var(--color-silver));
max-width: 260px;
}
.lc-focus-empty-body .lc-kbd {
display: inline-block;
margin: 0 1px;
padding: 1px 5px;
font-size: 10px;
border-radius: 3px;
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
color: var(--text-secondary, var(--color-graphite));
font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
line-height: 1.4;
}
/* Lock-overlay polish — make the existing .focus-banner system
read like the design's .lc-focus-lock-free / .lc-focus-lock-pro.
Adds a tier-tinted variant so sign-in vs upgrade banners are
visually distinct without renaming any class JS emits. */
.focus-banner.focus-banner--upgrade {
border-left-color: var(--tier-pro-accent, #b8944a);
background: var(--tier-pro-tint, #f2ecdb);
}
.focus-banner.focus-banner--upgrade .focus-banner-title {
color: var(--tier-pro-accent, #b8944a);
}
.focus-banner.focus-banner--upgrade .focus-banner-cta {
background: var(--tier-pro-accent, #b8944a);
}
.focus-banner.focus-banner--upgrade .focus-banner-cta:hover {
filter: brightness(1.05);
opacity: 1;
}
/* Section eyebrow — align .focus-section-label with the design's
shared .eyebrow primitive. The existing rule already uses
uppercase/letter-spacing; this just ensures the size + color
matches the rest of the design system. */
.focus-section-label {
font-family: var(--font-ui, var(--font-interface));
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary, var(--color-silver));
}
/* =============================================================
SCENE PAGE — Step 6e Claude Design refresh (PR 14).
Adds an editorial header above the libretto and a sticky
prev/next footer at the bottom of the scrollable canvas, only
when scene_data is set (the read_opera_scene route).
Production keeps the legacy .canvas-header markup in the DOM —
reader-v8.js still reads #header-composer / #header-title /
#header-subtitle when syncing breadcrumbs — but it gets
demoted visually via .canvas-header--demoted so it doesn't
compete with the new editorial title.
============================================================= */
.lc-scene-header {
padding: 28px 0 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.lc-scene-eyebrow {
font-family: var(--font-ui, var(--font-interface));
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent-primary, var(--color-accent));
margin-bottom: 8px;
}
.lc-scene-title {
font-family: var(--font-main, var(--font-literary, Georgia, serif));
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary, var(--color-carbon));
line-height: 1.15;
margin: 0 0 6px;
}
.lc-scene-context {
font-family: var(--font-ui, var(--font-interface));
font-size: 14px;
color: var(--text-tertiary, var(--color-silver));
line-height: 1.55;
margin-bottom: 14px;
}
.lc-scene-context em {
font-style: italic;
color: var(--text-secondary, var(--color-graphite));
font-weight: 500;
}
.lc-scene-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-family: var(--font-ui, var(--font-interface));
font-size: 12.5px;
color: var(--text-tertiary, var(--color-silver));
padding-bottom: 16px;
}
.lc-scene-meta-item { white-space: nowrap; }
.lc-scene-meta-sep { color: var(--text-muted, var(--border-default)); }
.lc-scene-characters {
font-style: italic;
color: var(--text-secondary, var(--color-graphite));
}
.lc-scene-fulllink {
color: var(--accent-primary, var(--color-accent));
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid color-mix(in srgb, var(--accent-primary, #c4704a) 35%, transparent);
transition: border-color .12s, color .12s;
}
.lc-scene-fulllink:hover {
color: var(--accent-hover, var(--color-accent));
border-bottom-color: var(--accent-primary, var(--color-accent));
}
/* Demote the legacy canvas-header when an editorial scene header is
above it. We keep it in the DOM (JS hooks: #header-composer /
#header-title / #header-subtitle) but visually shrink it to a
small back-link-style breadcrumb. */
.canvas-header--demoted {
margin-top: -8px;
margin-bottom: 18px;
padding: 8px 0;
opacity: 0.55;
}
.canvas-header--demoted .canvas-composer-label,
.canvas-header--demoted .canvas-title,
.canvas-header--demoted .canvas-subtitle {
font-size: 12.5px !important;
line-height: 1.35 !important;
margin: 0 !important;
display: inline;
color: var(--text-tertiary, var(--color-silver)) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
.canvas-header--demoted .canvas-title {
font-style: italic;
margin-left: 4px !important;
}
.canvas-header--demoted .canvas-subtitle {
margin-left: 4px !important;
}
/* Sticky scene-nav footer */
.lc-scene-footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 12px;
padding: 12px 18px;
margin: 32px -18px -18px;
background: color-mix(in srgb, var(--color-surface, var(--bg-secondary)) 92%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--color-border, var(--border-subtle));
}
.lc-scene-footer-link {
flex: 1 1 0;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 8px;
text-decoration: none;
color: var(--text-primary, var(--color-carbon));
transition: background .12s, transform .12s;
min-width: 0;
}
.lc-scene-footer-link:hover {
background: var(--bg-tertiary);
}
.lc-scene-footer-link--prev { justify-content: flex-start; }
.lc-scene-footer-link--next { justify-content: flex-end; }
.lc-scene-footer-stack {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.lc-scene-footer-stack--right { align-items: flex-end; text-align: right; }
.lc-scene-footer-eyebrow {
font-size: 9.5px;
color: var(--text-tertiary, var(--color-silver));
letter-spacing: .08em;
}
.lc-scene-footer-link:hover .lc-scene-footer-eyebrow {
color: var(--accent-primary, var(--color-accent));
}
.lc-scene-footer-title {
font-family: var(--font-ui, var(--font-interface));
font-size: 13px;
font-weight: 600;
color: var(--text-primary, var(--color-carbon));
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.lc-scene-footer-arrow {
color: var(--text-tertiary, var(--color-silver));
font-size: 16px;
flex: none;
transition: transform .12s, color .12s;
}
.lc-scene-footer-link:hover .lc-scene-footer-arrow {
color: var(--accent-primary, var(--color-accent));
transform: translateX(2px);
}
.lc-scene-footer-link--prev:hover .lc-scene-footer-arrow {
transform: translateX(-2px);
}
/* Sprint 9 — disabled state for scene footer ends (start/end of work). */
.lc-scene-footer-link--disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
.lc-scene-footer-link--disabled:hover {
background: transparent;
}
/* Sprint 9 — scene preview tooltip on hover. Uses scene incipit + characters
from scene_helpers.build_scene_index. Mirrors the design's
.lc-scene-foot-tt pattern from Reader.jsx:506-510. */
.lc-scene-footer-link {
position: relative;
}
.lc-scene-foot-tt {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
display: none;
flex-direction: column;
gap: 4px;
min-width: 220px;
max-width: 320px;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-secondary, #fff);
border: 1px solid var(--border-subtle, rgba(0,0,0,.12));
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 5;
pointer-events: none;
}
.lc-scene-foot-tt--right { left: auto; right: 0; }
.lc-scene-footer-link:hover .lc-scene-foot-tt,
.lc-scene-footer-link:focus-visible .lc-scene-foot-tt {
display: flex;
}
.lc-scene-foot-tt-kicker {
color: var(--text-tertiary, var(--color-silver));
}
.lc-scene-foot-tt-de {
font-size: 13px;
color: var(--text-primary, var(--color-carbon));
line-height: 1.4;
}
.lc-scene-foot-tt-meta {
font-size: 11px;
color: var(--text-secondary, var(--color-silver));
}
@media (max-width: 768px) {
.lc-scene-title { font-size: 26px; }
.lc-scene-meta { font-size: 12px; gap: 8px; }
.lc-scene-footer { padding: 8px 12px; gap: 6px; }
.lc-scene-footer-link { padding: 8px 10px; gap: 8px; }
.lc-scene-footer-title { font-size: 12px; }
.lc-scene-foot-tt { display: none !important; }
}
/* =============================================================
LIEDER / NON-OPERA WORK PAGE — Step 6f Claude Design refresh.
Editorial header for content_type != 'opera' work-level pages.
Mirrors .lc-scene-header but uses neutral (not terracotta)
eyebrow because there's only one work — the visual emphasis
should be on the song title, not on a section label.
============================================================= */
.lc-work-header {
padding: 28px 0 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.lc-work-eyebrow {
font-family: var(--font-ui, var(--font-interface));
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary, var(--color-silver));
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.lc-work-eyebrow-sep { color: var(--text-muted, var(--border-default)); }
.lc-work-eyebrow-cycle {
color: var(--text-secondary, var(--color-graphite));
text-transform: none;
letter-spacing: 0;
font-style: italic;
font-weight: 500;
}
.lc-work-title {
font-family: var(--font-main, var(--font-literary, Georgia, serif));
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary, var(--color-carbon));
line-height: 1.15;
margin: 0 0 6px;
}
.lc-work-context {
font-family: var(--font-ui, var(--font-interface));
font-size: 14px;
color: var(--text-tertiary, var(--color-silver));
line-height: 1.55;
padding-bottom: 16px;
}
.lc-work-context em {
font-style: italic;
color: var(--text-secondary, var(--color-graphite));
font-weight: 500;
}
.lc-work-context em a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent-primary, #c4704a) 35%, transparent);
transition: border-color .12s, color .12s;
}
.lc-work-context em a:hover {
color: var(--accent-primary, var(--color-accent));
border-bottom-color: var(--accent-primary, var(--color-accent));
}
.lc-work-context-sep { color: var(--text-muted, var(--border-default)); margin: 0 4px; }
@media (max-width: 768px) {
.lc-work-title { font-size: 26px; }
.lc-work-context { font-size: 13px; }
}
/* =============================================================
TOP BAR + LEFT PANEL polish — Step 6d Claude Design refresh.
Visual-only refinements on top of existing .top-bar* and
.panel-section* markup. The chevron-separator swap (template
edit) handles the breadcrumb feel; this block tightens
spacing + adds terracotta hover affordances.
============================================================= */
/* Sleeker chevron separator (smaller, tertiary tone) */
.top-bar-sep {
color: var(--text-muted, var(--color-silver));
font-size: 13px;
line-height: 1;
padding: 0 2px;
user-select: none;
opacity: 0.55;
}
/* Back link — terracotta hover with subtle slide */
.top-bar-back {
transition: color .12s, transform .12s;
}
.top-bar-back:hover {
color: var(--accent-primary, var(--color-accent));
}
.top-bar-back:hover svg {
transform: translateX(-2px);
transition: transform .12s;
}
/* Last (current) crumb gets accent emphasis. Falls back to the
existing .top-bar-scene treatment when scene_data is set. */
.top-bar-crumb { transition: color .12s; }
.top-bar-crumb:hover { color: var(--text-primary, var(--color-carbon)); }
/* Top bar buttons — slightly bigger hit target + softer hover */
.top-bar-btn {
border-radius: 6px;
transition: background .12s, color .12s, border-color .12s;
}
.top-bar-btn:hover {
background: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
}
/* Panel section header — tighten letter spacing + denser padding
so the sidebar reads more like the design's compact rail. The
existing rules already use .lc-cmdk-style 11px tracking; we
just lighten the hover highlight. */
.panel-section-header {
padding-top: 14px;
padding-bottom: 10px;
}
.panel-section-header:hover {
color: var(--text-primary, var(--color-carbon));
border-bottom-color: transparent;
background: color-mix(in srgb, var(--bg-tertiary) 40%, transparent);
}
/* Section divider — replace the per-section border with a single
subtle hairline below the header band so collapsed sections
read as a clean stack. */
.panel-section + .panel-section {
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
/* =============================================================
AUDIO CONTROLS polish — Step 6b Claude Design refresh.
CSS-only restyle of the existing left-panel audio markup
(.audio-controls / .play-btn / .audio-progress-bar) toward
the design's AudioPanel aesthetic. The full IA migration
(dock above libretto + multi-detent mobile sheet) remains
deferred — this is the visual layer alone, riding the same
#play-audio / #voice-select / #audio-progress hooks
reader-audio.js already targets.
============================================================= */
/* Play button — terracotta with a ring-pulse animation when
reader-audio.js sets .audio-playing on the button. */
.play-btn {
width: 40px;
height: 40px;
background: var(--accent-primary, var(--color-accent));
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
transition: transform .12s, box-shadow .12s, background .12s;
}
.play-btn:hover {
background: var(--accent-hover, var(--color-accent));
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.play-btn.audio-playing {
animation: lc-audio-play-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-audio-play-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary, #c4704a) 40%, transparent); }
70% { box-shadow: 0 0 0 10px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Stop button — neutral so it doesn't compete with play. */
.stop-btn {
width: 36px;
height: 36px;
background: var(--bg-tertiary, var(--color-silver));
color: var(--text-secondary, var(--color-graphite));
border: 1px solid var(--border-subtle);
}
.stop-btn:hover {
background: var(--border-subtle);
color: var(--text-primary, var(--color-carbon));
}
/* Prev/next-line step buttons — sit beside the play button, hidden when idle. */
.audio-step-btn {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text-secondary, var(--color-graphite));
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md, 6px);
cursor: pointer;
transition: all var(--transition-fast);
}
.audio-step-btn:hover {
background: var(--bg-tertiary);
color: var(--text-primary, var(--color-carbon));
border-color: var(--border-default);
}
.audio-step-btn:active { transform: scale(0.96); }
/* Audio controls row — tighter rhythm, eyebrow-style labels */
.audio-controls { gap: 12px; }
.audio-controls-row { gap: 10px; }
.audio-label {
font-family: var(--font-ui, var(--font-interface));
font-size: 10.5px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary, var(--color-silver));
min-width: 44px;
}
/* Audio select — match design tokens */
.audio-select {
font-size: 12px;
padding: 5px 8px;
background: var(--bg-secondary, var(--color-surface));
border-color: var(--border-subtle);
border-radius: 6px;
transition: border-color .12s;
}
.audio-select:hover { border-color: var(--border-default); }
.audio-select:focus {
outline: none;
border-color: var(--accent-primary, var(--color-accent));
box-shadow: 0 0 0 2px var(--accent-subtle);
}
/* Speed / Loop chip buttons — design's neutral-to-active path */
.speed-btn, .loop-btn {
font-size: 11px;
padding: 5px 10px;
border-radius: var(--radius-sm, 4px);
background: var(--bg-secondary);
border-color: var(--border-subtle);
color: var(--text-secondary, var(--color-graphite));
}
.speed-btn:hover, .loop-btn:hover {
color: var(--text-primary, var(--color-carbon));
background: var(--bg-tertiary);
border-color: var(--border-default);
}
.speed-btn.active, .loop-btn.active {
color: #fff;
background: var(--accent-primary, var(--color-accent));
border-color: var(--accent-primary, var(--color-accent));
}
/* Audio progress bar — bump to 4px, add a glowing terminal dot
on the fill end. The dot reads as a play-head and reinforces
the playing state without needing extra markup. */
.audio-progress-bar {
height: 4px;
background: var(--border-subtle);
border-radius: 999px;
overflow: visible;
}
.audio-progress-fill {
background: var(--accent-primary, var(--color-accent));
border-radius: 999px;
position: relative;
}
.audio-progress-fill::after {
content: '';
position: absolute;
right: -3px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-primary, var(--color-accent));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #c4704a) 25%, transparent);
opacity: 0;
transition: opacity .18s;
}
.audio-progress-bar:not([style*="display:none"]) .audio-progress-fill[style*="width: "]::after {
opacity: 1;
}
/* Range row + clear pill — neutral with terracotta hover */
.audio-clear-range-btn {
color: var(--text-tertiary, var(--color-silver));
background: transparent;
border-color: var(--border-subtle);
transition: color .12s, background .12s, border-color .12s;
}
.audio-clear-range-btn:hover {
color: var(--accent-primary, var(--color-accent));
background: var(--accent-subtle);
border-color: var(--accent-primary, var(--color-accent));
}
/* =============================================
STEP 6c-1 — Tier-3 translation italic
Source: docs/design/claude-design-export/project/ui_kits/webapp/styles.css:179
.lc-line-tr{font-size:13px;color:var(--text-tertiary);font-style:italic;...}
Production already matches design intent on font-size + color. The one
typography gap is italic — design uses italic to mark translation as
editorial gloss (distinct from libretto text and IPA). text-align:center
is preserved because production stacks gloss UNDER each word; design
stacks it under the whole line. font-style applies to the
non-study-mode default state; study-mode pills override color to
transparent so italic is invisible until revealed on hover, where
italic then helps differentiate the revealed gloss from neighboring
word text. Empty-collapse rule + hide-translations rule unchanged.
============================================= */
.glossing {
font-style: italic;
line-height: 1.5;
}
/* =====================================================================
CLAUDE DESIGN PORT — Phase B.1–B.7 (2026-04-27)
Ported from docs/design/claude-design-export/project/ui_kits/webapp/
styles.css (Reader.jsx, FocusPanel.jsx, AudioPanel.jsx).
These rules add the design's class taxonomy alongside production
markup so existing JS hooks remain attached. Where production already
has equivalent CSS for a class, the design rule is added as a refinement
only — duplicates intentionally avoided.
===================================================================== */
/* --- B.1 Reader top bar ----------------------------------------------- */
.lc-reader-bar {
position: sticky;
top: 0;
z-index: 5;
background: var(--bg-primary);
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0 16px;
border-bottom: 1px solid var(--border-subtle);
gap: 24px;
}
.lc-rb-left { display: flex; align-items: center; gap: 24px; min-width: 0; flex: 1; }
.lc-rb-controls { display: flex; align-items: center; gap: 14px; flex: none; }
.lc-rb-title { margin: 2px 0 0; font-size: var(--text-xl, 22px); font-weight: 600; letter-spacing: -0.02em; }
.lc-rb-meta { margin-top: 6px; font-size: var(--text-xs, 12px); }
.lc-back {
font-size: 13px;
color: var(--text-tertiary);
text-decoration: none;
transition: color 120ms var(--ease-standard);
}
.lc-back:hover { color: var(--accent-primary); }
/* Top-bar IPA / Translation toggles */
.lc-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
padding: 6px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--bg-secondary);
transition: color 120ms, border-color 120ms, background 120ms;
}
.lc-toggle input { display: none; }
.lc-toggle.on {
color: var(--accent-primary);
border-color: var(--accent-primary);
background: var(--accent-subtle);
}
.lc-icon-btn {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
position: relative;
transition: color 120ms, border-color 120ms;
}
.lc-icon-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.lc-icon-btn.playing { color: var(--accent-primary); border-color: var(--accent-primary); }
.lc-audio-dot-pulse {
position: absolute;
top: 2px;
right: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-primary);
animation: lc-pulse 1.4s ease-in-out infinite;
}
@keyframes lc-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .lc-audio-dot-pulse { animation: none } }
.lc-kbd-design {
font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
font-size: 11px;
color: var(--text-tertiary);
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--border-subtle);
line-height: 1;
}
/* --- B.1 Cycle position nav ----------------------------------------- */
.lc-cycle-nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.lc-cycle-sub {
font-size: 12px;
color: var(--text-secondary);
letter-spacing: .02em;
text-transform: uppercase;
font-weight: 500;
}
.lc-cycle-arrows { display: inline-flex; gap: 4px; margin-left: 2px; }
.lc-cycle-arrow {
position: relative;
width: 24px;
height: 24px;
border: 1px solid var(--border-subtle, var(--color-divider, #2a2520));
background: var(--bg-secondary, transparent);
color: var(--text-secondary, var(--color-graphite));
border-radius: 6px;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: border-color 120ms, color 120ms, background 120ms;
}
/* T3-A: Active arrow link hover. Production reader.html lacks
--accent-primary / --accent-subtle (those live in archive.css). Fall
back to --color-accent (which exists in reader_style.css :root) and
synthesize the subtle tint via color-mix so the visual still matches. */
.lc-cycle-arrow:not([aria-disabled="true"]):hover {
border-color: var(--accent-primary, var(--color-accent));
color: var(--accent-primary, var(--color-accent));
background: var(--accent-subtle, color-mix(in srgb, var(--color-accent) 14%, transparent));
}
/* Disabled state — rendered as so JS-free
markup can express "no prev/next" without a non-clickable button. */
.lc-cycle-arrow[aria-disabled="true"] {
opacity: .35;
cursor: not-allowed;
pointer-events: none;
}
.lc-cycle-tt {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 20;
/* Conventional tooltip contrast — always dark bubble with light text,
regardless of theme. The reader's --color-carbon token flips to a
light value in dark mode (intentional for body text), which broke
the original fallback chain when both fg and bg resolved to cream.
Pin to an explicit theme-stable pair instead. */
background: rgba(20, 20, 19, 0.96);
color: #f5f4f0;
padding: 7px 10px;
border-radius: 6px;
min-width: 140px;
white-space: nowrap;
text-align: left;
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
pointer-events: none;
font-size: 12px;
line-height: 1.35;
/* Hidden by default — reveal on hover/focus of the parent arrow.
Reader.jsx used React state for this; pure CSS keeps the markup
SSR-only and crawler-friendly. */
opacity: 0;
transform: translateY(-2px);
transition: opacity 120ms ease, transform 120ms ease;
}
.lc-cycle-arrow:hover .lc-cycle-tt,
.lc-cycle-arrow:focus-visible .lc-cycle-tt {
opacity: 1;
transform: translateY(0);
}
.lc-cycle-tt::before {
content: "";
position: absolute;
top: -4px;
left: 10px;
width: 8px;
height: 8px;
/* Match the .lc-cycle-tt bubble bg exactly so the arrow merges visually. */
background: rgba(20, 20, 19, 0.96);
transform: rotate(45deg);
}
.lc-cycle-tt--right { left: auto; right: 0; }
.lc-cycle-tt--right::before { left: auto; right: 10px; }
.lc-cycle-tt-n {
display: block;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .7;
margin-bottom: 2px;
font-weight: 500;
}
.lc-cycle-tt-t {
display: block;
font-family: var(--font-libretto, Georgia, serif);
font-size: 13px;
font-weight: 500;
}
/* --- B.2 Scene/cycle/standalone left rail --------------------------- */
.lc-scenes {
display: flex;
flex-direction: column;
gap: 2px;
}
.lc-scenes-head { margin-bottom: 10px; }
.lc-scene {
display: block;
padding: 10px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
margin-bottom: 2px;
transition: background 120ms;
}
.lc-scene:hover { background: var(--bg-tertiary); }
.lc-scene.active {
background: var(--accent-subtle);
color: var(--accent-hover);
}
.lc-scene-label {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.35;
}
.lc-scene.active .lc-scene-label { color: var(--accent-hover); }
.lc-scene-dur { font-size: 11px; margin-top: 2px; color: var(--text-tertiary); }
/* Cycle list (numbered, dense, terracotta rule on active) */
.lc-scenes--cycle .lc-scenes-head { margin-bottom: 8px; }
.lc-scene--cycle {
padding: 6px 10px 6px 12px;
margin-bottom: 1px;
border-left: 2px solid transparent;
border-radius: 0;
}
.lc-scene--cycle.active {
border-left-color: var(--accent-primary);
background: var(--accent-subtle);
}
.lc-scene--cycle .lc-scene-label {
font-size: 12.5px;
line-height: 1.5;
font-weight: 400;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.lc-scene--cycle.active .lc-scene-label {
font-weight: 600;
color: var(--accent-hover);
}
.lc-scene--cycle:hover { background: var(--bg-tertiary); }
/* Standalone card (non-cycle lieder/art-song) */
.lc-standalone-card {
padding: 18px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-secondary);
margin-top: 4px;
}
.lc-standalone-title {
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 6px 0 4px;
color: var(--text-primary);
}
.lc-standalone-poet { font-size: 12px; color: var(--text-tertiary); }
/* Timeline progress strip under opera scene list */
.lc-timeline { margin-top: 20px; padding: 0 12px; }
.lc-timeline-track {
height: 3px;
background: var(--bg-tertiary);
border-radius: 2px;
}
.lc-timeline-fill {
height: 100%;
background: var(--accent-primary);
border-radius: 2px;
transition: width .3s var(--ease-standard);
}
/* T2-E: Production-token fallbacks for the .lc-scenes rail. The original
rules above use design tokens (--bg-tertiary, --accent-subtle, --text-*)
that aren't defined in reader_style.css, so colors won't theme-flip
without these overrides. Each rule re-asserts the property with a chain
that resolves via existing production tokens (--color-bg, --color-accent,
--color-carbon, etc.) which DO flip in [data-theme="dark"]. */
.lc-scenes {
padding: 16px 12px 24px;
}
.lc-scenes-head {
color: var(--text-tertiary, var(--color-silver, #8a8780));
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.lc-scene-label {
color: var(--text-primary, var(--color-carbon, #191918));
}
.lc-scene-dur {
color: var(--text-tertiary, var(--color-silver, #8a8780));
}
.lc-scene:hover {
background: var(--bg-tertiary, var(--bg-tag, rgba(0, 0, 0, 0.05)));
}
.lc-scene.active,
.lc-scene--cycle.active {
background: var(--accent-subtle, var(--gated-accent-soft, rgba(196, 112, 74, 0.08)));
color: var(--accent-hover, var(--color-accent, #c4704a));
}
.lc-scene.active .lc-scene-label {
color: var(--accent-hover, var(--color-accent, #c4704a));
}
.lc-scene--cycle.active {
border-left-color: var(--accent-primary, var(--color-accent, #c4704a));
}
.lc-scene--cycle .lc-scene-label {
color: var(--text-secondary, var(--color-graphite, #4a4946));
}
.lc-scene--cycle.active .lc-scene-label {
color: var(--accent-hover, var(--color-accent, #c4704a));
}
.lc-scene--cycle:hover {
background: var(--bg-tertiary, var(--bg-tag, rgba(0, 0, 0, 0.05)));
}
.lc-standalone-card {
border-color: var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
background: var(--bg-secondary, var(--color-bg, #faf9f5));
}
.lc-standalone-title {
color: var(--text-primary, var(--color-carbon, #191918));
font-family: var(--font-libretto, var(--font-serif, Georgia, serif));
}
.lc-standalone-poet {
color: var(--text-tertiary, var(--color-silver, #8a8780));
}
.lc-timeline-track {
background: var(--bg-tertiary, var(--bg-tag, rgba(0, 0, 0, 0.05)));
}
.lc-timeline-fill {
background: var(--accent-primary, var(--color-accent, #c4704a));
}
/* Hide the now-empty/redundant left-panel sections when a .lc-scenes rail
takes their place. Keeps the rail clean and gives it the full 240px width.
Admin-only sections still hide via existing .admin-only rules. */
.left-panel-scroll:has(.lc-scenes) > .panel-section { display: none; }
/* --- B.3 Libretto column / stanza / line / word --------------------- */
.lc-libretto-col { min-width: 0; }
.lc-aria-title {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 6px 0 4px;
}
.lc-stanza-wrap { margin-top: 8px; }
.lc-stanza-block {
position: relative;
padding-left: 38px;
margin-bottom: 32px;
}
.lc-stanza-block:last-child { margin-bottom: 8px; }
.lc-stanza-num {
position: absolute;
left: 0;
top: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: var(--accent-primary);
background: var(--accent-subtle);
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.lc-stanza-block .lc-line:last-child { border-bottom: none; }
.lc-line-text {
font-family: var(--font-libretto, Georgia, serif);
font-size: 19px;
line-height: 1.6;
color: var(--text-primary);
}
.lc-line-ipa {
font-family: var(--font-ipa-serif, 'Gentium Plus', Georgia, serif);
font-size: 15px;
color: var(--text-secondary);
margin-top: 4px;
font-style: normal;
}
/* B.3 extension — translation pencil reveal on hover (CSS-only) */
.lc-line-tr-pencil {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-tertiary);
opacity: 0;
cursor: pointer;
transition: opacity 120ms, color 120ms;
border: none;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lc-line:hover .lc-line-tr-pencil { opacity: 1; }
.lc-line-tr-pencil:hover { color: var(--accent-primary); }
/* B.3 word click target */
.lc-word { display: inline; }
.lc-word--glossed {
text-decoration: underline;
text-decoration-color: rgba(196, 112, 74, .35);
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(196, 112, 74, .12);
transition: background 120ms, color 120ms;
}
.lc-word--glossed:hover {
background: var(--accent-tint);
border-radius: 3px;
color: var(--accent-hover);
}
/* B.3 extension — line numbers gutter (toggled by Cmd+K "L").
Two parallel rule sets:
* .lc-line / data-line-num — design source's stanza-block surface.
Awaits T3-B (stanza grouping). Inert today; kept so it lights up
the moment .lc-stanza-block markup ships without a CSS revisit.
* .line .line-number — production's libretto-renderer surface
([reader-full-libretto.js:409]). Already populated; the only
missing piece was a persistent-visibility rule. .line-number
sits inside .line-gutter so we don't need padding-left here. */
body:has(.lines-on) .lc-line {
position: relative;
padding-left: 38px;
}
body:has(.lines-on) .lc-line::before {
content: attr(data-line-num);
position: absolute;
left: 0;
top: 14px;
width: 30px;
text-align: right;
font-size: 11px;
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
font-family: var(--font-interface);
}
body.lines-on .line .line-number {
opacity: 0.55;
}
body.lines-on .line:hover .line-number {
opacity: 0.85;
}
/* --- B.3 Anonymous gate (free user, scene mode) --------------------- */
.lc-stanza-wrap--gated { margin-bottom: 24px; }
.lc-anon-gate { display: block; }
.lc-anon-preview { margin-bottom: 0; }
.lc-anon-mask {
position: relative;
margin-top: 8px;
overflow: hidden;
border-radius: var(--radius-md);
}
.lc-anon-mask-shadow {
filter: blur(3.5px);
opacity: .42;
pointer-events: none;
padding: 18px 4px 40px;
mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 95%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 95%);
}
.lc-anon-mask-shadow .lc-line-text {
font-size: 22px;
line-height: 1.55;
margin-bottom: 10px;
}
.lc-anon-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, rgba(247, 239, 228, 0) 0%, rgba(247, 239, 228, .85) 40%, rgba(247, 239, 228, .96) 100%);
backdrop-filter: blur(1px);
}
[data-theme="dark"] .lc-anon-overlay {
background: linear-gradient(to bottom, rgba(26, 23, 20, 0) 0%, rgba(26, 23, 20, .85) 40%, rgba(26, 23, 20, .96) 100%);
}
.lc-anon-card {
max-width: 340px;
margin: 0;
padding: 28px 28px 26px;
gap: 8px;
}
.lc-anon-card-body {
max-width: 280px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
margin-top: 4px;
}
.lc-anon-card-actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 14px;
}
.lc-anon-card-alt {
cursor: pointer;
text-decoration: none;
color: var(--text-tertiary);
font-size: 12px;
}
.lc-anon-card-alt:hover {
color: var(--accent-primary);
text-decoration: underline;
}
/* --- B.5 Focus panel locks (Free + Pro overlay) --------------------- */
.lc-focus-lock {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 28px 20px;
border-radius: var(--radius-md);
margin: 8px 0;
}
.lc-focus-lock--free {
background: var(--accent-tint);
border: 1px solid #e3b79a;
}
.lc-focus-lock--pro {
background: var(--tier-pro-tint, #fbf5e3);
border: 1px solid #d8c48a;
}
.lc-focus-lock-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
}
.lc-focus-lock--free .lc-focus-lock-icon { color: var(--accent-primary); }
.lc-focus-lock--pro .lc-focus-lock-icon { color: var(--tier-pro-accent, #a88138); }
.lc-focus-lock-eyebrow {
font: 600 10px var(--font-interface);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.lc-focus-lock--free .lc-focus-lock-eyebrow { color: #a35a3d; }
.lc-focus-lock--pro .lc-focus-lock-eyebrow { color: #6b5518; }
.lc-focus-lock-title {
font: 600 15px var(--font-interface);
color: var(--text-primary);
max-width: 220px;
line-height: 1.3;
}
.lc-focus-lock-body {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
max-width: 240px;
margin-bottom: 4px;
}
/* T2-C — Local fallback tokens + button rules for the anon CTA card.
archive.css owns the canonical --accent-tint / --accent-primary tokens
and the .lc-btn primary-button system, but reader.html only loads
reader_style.css. Backfill exactly what the upgrade-cta + .lc-anon-card
markup needs so the surface renders correctly inside the reader. Scoped
to .upgrade-cta so it doesn't bleed into other consumers. */
.upgrade-cta .lc-focus-lock--free {
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.upgrade-cta .lc-focus-lock--pro {
background: color-mix(in srgb, #b8944a 14%, transparent);
border-color: color-mix(in srgb, #b8944a 45%, transparent);
}
.upgrade-cta .lc-focus-lock-icon {
background: var(--bg-page, #1a1714);
color: var(--color-accent);
}
.upgrade-cta .lc-focus-lock--pro .lc-focus-lock-icon {
color: #b8944a;
}
.upgrade-cta .lc-focus-lock-eyebrow {
color: var(--color-accent);
}
.upgrade-cta .lc-focus-lock--pro .lc-focus-lock-eyebrow {
color: #b8944a;
}
.upgrade-cta .cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
font-family: var(--font-ui);
font-weight: 600;
font-size: 13px;
padding: 8px 16px;
border-radius: var(--radius-sm, 6px);
background: var(--color-accent);
color: #fff;
transition: background 150ms var(--ease-standard, ease),
transform 150ms var(--ease-standard, ease);
}
.upgrade-cta .cta-btn:hover {
background: var(--color-accent-hover, var(--color-accent));
transform: translateY(-1px);
}
.upgrade-cta .cta-btn:active {
transform: scale(0.98);
}
.upgrade-cta .cta-alt {
cursor: pointer;
color: var(--text-tertiary, var(--color-muted));
font-size: 12px;
text-decoration: none;
}
.upgrade-cta .cta-alt:hover {
color: var(--color-accent);
text-decoration: underline;
}
/* --- B.4 Audio dock wrap-around shell ------------------------------- */
.lc-audio-dock-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* T2-A: Audio dock styles (ported from design styles.css:354-431).
The dock lives in a legacy .panel-section / .panel-section-body wrapper
so auth.js's applyAudioGating() still finds its selectors. We hide the
panel-section-header and reset the body's collapse-display so the dock
renders flush. */
.panel-section-audio-dock { border: none; padding: 0; }
.panel-section-audio-dock > .panel-section-header { display: none; }
.lc-audio-dock-body { display: block !important; padding: 0; }
.lc-audio { font-family: var(--font-interface, var(--font-sans, sans-serif)); }
.lc-audio--dock {
border: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
border-radius: var(--radius-md, 8px);
background: var(--bg-secondary, var(--color-bg, #faf9f5));
margin-top: 12px;
overflow: hidden;
transition: box-shadow 0.2s, border-color 0.2s;
}
.lc-audio--dock.playing,
.lc-audio--dock:has(.play-btn.audio-playing) {
border-color: var(--accent-primary, var(--color-accent, #c4704a));
box-shadow: 0 0 0 3px var(--accent-tint, var(--gated-accent-mid, rgba(196, 112, 74, 0.15)));
}
.lc-audio-dock-main {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 16px;
}
.lc-audio-core {
display: grid;
grid-template-columns: auto auto auto auto 1fr auto;
gap: 12px;
align-items: center;
flex: 1;
min-width: 0;
}
/* Round 44px play button (overrides legacy .play-btn rect button). */
.lc-audio--dock .lc-audio-play.play-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--accent-primary, var(--color-accent, #c4704a));
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition: transform 0.12s;
padding: 0;
}
.lc-audio--dock .lc-audio-play.play-btn:hover { transform: scale(1.05); }
.lc-audio--dock .lc-audio-play.play-btn.audio-playing {
animation: lc-audio-ring 1.6s ease-in-out infinite;
}
@keyframes lc-audio-ring {
0%, 100% { box-shadow: 0 0 0 0 var(--accent-tint, var(--gated-accent-mid, rgba(196, 112, 74, 0.15))); }
50% { box-shadow: 0 0 0 8px rgba(196, 112, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
.lc-audio--dock .lc-audio-play.play-btn.audio-playing { animation: none; }
}
.lc-audio--dock .stop-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
background: var(--bg-primary, var(--color-surface, #ffffff));
color: var(--text-secondary, var(--color-graphite, #4a4946));
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.lc-audio--dock .stop-btn:hover {
color: var(--accent-primary, var(--color-accent, #c4704a));
border-color: var(--accent-primary, var(--color-accent, #c4704a));
}
.lc-audio-step.audio-step-btn {
width: 32px;
height: 32px;
border: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
background: var(--bg-primary, var(--color-surface, #ffffff));
border-radius: var(--radius-sm, 6px);
color: var(--text-secondary, var(--color-graphite, #4a4946));
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.lc-audio-step.audio-step-btn:hover {
color: var(--accent-primary, var(--color-accent, #c4704a));
border-color: var(--accent-primary, var(--color-accent, #c4704a));
}
.lc-audio-progress-group { min-width: 0; }
.lc-audio-line-label {
margin-bottom: 4px;
font-size: 11px;
min-height: 14px;
color: var(--text-tertiary, var(--color-silver, #8a8780));
}
.lc-audio--dock .audio-progress-bar.lc-audio-progress {
cursor: pointer;
padding: 4px 0;
background: transparent;
height: auto;
width: 100%;
}
.lc-audio--dock .audio-progress-bar.lc-audio-progress::before {
content: "";
display: block;
position: relative;
height: 4px;
background: var(--bg-tertiary, var(--bg-tag, rgba(0, 0, 0, 0.08)));
border-radius: 2px;
}
.lc-audio--dock .audio-progress-fill.lc-audio-progress-fill {
height: 4px;
margin-top: -4px;
background: var(--accent-primary, var(--color-accent, #c4704a));
border-radius: 2px;
transition: width 0.2s linear;
}
.lc-audio--dock .audio-progress-text.lc-audio-progress-text {
display: block;
margin-top: 4px;
font-size: 10px;
color: var(--text-tertiary, var(--color-silver, #8a8780));
text-align: right;
}
.lc-audio-speed {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.lc-audio-speed .eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary, var(--color-silver, #8a8780));
}
.lc-audio--dock .speed-controls.lc-audio-speed-row {
display: flex;
gap: 4px;
align-items: center;
}
/* Override legacy .speed-btn (already 28px tall) to fit dock row. */
.lc-audio--dock .speed-btn,
.lc-audio--dock .loop-btn {
border-radius: var(--radius-sm, 6px);
}
/* The "More / Less" expand control — to the right of the core grid. */
.lc-audio-dock-expand {
background: none;
border: none;
font: 500 12px var(--font-interface, var(--font-sans, sans-serif));
color: var(--text-tertiary, var(--color-silver, #8a8780));
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
flex: none;
}
.lc-audio-dock-expand:hover {
color: var(--accent-primary, var(--color-accent, #c4704a));
}
.lc-audio-dock-expand-chev {
transition: transform 0.2s ease;
}
.lc-audio--dock.expanded .lc-audio-dock-expand-chev {
transform: rotate(180deg);
}
/* Expanded panel — voice / pause / loop, then range + shortcuts. */
.lc-audio-dock-expanded {
padding: 16px 16px 18px;
border-top: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
background: var(--bg-primary, var(--color-surface, #ffffff));
}
.lc-audio--dock.collapsed .lc-audio-dock-expanded { display: none; }
.lc-audio-row-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-bottom: 16px;
}
.lc-audio-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lc-audio-field .eyebrow {
margin: 0;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary, var(--color-silver, #8a8780));
}
.lc-audio-select.audio-select {
border: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
background: var(--bg-primary, var(--color-surface, #ffffff));
border-radius: var(--radius-sm, 6px);
padding: 8px 10px;
font: 500 13px var(--font-interface, var(--font-sans, sans-serif));
color: var(--text-primary, var(--color-carbon, #191918));
cursor: pointer;
width: 100%;
max-width: 100%;
}
/* Loop toggle — pill shape with leading dot. Maps legacy .active → .on. */
.loop-btn.lc-audio-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-secondary, var(--color-bg, #faf9f5));
border: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
border-radius: 999px;
padding: 4px 12px 4px 4px;
cursor: pointer;
font: 500 13px var(--font-interface, var(--font-sans, sans-serif));
color: var(--text-secondary, var(--color-graphite, #4a4946));
width: fit-content;
height: 28px;
}
.loop-btn.lc-audio-toggle .lc-audio-toggle-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bg-tertiary, var(--bg-tag, rgba(0, 0, 0, 0.08)));
transition: background 0.15s, box-shadow 0.15s;
}
.loop-btn.lc-audio-toggle.on,
.loop-btn.lc-audio-toggle.active {
color: var(--accent-primary, var(--color-accent, #c4704a));
border-color: var(--accent-primary, var(--color-accent, #c4704a));
background: var(--bg-secondary, var(--color-bg, #faf9f5));
}
.loop-btn.lc-audio-toggle.on .lc-audio-toggle-dot,
.loop-btn.lc-audio-toggle.active .lc-audio-toggle-dot {
background: var(--accent-primary, var(--color-accent, #c4704a));
box-shadow: inset 0 0 0 3px var(--bg-primary, var(--color-surface, #ffffff));
}
/* Range hint + clear button block. */
.lc-audio-advanced {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
}
.lc-audio-field--full { grid-column: 1 / -1; }
.lc-audio-range-hint {
margin: 0;
font-size: 11px;
color: var(--text-tertiary, var(--color-silver, #8a8780));
}
.lc-audio--dock .audio-clear-range-btn.lc-audio-range-btn {
border: 1px dashed var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
background: transparent;
border-radius: var(--radius-sm, 6px);
padding: 9px 12px;
font: 500 13px var(--font-interface, var(--font-sans, sans-serif));
color: var(--text-secondary, var(--color-graphite, #4a4946));
cursor: pointer;
text-align: left;
width: fit-content;
}
.lc-audio-shortcuts { grid-column: 2; }
.lc-audio-shortcut-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
font-size: 12px;
color: var(--text-secondary, var(--color-graphite, #4a4946));
margin-top: 6px;
}
.lc-audio-shortcut-grid > div {
display: flex;
align-items: center;
gap: 6px;
}
.lc-kbd {
font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
font-size: 11px;
padding: 2px 6px;
border: 1px solid var(--border-subtle, var(--color-border, rgba(60, 50, 40, 0.08)));
border-radius: 4px;
background: var(--bg-secondary, var(--color-bg, #faf9f5));
color: var(--text-secondary, var(--color-graphite, #4a4946));
line-height: 1;
}
/* Tablet & narrow desktop: collapse advanced row to single column. */
@media (max-width: 900px) {
.lc-audio-row-group { grid-template-columns: 1fr 1fr; }
.lc-audio-advanced { grid-template-columns: 1fr; }
.lc-audio-shortcuts { grid-column: 1; }
}
/* Mobile (≤640px): collapse the dock-main to wrap, hide step buttons & speed
labels but keep the play button + progress + speed buttons usable. T2-B will
replace this with a bottom-sheet variant. */
@media (max-width: 640px) {
.lc-audio-dock-wrap { padding: 0 12px; }
.lc-audio-dock-main { flex-wrap: wrap; gap: 12px; padding: 10px 12px; }
.lc-audio-core {
grid-template-columns: auto auto 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 8px;
}
.lc-audio--dock .lc-audio-step.audio-step-btn { display: none !important; }
.lc-audio-speed { grid-column: 1 / -1; }
.lc-audio-progress-group { grid-column: 1 / -1; }
.lc-audio-row-group { grid-template-columns: 1fr; gap: 12px; }
}
/* --- B.1 Reader bar — adapt to legacy reader-layout offset model ----
Production .reader-layout uses position:fixed top-bar at --top-bar-height.
The new .lc-reader-bar is sticky and flows in normal layout, so we drop
the margin-top offset that would otherwise leave a 40px gap above the
panels. The bar's eyebrow + title + meta stack naturally tall (~100px). */
body:has(.lc-reader-bar) .reader-layout {
margin-top: 0;
height: calc(100vh - 110px);
}
/* T1-A — hide the legacy .canvas-header (composer / work / subtitle stack)
when the new .lc-reader-bar is on the page. The bar already shows the
same eyebrow + h2 title + meta, so rendering both produced a duplicate
title on every reader page. The IDs (#header-composer / #header-title /
#header-subtitle) stay in the DOM so reader-v8.js updateUI() can still
read/write them for breadcrumb + history sync. */
body:has(.lc-reader-bar) .canvas-header {
display: none;
}
.lc-reader-bar {
/* Top bar lives inside normal flow; height auto so the eyebrow + h2
title + meta block can stack without the legacy 40px clamp. */
padding: 14px 24px 12px;
max-width: 1280px;
margin: 0 auto;
}
.lc-reader-bar .lc-rb-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.lc-reader-bar .lc-rb-eyebrow {
color: var(--text-tertiary);
}
.lc-reader-bar .lc-rb-title {
font-family: var(--font-libretto, Georgia, serif);
font-size: 22px;
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
color: var(--text-primary);
}
.lc-reader-bar .lc-rb-meta {
color: var(--text-tertiary);
font-size: 12px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Auth container inherits the bar's text color */
.lc-reader-bar #auth-container {
display: inline-flex;
align-items: center;
}
/* Theme + JSON + PDF + admin + sidebar buttons — restyle as lc-icon-btn */
.lc-reader-bar .top-bar-btn {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
width: 34px;
height: 34px;
padding: 0;
color: var(--text-secondary);
transition: color 120ms, border-color 120ms;
}
.lc-reader-bar .top-bar-btn:hover {
color: var(--accent-primary);
border-color: var(--accent-primary);
background: var(--accent-subtle);
}
.lc-reader-bar .top-bar-btn-label {
/* PDF / JSON labels — keep visible on desktop, hidden on narrow */
font-size: 11px;
margin-left: 4px;
letter-spacing: .04em;
text-transform: uppercase;
}
@media (max-width: 920px) {
.lc-reader-bar .top-bar-btn-label { display: none; }
}
/* Mobile: collapse the bar to a single horizontal row, hide the eyebrow/meta */
@media (max-width: 640px) {
body:has(.lc-reader-bar) .reader-layout {
height: calc(100vh - 56px);
}
.lc-reader-bar {
padding: 10px 12px;
}
.lc-reader-bar .lc-rb-eyebrow,
.lc-reader-bar .lc-rb-meta,
.lc-reader-bar .lc-cycle-nav { display: none; }
.lc-reader-bar .lc-rb-title { font-size: 16px; }
.lc-reader-bar .lc-toggle { display: none; } /* mobile uses .lc-m-layer-chips */
}
/* --- B.7 Mobile chrome (≤640px) ------------------------------------- */
@media (max-width: 640px) {
.lc-m-layer-chips {
display: flex;
gap: 6px;
margin: 8px 0 20px;
flex-wrap: wrap;
align-items: center;
}
.lc-m-chip {
font: 500 12px/1 var(--font-interface);
padding: 7px 11px;
border-radius: 999px;
border: 1px solid var(--border-subtle);
background: var(--bg-primary);
color: var(--text-secondary);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.lc-m-chip.on {
background: var(--accent-tint);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.lc-m-chip--hint {
border-style: dashed;
color: var(--text-tertiary);
font-weight: 400;
margin-left: auto;
}
/* Mobile reader top bar */
.lc-m-topbar {
display: flex;
align-items: center;
gap: 8px;
position: sticky;
top: 0;
z-index: 20;
background: var(--bg-primary);
border-bottom: 1px solid var(--border-subtle);
padding: 10px 8px;
height: 52px;
}
.lc-m-iconbtn {
background: none;
border: none;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
cursor: pointer;
flex: none;
-webkit-tap-highlight-color: transparent;
}
.lc-m-iconbtn:active { background: var(--bg-tertiary); }
.lc-m-breadcrumb {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 0 4px;
color: inherit;
cursor: pointer;
text-align: left;
}
.lc-m-crumb-arrow {
font-size: 18px;
color: var(--text-tertiary);
flex: none;
line-height: 1;
}
.lc-m-crumb-stack {
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.lc-m-crumb-scene {
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-libretto, Georgia, serif);
line-height: 1.2;
}
.lc-m-crumb-work {
font-size: 9.5px;
color: var(--text-tertiary);
letter-spacing: .12em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
line-height: 1.2;
text-transform: uppercase;
}
.lc-m-breadcrumb:active .lc-m-crumb-scene { color: var(--accent-primary); }
}
/* --- Sprint 4 / T2-B Mobile reader chrome (markup activation) ---------
The B.7 block above shipped tokens for `.lc-m-topbar`, `.lc-m-iconbtn`
and `.lc-m-breadcrumb` but never referenced `.lc-m-tabbar`, and never
added a default `display: none` for the desktop case. Sprint 4 adds:
1. Default-hide rules so .lc-m-* elements exist in DOM but only
render at viewport ≤640px (CSS-only gating, no JS responsibility).
2. Tabbar styles (fixed bottom nav, four tabs, active state, audio
playing dot) that mirror Reader.jsx:727-754.
3. Replacement of the old "collapse-to-row" behaviour for
.lc-reader-bar with a clean hide — the mobile bar takes over.
---------------------------------------------------------------- */
.lc-m-topbar,
.lc-m-tabbar,
.lc-m-drawer,
.lc-m-drawer-backdrop,
.lc-m-sheet,
.lc-m-sheet-backdrop,
.lc-m-search-overlay {
display: none; /* desktop default — flipped to block/flex at ≤640px */
}
@media (max-width: 640px) {
/* Replace desktop bar with mobile topbar entirely. The previous block
above (line 6071) collapsed .lc-reader-bar to a single padded row;
now we hide it completely because .lc-m-topbar is present. */
.lc-reader-bar { display: none !important; }
/* Reader-layout sits between the 52px sticky topbar and the 56px
fixed tabbar. The desktop rule reserves only top-bar height; on
mobile we must also reserve tabbar height so the libretto's last
lines aren't hidden behind the bottom nav. */
body:has(.lc-m-topbar) .reader-layout {
height: calc(100vh - 52px - 56px);
margin-top: 0;
}
/* Pad the libretto canvas so its last paragraph clears the tabbar
even when reader-layout overflow lets the user scroll past. */
body:has(.lc-m-tabbar) .canvas-inner { padding-bottom: 80px; }
/* Re-assert topbar display:flex inside this @media block. The earlier
B.7 block (line 6113) sets this rule too, but the default-off
rule above us would otherwise win on source order alone. Listing
it here keeps the on/off pair adjacent and source-order-correct. */
.lc-m-topbar { display: flex; }
/* B.7 Tabbar — fixed-bottom 56px, 4 icon-over-label tabs --------- */
.lc-m-tabbar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 56px;
background: var(--bg-primary, var(--color-cream, #f7efe4));
border-top: 1px solid var(--color-border, var(--border-subtle));
z-index: 30;
padding: 4px env(safe-area-inset-right, 0)
env(safe-area-inset-bottom, 0)
env(safe-area-inset-left, 0);
}
.lc-m-tab {
flex: 1 1 0;
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 4px 2px;
color: var(--text-tertiary, var(--color-silver));
font: 500 10px/1 var(--font-interface);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color .12s var(--ease-standard);
}
.lc-m-tab.active {
color: var(--accent-primary, var(--color-accent));
}
.lc-m-tab-icon {
position: relative;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lc-m-tab-icon svg { display: block; }
.lc-m-tab-label {
font-size: 10px;
letter-spacing: .02em;
font-weight: 500;
}
/* Audio tab gets a pulsing accent dot when audio is playing. The dot
lives inside .lc-m-tab-icon so swapping play/pause SVG glyphs
doesn't lose the indicator. JS toggles `.playing` on .lc-m-tab--audio
in step with #play-audio's state. */
.lc-m-tab--audio .lc-m-tab-audio-dot {
position: absolute;
top: -2px;
right: -3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-primary, var(--color-accent));
opacity: 0;
transition: opacity .15s var(--ease-standard);
}
.lc-m-tab--audio.playing .lc-m-tab-audio-dot {
opacity: 1;
animation: lc-m-tab-audio-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-m-tab-audio-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.4); opacity: 1.0; }
}
/* =============================================================
Sprint 8a — Mobile scenes drawer.
Verbatim port of design styles.css:525-537 (.lc-m-drawer*).
The menu button in .lc-m-topbar opens this drawer; backdrop
tap or close button closes it. Markup lives in templates/
reader.html and mirrors the cycle-songs / standalone scene
rail that the desktop left-panel renders, so mobile users
finally have scene navigation. Sheets and search overlay
are deferred — separate sprints.
============================================================= */
.lc-m-drawer-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(20, 20, 19, 0.42);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
z-index: 40;
}
.lc-m-drawer-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.lc-m-drawer {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 84%;
max-width: 340px;
background: var(--bg-primary);
z-index: 41;
transform: translateX(-100%);
transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
overflow-y: auto;
padding-bottom: 24px;
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.08);
}
.lc-m-drawer.open {
transform: translateX(0);
}
.lc-m-drawer-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px 16px 12px;
border-bottom: 1px solid var(--border-subtle);
}
.lc-m-drawer-title {
margin: 2px 0 0;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
}
.lc-m-drawer-back {
display: block;
padding: 12px 16px;
font-size: 13px;
color: var(--accent-primary);
text-decoration: none;
cursor: pointer;
}
.lc-m-drawer-section {
padding: 16px 16px 6px;
}
.lc-m-drawer .lc-scene {
margin: 0 8px;
}
/* =============================================================
Sprint 8b — Mobile bottom sheets (focus + audio) and full-
screen search overlay. Verbatim port of design styles.css
lines 540-617 (.lc-m-sheet*, .lc-m-search-overlay*).
Multi-detent geometry:
detent 0 = peek (~28vh) — backdrop hidden so libretto stays
visible/tappable
detent 1 = mid (~52vh) — backdrop hidden in design; we
leave it that way
detent 2 = full (~86vh) — backdrop active
JS in static/reader-helpers.js drives detent transitions via
touch drag + tabbar bindings (audio sheet) + selectedWord
(focus sheet, hooked to existing word-tap handlers).
============================================================= */
.lc-m-sheet-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(20, 20, 19, 0.42);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
z-index: 50;
}
.lc-m-sheet-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.lc-m-sheet {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 51;
background: var(--bg-primary);
border-top-left-radius: 14px;
border-top-right-radius: 14px;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15);
transform: translateY(100%);
transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1),
height 0.26s cubic-bezier(0.32, 0.72, 0, 1);
overflow: hidden;
touch-action: none;
height: 28vh;
}
.lc-m-sheet.open { transform: translateY(0); }
.lc-m-sheet.dragging { transition: none; }
.lc-m-sheet--detent-1 { height: 52vh; }
.lc-m-sheet--detent-2 { height: 86vh; }
/* Grab handle — generous tap target for reliable dragging */
.lc-m-sheet-grab-zone {
padding: 8px 0 4px;
display: flex;
justify-content: center;
cursor: grab;
touch-action: none;
}
.lc-m-sheet-grab-zone:active { cursor: grabbing; }
.lc-m-sheet-grab {
width: 36px;
height: 4px;
border-radius: 2px;
background: #d6d3cc;
}
[data-theme="dark"] .lc-m-sheet-grab { background: #3a3836; }
.lc-m-sheet-body {
padding: 4px 18px 20px;
overflow-y: auto;
height: 100%;
box-sizing: border-box;
/* Reserve bottom space so last row isn't behind tabbar */
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
}
.lc-m-sheet-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
}
.lc-m-sheet-word {
font-size: 26px;
line-height: 1.1;
color: var(--text-primary);
font-weight: 600;
}
.lc-m-sheet-ipa {
font-size: 15px;
color: var(--text-secondary);
margin-top: 2px;
}
.lc-m-sheet-pos { margin-top: 4px; }
.lc-m-sheet-gloss {
font-family: var(--font-literary, serif);
font-size: 17px;
color: var(--text-primary);
line-height: 1.4;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
}
/* Progressive reveal: detent 0 hides tier 1+2; detent 1 shows
tier 1; detent 2 shows all. */
.lc-m-sheet-tier { display: none; }
.lc-m-sheet--detent-1 .lc-m-sheet-tier--1,
.lc-m-sheet--detent-2 .lc-m-sheet-tier--1,
.lc-m-sheet--detent-2 .lc-m-sheet-tier--2 { display: block; }
.lc-m-sheet-note {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.55;
padding: 12px 14px;
background: var(--bg-secondary);
border-radius: var(--radius-sm, 4px);
border: 1px solid var(--border-subtle);
margin-bottom: 14px;
}
.lc-m-sheet-actions { display: flex; gap: 8px; }
.lc-m-sheet-action {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 8px;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm, 4px);
font: 500 13px var(--font-interface);
color: var(--text-secondary);
cursor: pointer;
}
.lc-m-sheet-action:active { background: var(--bg-tertiary); }
/* Audio sheet — simplified controls. The desktop audio dock
(#audio-dock) renders the canonical UI; the sheet shows a
light replica (voice / speed / loop / range) with a link
to "Open full controls" that scrolls the full dock into
view. We don't duplicate state — controls inside the sheet
reference the same #voice-select, #speed-slider, etc. via
cloned-id-free helper inputs that JS keeps in sync, OR the
sheet body lifts the existing #audio-dock-expanded subtree
in via JS at open-time. We pick the "lift" approach (less
JS, no duplicate IDs). */
.lc-m-sheet--audio .lc-m-sheet-body {
padding-top: 2px;
}
.lc-m-sheet-audio-link {
display: inline-block;
margin-top: 14px;
padding: 10px 12px;
font: 500 13px var(--font-interface);
color: var(--accent-primary);
background: none;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm, 4px);
cursor: pointer;
text-decoration: none;
}
/* ----- Search / command overlay ---------------------------
Full-screen scrim that wraps the existing Cmd+K palette
on mobile. The overlay itself is just a backdrop layer;
the palette markup (#command-palette-overlay) continues
to render the actual search UI (its own scrim hides on
mobile via the rule below so we don't double-stack).
----------------------------------------------------- */
.lc-m-search-overlay {
display: none; /* shown via .open class */
position: fixed;
inset: 0;
background: rgba(20, 20, 19, 0.42);
z-index: 60;
align-items: flex-start;
justify-content: center;
padding: 56px 12px 12px;
}
.lc-m-search-overlay.open { display: flex; }
.lc-m-search-panel {
background: var(--bg-primary);
border-radius: 12px;
width: 100%;
max-width: 360px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
border: 1px solid var(--border-subtle);
}
.lc-m-search-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-tertiary);
}
.lc-m-search-input {
flex: 1;
border: none;
outline: none;
background: none;
font: 500 15px var(--font-interface);
color: var(--text-primary);
}
.lc-m-search-input::placeholder {
color: var(--text-tertiary);
font-weight: 400;
}
/* When the mobile search overlay is open, hide the palette's
own scrim so we don't get a darkened-on-darkened stack —
the overlay supplies the scrim, the palette supplies the
interactive panel inside it. */
body.lc-m-search-active .lc-cmdk-scrim {
background: transparent;
}
}
/* Print: never include mobile chrome in printed output */
@media print {
.lc-m-topbar,
.lc-m-tabbar,
.lc-m-drawer,
.lc-m-drawer-backdrop,
.lc-m-sheet,
.lc-m-sheet-backdrop,
.lc-m-search-overlay {
display: none !important;
}
}
/* =====================================================================
READER DESIGN — Sprint claude-design-port-sprint-1 / scene anonymous
----------------------------------------------------------------------
Two-row top-bar with the brand row sliding out + tier-aware focus
panel + scene-active progress underline. Mirrors the canvas
reader-desktop-scene-anonymous.html (anonymous) and scene-default.html
(signed-in free).
===================================================================== */
/* ---- Top-bar stack: outer sticky wrapper that holds both rows ------- */
.lc-topbar-stack {
position: sticky;
top: 0;
z-index: 6;
background: var(--bg-primary);
}
/* ---- Brand row (slides out) ----------------------------------------- */
.lc-topbar-brand {
display: flex;
align-items: center;
gap: 28px;
padding: 14px 0 12px;
border-bottom: 1px solid var(--border-subtle);
overflow: hidden;
max-height: 64px;
opacity: 1;
transition: max-height 220ms var(--ease-standard, cubic-bezier(.4,0,.2,1)),
padding 220ms var(--ease-standard, cubic-bezier(.4,0,.2,1)),
opacity 140ms ease,
transform 220ms var(--ease-standard, cubic-bezier(.4,0,.2,1)),
border-color 140ms ease;
transform-origin: top center;
}
.lc-topbar-brand.is-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transform: translateY(-6px);
border-bottom-color: transparent;
}
.lc-topbar-brand-mark {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display, var(--font-serif, serif));
font-size: 17px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--text-primary);
text-decoration: none;
}
.lc-topbar-brand-mark svg {
width: 20px;
height: 20px;
color: var(--accent-primary, var(--color-accent, #c4704a));
}
.lc-topbar-brand-links {
display: flex;
gap: 22px;
margin-left: auto;
}
.lc-topbar-brand-link {
font-size: 13px;
color: var(--text-secondary);
text-decoration: none;
transition: color 120ms var(--ease-standard);
}
.lc-topbar-brand-link:hover { color: var(--accent-primary, var(--color-accent)); }
.lc-topbar-brand-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* While the brand row is hidden, the meta-row carries no double-border. */
.lc-topbar-stack .lc-reader-bar { border-top: 0; }
/* The sentinel is a 1px-tall invisible probe at the bottom of the brand
row's natural position. When it scrolls out of view (i.e. the user has
passed the brand row), JS toggles .is-hidden on the brand row above. */
#lc-topbar-sentinel {
height: 1px;
margin-top: -1px;
pointer-events: none;
}
/* Reduced motion: collapse instantly, no slide. */
@media (prefers-reduced-motion: reduce) {
.lc-topbar-brand { transition: none; }
.lc-topbar-brand.is-hidden { transform: none; }
}
/* ---- Anonymous sign-in banner (gold-key card) ----------------------- */
.lc-topbar-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
margin: 14px 0 0;
border-radius: 10px;
background: var(--tier-pro-tint, #f2ecdb);
border: 1px solid color-mix(in srgb, var(--tier-pro-accent, #b8944a) 24%, transparent);
}
.lc-topbar-banner-mark {
flex: none;
color: var(--tier-pro-accent, #b8944a);
width: 36px;
height: 36px;
border-radius: 50%;
background: color-mix(in srgb, var(--tier-pro-accent, #b8944a) 14%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.lc-topbar-banner-body { flex: 1; min-width: 0; }
.lc-topbar-banner-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.lc-topbar-banner-sub {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.4;
}
.lc-topbar-banner-cta {
flex: none;
background: var(--tier-pro-accent, #b8944a);
color: #fff;
text-decoration: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
transition: filter 120ms ease;
}
.lc-topbar-banner-cta:hover { filter: brightness(1.06); }
/* ---- Focus panel: tier-locked anonymous state ----------------------- */
.lc-focus-lock--anonymous {
padding: 36px 22px 28px;
border: 1px dashed color-mix(in srgb, var(--tier-pro-accent, #b8944a) 30%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--tier-pro-tint, #f2ecdb) 50%, transparent);
margin: 12px;
}
.lc-focus-lock-key {
color: var(--tier-pro-accent, #b8944a);
margin-bottom: 14px;
}
.lc-focus-lock-eyebrow {
color: var(--tier-pro-accent, #b8944a);
margin-bottom: 6px;
}
.lc-focus-lock-cta {
display: inline-block;
margin-top: 16px;
background: var(--tier-pro-accent, #b8944a);
color: #fff;
text-decoration: none;
padding: 8px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
transition: filter 120ms ease;
}
.lc-focus-lock-cta:hover { filter: brightness(1.06); }
/* ---- Focus panel footer demo CTA ------------------------------------ */
.lc-focus-footer-cta {
padding: 12px 14px 16px;
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: center;
}
.lc-focus-demo-link {
font-size: 12px;
color: var(--text-tertiary);
text-decoration: none;
}
.lc-focus-demo-link:hover { color: var(--accent-primary, var(--color-accent)); }
.lc-focus-demo-pill {
display: inline-block;
background: var(--tier-pro-accent, #b8944a);
color: #fff;
text-decoration: none;
padding: 7px 22px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 500;
transition: filter 120ms ease;
}
.lc-focus-demo-pill:hover { filter: brightness(1.06); }
/* ---- Scene timeline: terracotta progress underline on active -------- */
.sidebar-scene.active {
position: relative;
}
.sidebar-scene.active::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
bottom: 4px;
height: 2px;
background: var(--accent-primary, var(--color-accent, #c4704a));
border-radius: 1px;
opacity: .7;
transform-origin: left center;
/* Width-fraction is set via inline style by JS as
`style="--scene-progress: 0.42"`. CSS reads it via scaleX. */
transform: scaleX(var(--scene-progress, 1));
transition: transform 160ms var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
.sidebar-scene.active::after { transition: none; }
}
/* ---- Lean Scenes rail (left timeline) ------------------------------
The legacy timeline JS renders a richer rail with shape icons,
character meta, and incipits. The design's reader-desktop-scene-*.html
uses a much simpler "SCENES" list — one row per scene, title + short
meta, with the active row carrying the terracotta progress underline.
Inside `.lc-scenes-rail`, hide the visual cruft so the JS-driven
markup reads as the design intends. */
.lc-scenes-rail .sidebar-scene-shape,
.lc-scenes-rail .sidebar-scene-divider,
.lc-scenes-rail .sidebar-act-line {
display: none;
}
/* Incipit + meta — inline-styled by reader-ingested.js / reader-full-libretto.js
so override with !important. The design's lean SCENES list is title-only; the
character roster + line counts make the rail crowded. */
.lc-scenes-rail .sidebar-scene-incipit,
.lc-scenes-rail .sidebar-scene-meta {
display: none !important;
}
.lc-scenes-rail .sidebar-act-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-tertiary);
margin: 12px 0 4px 4px;
font-weight: 600;
}
.lc-scenes-rail .sidebar-scenes {
gap: 0;
}
.lc-scenes-rail .sidebar-scene {
padding: 9px 10px 11px;
margin-left: 0;
align-items: center;
}
.lc-scenes-rail .sidebar-scene-info {
flex: 1;
min-width: 0;
}
.lc-scenes-rail .sidebar-scene-title {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lc-scenes-rail .sidebar-scene-meta {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 2px;
}
/* Active scene title in italic, terracotta accent — matches the design's
active-scene styling with the bottom progress underline already shipped
in the .sidebar-scene.active::after rule above. */
.lc-scenes-rail .sidebar-scene.active .sidebar-scene-title {
color: var(--accent-primary, var(--color-accent, #c4704a));
font-style: italic;
font-weight: 600;
}
/* The free-tier "Sign in to explore every scene" upsell card — already
covered by the gold-key banner at the top + focus-panel lock; the
in-rail duplicate adds noise. Hide it inside the lean Scenes rail. */
.lc-scenes-rail .focus-banner,
.lc-scenes-rail .focus-banner--upgrade,
.lc-scenes-rail .timeline-gated-cta {
display: none;
}
/* Likewise drop the cast-panel sign-in upsell ("Filter the score by
character") — the topbar gold-key banner already lives in the same
page region and CTAs duplicate. */
.panel-section[data-section="cast"] .gated-overlay[data-gated-feature="cast_list"] {
display: none;
}
/* End design-port-sprint-1 reader port ================================ */
/* End B.1–B.7 design port ============================================== */