/* LogosArchive — App Styles v4 Light mode default. Dark mode via [data-theme="dark"] on . Heading font (Jost) switches to JetBrains Mono in dark mode. Body: Lora. Display/wordmark: Cormorant Garamond italic. Requires tokens.css to be loaded first. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body { font-family: var(--font-heading); background: var(--color-page); color: var(--color-text-primary); line-height: var(--leading-normal); overflow-x: hidden; max-width: 100%; } /* ── Boot screen ── */ .boot-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-page); } .boot-wordmark { font-family: var(--font-heading); font-weight: 300; font-size: 1rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--color-text-primary); opacity: 0; animation: fadeIn 0.5s 0.1s ease forwards; } .boot-wordmark em { font-style: italic; font-family: var(--font-display); font-weight: 300; font-size: 1rem; color: var(--color-accent); letter-spacing: 0; text-transform: lowercase; } @keyframes fadeIn { to { opacity: 1; } } /* ── App shell grid ── */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--header-height) 1fr; min-height: 100vh; } .app-shell > * { min-width: 0; } /* ── Header ── */ .app-header { grid-column: 1 / -1; display: flex; align-items: center; padding: 0 var(--space-6); background: var(--color-header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border-default); gap: var(--space-8); position: sticky; top: 0; z-index: 100; } /* Wordmark — "logos" in heading font, "Archive" italic accent */ .wordmark { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0; } .wm-main { font-family: var(--font-heading); font-weight: 400; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: lowercase; color: var(--color-text-primary); line-height: 1; } /* Light mode: Cormorant Garamond italic for "Archive" */ .wm-main em { font-style: italic; font-family: var(--font-display); font-weight: 300; font-size: 1.05em; color: var(--color-accent); letter-spacing: 0; text-transform: lowercase; } /* Dark mode: JetBrains Mono for "Archive" (via --font-heading = JetBrains Mono) */ [data-theme="dark"] .wm-main em { font-family: var(--font-heading); font-style: normal; font-size: inherit; letter-spacing: inherit; } .wm-sub { font-family: var(--font-heading); font-size: 9px; letter-spacing: 0.12em; text-transform: lowercase; color: var(--color-text-tertiary); font-weight: 300; margin-top: 3px; } /* Header search */ .header-search { flex: 1; max-width: 400px; position: relative; } .header-search input { width: 100%; height: 34px; padding: 0 var(--space-4) 0 34px; background: var(--color-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-text-primary); outline: none; transition: border-color 150ms; } .header-search input:focus { border-color: var(--color-accent); background: var(--color-surface); } .header-search input::placeholder { color: var(--color-text-tertiary); letter-spacing: 0; } .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; } .header-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); } .header-link { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; color: var(--color-text-secondary); text-decoration: none; transition: color 120ms; cursor: pointer; background: none; border: none; padding: 0; } .header-link:hover { color: var(--color-text-primary); } .header-div { width: 1px; height: 14px; background: var(--color-border-default); } /* ── Sidebar ── */ .app-sidebar { border-right: 1px solid var(--color-border-default); background: var(--color-page); padding: var(--space-8) 0; overflow-y: auto; position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); } .sb-section { padding: 0 var(--space-5); margin-bottom: var(--space-8); } .sb-label { font-family: var(--font-heading); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; color: var(--color-text-tertiary); margin-bottom: var(--space-4); } .sb-stat { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 300; color: var(--color-text-primary); letter-spacing: var(--tracking-tight); line-height: 1; margin-bottom: 4px; } .sb-stat-sub { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--color-text-tertiary); text-transform: lowercase; } .sb-divider { height: 1px; background: var(--color-border-default); margin: 0 var(--space-5) var(--space-6); } .nav-list { list-style: none; } .nav-item a { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-5); font-family: var(--font-heading); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-text-tertiary); text-decoration: none; border-left: 1.5px solid transparent; transition: all 120ms; cursor: pointer; } .nav-item a:hover { color: var(--color-text-primary); background: var(--color-surface); } .nav-item a.active { color: var(--color-accent); background: transparent; border-left-color: var(--color-accent-dim); font-weight: 400; } .nav-count { font-family: var(--font-heading); font-size: var(--text-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; } .pip { display: inline-block; width: 5px; height: 5px; border-radius: var(--radius-full); margin-right: 8px; vertical-align: 1px; flex-shrink: 0; } /* ── Main content area ── */ .app-main { background: var(--color-page); overflow-y: auto; } /* ── Hero ── */ .home-hero { padding: var(--space-20) var(--space-12) var(--space-12); border-bottom: 1px solid var(--color-border-default); max-width: 820px; } .hero-label { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-5); } .hero-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 200; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--color-text-primary); margin-bottom: var(--space-5); } .hero-title em { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--color-accent); letter-spacing: 0; } .hero-body { font-family: var(--font-body); font-size: var(--text-md); color: var(--color-text-secondary); line-height: var(--leading-loose); max-width: 520px; margin-bottom: var(--space-10); } /* ── AI Bar (homepage) ── */ .ai-bar { background: var(--color-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); max-width: 640px; overflow: hidden; margin-bottom: var(--space-5); } .ai-top { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-default); } .ai-eyebrow { font-family: var(--font-heading); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-tertiary); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .ai-pulse { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-accent); animation: pulse 2.5s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } .ai-promise { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-3); line-height: var(--leading-normal); } .ai-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-text-primary); } .ai-input::placeholder { color: var(--color-text-tertiary); font-style: normal; } .ai-bottom { display: flex; flex-direction: column; background: var(--color-page); } .ai-bottom .chips { padding: var(--space-3) var(--space-5); } .ai-input-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-default); background: var(--color-surface); } .ai-send { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; color: var(--color-accent); background: none; border: none; cursor: pointer; transition: color 120ms; flex-shrink: 0; } .ai-send:hover { color: var(--color-text-primary); } .ai-send--btn { background: var(--color-accent); color: var(--color-page); border-radius: var(--radius-full); padding: 6px 18px; font-weight: 400; transition: background 120ms; } .ai-send--btn:hover { background: var(--color-accent-dim); color: var(--color-page); } .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .chip { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-secondary); background: var(--color-page); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: 5px var(--space-4); cursor: pointer; transition: all 120ms; white-space: nowrap; } .chip:hover { border-color: var(--color-accent-dim); color: var(--color-accent); background: var(--color-page); } /* AI response panel (homepage) */ .ai-response { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-default); background: var(--color-surface); } .ai-response-text { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary); line-height: var(--leading-relaxed); } .ai-error { font-family: var(--font-heading); font-size: var(--text-xs); color: #e57373; } /* ── Grid section ── */ .grid-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-12) var(--space-5); } .grid-label { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary); } .grid-count { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-text-tertiary); } .sort-options { display: flex; gap: var(--space-2); } .sort-btn { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-tertiary); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-md); transition: all 120ms; } .sort-btn:hover { color: var(--color-text-primary); } .sort-btn.active { color: var(--color-accent); background: transparent; } /* ── Document grid ── */ .doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border-default); border-top: 1px solid var(--color-border-default); margin: 0 var(--space-12) var(--space-20); } .doc-card { background: var(--color-raised); padding: var(--space-6); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--space-4); cursor: pointer; transition: background 120ms; min-height: 220px; } .doc-card:hover { background: var(--color-surface); } .doc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .doc-date { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-tertiary); padding-top: 1px; white-space: nowrap; } .badge { font-family: var(--font-heading); font-size: 9px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; } /* Category badges — colored in light, muted in dark (via --cat-* token overrides) */ .b-nt { background: var(--cat-nt-bg); color: var(--cat-nt); border: 1px solid var(--cat-nt-border); } .b-apo { background: var(--cat-apo-bg); color: var(--cat-apo); border: 1px solid var(--cat-apo-border); } .b-gno { background: var(--cat-gno-bg); color: var(--cat-gno); border: 1px solid var(--cat-gno-border); } .b-fat { background: var(--cat-fat-bg); color: var(--cat-fat); border: 1px solid var(--cat-fat-border); } .b-oth { background: var(--cat-oth-bg); color: var(--cat-oth); border: 1px solid var(--cat-oth-border); } .b-stj { background: var(--cat-stj-bg); color: var(--cat-stj); border: 1px solid var(--cat-stj-border); } .b-grb { background: var(--cat-grb-bg); color: var(--cat-grb); border: 1px solid var(--cat-grb-border); } /* Feature 1: hypothetical/lost/fragmentary badge */ .b-hyp { background: transparent; color: var(--color-text-tertiary); border: 1px dashed var(--color-border-default); font-style: italic; } /* Feature 1: card badge stack */ .doc-card-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .card-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); line-height: var(--leading-snug); flex: 1; } .card-summary { font-family: var(--font-body); font-size: .875rem; color: var(--color-text-secondary); line-height: var(--leading-relaxed); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-foot { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-tertiary); text-transform: uppercase; padding-top: var(--space-3); border-top: 1px solid var(--color-border-default); } /* ── Empty states ── */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 32px; gap: var(--space-4); grid-column: 1 / -1; } .empty-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 300; color: var(--color-text-primary); } .empty-body { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: 420px; } .empty-body code { background: var(--color-surface); padding: 2px 7px; border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-accent); } /* ════════════════════════════════════════════════════════════════ DOCUMENT PAGE — book layout. Cormorant Garamond for the title. Lora for body. Jost for labels. Centered title block, narrow body column, sticky aside. ════════════════════════════════════════════════════════════════ */ /* ── Document page ── */ .doc-page { min-height: 100vh; background: var(--color-page); color: var(--color-text-primary); } /* Two-column wrapper: content col (1fr) + aside (280px) */ .doc-book { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-10); max-width: 900px; padding: var(--space-10) var(--space-12); align-items: start; } /* Left column */ .doc-book-main { min-width: 0; } /* Breadcrumb — centered */ .breadcrumb { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: lowercase; color: var(--color-text-secondary); margin-bottom: var(--space-6); } .breadcrumb a { color: var(--color-text-secondary); text-decoration: none; cursor: pointer; transition: color 120ms; } .breadcrumb a:hover { color: var(--color-accent); } /* Title — Cormorant Garamond, large, centered */ .doc-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; letter-spacing: -0.02em; line-height: var(--leading-tight); color: var(--color-text-primary); margin-bottom: var(--space-4); text-align: center; } /* Metadata row — centered */ .doc-meta { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 0; } .meta-item { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-2); } .meta-sep { width: 1px; height: 12px; background: var(--color-border-default); } /* ⁕ ornamental divider */ .doc-divider { font-size: 18px; color: var(--color-text-tertiary); text-align: center; margin: var(--space-5) auto; display: block; line-height: 1; user-select: none; } /* Pull quote — centered, no left border, Lora italic */ .pull { font-family: var(--font-body); font-style: italic; font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: 480px; margin: 0 auto var(--space-8); text-align: center; border: none; padding: 0; } /* Translation block — centered, stacked pills */ .trans-cta-row { max-width: 320px; margin: 0 auto var(--space-8); } .trans-label { font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-3); text-align: center; } .trans-pills { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; } /* Body section */ .doc-body-section { margin-top: var(--space-8); } .sec-head { font-family: var(--font-heading); font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-default); } /* Body text — narrow, max 520px */ .body-text { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--color-text-primary); max-width: 520px; overflow-wrap: break-word; } .body-text p { margin-bottom: var(--space-5); } .body-text p:last-child { margin-bottom: 0; } /* Related wrappers — mobile shows below content, desktop in aside */ .doc-related-mobile { display: none; } .doc-related-desktop { display: block; } /* Related section inside aside: strip full-width padding, single column */ .doc-related-desktop .related-section { padding: var(--space-6) 0 0; border-top: none; background: transparent; } .doc-related-desktop .related-section-head { padding: 0 0 var(--space-4); } .doc-related-desktop .related-grid { grid-template-columns: 1fr; gap: var(--space-3); } /* ── Inline AI bar (doc page) — reading zone ── */ .inline-ai { background: var(--color-page); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); margin: var(--space-8) 0; max-width: 520px; } .inline-ai-label { font-family: var(--font-heading); font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .inline-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .inline-row { display: flex; gap: var(--space-3); align-items: center; border-top: 1px solid var(--color-border-default); padding-top: var(--space-3); } .inline-input { flex: 1; border: none; background: none; outline: none; font-family: var(--font-body); font-size: .9375rem; color: var(--color-text-primary); } .inline-input::placeholder { color: var(--color-text-secondary); font-style: italic; } .ai-go { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; background: var(--color-accent); color: var(--color-page); border: none; border-radius: var(--radius-full); padding: 6px 14px; cursor: pointer; font-weight: 400; transition: background 120ms; flex-shrink: 0; } .ai-go:hover { background: var(--color-accent-dim); color: var(--color-page); } .inline-response { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-default); } .inline-response-text { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary); line-height: var(--leading-relaxed); } /* ── Aside (sticky) — reading zone ── */ .doc-aside { position: sticky; top: calc(var(--header-height) + var(--space-6)); } .aside-block { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4); background: var(--color-raised); } .aside-head { font-family: var(--font-heading); font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--color-text-secondary); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-default); background: var(--color-page); } .aside-body { padding: var(--space-4); } /* ── Aside: translation buttons — reading zone ── */ .aside-body--trans { display: flex; flex-direction: column; gap: var(--space-2); } .aside-trans-btn { display: flex; align-items: center; width: 100%; text-align: left; padding: var(--space-3) var(--space-4); min-height: 44px; font-family: var(--font-heading); font-size: var(--text-sm); letter-spacing: 0.04em; line-height: 1.4; color: var(--color-text-primary); background: var(--color-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); cursor: pointer; text-decoration: none; transition: all 120ms; white-space: normal; } .aside-trans-btn:hover { border-color: var(--color-accent-dim); background: var(--color-surface); color: var(--color-accent); } .aside-trans-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-page); font-weight: var(--weight-medium); } .aside-trans-btn--primary:hover { background: var(--color-accent-dim); border-color: var(--color-accent-dim); color: var(--color-page); } .aside-trans-btn--unavail { opacity: 0.5; cursor: default; } .aside-trans-btn--unavail:hover { border-color: var(--color-border-default); background: var(--color-raised); color: var(--color-text-primary); } .fact { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-default); font-family: var(--font-heading); font-size: var(--text-sm); } .fact:last-child { border-bottom: none; } .fk { color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); } .fv { color: var(--color-text-primary); font-weight: var(--weight-medium); text-align: right; max-width: 55%; } .xln { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-default); } .xln:last-child { border-bottom: none; } .xln-name { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: 2px; } .xln-meta { font-family: var(--font-heading); font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); } .btn-read { font-family: var(--font-heading); font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: lowercase; color: var(--color-accent); background: none; border: 1px solid var(--color-accent-dim); border-radius: var(--radius-full); padding: 3px 10px; cursor: pointer; transition: all 120ms; } .btn-read:hover { background: var(--color-surface); border-color: var(--color-accent); } /* Feature 1: Sidebar toggle — shell zone */ .sb-toggle { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; padding: var(--space-2) 0; } .sb-toggle input[type="checkbox"] { display: none; } .sb-toggle-track { width: 28px; height: 16px; border-radius: var(--radius-full); background: var(--color-border-default); position: relative; flex-shrink: 0; transition: background 150ms; } .sb-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-text-tertiary); transition: transform 150ms; } .sb-toggle input:checked + .sb-toggle-track { background: var(--color-accent-dim); } .sb-toggle input:checked + .sb-toggle-track::after { transform: translateX(12px); background: var(--color-accent); } .sb-toggle-label { font-family: var(--font-heading); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-text-secondary); } /* Feature 1: status flag in doc hero — reading zone */ .doc-status-flag { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-2) var(--space-4); border: 1px dashed var(--color-accent-dim); border-radius: var(--radius-sm); background: var(--color-surface); font-family: var(--font-heading); font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: lowercase; color: var(--color-accent); font-style: normal; } .doc-status-flag-icon { color: var(--color-accent-dim); font-style: normal; } .fv--status { color: var(--color-text-secondary); font-style: italic; } /* Feature 2: Translation CTA row in doc hero — reading zone */ .trans-cta-row { margin-top: var(--space-6); } .trans-label { font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-3); font-family: var(--font-heading); } .trans-pills { display: flex; flex-wrap: wrap; gap: var(--space-3); } .trans-cta-pill { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: var(--space-3) var(--space-6); min-height: 44px; font-family: var(--font-heading); font-size: var(--text-sm); cursor: pointer; transition: all 120ms; background: var(--color-raised); color: var(--color-text-primary); text-decoration: none; letter-spacing: 0.04em; white-space: normal; line-height: 1.4; } .trans-cta-pill:hover { border-color: var(--color-accent-dim); background: var(--color-surface); color: var(--color-accent); } .trans-cta-pill--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-page); font-weight: var(--weight-medium); } .trans-cta-pill--primary:hover { background: var(--color-accent-dim); border-color: var(--color-accent-dim); color: var(--color-page); } .trans-cta-pill--primary .trans-pill-arrow { color: rgba(0,0,0,0.5); } .trans-cta-pill--primary:hover .trans-pill-arrow { color: rgba(0,0,0,0.6); } .trans-cta-pill--ext { color: var(--color-text-secondary); } .trans-cta-pill--unavail { color: var(--color-text-secondary); cursor: default; opacity: 0.6; } .trans-cta-pill--unavail:hover { border-color: var(--color-border-default); background: var(--color-raised); color: var(--color-text-secondary); } .trans-pill-arrow { font-family: var(--font-heading); font-size: var(--text-xs); color: var(--color-text-tertiary); } .trans-cta-pill:hover .trans-pill-arrow { color: var(--color-accent-dim); } /* ── Copyright state 2: unverified provenance note ── */ .trans-pill-wrapper { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; } .trans-pill-note { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); padding-left: var(--space-3); letter-spacing: 0.02em; } /* ── Copyright state 3: all-external note ── */ .trans-all-external-note { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); font-style: italic; text-align: center; margin-top: var(--space-4); max-width: 360px; line-height: 1.6; } /* ── Toast notification ── */ .toast { position: fixed; bottom: var(--space-8); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--color-accent); color: var(--color-page); padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 200ms, transform 200ms; } .toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ════════════════════════════════════════════════════════════════ Feature 3: Reader page — terminal dark throughout. Night mode toggle preserved; base is now dark so it's subtle. ════════════════════════════════════════════════════════════════ */ .reader-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-page); } .reader-progress { height: 2px; background: var(--color-accent); width: 0%; transition: width 100ms linear; position: fixed; top: 0; left: 0; right: 0; z-index: 200; } /* Slim reader header — 44px, 3-column layout */ .reader-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; padding: 0 var(--space-6); height: 44px; background: var(--color-page); border-bottom: 1px solid var(--color-border-default); gap: var(--space-4); } .reader-back { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; color: var(--color-text-secondary); background: none; border: none; cursor: pointer; transition: color 120ms; padding: 0; white-space: nowrap; flex-shrink: 0; } .reader-back:hover { color: var(--color-accent); } /* Center: doc title · translation name */ .reader-header-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); overflow: hidden; } .reader-header-doc, .reader-header-trans { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reader-header-sep { font-family: var(--font-heading); font-size: var(--text-xs); color: var(--color-text-tertiary); flex-shrink: 0; } .reader-controls { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .reader-ctrl { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-tertiary); background: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 4px 10px; cursor: pointer; transition: all 120ms; } .reader-ctrl:hover { border-color: var(--color-accent-dim); color: var(--color-accent); background: transparent; } /* Scrollable reading area */ .reader-body { flex: 1; overflow-y: auto; max-width: 640px; margin: 0 auto; padding: var(--space-12) var(--space-8); font-family: var(--font-body); font-size: var(--reader-size, 1.125rem); line-height: 1.9; color: var(--color-text-primary); width: 100%; } /* Text container: renders normalized HTML paragraphs */ .reader-text p { margin-bottom: 1.5em; } .reader-text p:last-child { margin-bottom: 0; } /* Inline verse references — superscript, subdued, mono */ .verse-ref { font-family: var(--font-heading); font-size: 0.625rem; color: var(--color-text-tertiary); vertical-align: super; line-height: 1; margin-right: 0.15em; letter-spacing: 0; } /* Prologue label in verse-based reader */ .reader-verse-prologue { vertical-align: baseline; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Chapter sub-headings (Didache, Ignatius, etc.) */ .reader-chapter-head { font-family: var(--font-heading); font-weight: var(--weight-light); font-size: var(--text-sm); letter-spacing: var(--tracking-widest); text-transform: lowercase; color: var(--color-text-tertiary); text-align: center; margin: 2.5em 0 1.25em; } .reader-chapter-head:first-child { margin-top: 0; } .reader-title { text-align: center; margin-bottom: var(--space-12); padding-bottom: var(--space-10); border-bottom: 1px solid var(--color-border-default); } .reader-title-translation { font-family: var(--font-heading); font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: lowercase; color: var(--color-text-tertiary); margin-bottom: var(--space-3); } .reader-title-doc { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } /* ════════════════════════════════════════════════════════════════ Feature 4: Related section — reading zone ════════════════════════════════════════════════════════════════ */ .related-section { padding: var(--space-12) var(--space-12) var(--space-20); border-top: 1px solid var(--color-border-default); background: var(--color-page); } .related-section-head { font-size: 9px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-secondary); font-family: var(--font-heading); font-weight: var(--weight-medium); margin-bottom: var(--space-6); } .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-border-default); } .related-card { background: var(--color-raised); padding: var(--space-5); cursor: pointer; transition: background 120ms; display: flex; flex-direction: column; gap: var(--space-3); } .related-card:hover { background: var(--color-surface); } .related-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .related-date { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); color: var(--color-text-secondary); padding-top: 1px; white-space: nowrap; } .related-title { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); line-height: var(--leading-snug); } .related-summary { font-family: var(--font-body); font-size: .8125rem; color: var(--color-text-secondary); line-height: var(--leading-relaxed); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 3px; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE LAYOUT — breakpoint map ════════════════════════════════════════════════════════════════ 900px — tablet portrait: hide sidebar, full-width main, 2-col grid 768px — mobile: header collapses, doc aside hidden, reader padding 560px — small mobile: single-column doc grid, flat index layout ═══════════════════════════════════════════════════════════════ */ /* ── 900px: tablet portrait and below ── */ @media (max-width: 900px) { .app-sidebar { display: none; } .app-shell { grid-template-columns: 1fr; } .doc-grid { grid-template-columns: repeat(2, 1fr); } .home-hero { padding: var(--space-10) var(--space-6); } .doc-book { padding: var(--space-8) var(--space-6); } .grid-head { padding: var(--space-6) var(--space-6) var(--space-4); } .doc-grid { margin-left: var(--space-6); margin-right: var(--space-6); } .related-section { padding: var(--space-8) var(--space-5); } .related-grid { display: flex; overflow-x: auto; gap: 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; background: none; } .related-card { flex: 0 0 78vw; scroll-snap-align: start; border-right: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); } } /* ── 768px: mobile phones ── */ @media (max-width: 768px) { /* Keep theme toggle visible on mobile; hide other header-right items */ .header-right .header-link:not(.theme-toggle), .header-right .header-div { display: none; } .app-header { padding: 0 var(--space-4); gap: var(--space-4); } .header-search { min-width: 0; max-width: 160px; } .reader-body { padding: var(--space-8) var(--space-4); } .reader-header { padding: 0 var(--space-4); } .reader-header-center { display: none; } .hero-title { font-size: var(--text-2xl); } .ai-bar { width: 100%; } .card-summary { -webkit-line-clamp: 2; } /* Doc page: single-column, aside hidden, related moves to bottom */ .doc-book { grid-template-columns: 1fr; padding: var(--space-8) var(--space-5); } .doc-aside { display: none; } .doc-related-mobile { display: block; margin-top: var(--space-8); } .doc-related-desktop { display: none; } } /* ── Mobile filter bar ── */ .mobile-filters { display: none; background: var(--color-page); border-bottom: 1px solid var(--color-border-default); padding: var(--space-3) 0 var(--space-3) var(--space-6); } .mf-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: var(--space-6); } .mf-chips::-webkit-scrollbar { display: none; } .mf-chip { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-tertiary); background: var(--color-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: 5px var(--space-4); cursor: pointer; transition: all 120ms; white-space: nowrap; flex-shrink: 0; } .mf-chip:hover { border-color: var(--color-accent-dim); color: var(--color-accent); background: var(--color-page); } .mf-chip--active { background: var(--color-page); border-color: var(--color-accent-dim); color: var(--color-accent); font-weight: 400; } .mf-count { color: var(--color-text-tertiary); font-weight: 300; font-size: 10px; } .mf-chip--active .mf-count { color: var(--color-accent); } @media (max-width: 900px) { .mobile-filters { display: block; } } /* ── 560px: small mobile phones ── */ @media (max-width: 560px) { .doc-grid { grid-template-columns: 1fr; } .related-card { flex: 0 0 88vw; } .home-hero { padding: 12px var(--space-4) var(--space-5); } .hero-body { font-size: 1rem; margin-bottom: var(--space-5); } .ai-bar { margin-bottom: var(--space-3); } .grid-head { padding: var(--space-5) var(--space-4) var(--space-3); } .mobile-filters { padding-left: var(--space-4); } .mf-chips { padding-right: var(--space-4); } .doc-book { padding: var(--space-6) var(--space-4); } .doc-title { font-size: var(--text-2xl); } /* Flat index layout on small mobile */ .doc-grid { gap: 0; background: transparent; border-top: none; margin-left: 0; margin-right: 0; } .doc-card { background: transparent; border-radius: 0; box-shadow: none; border-top: 1px solid var(--color-border-default); padding: 16px var(--space-4) 12px; gap: var(--space-2); min-height: 0; } .card-foot { border-top: none; padding-top: 0; text-transform: none; letter-spacing: 0; } } /* ════════════════════════════════════════════════════════════════ AI CHAT THREAD — desktop inline expansion (shell zone chrome, reading surface for message content) ════════════════════════════════════════════════════════════════ */ .ai-bar--thread, .inline-ai.ai-bar--thread { display: flex; flex-direction: column; } .ai-thread { max-height: 55vh; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-height: 80px; } .ai-msg { display: flex; align-items: flex-start; } /* User message — mono pill */ .ai-msg--user { justify-content: flex-end; } .ai-msg-bubble { background: var(--color-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-size: var(--text-sm); color: var(--color-text-primary); max-width: 78%; line-height: var(--leading-normal); } /* AI response — dark card */ .ai-msg--ai { justify-content: flex-start; flex-direction: column; } .ai-msg-card { background: var(--color-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary); line-height: var(--leading-relaxed); max-width: 92%; } .ai-msg-card p { margin: 0; } .ai-msg-card p + p { margin-top: var(--space-3); } /* Follow-up input row (desktop thread footer — shell zone) */ .ai-thread-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-default); background: var(--color-surface); flex-shrink: 0; } .ai-thread-input-field { flex: 1; border: none; background: none; outline: none; font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-text-primary); } .ai-thread-input-field::placeholder { color: var(--color-text-tertiary); font-style: normal; } .ai-thread-send { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; color: var(--color-accent); background: none; border: none; cursor: pointer; transition: color 120ms; flex-shrink: 0; } .ai-thread-send:hover { color: var(--color-text-primary); } /* Three sequential pulsing dots — loading state */ .ai-dots { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; } .ai-dots span { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-text-tertiary); animation: dot-pulse 1.2s ease-in-out infinite; } .ai-dots span:nth-child(2) { animation-delay: 0.18s; } .ai-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes dot-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } /* ════════════════════════════════════════════════════════════════ MOBILE SLIDE-UP SHEET — reading surface ════════════════════════════════════════════════════════════════ */ .ai-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 320ms ease; } .ai-scrim--open { opacity: 1; pointer-events: auto; } .ai-sheet { position: fixed; bottom: 0; left: 0; right: 0; height: 85dvh; background: var(--color-page); border-radius: 12px 12px 0 0; z-index: 1001; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 320ms ease; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4); overflow: hidden; } .ai-sheet--open { transform: translateY(0); } .ai-sheet-intro { flex-shrink: 0; padding: var(--space-5) var(--space-5) var(--space-3); transition: opacity 220ms; } .ai-sheet-handle-area { display: flex; align-items: center; justify-content: center; padding: var(--space-3) 0 var(--space-2); flex-shrink: 0; } .ai-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--color-border-default); } .ai-sheet-thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .ai-sheet-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border-default); background: var(--color-page); flex-shrink: 0; } .ai-sheet-input { border: none; background: none; outline: none; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary); } .ai-sheet-input::placeholder { color: var(--color-text-secondary); font-style: italic; } .ai-sheet-send { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; color: var(--color-accent); background: none; border: none; cursor: pointer; transition: color 120ms; flex-shrink: 0; } .ai-sheet-send:hover { color: var(--color-accent-dim); } /* ── FAB (Floating Action Button) — shell accent ── */ @keyframes fab-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } .ai-fab { position: fixed; bottom: 28px; right: 28px; z-index: 900; width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-accent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: transform 120ms, box-shadow 120ms; } .ai-fab:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0,0,0,0.45); } .ai-fab--active { background: var(--color-accent-dim); } .ai-fab-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: lowercase; color: #0f0f0f; position: relative; z-index: 1; } .ai-fab-ring { position: absolute; inset: 0; border-radius: var(--radius-full); border: 2px solid var(--color-accent-dim); animation: fab-pulse 2.4s ease-out infinite; pointer-events: none; } /* ── Desktop AI panel — reading surface ── */ .ai-panel { position: fixed; bottom: 92px; right: 28px; z-index: 901; width: 380px; height: 500px; background: var(--color-page); border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.97); pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; } .ai-panel--open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ai-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; } .ai-panel-title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); color: var(--color-text-primary); } .ai-panel-close { background: none; border: none; cursor: pointer; font-size: var(--text-sm); color: var(--color-text-secondary); padding: 4px 6px; border-radius: 4px; transition: color 120ms, background 120ms; } .ai-panel-close:hover { color: var(--color-text-primary); background: var(--color-surface); } .ai-panel-thread { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .ai-panel-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-default); background: var(--color-page); flex-shrink: 0; } .ai-panel-input { border: none; background: none; outline: none; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary); } .ai-panel-input::placeholder { color: var(--color-text-secondary); font-style: italic; } .ai-panel-send { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; color: var(--color-accent); background: none; border: none; cursor: pointer; transition: color 120ms; flex-shrink: 0; } .ai-panel-send:hover { color: var(--color-accent-dim); } @media (max-width: 768px) { .ai-fab { bottom: 20px; right: 20px; } .ai-panel { display: none; } } /* ── FAB empty state ── */ .ai-empty { padding: var(--space-2) 0 var(--space-4); transition: opacity 220ms; } .ai-empty-framing { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.06em; text-transform: lowercase; color: var(--color-text-secondary); margin-bottom: var(--space-6); line-height: 1.6; } .ai-empty-framing em { font-style: normal; color: var(--color-text-primary); } .ai-empty-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .ai-empty-chip { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.04em; padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--color-border-default); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: border-color 150ms, color 150ms; text-align: left; } .ai-empty-chip:hover { border-color: var(--color-accent-dim); color: var(--color-accent); } /* ── Follow-up suggestion chips ── */ .ai-followup-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .ai-followup-chip { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.04em; padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--color-accent-dim); background: var(--color-surface); color: var(--color-accent); cursor: pointer; transition: border-color 150ms, background 150ms; text-align: left; } .ai-followup-chip:hover { border-color: var(--color-accent); background: var(--color-raised); } /* ── Rotating placeholder overlay ── */ .ai-footer-wrap { position: relative; flex: 1; min-width: 0; } .ai-footer-wrap input { width: 100%; border: none; background: none; outline: none; font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-text-primary); } .ai-rotating-ph { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-text-tertiary); pointer-events: none; transition: opacity 400ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ── Stop button state ── */ .ai-send--stop, .ai-thread-send.ai-send--stop, .ai-panel-send.ai-send--stop, .ai-sheet-send.ai-send--stop { color: var(--color-text-tertiary); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; cursor: pointer; } .ai-send--stop:hover { color: var(--color-text-primary) !important; } /* ── Translation pill source subtitle ── */ .trans-cta-pill--has-source, .aside-trans-btn--has-source { flex-direction: column; align-items: flex-start; gap: 2px; } .trans-pill-source { font-family: var(--font-body); font-size: 12px; color: var(--color-text-secondary); font-weight: 300; font-style: normal; letter-spacing: 0; line-height: 1.2; } /* ── Mobile sort divider + button ── */ .mf-divider { width: 1px; background: var(--color-border-default); height: 18px; flex-shrink: 0; align-self: center; margin: 0 2px; } .mf-sort-btn { border-color: var(--color-accent-dim); color: var(--color-accent); } /* ── Mobile sort sheet ── */ .sort-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .sort-scrim--open { opacity: 1; pointer-events: auto; } .sort-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-page); border-radius: 12px 12px 0 0; z-index: 1101; transform: translateY(100%); transition: transform 280ms ease; box-shadow: 0 -4px 24px rgba(0,0,0,0.4); padding-bottom: env(safe-area-inset-bottom, 0px); } .sort-sheet--open { transform: translateY(0); } .sort-sheet-handle-area { display: flex; align-items: center; justify-content: center; padding: 12px 0 8px; } .sort-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--color-border-default); } .sort-sheet-label { font-family: var(--font-heading); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 0 var(--space-6) var(--space-3); } .sort-sheet-options { padding: 0 var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } .sort-sheet-opt { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); font-family: var(--font-heading); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-text-secondary); cursor: pointer; transition: all 120ms; width: 100%; text-align: left; } .sort-sheet-opt:hover { border-color: var(--color-accent-dim); color: var(--color-text-primary); } .sort-sheet-opt.active { color: var(--color-accent); border-color: var(--color-accent-dim); } .sort-check { color: var(--color-accent); font-size: var(--text-sm); } /* ════════════════════════════════════════════════════════════════ AI DOC CARDS — rich reading suggestions in chat thread ════════════════════════════════════════════════════════════════ */ .ai-doc-cards { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); width: 100%; } .ai-doc-card { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; background: var(--color-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); } .ai-doc-card-header { display: flex; align-items: center; gap: var(--space-2); } .ai-doc-card-date { font-family: var(--font-heading); font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: 0.04em; } .ai-doc-card-badge { font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.08em; text-transform: lowercase; padding: 1px 6px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-secondary); } .ai-doc-card-title { font-family: var(--font-heading); font-size: var(--text-md); color: var(--color-text-primary); font-weight: 400; line-height: 1.3; } .ai-doc-card-summary { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .ai-doc-card-trans { font-family: var(--font-heading); font-size: 11px; color: var(--color-text-tertiary); letter-spacing: 0.04em; } .ai-doc-card-read { display: block; width: 100%; margin-top: var(--space-1); padding: 7px; background: var(--color-accent); color: #0f0f0f; border: none; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: lowercase; cursor: pointer; transition: background 120ms; text-align: center; } .ai-doc-card-read:hover { background: var(--color-accent-dim); }