/*
* Lyric Companion Design System
* Aesthetic: Notion/Linear Style - Light Mode Default with Dark Mode Toggle
* Typography: DM Sans (Single font family with weight hierarchy)
*/
/* Fonts loaded via in HTML for faster rendering */
/* ===== CSS VARIABLES - LIGHT THEME (Default) ===== */
:root {
/* Typography */
--font-interface: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
/* Backgrounds */
--bg-primary: #faf9f5;
--bg-secondary: #ffffff;
--bg-tertiary: #f0ede6;
--bg-sidebar: #ffffff;
/* Text */
--text-primary: #191918;
--text-secondary: #4a4946;
--text-tertiary: #8a8780;
--text-muted: #d6d3cc;
/* Accent (Warm terracotta) */
--accent-primary: #c4704a;
--accent-hover: #a85d3d;
--accent-subtle: #faf0ea;
--accent-ring: rgba(196, 112, 74, 0.28);
/* Tier overlays — Free uses --accent-primary (terracotta key);
Pro uses --tier-pro-accent (gilt gold spark).
Source: docs/design/claude-design-export/project/colors_and_type.css */
--tier-pro-accent: #b8944a;
--tier-pro-tint: #f2ecdb;
--tier-free-tint: #f7efe4;
/* Status colors */
--color-success: #6a8a5d;
--color-warning: #c4944a;
--color-error: #c87c6f;
/* Borders & Shadows — two-layer per colors_and_type.css */
--border-subtle: #e5e0d8;
--border-default: #d6d3cc;
--shadow-sm: 0 1px 2px 0 rgba(25, 25, 24, 0.05);
--shadow-md: 0 4px 12px -2px rgba(25, 25, 24, 0.07), 0 2px 4px -2px rgba(25, 25, 24, 0.05);
--shadow-lg: 0 12px 32px -8px rgba(25, 25, 24, 0.10), 0 4px 8px -4px rgba(25, 25, 24, 0.05);
--shadow-focus: 0 0 0 3px var(--accent-ring);
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* Numeric spacing aliases (design system shorthand — used by ported components) */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
/* Type scale (design system shorthand — used by ported components) */
--text-xs: 12px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
/* Status tints (design background tints for success/warning/error states) */
--status-success-bg: #eef2ea;
--status-warning-bg: #f6ecd9;
--status-error-bg: #f5e4e1;
--status-success: var(--color-success);
--status-warning: var(--color-warning);
--status-error: var(--color-error);
/* Accent tint — softer than --accent-subtle, used by audio dock + word hover */
--accent-tint: rgba(196, 112, 74, 0.10);
/* Layout */
--sidebar-width: 20%;
--canvas-width: 80%;
/* Motion — easings + transitions */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasize: cubic-bezier(0.2, 0, 0, 1.2);
--transition-fast: 120ms var(--ease-standard);
--transition-normal: 220ms var(--ease-standard);
--transition-slow: 320ms var(--ease-standard);
/* Type rhythm — leading + tracking */
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-normal: 1.55;
--leading-libretto: 1.75;
--tracking-tight: -0.02em;
--tracking-display: -0.03em;
--tracking-normal: 0;
--tracking-eyebrow: 0.08em;
/* Border radius (shared design tokens) */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Reader-compatible aliases
Note: spacing tokens intentionally differ between archiv and reader:
archiv --space-lg: 24px vs reader --spacing-lg: 32px (different page contexts).
Border approach also differs: archiv uses solid hex, reader uses rgba overlays.
Both are by design — do NOT alias spacing or border values across files. */
--color-bg: var(--bg-primary);
--color-surface: var(--bg-secondary);
--color-carbon: var(--text-primary);
--color-graphite: var(--text-secondary);
--color-silver: var(--text-tertiary);
--color-accent: var(--accent-primary);
--color-border: var(--border-subtle);
--color-muted: var(--text-muted);
--font-ui: var(--font-interface);
}
/* =============================================================
CLAUDE DESIGN — shared primitives loaded on every page.
These were ported from docs/design/claude-design-export/project/
ui_kits/webapp/styles.css and live here (archive.css is shared)
instead of duplicating them in pricing.css / landing.css.
============================================================= */
.eyebrow { font-family: var(--font-interface); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.accent { color: var(--accent-primary); }
.lc-page { max-width: 1180px; margin: 0 auto; padding: 48px 24px 96px; }
.lc-page-head { margin-bottom: 32px; }
.lc-page-head h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0 0; }
.lc-page-sub { font-size: 17px; color: var(--text-secondary); line-height: 1.55; max-width: 580px; margin: 14px auto 0; }
.lc-btn {
font-family: var(--font-interface);
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: var(--radius-md);
border: 1px solid transparent;
transition: all .12s;
text-decoration: none;
line-height: 1;
justify-content: center;
}
.lc-btn--md { font-size: 14px; padding: 11px 20px; }
.lc-btn--sm { font-size: 13px; padding: 7px 14px; }
.lc-btn--primary { background: var(--accent-primary); color: #fff; }
.lc-btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.lc-btn--primary:active { transform: scale(0.98); }
.lc-btn--secondary { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-default); }
.lc-btn--secondary:hover { border-color: var(--text-tertiary); }
.lc-btn--ghost { background: transparent; color: var(--text-secondary); }
.lc-btn--ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.lc-btn--gilt { background: var(--tier-pro-accent, #b8944a); color: #fff; }
.lc-btn--gilt:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }
/* ===== CSS VARIABLES - DARK THEME ===== */
[data-theme="dark"] {
/* Backgrounds */
--bg-primary: #141413;
--bg-secondary: #1e1d1b;
--bg-tertiary: #2a2926;
--bg-sidebar: #1e1d1b;
/* Text */
--text-primary: #f5f4f0;
--text-secondary: #a8a59e;
--text-tertiary: #787570;
--text-muted: #4a4845;
/* Accent (adjusted for dark) */
--accent-primary: #d4896a;
--accent-hover: #c4704a;
--accent-subtle: #3a2a22;
--accent-ring: rgba(212, 137, 106, 0.32);
/* Tier overlays (dark) */
--tier-pro-accent: #d4b56e;
--tier-pro-tint: #2a2516;
--tier-free-tint: #24201a;
/* Status tints (dark) */
--status-success-bg: #1f2a1c;
--status-warning-bg: #2c2517;
--status-error-bg: #2c1d1b;
/* Accent tint (dark) */
--accent-tint: rgba(212, 137, 106, 0.16);
/* Borders & Shadows — dark uses single-layer per colors_and_type.css */
--border-subtle: #2a2926;
--border-default: #3f3d3a;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
}
/* ===== SKIP LINK (Accessibility) ===== */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
padding: 8px 16px;
background: var(--accent-primary);
color: var(--bg-primary);
font-family: var(--font-interface);
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 & BASE ===== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
font-family: var(--font-interface);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--text-primary);
background-color: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ===== LAYOUT: SPLIT SCREEN ===== */
.app-container {
display: flex;
height: 100vh;
width: 100vw;
}
/* Zone A: Taxonomy Sidebar */
.sidebar {
width: var(--sidebar-width);
min-width: 240px;
max-width: 320px;
height: 100%;
background-color: var(--bg-sidebar);
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Zone B: Archive Canvas */
.canvas {
flex: 1;
height: 100%;
background-color: var(--bg-primary);
overflow-y: auto;
overflow-x: hidden;
}
/* ===== SIDEBAR COMPONENTS ===== */
/* Header / Ingest Button */
.sidebar-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--border-subtle);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
/* Theme Toggle Button */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bg-tertiary);
border: none;
border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.theme-toggle:hover {
background: var(--border-subtle);
color: var(--text-primary);
}
.theme-toggle svg {
width: 18px;
height: 18px;
}
.theme-toggle .sun-icon {
display: none;
}
.theme-toggle .moon-icon {
display: block;
}
[data-theme="dark"] .theme-toggle .sun-icon {
display: block;
}
[data-theme="dark"] .theme-toggle .moon-icon {
display: none;
}
.ghost-button {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
flex: 1;
padding: var(--space-sm) var(--space-md);
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-secondary);
font-family: var(--font-interface);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.ghost-button:hover {
border-color: var(--border-default);
color: var(--text-primary);
background: var(--bg-secondary);
}
.ghost-button:active {
background: var(--bg-tertiary);
}
/* Inline Filter Search (Composer) */
.filter-search-inline {
padding: 0 0 8px 0;
}
.filter-search-input {
width: 100%;
padding: 4px 8px;
background: var(--bg-tertiary);
border: 1px solid transparent;
border-radius: 6px;
color: var(--text-primary);
font-family: var(--font-interface);
font-size: 12px;
}
.filter-search-input::placeholder {
color: var(--text-tertiary);
}
.filter-search-input:focus {
outline: none;
border-color: var(--accent-primary);
background: var(--bg-secondary);
}
.composer-checkbox-list {
max-height: 240px;
overflow-y: auto;
}
/* ===== CANVAS COMPONENTS ===== */
/* Global Search - main styles at end of file */
.global-search .search-dropdown {
left: var(--space-xl);
right: var(--space-xl);
width: auto;
max-width: 600px;
}
.search-input {
width: 100%;
padding: var(--space-md);
padding-right: 50px;
background: var(--bg-tertiary);
border: 1px solid transparent;
border-radius: 8px;
color: var(--text-primary);
font-family: var(--font-interface);
font-size: 15px;
font-weight: 400;
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.search-input::placeholder {
color: var(--text-tertiary);
}
.search-input:focus {
outline: none;
border-color: var(--accent-primary);
background: var(--bg-secondary);
box-shadow: var(--shadow-focus);
}
/* Composer Section */
.composer-section {
padding: var(--space-xl) var(--space-xl) var(--space-lg);
position: relative;
}
.composer-section-header {
font-family: var(--font-interface);
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.2;
user-select: none;
position: sticky;
top: 0;
left: 0;
padding: var(--space-md) var(--space-xl);
background: linear-gradient(180deg, var(--bg-primary) 80%, transparent);
z-index: 10;
margin-bottom: var(--space-sm);
}
.composer-operas {
position: relative;
z-index: 1;
padding-top: var(--space-lg);
}
/* Opera Strip */
.opera-strip {
display: flex;
align-items: center;
padding: var(--space-lg);
margin-bottom: var(--space-md);
background: var(--bg-secondary);
border-radius: 12px;
border: 1px solid var(--border-subtle);
gap: var(--space-xl);
transition: border-color var(--transition-fast), background var(--transition-fast);
position: relative;
}
.opera-strip:hover {
border-color: var(--border-default);
}
.opera-strip::before {
content: '';
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
background: var(--accent-primary);
border-radius: 0 2px 2px 0;
opacity: 0;
transition: opacity var(--transition-fast);
}
.opera-strip:hover::before {
opacity: 1;
}
.opera-strip.opera-pending {
opacity: 0.45;
}
.opera-strip.opera-pending:hover {
opacity: 0.7;
}
.opera-identity {
flex-shrink: 0;
width: 240px;
}
.opera-title {
font-family: var(--font-interface);
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: color var(--transition-fast);
text-decoration: none;
display: block;
}
.opera-title:hover {
color: var(--accent-primary);
}
.opera-meta {
font-size: 13px;
color: var(--text-secondary);
margin-top: var(--space-xs);
}
/* Opera Type Summary */
.opera-type-summary {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 2px;
}
/* Collapsed vertical timeline: hide entirely */
.vertical-timeline.collapsed {
display: none;
}
/* Timeline Legend */
.timeline-legend {
display: none;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--border-subtle);
}
/* Show legend when timeline is expanded */
.opera-strip:has(.opera-timeline:not(.collapsed)) .timeline-legend {
display: flex;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: var(--text-tertiary);
}
.legend-dot {
display: inline-block;
width: 8px;
height: 8px;
border: 1.5px solid var(--accent-primary);
background: var(--bg-secondary);
}
.legend-dot.node-aria {
border-radius: 50%;
}
.legend-dot.node-duet {
border-radius: 0;
transform: rotate(45deg);
width: 6px;
height: 6px;
}
.legend-dot.node-ensemble {
border-radius: 1px;
}
.legend-dot.node-chorus {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: var(--accent-primary);
border: none;
width: 9px;
height: 8px;
}
.legend-dot.node-recit {
width: 5px;
height: 5px;
border-width: 1px;
background: var(--text-tertiary);
border-color: var(--text-tertiary);
}
/* Chronological Track */
.opera-timeline {
flex: 1;
display: flex;
align-items: center;
position: relative;
min-height: 48px;
}
.timeline-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border-subtle);
}
.timeline-nodes {
display: flex;
align-items: center;
gap: 0;
position: relative;
z-index: 1;
padding: 0 var(--space-md);
}
/* Act Grouping */
.act-group {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.act-label {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
margin-right: var(--space-sm);
user-select: none;
}
.act-nodes {
display: flex;
align-items: center;
}
.act-separator {
width: 1px;
height: 24px;
background: var(--border-default);
margin: 0 var(--space-lg);
opacity: 0.5;
}
.scene-node {
position: relative;
cursor: pointer;
}
.scene-dot {
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-primary);
border: 2px solid var(--accent-primary);
transition: all var(--transition-fast);
text-decoration: none;
}
/* --- Shapes --- */
/* Aria (Circle - Default) */
.node-aria {
border-radius: 50%;
background: var(--bg-secondary);
border-color: var(--accent-primary);
}
/* Duet (Diamond) */
.node-duet {
border-radius: 0;
transform: rotate(45deg);
width: 12px;
height: 12px;
background: var(--bg-secondary);
border-color: var(--accent-primary);
}
/* Ensemble (Square) */
.node-ensemble {
border-radius: 2px;
background: var(--bg-secondary);
border-color: var(--accent-primary);
}
/* Chorus (Hexagon) */
.node-chorus {
border-radius: 0;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: var(--accent-primary);
border: none;
width: 16px;
height: 14px;
}
/* Recit (Small Dot) */
.node-recit {
width: 8px;
height: 8px;
border-width: 1px;
opacity: 0.6;
background: var(--text-tertiary);
border-color: var(--text-tertiary);
}
.scene-dot.hollow {
background: transparent;
border-color: var(--text-tertiary);
}
.scene-dot.error {
background: var(--color-error);
border-color: var(--color-error);
}
/* Update hover states - subtle scaling (Notion-style) */
.scene-node:hover .node-aria {
transform: scale(1.05);
background: var(--accent-primary);
}
.scene-node:hover .node-duet {
transform: scale(1.05) rotate(45deg);
background: var(--accent-primary);
}
.scene-node:hover .node-ensemble {
transform: scale(1.05);
background: var(--accent-primary);
}
.scene-node:hover .node-chorus {
transform: scale(1.05);
}
.scene-node:hover .node-recit {
transform: scale(1.1);
opacity: 1;
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.scene-label {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: var(--text-tertiary);
white-space: nowrap;
margin-bottom: var(--space-xs);
}
/* Scene Tooltip */
.scene-tooltip {
position: absolute;
bottom: calc(100% + 16px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: var(--space-md);
min-width: 200px;
max-width: 280px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s var(--ease-standard), transform 0.2s var(--ease-standard), visibility 0.2s;
z-index: 1000;
box-shadow: var(--shadow-lg);
pointer-events: none;
}
.scene-node:hover .scene-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.tooltip-title {
font-weight: 600;
margin-bottom: var(--space-xs);
font-size: 13px;
color: var(--text-primary);
}
.tooltip-section {
font-size: 11px;
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-xs);
}
.tooltip-incipit {
font-style: italic;
color: var(--text-secondary);
font-size: 12px;
margin-bottom: var(--space-sm);
}
.tooltip-stat {
font-size: 11px;
color: var(--text-tertiary);
}
.tooltip-stat strong {
color: var(--color-success);
}
/* ===== MODAL: SMART INGEST ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
}
[data-theme="dark"] .modal-overlay {
background: rgba(0, 0, 0, 0.75);
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 12px;
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.modal-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-family: var(--font-interface);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.modal-close {
background: none;
border: none;
color: var(--text-tertiary);
font-size: 24px;
cursor: pointer;
line-height: 1;
padding: var(--space-xs);
border-radius: 6px;
transition: all var(--transition-fast);
}
.modal-close:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.modal-body {
padding: var(--space-xl);
}
/* Drop Zone */
.drop-zone {
border: 2px dashed var(--border-default);
border-radius: 12px;
padding: var(--space-2xl);
text-align: center;
transition: all var(--transition-fast);
}
.drop-zone.dragover {
border-color: var(--accent-primary);
background: var(--accent-subtle);
}
.drop-zone-text {
color: var(--text-secondary);
font-size: 14px;
}
.drop-zone-text strong {
color: var(--text-primary);
display: block;
font-size: 16px;
margin-bottom: var(--space-sm);
}
/* Confirmation Grid */
.confirm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.confirm-field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.confirm-field.full {
grid-column: 1 / -1;
}
.confirm-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.confirm-input {
padding: var(--space-sm) var(--space-md);
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-primary);
font-family: var(--font-interface);
font-size: 14px;
}
.confirm-input:focus {
outline: none;
border-color: var(--accent-primary);
background: var(--bg-secondary);
}
/* Collision Actions */
.collision-actions {
display: flex;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.action-btn {
flex: 1;
padding: var(--space-sm) var(--space-md);
border: none;
border-radius: 8px;
font-family: var(--font-interface);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.action-btn.primary {
background: var(--accent-primary);
color: var(--bg-primary);
}
.action-btn.primary:hover {
background: var(--accent-hover);
}
.action-btn.secondary {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
}
.action-btn.secondary:hover {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-default);
}
/* Module Toggles */
.module-toggles {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.module-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm) var(--space-md);
background: var(--bg-tertiary);
border-radius: 8px;
}
.module-name {
font-size: 13px;
color: var(--text-secondary);
}
.module-select {
padding: var(--space-xs) var(--space-sm);
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 6px;
color: var(--text-primary);
font-family: var(--font-interface);
font-size: 12px;
cursor: pointer;
}
.module-select:focus {
outline: none;
border-color: var(--accent-primary);
}
/* Libretto Textarea */
.libretto-textarea {
width: 100%;
min-height: 250px;
padding: var(--space-md);
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-primary);
font-family: var(--font-interface);
font-size: 14px;
line-height: 1.6;
resize: vertical;
}
.libretto-textarea::placeholder {
color: var(--text-tertiary);
}
.libretto-textarea:focus {
outline: none;
border-color: var(--accent-primary);
background: var(--bg-secondary);
}
/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-default);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* ===== UTILITIES ===== */
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
/* ===== SEARCH DROPDOWN ===== */
.search-dropdown {
position: absolute;
top: 100%;
left: 40px;
width: 600px;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
max-height: 400px;
overflow-y: auto;
z-index: 101;
box-shadow: var(--shadow-lg);
}
.search-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background var(--transition-fast);
}
.search-item:last-child {
border-bottom: none;
}
.search-item:hover,
.search-item.active {
background: var(--accent-subtle);
}
.search-badge {
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-tertiary);
color: var(--text-secondary);
min-width: 50px;
text-align: center;
}
.search-info {
flex: 1;
}
.search-main {
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
}
.search-incipit {
color: var(--text-secondary);
font-size: 13px;
font-weight: 400;
line-height: 1.3;
}
.search-alt {
color: var(--text-secondary);
font-size: 12px;
font-style: italic;
}
.search-sub {
color: var(--text-tertiary);
font-size: 12px;
}
/* ===== FILTER SECTION IN SIDEBAR ===== */
.filter-section {
border-bottom: 1px solid var(--border-subtle);
padding: var(--space-sm) 0;
}
.filter-group-header {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
padding: 12px 24px 4px;
margin-top: 4px;
}
.filter-group {
border-bottom: 1px solid var(--border-subtle);
}
.filter-group:last-child {
border-bottom: none;
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm) var(--space-lg);
cursor: pointer;
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
transition: color var(--transition-fast);
}
.filter-header:hover {
color: var(--text-primary);
}
.toggle-icon {
font-family: monospace;
font-size: 14px;
color: var(--text-tertiary);
}
.filter-options {
padding: var(--space-xs) var(--space-lg) var(--space-md);
}
.filter-checkbox {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) 0;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
}
.filter-checkbox input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--accent-primary);
}
.filter-checkbox:hover {
color: var(--accent-primary);
}
.filter-facet-count {
font-size: 11px;
color: var(--text-tertiary);
margin-left: 2px;
}
.filter-truncation-hint {
font-size: 11px;
color: var(--text-tertiary);
padding: 4px 0 2px 4px;
font-style: italic;
}
.type-dot {
display: inline-block;
width: 10px;
height: 10px;
background: var(--accent-primary);
margin-left: var(--space-xs);
}
.type-dot.node-aria {
border-radius: 50%;
}
.type-dot.node-duet {
transform: rotate(45deg);
border-radius: 0;
width: 8px;
height: 8px;
}
.type-dot.node-ensemble {
border-radius: 2px;
}
.type-dot.node-chorus {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Recently Accessed Section */
.recent-section {
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--border-subtle);
}
.recent-section.hidden {
display: none;
}
.section-header {
margin-bottom: var(--space-md);
}
.section-title {
font-family: var(--font-interface);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-tertiary);
}
.recent-cards {
display: flex;
gap: var(--space-md);
overflow-x: auto;
padding-top: 4px;
margin-top: -4px;
padding-bottom: var(--space-sm);
scrollbar-width: thin;
}
.recent-card {
flex-shrink: 0;
width: 200px;
padding: var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 10px;
text-decoration: none;
transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.recent-card:hover {
border-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.recent-card.skeleton {
background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-subtle) 50%, var(--bg-tertiary) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
min-height: 80px;
border: none;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.recent-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.recent-opera {
font-family: var(--font-interface);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.recent-composer {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.recent-scene {
font-size: 11px;
color: var(--text-tertiary);
}
.lang-badge {
display: inline-block;
padding: 2px 6px;
background: var(--accent-subtle);
border-radius: 4px;
font-size: 10px;
font-weight: 500;
color: var(--accent-primary);
}
/* Active Filters Pills */
.active-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-xl);
min-height: 0;
position: sticky;
top: 98px;
z-index: 99;
background: var(--bg-primary);
}
.active-filters:empty {
display: none;
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
background: var(--accent-subtle);
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--accent-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.filter-pill:hover {
background: var(--accent-primary);
color: var(--bg-primary);
}
.pill-x {
font-size: 14px;
line-height: 1;
opacity: 0.7;
}
.filter-pill:hover .pill-x {
opacity: 1;
}
.filter-clear {
font-size: 12px;
color: var(--text-tertiary);
cursor: pointer;
transition: color var(--transition-fast);
}
.filter-clear:hover {
color: var(--accent-primary);
}
/* View Controls */
.view-controls {
padding: var(--space-md) var(--space-xl);
display: flex;
align-items: center;
gap: var(--space-md);
}
/* Sort Control */
.sort-control {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.sort-label {
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.sort-select {
padding: var(--space-xs) var(--space-sm);
padding-right: 24px;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 6px;
color: var(--text-primary);
font-family: var(--font-interface);
font-size: 13px;
font-weight: 500;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%238a8780' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 6px center;
transition: border-color var(--transition-fast);
}
.sort-select:hover {
border-color: var(--border-default);
}
.sort-select:focus {
outline: none;
border-color: var(--accent-primary);
}
/* View Mode Toggle */
.view-mode-toggle {
display: flex;
align-items: center;
gap: 2px;
background: var(--bg-tertiary);
border-radius: 6px;
padding: 2px;
}
.view-mode-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: none;
border-radius: 4px;
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.view-mode-btn:hover {
color: var(--text-primary);
}
.view-mode-btn.active {
background: var(--bg-secondary);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.view-toggle {
margin-left: auto;
padding: var(--space-xs) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-secondary);
font-family: var(--font-interface);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.view-toggle:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
}
/* ===== GRID VIEW ===== */
.opera-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
padding: 0 var(--space-xl);
}
.opera-card {
display: flex;
flex-direction: column;
padding: var(--space-md) var(--space-lg);
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 120px;
}
.opera-card:hover {
border-color: var(--border-default);
box-shadow: var(--shadow-sm);
}
.opera-card.opera-pending {
opacity: 0.45;
}
.opera-card.opera-pending:hover {
opacity: 0.7;
}
.opera-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.opera-card-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.opera-card-composer {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: var(--space-sm);
}
.opera-card-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 12px;
color: var(--text-tertiary);
margin-top: auto;
}
.opera-card-hits {
font-size: 11px;
color: var(--text-tertiary);
margin-top: var(--space-xs);
}
/* Timeline Toggle for Opera Cards */
.opera-title-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.timeline-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
background: transparent;
border: none;
color: var(--text-tertiary);
font-family: var(--font-interface);
font-size: 12px;
cursor: pointer;
transition: color var(--transition-fast);
}
.timeline-toggle:hover {
color: var(--text-primary);
}
.toggle-arrow {
/* Render the Unicode triangle as a proportioned glyph rather than the
heavy ASCII-style block shape (audit 2026-04-23). Slightly smaller
size + tighter line-height keeps it visually aligned with the label.
*/
font-size: 9px;
line-height: 1;
display: inline-block;
transform: translateY(-1px);
opacity: 0.7;
}
.timeline-toggle:hover .toggle-arrow {
opacity: 1;
}
/* Collapsed Timeline */
.opera-timeline.collapsed {
display: none;
}
/* Search Hint */
.search-hint {
display: block;
font-size: 11px;
color: var(--text-tertiary);
margin-top: var(--space-xs);
}
.search-hint.hidden {
display: none;
}
/* Skeleton Loading States */
.skeleton-section {
padding: var(--space-xl);
}
.skeleton-header {
height: 28px;
width: 200px;
background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-subtle) 50%, var(--bg-tertiary) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 6px;
margin-bottom: var(--space-lg);
}
.skeleton-opera {
height: 80px;
background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-subtle) 50%, var(--bg-tertiary) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 10px;
margin-bottom: var(--space-md);
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.opera-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.recent-cards {
flex-wrap: nowrap;
}
.recent-card {
width: 180px;
}
.view-controls {
flex-wrap: wrap;
gap: var(--space-sm);
}
.opera-card-grid {
grid-template-columns: 1fr;
padding: 0 var(--space-md);
}
.opera-strip {
flex-direction: column;
align-items: flex-start;
}
.opera-identity {
width: 100%;
}
.opera-timeline {
width: 100%;
}
}
/* Progress bar in modal */
#progress-bar {
background: var(--accent-primary) !important;
}
/* ===== FOCUS STATES (Accessibility) ===== */
:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* ===== EMPTY STATE (Notion-style) ===== */
.empty-state {
text-align: center;
padding: 100px 40px;
max-width: 400px;
margin: 0 auto;
}
.empty-state-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-lg);
color: var(--text-muted);
}
.empty-state h3 {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.empty-state p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.5;
}
/* ===== CONTENT TYPE TABS ===== */
.library-type-tabs {
display: flex;
gap: var(--space-sm);
padding: var(--space-lg) var(--space-xl) 0;
}
.type-tab {
display: inline-flex;
align-items: center;
padding: var(--space-sm) var(--space-md);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border-radius: 20px;
border: 1px solid var(--border-subtle);
background: transparent;
transition: all 0.15s var(--ease-standard);
}
.type-tab:hover {
color: var(--text-primary);
border-color: var(--border-default);
background: var(--bg-tertiary);
}
.type-tab.active {
color: var(--accent-primary);
border-color: var(--accent-primary);
background: var(--accent-subtle);
font-weight: 600;
}
/* ===== COMMAND PALETTE KEYBOARD HINT ===== */
.global-search {
position: sticky;
top: 0;
z-index: 100;
padding: var(--space-lg) var(--space-xl);
background: linear-gradient(to bottom, var(--bg-primary) 80%, transparent);
}
.search-wrapper {
position: relative;
max-width: 600px;
}
.search-kbd-hint {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
transition: opacity var(--transition-fast);
}
.search-kbd-hint kbd {
padding: 3px 6px;
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 4px;
font-size: 11px;
font-family: var(--font-interface);
color: var(--text-tertiary);
}
/* Hide hint when focused */
.search-input:focus + .search-kbd-hint {
opacity: 0;
}
/* ===== APP BRANDING ===== */
.app-brand {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.brand-icon {
width: 20px;
height: 20px;
color: var(--accent-primary);
}
.brand-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.header-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
/* Keep auth + nav + theme inside the narrow sidebar header by allowing
wrap and trimming gap. Audit 2026-04-23. */
justify-content: flex-end;
row-gap: 4px;
}
/* Library sidebar-header nav links — UX audit 2026-04-18 added
Library/Pricing/About here so library visitors aren't stranded
when the landing-nav isn't shown. Sits next to auth + theme toggle. */
.sidebar-nav-links {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.sidebar-nav-links a {
color: var(--text-muted, #999);
text-decoration: none;
font-size: 0.78rem;
padding: 2px 4px;
border-radius: 4px;
transition: color 0.15s var(--ease-standard), background-color 0.15s var(--ease-standard);
}
.sidebar-nav-links {
gap: 2px;
}
.sidebar-nav-links a:hover {
color: var(--text-primary, #fff);
background-color: var(--bg-hover, rgba(255,255,255,0.05));
}
@media (max-width: 768px) {
.sidebar-nav-links {
/* Hidden on mobile — hamburger exposes nav separately */
display: none;
}
}
.header-action-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
color: var(--text-secondary);
background: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
text-decoration: none;
}
.header-action-link:hover {
background: var(--border-subtle);
color: var(--text-primary);
}
/* Import button container */
.import-button-container {
padding: 0 var(--space-lg) var(--space-md);
}
.ghost-button--full-width {
width: 100%;
}
/* ===== VERTICAL TIMELINE (LessWrong Style) ===== */
.vertical-timeline {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-md) 0;
}
.timeline-act {
position: relative;
padding-left: 24px;
}
.timeline-act-line {
position: absolute;
left: 7px;
top: 28px;
bottom: 0;
width: 2px;
background: var(--border-subtle);
}
.timeline-act:last-child .timeline-act-line {
display: none;
}
.timeline-act-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
margin-bottom: var(--space-sm);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.timeline-act-title {
font-weight: 400;
font-size: 11px;
text-transform: none;
letter-spacing: normal;
color: var(--text-tertiary);
opacity: 0.8;
}
.timeline-scenes {
display: flex;
flex-direction: column;
gap: 2px;
}
.timeline-scene {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
margin-left: -7px;
border-radius: 6px;
text-decoration: none;
color: inherit;
transition: background var(--transition-fast);
}
.timeline-scene:hover {
background: rgba(196, 112, 74, 0.08); /* LessWrong muted green */
}
[data-theme="dark"] .timeline-scene:hover {
background: rgba(196, 112, 74, 0.06);
}
.timeline-scene-shape {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-top: 3px;
display: flex;
align-items: center;
justify-content: center;
}
/* Shape variants for scene types */
.timeline-scene-shape.shape-aria {
border-radius: 50%;
background: var(--bg-secondary);
border: 2px solid var(--accent-primary);
}
.timeline-scene-shape.shape-duet {
width: 12px;
height: 12px;
transform: rotate(45deg);
background: var(--bg-secondary);
border: 2px solid var(--accent-primary);
}
.timeline-scene-shape.shape-ensemble {
border-radius: 2px;
background: var(--bg-secondary);
border: 2px solid var(--accent-primary);
}
.timeline-scene-shape.shape-chorus {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: var(--accent-primary);
width: 16px;
height: 14px;
}
.timeline-scene-shape.shape-recit {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-tertiary);
opacity: 0.5;
margin-top: 5px;
margin-left: 3px;
}
.timeline-scene:hover .timeline-scene-shape.shape-aria,
.timeline-scene:hover .timeline-scene-shape.shape-duet,
.timeline-scene:hover .timeline-scene-shape.shape-ensemble {
background: var(--accent-primary);
}
.timeline-scene:hover .timeline-scene-shape.shape-recit {
opacity: 1;
background: var(--accent-primary);
}
.timeline-scene-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.timeline-scene-title {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.timeline-scene-incipit {
font-size: 12px;
color: var(--text-secondary);
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.timeline-scene-meta {
font-size: 12px;
color: var(--text-tertiary);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.timeline-scene-meta .meta-type {
text-transform: capitalize;
}
.timeline-scene-meta .meta-divider {
opacity: 0.5;
}
/* Scene count badge (visible in expanded timeline act labels) */
.timeline-scene-count {
font-size: 11px;
color: var(--text-tertiary);
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: 10px;
margin-left: auto;
}
/* Act divider for visual separation */
.timeline-act-divider {
height: 1px;
background: var(--border-subtle);
margin: var(--space-md) 0;
margin-left: -24px;
}
/* Characters inline display */
.timeline-scene-characters {
font-size: 11px;
color: var(--text-tertiary);
font-style: italic;
margin-top: 2px;
}
/* Responsive: Stack vertically on mobile */
@media (max-width: 768px) {
.timeline-act {
padding-left: 16px;
}
.timeline-act-line {
left: 5px;
}
.timeline-scene {
margin-left: -5px;
padding: var(--space-xs) var(--space-sm);
}
.timeline-scene-title {
font-size: 13px;
}
.timeline-scene-meta {
font-size: 11px;
}
}
/* Opera strip layout update for vertical timeline */
.opera-strip.has-vertical-timeline {
flex-direction: column;
align-items: stretch;
}
.opera-strip.has-vertical-timeline .opera-identity {
width: 100%;
}
.opera-strip.has-vertical-timeline:has(.vertical-timeline:not(.collapsed)) .opera-identity {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: var(--space-md);
margin-bottom: var(--space-sm);
}
.opera-strip.has-vertical-timeline .vertical-timeline {
width: 100%;
max-height: 400px;
overflow-y: auto;
}
/* ===== MOBILE: Hamburger Sidebar ===== */
.hamburger-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
position: fixed;
top: var(--space-md);
left: var(--space-md);
z-index: 1001;
}
.hamburger-btn svg { width: 20px; height: 20px; }
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 999;
}
.sidebar-overlay.active { display: block; }
@media (max-width: 768px) {
.hamburger-btn { display: flex; }
.sidebar {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 280px;
max-width: 80vw;
transform: translateX(-100%);
transition: transform 0.25s var(--ease-standard);
box-shadow: var(--shadow-lg);
}
.sidebar.open { transform: translateX(0); }
.canvas {
width: 100%;
padding-top: 60px;
}
}
/* ===== AUTH UI ===== */
.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(--accent-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
font-family: var(--font-interface);
text-transform: uppercase;
}
.auth-signout-btn {
background: none;
border: none;
color: var(--text-tertiary);
font-size: 11px;
font-family: var(--font-interface);
cursor: pointer;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.auth-signout-btn:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.auth-admin-link {
color: var(--text-tertiary);
font-size: 11px;
font-family: var(--font-interface);
text-decoration: none;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.auth-admin-link:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.library-auth {
display: flex;
align-items: center;
}
/* ===== SIGN-IN PULSE HIGHLIGHT ===== */
.pulse-highlight {
animation: pulseHighlight 0.6s ease-in-out 3;
border-radius: var(--radius-md);
}
@keyframes pulseHighlight {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
50% { box-shadow: 0 0 0 4px var(--accent-primary); }
}
/* ===== 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;
}
}
/* SSR library list (visible until JS replaces it) */
.ssr-opera-list { list-style: none; padding: 0; margin: 0 0 16px; }
.ssr-opera-list li { padding: 4px 0; }
.ssr-opera-list a { color: var(--color-text); text-decoration: none; }
.ssr-opera-list a:hover { text-decoration: underline; }
.ssr-year { color: var(--color-silver); font-size: 0.85em; margin-left: 6px; }
/* Composer hero section */
.composer-hero { padding: 24px 32px 0; }
.composer-hero .back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--color-accent); text-decoration: none; font-size: 0.9rem; margin-bottom: 8px; }
.composer-hero .back-link:hover { text-decoration: underline; }
.composer-hero h1 { font-family: 'Crimson Text', serif; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -0.3px; margin: 0 0 8px; }
.composer-hero .composer-dates { color: var(--color-muted); font-size: 0.95rem; margin-bottom: 12px; }
.composer-hero .composer-bio { color: var(--color-carbon); font-size: 1rem; line-height: 1.6; margin-bottom: 24px; }
/* ===== LIEDER COMPONENTS ===== */
/* Lieder card (grid view) */
.lieder-card {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-primary);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.lieder-card:hover {
border-color: var(--accent-primary);
box-shadow: var(--shadow-sm);
}
.lieder-title {
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.3;
}
.lieder-meta {
color: var(--text-secondary);
font-size: 0.8125rem;
}
.lieder-catalog {
color: var(--text-tertiary);
font-size: 0.75rem;
font-style: italic;
}
.lieder-badges {
display: flex;
gap: var(--space-xs);
flex-wrap: wrap;
margin-top: var(--space-xs);
}
.cycle-badge {
display: inline-block;
padding: 1px 6px;
font-size: 0.6875rem;
font-weight: 500;
border-radius: var(--radius-sm);
background: var(--bg-tertiary);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.text-only-badge {
display: inline-block;
padding: 1px 6px;
font-size: 0.6875rem;
font-weight: 500;
border-radius: var(--radius-sm);
background: transparent;
border: 1px dashed var(--text-muted, var(--text-secondary));
color: var(--text-muted, var(--text-secondary));
white-space: nowrap;
cursor: help;
}
.text-only-badge:hover {
border-color: var(--text-secondary);
color: var(--text-secondary);
}
.lieder-card--text-only {
opacity: 0.85;
}
.lieder-card--text-only:hover {
opacity: 1;
}
/* Cycle group (collapsible) */
.cycle-group {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-sm);
}
.cycle-header {
cursor: pointer;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
user-select: none;
transition: background var(--transition-fast);
}
.cycle-header:hover {
background: var(--bg-tertiary);
}
.cycle-name {
font-weight: 600;
font-size: 0.875rem;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cycle-meta {
color: var(--text-tertiary);
font-size: 0.75rem;
white-space: nowrap;
}
.cycle-toggle {
color: var(--text-tertiary);
font-size: 0.75rem;
}
.cycle-songs {
padding: 0 var(--space-md) var(--space-sm);
background: var(--bg-primary);
}
.cycle-song-row {
display: flex;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text-primary);
font-size: 0.8125rem;
transition: background var(--transition-fast);
}
.cycle-song-row:hover {
background: var(--bg-tertiary);
}
.song-num {
color: var(--text-tertiary);
min-width: 24px;
text-align: right;
}
.song-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.song-catalog {
color: var(--text-tertiary);
font-size: 0.75rem;
white-space: nowrap;
}
/* Scroll sentinel for infinite scroll */
.scroll-sentinel {
height: 1px;
width: 100%;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.cycle-badge {
max-width: 120px;
}
}
/* Search fallback */
.search-fallback {
padding: 1rem;
text-align: center;
font-size: 0.875rem;
color: var(--color-silver);
}
.search-fallback a {
color: var(--color-accent);
text-decoration: none;
}
.search-fallback a:hover {
text-decoration: underline;
}
/* External reference links on entity pages */
.external-refs {
margin-top: 0.5rem;
}
.external-ref {
color: var(--color-accent);
text-decoration: none;
font-size: 0.875rem;
}
.external-ref:hover {
text-decoration: underline;
}
/* Cycle breadcrumb */
.cycle-breadcrumb {
display: block;
font-size: 0.875rem;
color: var(--color-silver);
margin-bottom: 0.25rem;
}
.cycle-breadcrumb a {
color: var(--color-accent);
text-decoration: none;
}
.cycle-breadcrumb a:hover {
text-decoration: underline;
}
/* Cycle song list (index.html cycle page) */
.cycle-songs-section {
margin-top: 1.5rem;
}
.cycle-song-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: song-counter;
}
.cycle-song-item {
counter-increment: song-counter;
border-bottom: 1px solid var(--border-primary);
}
.cycle-song-item a {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.75rem 0;
text-decoration: none;
color: var(--color-primary);
}
.cycle-song-item a::before {
content: counter(song-counter);
min-width: 1.5rem;
text-align: right;
font-size: 0.8rem;
color: var(--color-silver);
flex-shrink: 0;
}
.cycle-song-item a:hover {
color: var(--color-accent);
}
.song-catalog {
margin-left: auto;
font-size: 0.8rem;
color: var(--color-silver);
flex-shrink: 0;
}
/* Setting count badges */
.setting-count-badge {
display: inline-block;
padding: 1px 6px;
font-size: 0.6875rem;
font-weight: 500;
border-radius: var(--radius-sm);
background: var(--accent-subtle);
color: var(--accent-primary);
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-fast);
}
.setting-count-badge:hover {
background: var(--accent-primary);
color: var(--bg-primary);
}
.setting-count-inline {
margin-left: var(--space-xs);
font-size: 0.625rem;
padding: 0 4px;
}
.settings-list {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-sm) 0 0;
border-top: 1px solid var(--border-subtle);
margin-top: var(--space-sm);
font-size: 0.8125rem;
color: var(--text-secondary);
}
.settings-list-row {
padding: 2px 0;
}
.settings-list-more {
color: var(--text-tertiary);
font-style: italic;
font-size: 0.75rem;
padding-top: 2px;
}
/* ===== POPULAR (band + carousel + cards) ============================
Used by:
- Library page: section.popular-band#popular-band (above Recently Accessed)
- Landing page: div#landing-popular-root (between stats and features)
Reuses .section-header / .section-title / skeleton-shimmer keyframes
from the Recently Accessed component. Hidden by default — JS reveals
only when /api/popularity/top returns has_data=true.
=================================================================== */
.popular-band {
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--border-subtle);
}
.popular-band.hidden {
display: none;
}
.popular-carousel {
display: flex;
gap: var(--space-md);
overflow-x: auto;
padding-top: 4px;
margin-top: -4px;
padding-bottom: var(--space-sm);
scrollbar-width: thin;
/* Horizontal momentum-snap on touch devices */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.popular-card {
flex-shrink: 0;
width: 220px;
min-height: 100px;
padding: var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: 10px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-sm);
scroll-snap-align: start;
transition: border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.popular-card:hover {
border-color: var(--accent-primary);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.popular-card-title {
font-family: var(--font-interface);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.25;
/* Allow up to 2 lines, ellipsize beyond */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.popular-card-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-sm);
font-family: var(--font-interface);
font-size: 12px;
color: var(--text-tertiary);
}
.popular-card-composer {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
}
.popular-card-year {
flex-shrink: 0;
color: var(--text-tertiary);
opacity: 0.8;
}
/* Skeleton placeholder while loading — reuses the @keyframes
skeleton-shimmer defined for .recent-card.skeleton above. */
.popular-card.popular-skeleton {
background: linear-gradient(90deg,
var(--bg-tertiary) 0%,
var(--border-subtle) 50%,
var(--bg-tertiary) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border: none;
pointer-events: none;
}
/* Landing-page wrapper that contains one .popular-band per scored
content type. Mirrors the layout of other landing sections (.landing-features,
.landing-showcase) so popular cards line up with the rest of the page. */
.landing-popular-root {
max-width: 900px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-xl);
}
.landing-popular-root.hidden {
display: none;
}
/* Inside the landing wrapper, override the library-page band styles:
- drop the border-bottom (each band lives in its own padded landing section)
- drop horizontal padding (parent already has var(--space-xl))
- separate consecutive bands with vertical spacing
- upgrade the section-title to landing-h2 visual style (bigger, centered) */
.landing-popular-root .popular-band {
padding: 0;
border-bottom: none;
}
.landing-popular-root .popular-band + .popular-band {
margin-top: var(--space-2xl);
}
.landing-popular-root .section-header {
margin-bottom: var(--space-lg);
}
.landing-popular-root .section-title {
font-size: 20px;
font-weight: 600;
text-align: center;
text-transform: none;
letter-spacing: 0;
color: var(--text-primary);
}
/* Section labels inside the search dropdown empty-state typeahead.
Used by _renderPopularSuggestions() in archive-search.js. */
.search-section-label {
font-family: var(--font-interface);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-tertiary);
padding: var(--space-sm) var(--space-md) var(--space-xs);
}
.search-section-label:not(:first-child) {
border-top: 1px solid var(--border-subtle);
margin-top: var(--space-xs);
}
/* =============================================================
CLAUDE DESIGN — Library + About primitives (PR 10/11).
Ported from docs/design/claude-design-export/project/ui_kits/
webapp/styles.css {.lc-toolbar/.lc-filter-row/.lc-grid/
.lc-wcard/.lc-chip/.lc-search/.lc-kbd/.lc-prose/.lc-resource}.
Production keeps its sidebar IA + JS-rendered .opera-card markup;
these primitives layer the design's visual language on top so
library + about share one source of truth with pricing + landing.
============================================================= */
/* Toolbar / filter rows shown above a grid */
.lc-toolbar { margin-bottom: 20px; }
.lc-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lc-filter-label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); letter-spacing: .05em; text-transform: uppercase; margin-right: 6px; min-width: 68px; }
.lc-count { margin: 18px 0 12px; font-size: 12px; color: var(--text-tertiary); letter-spacing: .03em; }
/* Card grid layout for library results */
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
/* Work card — used as visual aesthetic; production cards keep
.opera-card markup for JS hooks but inherit hover/transform from
.lc-wcard via the .opera-card override below. */
.lc-wcard { display: block; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .16s, transform .16s, box-shadow .16s; box-shadow: var(--shadow-sm); }
.lc-wcard:hover { border-color: var(--border-default); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lc-wcard-tag { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }
.lc-wcard-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.3; }
.lc-wcard-meta { font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.lc-wcard-divider { height: 1px; background: var(--border-subtle); margin: 14px 0; }
.lc-wcard-foot { display: flex; justify-content: space-between; align-items: center; }
.lc-wcard-small { font-size: 12px; color: var(--text-tertiary); }
.lc-lang { font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace; text-transform: uppercase; font-size: 11px; color: var(--text-secondary); }
/* Filter chip — design's neutral chip + tier-tinted variants. Sits
alongside production's .filter-checkbox sidebar checkboxes; we use
.lc-chip in the inline filter rows on /library only. */
.lc-chip { font-family: var(--font-interface); font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; transition: border-color .12s, color .12s, background .12s; text-decoration: none; display: inline-flex; align-items: center; }
.lc-chip:hover { border-color: var(--border-default); color: var(--text-primary); }
.lc-chip.active { border-color: var(--accent-primary); background: var(--accent-subtle); color: var(--accent-hover); }
.lc-chip--pro { background: var(--tier-pro-tint); border-color: #d8c48a; color: #6b5518; }
.lc-chip--free { background: var(--tier-free-tint); border-color: #e8d2b8; color: #6a4a30; }
[data-theme="dark"] .lc-chip--pro { color: #e6cf86; border-color: #4a4020; }
[data-theme="dark"] .lc-chip--free { color: #e8c1a0; border-color: #4a3a28; }
/* Search pill — design's clean rounded input. Layered on top of
production's .search-wrapper via additive `lc-search` class so JS
that targets #global-search keeps working. */
.lc-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-secondary); max-width: 600px; transition: border-color .12s, box-shadow .12s; }
.lc-search:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-subtle); }
.lc-search > svg { color: var(--text-tertiary); flex: none; }
.lc-search > input { border: none; outline: none; flex: 1; font-size: 14px; font-family: inherit; background: transparent; color: var(--text-primary); padding: 0; }
.lc-search > input::placeholder { color: var(--text-tertiary); }
/* Keyboard shortcut chip used in the search pill + nav */
.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); white-space: nowrap; }
/* Long-form prose layout used by the About page */
.lc-prose { max-width: 720px; }
.lc-prose h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 20px; }
.lc-prose h2 { font-size: 20px; font-weight: 600; margin: 36px 0 10px; letter-spacing: -0.02em; color: var(--text-primary); }
.lc-prose p, .lc-prose li { font-size: 17px; line-height: 1.7; color: var(--text-primary); }
.lc-prose p { margin: 0 0 14px; }
.lc-prose ul { padding-left: 20px; margin: 0 0 14px; }
.lc-prose ul li { margin-bottom: 6px; }
.lc-prose strong { font-weight: 600; }
.lc-prose a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; }
.lc-prose a:hover { color: var(--accent-hover); }
/* Resource grid — boxed lists of external links on About */
.lc-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.lc-resource { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 18px; }
.lc-resource h3 { font-family: var(--font-interface); font-size: 13px; font-weight: 600; margin: 0 0 8px; letter-spacing: 0; color: var(--text-primary); }
.lc-resource ul { padding-left: 16px; margin: 0; }
.lc-resource li { font-family: var(--font-interface); font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 4px; }
.lc-resource a { color: var(--accent-primary); text-decoration: none; }
.lc-resource a:hover { text-decoration: underline; }
/* =============================================================
LIBRARY — bridge styles that lift production's existing markup
(rendered by archive-views.js) toward the design's visual
language without renaming JS-anchored classes. Targets:
- .canvas .lc-page-head → editorial page intro
- .opera-card → adopt .lc-wcard hover/radius
- .composer-section-header → larger heading
- .global-search.lc-search → design's search pill
============================================================= */
/* Page intro inside the existing .canvas. .lc-page-head from the
shared block above sets margin/h1; override the max-width since
the canvas is its own scroll container with horizontal padding. */
.canvas .lc-page-head {
padding: 32px var(--space-xl) 0;
margin-bottom: 16px;
max-width: none;
}
.canvas .lc-page-head h1 { font-size: 32px; }
.canvas .lc-page-head .lc-page-sub { margin: 10px 0 0; max-width: 620px; }
/* Type-tab eyebrow row already lives inside .canvas; drop the top
padding so it tucks under the .lc-page-head cleanly. */
.canvas .library-type-tabs { padding-top: var(--space-md); }
/* Restyled global search — visual upgrade only. Production's JS
still targets #global-search and .search-wrapper. Adding the
`lc-search` class to the wrapper triggers this override. */
.global-search .search-wrapper.lc-search {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 10px 14px;
transition: border-color .12s, box-shadow .12s;
display: flex;
align-items: center;
gap: 8px;
}
.global-search .search-wrapper.lc-search:focus-within {
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--accent-subtle);
}
.global-search .search-wrapper.lc-search .search-input {
border: none;
outline: none;
background: transparent;
padding: 0;
flex: 1;
font-size: 14px;
color: var(--text-primary);
}
.global-search .search-wrapper.lc-search .search-input:focus { box-shadow: none; }
.global-search .search-wrapper.lc-search .search-kbd-hint {
position: static;
transform: none;
pointer-events: none;
flex: none;
}
/* Opera card — pull radius/shadow toward the design's wcard while
keeping the existing structure intact for archive-views.js. */
.opera-card {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: border-color .16s, transform .16s, box-shadow .16s;
}
.opera-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.opera-card-title { font-size: 16px; }
.opera-card-composer { color: var(--text-secondary); }
/* Composer-section header — bigger, lighter weight to match the
design's editorial lists. Production's heading is currently
uppercase + small; this restores composer names as proper h2s. */
.composer-section-header {
font-size: 18px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--text-primary) !important;
margin-bottom: 12px !important;
}
/* SSR composer-section h2 (server-rendered before JS hydration) */
#ssr-library .composer-section h2 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0 0 12px;
}
#ssr-library .ssr-opera-list { list-style: none; padding: 0; margin: 0 0 24px; }
#ssr-library .ssr-opera-list li { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
#ssr-library .ssr-opera-list a { color: var(--text-primary); text-decoration: none; }
#ssr-library .ssr-opera-list a:hover { color: var(--accent-primary); }
#ssr-library .ssr-year { color: var(--text-tertiary); font-size: 12px; margin-left: 4px; }
/* =============================================================
PRIVACY — sticky-TOC left rail (PR 12, Step 8).
Two-column shell for /privacy: a 200px sticky table-of-contents
on the left and the prose content on the right. Collapses to
single-column under 880px (TOC moves above content, non-sticky).
============================================================= */
.lc-privacy-shell {
max-width: 1080px;
margin: 0 auto;
padding: 32px var(--space-xl) 80px;
display: grid;
grid-template-columns: 220px 1fr;
gap: 64px;
align-items: start;
}
.lc-toc {
position: sticky;
top: 88px;
align-self: start;
}
.lc-toc-label {
margin-bottom: 12px;
color: var(--text-tertiary);
}
.lc-toc-list {
list-style: none;
padding: 0;
margin: 0;
border-left: 1px solid var(--border-subtle);
}
.lc-toc-list li { margin: 0; }
.lc-toc-list a {
display: block;
padding: 6px 14px;
margin-left: -1px;
border-left: 2px solid transparent;
font-family: var(--font-interface);
font-size: 13px;
color: var(--text-tertiary);
text-decoration: none;
line-height: 1.45;
transition: color .12s, border-color .12s;
}
.lc-toc-list a:hover { color: var(--text-primary); }
.lc-toc-list a.active {
color: var(--accent-primary);
border-left-color: var(--accent-primary);
font-weight: 600;
}
.lc-privacy-main { max-width: 720px; }
.lc-privacy-main .lc-page-head { margin-bottom: 32px; }
.lc-privacy-main .lc-page-head h1 { font-size: 36px; }
.lc-privacy-main .last-updated {
font-size: 13px;
color: var(--text-tertiary);
margin: 12px 0 0;
}
.lc-privacy-main h2 {
font-size: 20px;
font-weight: 600;
margin: 36px 0 10px;
letter-spacing: -0.02em;
color: var(--text-primary);
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
scroll-margin-top: 80px;
}
.lc-privacy-main h2:first-of-type { padding-top: 0; border-top: none; }
.lc-privacy-main p,
.lc-privacy-main li {
font-size: 15px;
line-height: 1.75;
color: var(--text-secondary);
}
.lc-privacy-main p { margin: 0 0 14px; }
.lc-privacy-main ul { padding-left: 20px; margin: 0 0 14px; }
.lc-privacy-main li { margin-bottom: 6px; }
.lc-privacy-main strong { color: var(--text-primary); font-weight: 600; }
.lc-privacy-main code {
font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
font-size: 13px;
background: var(--bg-tertiary);
padding: 1px 6px;
border-radius: 3px;
color: var(--text-primary);
}
@media (max-width: 880px) {
.lc-privacy-shell {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px var(--space-md) 64px;
}
.lc-toc {
position: static;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}
}
/* =====================================================================
Library port (2026-04-27) — flat layout for index.html
Replaces the previous .app-container { .sidebar + .canvas } split
with a single-column .lc-page shell that matches the design's
Library.jsx structure.
===================================================================== */
body.library-page {
background: var(--bg-primary);
color: var(--text-primary);
/* Override the global `html, body { overflow: hidden }` lock from the
top of this file. The lock exists for reader.html, which owns its
own scroll regions. The library renders the lc-page shell taller
than the viewport (work cards + filter drawer + composer carousel)
and must scroll, same as .landing-page and .prose-page. Caught by
tests/test_template_partial_dependencies.py. */
min-height: 100vh;
overflow: auto;
}
/* The new main content area — replaces the old .canvas */
.library-canvas {
/* lc-page already provides max-width 1180px + centered padding 48/24/96 */
}
/* Legacy .canvas rules that targeted typography inside the canvas would
apply to .library-canvas via the parallel class. We DON'T inherit those
here because .lc-page rules take over the typography surface. To keep
long-tail .canvas-only rules from leaking in, we scope them out below. */
body.library-page .app-container { display: contents; } /* defensive */
body.library-page > nav.landing-nav,
body.library-page > .landing-nav { max-width: 1180px; margin: 0 auto; }
/* Filter drawer — collapsible replacing the sidebar */
.lc-filters-drawer {
margin: 16px 0 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-secondary);
overflow: hidden;
transition: border-color 120ms var(--ease-standard);
}
.lc-filters-drawer[open] {
border-color: var(--border-default);
box-shadow: var(--shadow-sm);
}
.lc-filters-toggle {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
font-family: var(--font-interface);
user-select: none;
}
.lc-filters-toggle::-webkit-details-marker { display: none; }
.lc-filters-toggle .lc-filter-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: .08em;
text-transform: uppercase;
margin-right: 0;
min-width: 0;
}
.lc-filters-summary {
flex: 1;
color: var(--text-tertiary);
font-size: var(--text-xs);
}
.lc-filters-chev {
color: var(--text-tertiary);
font-size: 18px;
line-height: 1;
width: 18px;
text-align: center;
transition: transform 220ms var(--ease-standard);
}
.lc-filters-drawer[open] .lc-filters-chev { transform: rotate(45deg); }
.lc-filters-toggle:hover { background: var(--bg-tertiary); }
.lc-filters-toggle:hover .lc-filters-chev { color: var(--accent-primary); }
.lc-filters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px 24px;
padding: 14px 16px 18px;
border-top: 1px solid var(--border-subtle);
}
.lc-filters-grid .filter-group { margin: 0; }
.lc-filters-grid .filter-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
padding: 8px 4px;
border-radius: var(--radius-sm);
transition: background 120ms var(--ease-standard);
}
.lc-filters-grid .filter-header:hover { background: var(--bg-tertiary); }
.lc-filters-grid .toggle-icon {
color: var(--text-tertiary);
font-size: 16px;
line-height: 1;
}
.lc-filters-grid .filter-options { padding: 4px 4px 8px; }
.lc-filters-grid .filter-search-inline { margin-bottom: 6px; }
.lc-filters-grid .filter-search-input {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-primary);
font: 400 13px var(--font-interface);
}
.lc-filters-grid .filter-search-input:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: var(--shadow-focus);
}
.lc-filters-grid .filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 4px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
border-radius: 3px;
}
.lc-filters-grid .filter-checkbox:hover { color: var(--text-primary); background: var(--bg-tertiary); }
/* Hide the .lc-filters-drawer on composer / cycle / poet pages where
the per-context hero already constrains the work set */
body.library-page[data-composer-filter] .lc-filters-drawer,
body.library-page[data-poet-filter] .lc-filters-drawer { display: none; }
/* Type-tabs — keep the production styling but center within .lc-page */
.library-canvas .library-type-tabs {
display: flex;
gap: 0;
margin: 4px 0 18px;
border-bottom: 1px solid var(--border-subtle);
}
/* Recent-section + popular-band sit inside .lc-page now — give them space */
.library-canvas .recent-section,
.library-canvas .popular-band { margin: 28px 0; }
/* The skip-link still anchors to #archive-canvas */
body.library-page .skip-link { z-index: 100; }
/* =============================================================
T2-D — Library mobile polish (Sprint 2 of structural-port plan).
The library shell uses var(--space-xl) (32px) horizontal padding
on .canvas .lc-page-head, .global-search, .composer-section, and
.popular-band. On 375px viewports that eats 64px (17%) per surface,
leaving the search placeholder truncated ("Search Operas, Roles, or
I…") and opera cards inset by ~57px from the page edge. Tighten
these surfaces to var(--space-md) (16px) on <=768px. Scoped to
body.library-page so landing.html's nested .popular-band keeps its
desktop-style padding.
============================================================= */
@media (max-width: 768px) {
body.library-page .library-canvas .lc-page-head {
padding: 24px var(--space-md) 0;
}
body.library-page .library-canvas .lc-page-head h1 {
font-size: 28px;
line-height: 1.15;
}
body.library-page .global-search {
padding: var(--space-md) var(--space-md);
}
body.library-page .composer-section {
padding: var(--space-md) var(--space-md) var(--space-sm);
}
body.library-page .composer-section-header {
padding: var(--space-sm) var(--space-md);
}
body.library-page .popular-band {
padding: var(--space-md) var(--space-md);
}
}
/* T1-C: cycle-song-list visual refresh (Sprint 4 / 2026-04-27)
Mirrors design's terracotta-rule numbered card pattern. The existing
.cycle-song-list class stays for back-compat; we layer an `lc-cycle-*`
alias so the production rules still apply but the design refinements
take precedence. (Composer-page port lives in composer.css / composer.html;
cycle pages render via index.html so the rules below are the active
surface for /cycle// URLs.) */
.lc-cycle-list {
list-style: none;
counter-reset: lc-cycle-num;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.lc-cycle-list .lc-cycle-item {
counter-increment: lc-cycle-num;
}
.lc-cycle-list .lc-cycle-item a {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 18px;
background: var(--bg-secondary, var(--color-surface, #fdfaf3));
border: 1px solid var(--border-subtle, var(--color-border, rgba(60,55,50,0.12)));
border-radius: var(--radius-md, 8px);
text-decoration: none;
color: inherit;
transition: border-color .12s, box-shadow .12s, transform .12s;
}
.lc-cycle-list .lc-cycle-item a:hover {
border-color: var(--accent-primary, var(--color-accent, #c4704a));
box-shadow: var(--shadow-sm, 0 1px 2px rgba(60,55,50,0.06));
}
.lc-cycle-list .lc-cycle-item a::before {
content: counter(lc-cycle-num, decimal-leading-zero);
font: 600 13px var(--font-mono, ui-monospace, monospace);
color: var(--accent-primary, var(--color-accent, #c4704a));
letter-spacing: 0.05em;
}
.lc-cycle-list .lc-cycle-item .song-title {
font-family: var(--font-literary, 'Crimson Text', Georgia, serif);
font-size: 17px;
font-weight: 600;
color: var(--text-primary, var(--color-carbon, #2a2622));
}
.lc-cycle-list .lc-cycle-item .song-catalog {
font: 500 11px var(--font-mono, ui-monospace, monospace);
color: var(--text-tertiary, var(--color-silver, #b6aea2));
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ======================================================================
* Error pages — 404 / 500 (Sprint 5 T4-A)
*
* Centered hero pattern with brand icon, big numeric code, title,
* message, and dual CTAs. Sits below the standard site_header partial.
* All colors use design tokens with safe fallbacks so the page still
* resembles the brand if archive.css itself partially loads.
* ====================================================================== */
.lc-error {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px;
}
.lc-error-hero {
text-align: center;
max-width: 480px;
animation: lc-error-fade-in 0.5s ease;
}
.lc-error-icon {
width: 48px;
height: 48px;
margin: 0 auto 16px;
opacity: 0.5;
color: var(--text-secondary, var(--color-graphite, #4a4946));
display: block;
}
.lc-error-code {
font-family: var(--font-literary, 'Crimson Text', Georgia, serif);
font-size: 6rem;
font-weight: 600;
color: var(--accent-primary, var(--color-accent, #c4704a));
line-height: 1;
margin: 0 0 8px;
letter-spacing: -0.02em;
}
.lc-error-title {
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 12px;
color: var(--text-primary, var(--color-carbon, #2a2622));
}
.lc-error-msg {
color: var(--text-secondary, var(--color-graphite, #8a8780));
margin: 0 0 32px;
line-height: 1.6;
font-size: 15px;
}
.lc-error-actions {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
.lc-error-actions .lc-btn {
min-width: 200px;
}
.lc-error-actions a.lc-error-back {
color: var(--text-tertiary, var(--color-silver, #8a8780));
text-decoration: none;
font-size: 14px;
transition: color 0.15s ease;
}
.lc-error-actions a.lc-error-back:hover {
color: var(--accent-primary, var(--color-accent, #c4704a));
}
@keyframes lc-error-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.lc-error-hero { animation: none; }
}