/* Global styles for the Tolkien‑themed writing and worldbuilding application. We use CSS custom properties to define a light and dark theme inspired by Middle‑earth. The light theme draws on soft greens and warm golds like Rivendell, while the dark theme uses deep greys and fiery oranges evocative of Mordor. A data attribute on the element (data-theme="dark") toggles between the two palettes. All colours reference these variables so the theme can be switched with a single class change. The UI aims for a clean, modern look with generous spacing and simple typography. The body copy uses a sans‑serif stack for legibility during long writing sessions, while headings use a serif stack to hint at the classical feel of Tolkien’s world. No cursive or ornate fonts are used. Layout is handled with flexbox. A collapsible sidebar on the left lists the major modules (Projects, Manuscript, Timeline, Characters, Locations, Items, etc.). The main content area occupies the remaining space. On narrow viewports (e.g. phones), the sidebar collapses into a top bar. This file should be included after the fontawesome CSS in your HTML. */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* Theme definitions */ :root { --color-bg: #f6f7f9; --color-bg-alt: #ffffff; --color-primary: #d3542f; --color-secondary: #ea7a57; --color-accent: #e9ecef; --color-text: #171717; --color-text-muted: #5f6368; --color-border: #e2e4e8; --color-control-border: #c9cfd6; --color-card-bg: #ffffff; --color-card-border: #eceff2; --color-link: #d3542f; --color-link-hover: #b84325; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --shadow-sm: 0 8px 24px rgba(0,0,0,0.06); --shadow-md: 0 16px 40px rgba(0,0,0,0.12); } [data-theme="dark"] { --color-bg: #000000; --color-bg-alt: #0b0b0b; --color-primary: #ff6b4a; --color-secondary: #ff8a65; --color-accent: #161616; --color-text: #f5f5f5; --color-text-muted: #a6a6a6; --color-border: #3a2019; --color-control-border: #5a2f25; --color-card-bg: #0e0e0e; --color-card-border: #4a261e; --color-link: #ff6b4a; --color-link-hover: #ff8a65; } /* Global resets and typography */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: radial-gradient(circle at top left, rgba(211, 84, 47, 0.12), transparent 45%), radial-gradient(circle at bottom right, rgba(44, 93, 63, 0.08), transparent 40%), var(--color-bg); color: var(--color-text); font-family: "Manrope", "Segoe UI", sans-serif; line-height: 1.6; } [data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(255, 107, 74, 0.14), transparent 45%), radial-gradient(circle at bottom right, rgba(255, 200, 140, 0.06), transparent 40%), var(--color-bg); } h1, h2, h3, h4, h5, h6 { font-family: "Space Grotesk", "Manrope", sans-serif; font-weight: 600; margin: 0 0 0.5rem 0; line-height: 1.25; color: var(--color-primary); } p { margin: 0 0 1rem 0; } a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-link-hover); } /* Layout: container, sidebar and content */ .app-wrapper { display: flex; height: 100vh; overflow: hidden; } .topbar { display: none; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); background-color: color-mix(in srgb, var(--color-bg-alt) 88%, transparent); color: var(--color-primary); position: sticky; top: 0; z-index: 900; backdrop-filter: blur(18px); } .topbar-title { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; } .storywell-brand { display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; text-decoration: none; min-width: 0; } .storywell-brand:hover { color: inherit; } .storywell-brand-mark { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); box-shadow: 0 10px 24px rgba(211, 84, 47, 0.22); } .storywell-brand-mark i { font-size: 0.95rem; } .storywell-brand-copy { display: flex; flex-direction: column; min-width: 0; } .storywell-brand-wordmark { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.05; color: var(--color-primary); letter-spacing: 0.01em; } .storywell-brand-subtitle { font-size: 0.71rem; color: var(--color-text-muted); line-height: 1.1; } .storywell-topbar-lockup { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; min-width: 0; } .storywell-topbar-brand { gap: 0.55rem; } .storywell-topbar-brand .storywell-brand-mark { width: 1.9rem; height: 1.9rem; } .storywell-topbar-brand .storywell-brand-wordmark { font-size: 0.96rem; } .storywell-topbar-brand .storywell-brand-subtitle { display: none; } .storywell-mobile-context { min-width: 0; padding-left: 0.65rem; border-left: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent); font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auth-shell { max-width: 440px; margin: 0 auto; min-height: 100vh; padding: 2.5rem 1.25rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; } .storywell-auth-brand { align-self: center; padding: 0.7rem 0.95rem; border-radius: 999px; border: 1px solid var(--color-card-border); background: color-mix(in srgb, var(--color-card-bg) 90%, transparent); box-shadow: var(--shadow-sm); } .storywell-auth-brand .storywell-brand-wordmark { font-size: 1.2rem; } .storywell-auth-brand .storywell-brand-subtitle { font-size: 0.75rem; } .auth-checkbox-row { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0 0.85rem; font-size: 0.9rem; color: var(--color-text-muted); cursor: pointer; } .auth-checkbox-row input { margin: 0; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 900; opacity: 0; transition: opacity 0.2s ease; } .sidebar-overlay.show { display: block; opacity: 1; } .sidebar { width: 240px; min-width: 240px; flex: 0 0 240px; background-color: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; transition: width 0.3s ease; /* Always allow vertical scrolling so that the bottom navigation links (e.g. Relationships, Settings) remain reachable on shorter viewports. Without this the sidebar height can exceed the viewport and the last items become inaccessible. */ overflow-y: auto; box-shadow: 6px 0 24px rgba(0,0,0,0.08); } .sidebar.collapsed { width: 64px; min-width: 64px; flex-basis: 64px; } /* When sidebar is collapsed, hide the header text and user info to avoid overcrowding. Only the collapse/expand arrow remains. We also hide the labels on the navigation links by shrinking the font size of the anchor while preserving the icon size explicitly. */ .sidebar.collapsed .sidebar-header h2 { display: none; } .sidebar.collapsed .storywell-shell-brand .storywell-brand-copy { display: none; } .sidebar.collapsed .user-info span { display: none; } .sidebar.collapsed .user-info { display: none; } .sidebar.collapsed .nav-list a { justify-content: center; font-size: 0; /* hide text */ padding: 0.75rem 0; } .sidebar.collapsed .nav-list .nav-group-toggle { justify-content: center; font-size: 0; padding: 0.75rem 0; } .sidebar.collapsed .nav-list .nav-group-toggle .nav-group-icon { margin-right: 0; } .sidebar.collapsed .nav-list .nav-group-toggle .nav-label, .sidebar.collapsed .nav-list .nav-group-toggle .nav-caret { display: none; } .sidebar.collapsed .nav-list .nav-submenu { display: none !important; } .sidebar.collapsed .nav-list a i { margin-right: 0; font-size: 1rem; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--color-border); gap: 0.5rem; } .storywell-shell-brand { flex: 1; } .storywell-shell-brand .storywell-brand-mark { width: 2rem; height: 2rem; } .storywell-shell-brand .storywell-brand-wordmark { font-size: 1.08rem; } #collapseSidebar { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; box-shadow: none; padding: 0; } #collapseSidebar:hover { background-color: var(--color-card-bg); border-color: var(--color-border); } .sidebar.collapsed .sidebar-header { position: relative; justify-content: center; padding: 0.7rem 0.3rem; } .sidebar.collapsed .storywell-shell-brand { flex: 0 0 100%; width: 100%; justify-content: center; gap: 0; } .sidebar.collapsed .storywell-shell-brand .storywell-brand-mark { width: 1.85rem; height: 1.85rem; } .sidebar.collapsed #collapseSidebar { position: absolute; right: 0.2rem; top: 50%; width: 1.75rem; height: 1.75rem; transform: translateY(-50%); } #userDisplayName { font-weight: 600; font-size: 0.9rem; color: var(--color-primary); } #userEmail { font-size: 0.75rem; color: var(--color-text-muted); } .nav-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; } .nav-list li { margin: 0; } .nav-list a { display: flex; align-items: center; padding: 0.6rem 0.9rem; color: var(--color-text); border-radius: 999px; margin: 0.25rem 0.6rem; border: 1px solid transparent; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .nav-group-toggle { width: calc(100% - 1.2rem); margin: 0.25rem 0.6rem; display: flex; align-items: center; padding: 0.6rem 0.9rem; color: var(--color-text); border-radius: 999px; border: 1px solid transparent; background: none; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .nav-group-icon { width: 1rem; margin-right: 0.75rem; display: inline-flex; justify-content: center; align-items: center; } .nav-group-icon i { font-size: 1rem; } .nav-group-toggle .nav-label { flex: 1; text-align: left; } .nav-group-toggle .nav-caret { font-size: 0.75rem; color: var(--color-text-muted); margin-left: 0.35rem; transition: transform 0.2s ease; } .nav-group.open .nav-group-toggle .nav-caret { transform: rotate(180deg); } .nav-submenu { list-style: none; margin: 0.1rem 0 0.35rem; padding: 0 0 0 1rem; display: none; } .nav-group.open .nav-submenu { display: block; } .nav-submenu a { margin: 0.18rem 0.6rem; padding: 0.5rem 0.85rem; font-size: 0.84rem; } .nav-submenu a i { font-size: 0.9rem; } .nav-list a:hover, .nav-list a.active { background-color: var(--color-card-bg); color: var(--color-primary); border-color: var(--color-border); transform: translateX(2px); } .nav-group-toggle:hover, .nav-group-toggle.active { background-color: var(--color-card-bg); color: var(--color-primary); border-color: var(--color-border); transform: translateX(2px); } .nav-list a i { margin-right: 0.75rem; font-size: 1rem; } /* Content area */ .content { flex-grow: 1; overflow-y: auto; padding: 1.5rem; background-color: var(--color-bg); } .dashboard-brand-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; } .storywell-dashboard-brand { padding: 0.45rem 0.7rem; border-radius: 999px; border: 1px solid var(--color-card-border); background: color-mix(in srgb, var(--color-card-bg) 92%, transparent); box-shadow: var(--shadow-sm); } .storywell-dashboard-brand .storywell-brand-mark { width: 2rem; height: 2rem; } .storywell-dashboard-brand .storywell-brand-subtitle { display: none; } /* Focus writer (distraction-free) */ body.focus-mode .sidebar { display: none; } body.focus-mode .content { padding: 0; } body.focus-mode .topbar { display: none; } .focus-writer { height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background-color: var(--color-bg); overflow: hidden; position: relative; } .focus-writer:fullscreen, .focus-writer:-webkit-full-screen { width: 100vw; height: 100dvh; min-height: 100dvh; } .focus-toolbar, .focus-meta, .focus-formatting, .focus-footer { flex-shrink: 0; } .focus-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); background-color: var(--color-bg); } .focus-project { font-size: 0.85rem; color: var(--color-text-muted); } .focus-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .focus-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.5rem; background-color: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); } .focus-field label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--color-text-muted); } #focusContent { flex: 1 1 auto; width: 100%; min-height: 0; height: 100%; border: none; padding: 1.5rem; font-size: 1rem; line-height: 1.7; background-color: var(--color-bg); color: var(--color-text); resize: none; outline: none; font-family: Georgia, "Times New Roman", serif; white-space: pre-wrap; } #focusContent p, #focusContent div { margin: 0 0 0.9em; } #focusContent p:last-child, #focusContent div:last-child { margin-bottom: 0; } #focusContent[contenteditable="true"] { overflow-y: auto; -webkit-overflow-scrolling: touch; } #focusContent[data-writing-template="novel"] { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.85; } #focusContent[data-writing-template="novel"] p, #focusContent[data-writing-template="novel"] div { text-indent: 1.45em; margin-bottom: 0.85em; } #focusContent[data-writing-template="novel"] p:first-child, #focusContent[data-writing-template="novel"] div:first-child { text-indent: 0; } #focusContent[data-writing-template="screenplay"] { font-family: "Courier New", Courier, monospace; font-size: 1rem; line-height: 1.55; } #focusContent[data-writing-template="screenplay"] p, #focusContent[data-writing-template="screenplay"] div { margin-bottom: 0.55em; text-indent: 0; } #focusContent[data-writing-template="standard"] { font-family: "Merriweather", Georgia, serif; font-size: 1rem; line-height: 1.65; } #focusContent[data-writing-template="standard"] p, #focusContent[data-writing-template="standard"] div { margin-bottom: 0.7em; text-indent: 0; } .focus-formatting { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 1.5rem; border-bottom: 1px solid var(--color-border); background-color: var(--color-bg-alt); } .focus-formatting-label { font-size: 0.8rem; color: var(--color-text-muted); } .focus-template-label { margin-left: auto; margin-bottom: 0; font-size: 0.78rem; color: var(--color-text-muted); } .focus-template-select { min-width: 170px; margin-bottom: 0; height: 2rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } .focus-word-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 32px; padding: 0.25rem 1.5rem; border-top: 1px solid var(--color-border); background-color: var(--color-bg); font-size: 0.82rem; line-height: 1.15; } .focus-word-bar-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; flex: 1; } .focus-word-count, .focus-word-bar-total { white-space: nowrap; } .focus-chapter-goal { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--color-text-muted); } .focus-chapter-goal.is-complete { color: var(--color-text); } .focus-chapter-goal-track { display: inline-flex; align-items: center; width: 92px; height: 4px; border-radius: 999px; overflow: hidden; background-color: var(--color-bg-alt); } .focus-chapter-goal-fill { display: block; width: 0; height: 100%; border-radius: inherit; background-color: var(--color-primary); } .focus-chapter-goal-done { color: var(--color-primary); font-size: 0.75rem; } .focus-word-bar-total { color: var(--color-text-muted); text-align: right; } .focus-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; border-top: 1px solid var(--color-border); background-color: var(--color-bg); font-size: 0.85rem; } .focus-status-line { display: flex; gap: 1rem; align-items: center; } .focus-writer:fullscreen .focus-word-bar, .focus-writer:-webkit-full-screen .focus-word-bar { position: absolute; left: 0; right: 0; bottom: 3.75rem; z-index: 5; opacity: 1; pointer-events: none; border-bottom: 1px solid var(--color-border); transition: opacity 0.18s ease; } .focus-writer:fullscreen.focus-word-bar-typing .focus-word-bar, .focus-writer:-webkit-full-screen.focus-word-bar-typing .focus-word-bar { opacity: 0.42; } .focus-hint { font-size: 0.8rem; color: var(--color-text-muted); } .focus-history-list { display: flex; flex-direction: column; gap: 0.75rem; } .focus-history-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.4rem; background-color: var(--color-bg); } .focus-history-meta { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; } .manuscript-view { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 2rem; } .manuscript-chapter { border-bottom: 1px solid var(--color-border); padding-bottom: 1.5rem; } .manuscript-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.4rem; } .manuscript-title { font-size: 1.2rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.75rem; } .manuscript-content { white-space: pre-wrap; line-height: 1.7; font-size: 1rem; } .share-section { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); } .share-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .share-row input { flex: 1; min-width: 220px; } .share-row select { min-width: 220px; } .export-select { background-color: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-control-border); border-radius: 999px; padding: 0.55rem 0.9rem; font-size: 0.85rem; } .export-menu-wrap { position: relative; display: inline-flex; } .export-menu { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 1200; min-width: 220px; background: var(--color-card-bg); border: 1px solid var(--color-control-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; } .export-menu-option { width: 100%; text-align: left; border-radius: 10px; border: 1px solid transparent; padding: 0.55rem 0.75rem; background: transparent; color: var(--color-text); box-shadow: none; } .export-menu-option:hover { background: var(--color-bg-alt); border-color: var(--color-control-border); transform: none; box-shadow: none; } .access-section { margin-top: 1rem; } .access-section h4 { margin-bottom: 0.5rem; } .comment-list { display: flex; flex-direction: column; gap: 0.75rem; } .comment-item { border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.75rem; background-color: var(--color-bg-alt); display: flex; flex-direction: column; gap: 0.35rem; } .comment-quote { font-style: italic; color: var(--color-text-muted); } .comment-body { color: var(--color-text); } .comment-meta { font-size: 0.75rem; color: var(--color-text-muted); } .comment-highlight { background-color: rgba(179, 143, 89, 0.35); border-radius: 0.2rem; padding: 0 0.1rem; } .comment-highlight.resolved { background-color: rgba(142, 168, 142, 0.25); text-decoration: line-through; } .comment-item-resolved { opacity: 0.75; } .comment-layout { display: flex; gap: 1rem; align-items: flex-start; } .comment-document { flex: 1; min-width: 0; } .comment-content { font-size: 0.95rem; line-height: 1.7; } .comment-sidebar { width: 320px; max-width: 100%; background-color: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 0.75rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } .comment-sidebar.hidden { display: none; } .comment-sidebar-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .comment-sidebar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .comment-selection { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.5rem; } .comment-sidebar-footer { margin-top: 0.5rem; display: flex; justify-content: flex-end; gap: 0.5rem; } .comment-thread-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; } .comment-thread { border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.75rem; background-color: var(--color-bg-alt); display: flex; flex-direction: column; gap: 0.35rem; } .comment-chapter-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .comment-thread.active { border-color: var(--color-text); box-shadow: 0 0 0 2px rgba(180, 140, 90, 0.25); } .comment-thread-resolved { opacity: 0.75; } .comment-replies { margin-top: 0.35rem; padding-left: 0.5rem; border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: 0.35rem; } .comment-reply-meta { font-size: 0.7rem; color: var(--color-text-muted); } .comment-highlight.active { background-color: rgba(200, 150, 90, 0.5); outline: 1px solid rgba(200, 150, 90, 0.75); } .comment-drawer-toggle { display: none; position: fixed; right: 1rem; bottom: 1rem; z-index: 900; } .focus-body { display: flex; gap: 1rem; align-items: stretch; flex: 1; min-height: 0; overflow: hidden; } .focus-editor { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .section-title { margin-top: 1.5rem; margin-bottom: 0.75rem; } .status-pill-editor { background-color: var(--color-bg-alt); color: var(--color-text); text-transform: uppercase; } .entry-type-pill { display: inline-block; margin-top: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; background-color: var(--color-bg-alt); color: var(--color-text-muted); } /* Story outline */ .outline-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .outline-toolbar { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .outline-toolbar-group { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; } .outline-toolbar-group label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: var(--color-text-muted); } .outline-toolbar select { min-width: 220px; } .outline-status { font-size: 0.85rem; color: var(--color-text-muted); } .outline-steps { display: grid; gap: 1rem; } .outline-card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); } .outline-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .outline-title { flex: 1; font-size: 1rem; font-weight: 600; } .outline-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .outline-meta label, .outline-fields label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: var(--color-text-muted); min-width: 0; } .outline-inline-textarea { min-height: 96px; max-height: 320px; overflow-y: auto; resize: vertical; } .outline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .outline-fields textarea { min-height: 110px; max-height: 320px; overflow-y: auto; } .outline-meta input, .outline-meta select, .outline-meta textarea, .outline-fields input, .outline-fields textarea { width: 100%; margin-bottom: 0; } .outline-empty { padding: 1.5rem; border: 1px dashed var(--color-card-border); border-radius: var(--radius-lg); text-align: center; color: var(--color-text-muted); } .outline-template-preview { border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); padding: 1rem; margin-bottom: 1rem; background: var(--color-card-bg); box-shadow: var(--shadow-sm); } .preview-three-act { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 0.75rem; text-align: center; } .preview-three-act div { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 0.75rem; font-size: 0.85rem; } .preview-three-act span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .preview-hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .preview-hero-ring { width: 120px; height: 120px; border-radius: 999px; border: 3px dashed var(--color-primary); position: relative; } .preview-hero-steps { display: grid; gap: 0.5rem; font-size: 0.85rem; } .preview-grid { display: grid; gap: 0.4rem; } .preview-grid-5 { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); } .preview-grid span { background: var(--color-bg-alt); border-radius: var(--radius-sm); padding: 0.4rem 0.5rem; font-size: 0.7rem; text-align: center; } .preview-snowflake { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; } .preview-snowflake span { position: absolute; font-size: 0.8rem; color: var(--color-text-muted); } .snowflake-layer { position: absolute; border: 2px solid var(--color-primary); border-radius: var(--radius-md); } .snowflake-layer.layer-1 { width: 50px; height: 50px; } .snowflake-layer.layer-2 { width: 90px; height: 90px; opacity: 0.7; } .snowflake-layer.layer-3 { width: 130px; height: 130px; opacity: 0.4; } .preview-plot { color: var(--color-primary); } .preview-plot svg { width: 100%; height: auto; color: var(--color-primary); } .preview-plot text { font-size: 10px; fill: var(--color-text-muted); } .outline-template-preview.template-plot-diagram { max-height: 180px; padding: 0.75rem 1rem; } .outline-template-preview.template-plot-diagram .preview-plot { max-width: 560px; margin: 0 auto; } .outline-template-preview.template-plot-diagram .preview-plot svg { height: 120px; } .outline-template-preview.template-plot-diagram .preview-plot text { font-size: 9px; } .preview-beats { display: flex; flex-wrap: wrap; gap: 0.5rem; } .preview-beats span { background: var(--color-bg-alt); padding: 0.35rem 0.6rem; border-radius: 999px; font-size: 0.75rem; } .preview-blank { text-align: center; font-size: 0.85rem; color: var(--color-text-muted); } @media (max-width: 900px) { .focus-meta { grid-template-columns: 1fr; } .focus-template-label { margin-left: 0; } .focus-template-select { width: 100%; min-width: 0; } .focus-toolbar { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .focus-word-bar { padding-left: 1rem; padding-right: 1rem; gap: 0.75rem; } .focus-word-bar-main { flex-wrap: wrap; row-gap: 0.25rem; } .focus-word-bar-total { margin-left: auto; } .focus-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .comment-layout { flex-direction: column; } .comment-sidebar { position: fixed; right: 0.75rem; top: 0.75rem; height: calc(100vh - 1.5rem); width: min(92vw, 360px); transform: translateX(120%); transition: transform 0.2s ease; z-index: 1000; } .comment-sidebar.open { transform: translateX(0); } .comment-drawer-toggle { display: inline-flex; } .focus-body { flex-direction: column; } } /* Cards */ .card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); } .empty-state-panel { grid-column: 1 / -1; border: 1px dashed var(--color-control-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg-alt) 94%, transparent); padding: 2rem 1.5rem; text-align: center; } .empty-state-panel h3 { margin-bottom: 0.35rem; } .empty-state-panel p { margin: 0 0 1rem 0; color: var(--color-text-muted); } .card h3 { margin-top: 0; margin-bottom: 0.5rem; } /* Relationships module The relationships section displays a simple list of connections between characters. Each row is colour‑coded according to the relation type (enemy, friend or romantic) using a small coloured chip on the left and a subtle tint for the row background. A compact legend at the top of the section explains the colour coding. Minimal additional markup is used to keep this styling lightweight and consistent with other lists in the app. Class naming follows a BEM‑like pattern for clarity: .rel-legend — container for the colour legend .rel-chip — small circular indicator for each relation type .rel-row — wrapper for an individual relationship row .rel-row--enemy — modifier class for enemy relations .rel-row--friend — modifier class for friend relations .rel-row--romantic — modifier class for romantic relations .rel-tooltip — optional custom tooltip shown on hover (fallback to the browser title attribute when JS is disabled) */ /* Legend container: horizontally lays out colour indicators with labels. On narrow viewports it wraps gracefully to avoid overflowing. */ .rel-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; font-size: 0.8rem; align-items: center; } /* Each legend item consists of a chip followed by text. */ .rel-legend span { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; } /* Base chip style: a small circular indicator. Modifier classes below provide specific colours. */ .rel-chip { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; } /* Relation type colours for chips */ .rel-chip--enemy { background-color: #e53935; /* red */ } .rel-chip--friend { background-color: #4caf50; /* green */ } .rel-chip--romantic { background-color: #e91e63; /* pink */ } /* Base relationship row styling. Extend the existing list‑item styles by adding relative positioning so custom tooltips can anchor within the row if desired. */ .rel-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-left: 0.75rem; } /* Tint backgrounds subtly according to relation type. Colours mirror the chips but with low opacity to avoid overpowering the rest of the UI. The alpha values are chosen to work in both light and dark themes. */ .rel-row--enemy { background-color: rgba(229, 57, 53, 0.1); } .rel-row--friend { background-color: rgba(76, 175, 80, 0.1); } .rel-row--romantic { background-color: rgba(233, 30, 99, 0.1); } /* Family relation type styles. Yellow is chosen for family connections to complement the existing red, green and pink categories. The tint uses a very low alpha to remain subtle in both light and dark themes. */ .rel-row--family { background-color: rgba(255, 215, 0, 0.08); } /* Colour for the family relation chip. A vibrant gold/yellow to match classic heraldic family colours. */ .rel-chip--family { background-color: #ffd700; } /* Toggle container for switching between list and web (graph) views in the Relationships section. Displays horizontally with small spacing and allows wrapping on narrow screens. */ .rel-view-toggle { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: center; } /* Buttons for the list/web toggle. Styled like pill buttons with a subtle border and rounded corners. */ .rel-view-btn { padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); border-radius: 0.25rem; background-color: var(--color-card-bg); color: var(--color-text); font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } /* Hover state for view toggle buttons */ .rel-view-btn:hover { background-color: var(--color-bg-alt); color: var(--color-primary); } /* Active state for the currently selected view button. Uses the primary colour as the background to stand out against the other options. */ .rel-view-btn.active { background-color: var(--color-primary); color: var(--color-card-bg); border-color: var(--color-primary); } /* Container for the relationships graph. A set height ensures the force‑directed graph has enough space to render without collapsing. A border and rounded corners keep it consistent with card styling. */ .rel-graph-container { width: 100%; height: 450px; border: 1px solid var(--color-border); border-radius: 0.5rem; overflow: hidden; margin-top: 1rem; } /* Optional custom tooltip. JavaScript toggles its visibility and positions it near the cursor. When JavaScript is disabled the browser’s native title attribute is used instead. */ .rel-tooltip { position: fixed; z-index: 3000; background-color: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); pointer-events: none; white-space: nowrap; display: none; } .rel-character-header { display: flex; align-items: center; gap: 1rem; } .rel-character-avatar, .rel-character-placeholder { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-bg-alt); } .rel-character-avatar { object-fit: cover; } .rel-character-placeholder { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.1rem; color: var(--color-text); } .rel-character-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; } .rel-character-rel-card { cursor: pointer; } .rel-character-summary-view { margin-top: 1rem; } .rel-summary-back { margin-bottom: 0.75rem; } .rel-summary-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 1rem; align-items: center; } .rel-summary-person { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .rel-summary-center { text-align: center; } .rel-summary-type { font-weight: 700; text-transform: capitalize; margin-bottom: 0.5rem; } .rel-summary-notes { font-size: 0.9rem; color: var(--color-text-muted); } @media (max-width: 720px) { .rel-summary-grid { grid-template-columns: 1fr; } } .shared-reader-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; } .shared-reader-nav select { flex: 1; min-width: 200px; } .shared-reader-progress { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } .shared-reader-footer { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; } @media (max-width: 720px) { .shared-reader-footer { flex-direction: column; } } .tutorial-nudge { position: fixed; right: 24px; bottom: 24px; z-index: 4000; background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.85rem 1rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); max-width: 320px; } .tutorial-nudge-header { font-weight: 600; margin-bottom: 0.5rem; } .tutorial-nudge-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tutorial-nudge-dismiss { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); } .rel-character-rel-name { font-weight: 600; } .rel-character-rel-meta { font-size: 0.8rem; color: var(--color-text-muted); text-transform: capitalize; } .rel-character-rel-desc { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; } /* Form styles */ form { display: flex; flex-direction: column; } label { font-weight: bold; margin-bottom: 0.25rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { border: 1px solid var(--color-control-border); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; margin-bottom: 1rem; background-color: var(--color-card-bg); color: var(--color-text); box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); } textarea { resize: vertical; min-height: 100px; overflow-y: auto; overflow-x: hidden; line-height: 1.45; overflow-wrap: anywhere; } button { background-color: var(--color-primary); color: #fff; border: 1px solid color-mix(in srgb, var(--color-primary) 75%, var(--color-secondary) 25%); border-radius: 999px; padding: 0.65rem 1.25rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.015em; box-shadow: 0 10px 24px rgba(0,0,0,0.14); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } button:hover { background-color: var(--color-secondary); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,0.16); } button.secondary { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-control-border); box-shadow: none; } button.secondary:hover { background-color: var(--color-bg-alt); color: var(--color-primary); border-color: var(--color-primary); box-shadow: none; } /* Style for file upload controls Many of the forms in the application allow users to upload images or transcripts. The default browser styling for file inputs is plain and dated. We customise the "choose file" button via the ::file-selector-button pseudo‑element so that it matches the rest of the UI. The button uses the primary accent colours for the active theme and inherits the rounded corners from our button component. On hover the background transitions to the secondary colour. The input itself retains the selected file name text colour to ensure legibility on both light and dark backgrounds. */ input[type="file"] { color: var(--color-text); margin-bottom: 1rem; } /* Trait list editing styles */ .trait-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; } .trait-row input[type="text"] { flex: 1; border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0.4rem; background-color: var(--color-card-bg); color: var(--color-text); } .trait-row button.remove-trait { background-color: var(--color-secondary); color: #fff; border: none; border-radius: 0.25rem; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.85rem; } .add-trait-btn { margin-top: 0.5rem; } /* Timeline styles */ .timeline-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin: 1rem 0; } .timeline-stat { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); padding: 0.8rem 0.95rem; box-shadow: var(--shadow-sm); } .timeline-stat span { display: block; color: var(--color-text-muted); font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 0.25rem; } .timeline-stat strong { font-size: 1.02rem; color: var(--color-text); line-height: 1.2; } .timeline-warning { margin: 0.75rem 0 0; border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-card-border)); border-radius: var(--radius-md); background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg)); padding: 0.65rem 0.8rem; font-size: 0.86rem; color: var(--color-text-muted); } .timeline-view-toolbar { margin: 0 0 0.75rem; padding: 0.75rem 0.9rem; } .timeline-view-controls { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; } .timeline-filter-shell { position: relative; z-index: 36; margin: 0 0 0.45rem; } .timeline-filter-bar { position: relative; min-height: 48px; padding: 0.35rem 0.45rem; display: block; overflow: visible; isolation: isolate; } .timeline-filter-toggle { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.85rem; border-radius: 999px; } .timeline-filter-toggle-copy { display: inline-flex; align-items: baseline; gap: 0.4rem; min-width: 0; flex-wrap: wrap; text-align: left; } .timeline-filter-toggle-label { color: var(--color-text); font-weight: 600; } .timeline-filter-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); } .timeline-filter-summary { font-size: 0.8rem; color: var(--color-text-muted); } .timeline-filter-panel { position: relative; margin-top: 0.55rem; z-index: 2; border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-card-bg) 98%, transparent), color-mix(in srgb, var(--color-accent) 12%, var(--color-card-bg)) ); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24); padding: 0.85rem 0.9rem 0.95rem; overflow: hidden; } .timeline-filter-panel.hidden { display: none; } .timeline-filter-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.7rem; } .timeline-filter-panel-row { display: flex; align-items: flex-end; gap: 0.65rem; flex-wrap: wrap; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid color-mix(in srgb, var(--color-card-border) 72%, transparent); } .timeline-scale-toggle { display: flex; align-items: center; gap: 0.42rem; } .timeline-scale-toggle button { border-radius: 999px; padding: 0.44rem 0.78rem; font-size: 0.8rem; } .timeline-scale-toggle button.active { background-color: var(--color-primary); color: #fff; border: 1px solid color-mix(in srgb, var(--color-primary) 75%, #fff); } .timeline-zoom-group { display: flex; align-items: center; gap: 0.45rem; padding-left: 0.85rem; margin-left: 0.1rem; border-left: 1px solid color-mix(in srgb, var(--color-card-border) 72%, transparent); } .timeline-zoom-group input[type="range"] { width: 190px; } .timeline-character-filter-actions { display: flex; gap: 0.45rem; margin-top: 0; flex-wrap: wrap; } .timeline-filter-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 140px; font-size: 0.8rem; color: var(--color-text-muted); } .timeline-filter-field select, .timeline-date-input { min-height: 2.25rem; width: 100%; margin-bottom: 0; } .timeline-character-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0; max-height: 190px; overflow-y: auto; } .timeline-character-pill { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid color-mix(in srgb, var(--lane-color) 30%, var(--color-card-border)); background-color: color-mix(in srgb, var(--lane-color) 9%, var(--color-card-bg)); border-radius: 999px; padding: 0.24rem 0.55rem; font-size: 0.76rem; color: var(--color-text); } .timeline-character-pill input { margin: 0; } .timeline-field-muted { margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); } .timeline-board-controls { display: flex; justify-content: flex-end; gap: 0.45rem; margin: 0 0 0.35rem; } .timeline-board-shell { margin-bottom: 1rem; } .timeline-section-divider { height: 1px; margin: 0.35rem 0 0.8rem; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--color-card-border) 70%, transparent), transparent ); } .timeline-scroll-shell { position: relative; border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-card-bg) 96%, transparent), color-mix(in srgb, var(--color-accent) 38%, var(--color-card-bg)) ); overflow: auto; padding: 0; box-shadow: var(--shadow-sm); max-height: 76vh; } .timeline-stage { position: relative; display: grid; grid-template-rows: 56px auto; min-width: 100%; } .timeline-axis-corner, .timeline-axis-track { position: sticky; top: 0; z-index: 20; min-height: 56px; border-bottom: 1px solid var(--color-card-border); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-card-bg)), var(--color-card-bg) ); } .timeline-axis-corner { left: 0; z-index: 34; display: flex; align-items: center; padding: 0 0.9rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); border-right: 1px solid var(--color-card-border); } .timeline-axis-track { position: sticky; top: 0; z-index: 25; width: 100%; } .timeline-axis-track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 64%, transparent); } .timeline-axis-track-sequence { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-card-bg) 98%, transparent), color-mix(in srgb, var(--color-accent) 10%, var(--color-card-bg)) ); } .timeline-label-column { position: sticky; left: 0; z-index: 18; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-card-bg) 98%, transparent), color-mix(in srgb, var(--color-accent) 16%, var(--color-card-bg)) ); border-right: 1px solid var(--color-card-border); } .timeline-label-item { position: absolute; left: 0; right: 0; min-height: 48px; display: flex; align-items: center; gap: 0.7rem; padding: 0 0.9rem 0 0.7rem; overflow: hidden; } .timeline-label-avatar-wrap { position: relative; flex-shrink: 0; z-index: 1; } .timeline-label-trace { position: absolute; left: 0.7rem; right: 0.75rem; top: 50%; height: 34px; transform: translateY(-50%); pointer-events: none; z-index: 0; } .timeline-label-trace line { opacity: 0.58; } .timeline-avatar { border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--lane-color, var(--color-card-border)) 34%, var(--color-card-border)); } .timeline-avatar-regular { width: 34px; height: 34px; } .timeline-avatar-mini { width: 22px; height: 22px; } .timeline-avatar-branch { width: 28px; height: 28px; } .timeline-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background-color: color-mix(in srgb, var(--lane-color, var(--color-primary)) 14%, var(--color-card-bg)); color: var(--color-text); font-weight: 700; } .timeline-label-copy { min-width: 0; position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 28px; padding: 0.14rem 0.48rem; border-radius: 999px; background: color-mix(in srgb, var(--color-card-bg) 94%, transparent); border: 1px solid color-mix(in srgb, var(--color-card-border) 52%, transparent); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06); } .timeline-label-name { font-size: 0.84rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .timeline-axis-tick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, var(--color-border) 72%, transparent); } .timeline-axis-tick span { position: absolute; top: 0.45rem; left: 0.35rem; font-size: 0.66rem; color: var(--color-text-muted); white-space: nowrap; } .timeline-track-stage { position: relative; min-width: 0; overflow: visible; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-card-bg) 94%, transparent), color-mix(in srgb, var(--color-accent) 18%, var(--color-card-bg)) ); } .timeline-track-stage-spine { min-height: 240px; } .timeline-meta-layer { position: absolute; inset: 0; z-index: 16; pointer-events: none; } .timeline-node-meta { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; pointer-events: auto; cursor: pointer; } .timeline-node-avatars { display: inline-flex; align-items: center; justify-content: flex-start; height: 28px; } .timeline-node-avatar { display: inline-flex; align-items: center; justify-content: center; } .timeline-node-avatar.is-overlap { margin-left: -10px; } .timeline-node-avatar-more { font-size: 0.72rem; border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-card-border)); background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-card-bg)); } .timeline-svg { display: block; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-card-bg) 96%, transparent), color-mix(in srgb, var(--color-accent) 22%, var(--color-card-bg)) ); } .timeline-grid-guide { stroke: color-mix(in srgb, var(--color-border) 52%, transparent); stroke-width: 1; stroke-dasharray: 3 7; } .timeline-spine-line { stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; } .timeline-spine-branch { stroke: color-mix(in srgb, var(--color-primary) 60%, transparent); stroke-width: 2; stroke-linecap: round; } .timeline-line-path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; } .timeline-branch-path { fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; pointer-events: none; } .timeline-event-group { cursor: pointer; transition: opacity 0.16s ease; } .timeline-track-stage.is-sequence-mode .timeline-event-group.is-draggable { cursor: grab; touch-action: none; } .timeline-track-stage.is-sequence-mode .timeline-event-group.is-draggable.is-dragging { cursor: grabbing; } .timeline-track-stage.is-sequence-mode .timeline-event-group.is-draggable .timeline-event-dot-hit { stroke: color-mix(in srgb, var(--color-primary) 22%, transparent); stroke-width: 1; stroke-dasharray: 2 4; } .timeline-track-stage.is-sequence-mode .timeline-event-group.is-draggable.is-dragging .timeline-event-dot-outer { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-primary) 48%, transparent)); } .timeline-event-group:hover .timeline-event-dot-outer, .timeline-event-group.is-active .timeline-event-dot-outer { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-primary) 36%, transparent)); } .timeline-event-dot-hit { fill: transparent; } .timeline-event-dot-outer { transition: filter 0.16s ease; } .timeline-event-dot-shared-ring { pointer-events: none; } .timeline-event-dot-undated { opacity: 0.92; pointer-events: none; } .timeline-spine-empty { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; text-align: center; padding: 1.25rem; } .timeline-spine-empty h3, .timeline-spine-empty p { margin: 0; } .timeline-popover-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; } .timeline-event-hover-title { position: absolute; max-width: min(240px, calc(100% - 24px)); padding: 0.45rem 0.65rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-card-border)); background: color-mix(in srgb, var(--color-card-bg) 94%, black 6%); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); font-size: 0.74rem; font-weight: 600; line-height: 1.2; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .timeline-event-popover { position: absolute; width: min(320px, calc(100% - 24px)); padding: 0.85rem 0.95rem; pointer-events: auto; z-index: 2; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24); } .timeline-event-popover h4 { margin: 0; font-size: 0.88rem; line-height: 1.25; color: var(--color-primary); } .timeline-event-popover-head { margin-bottom: 0.7rem; } .timeline-event-popover-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.72rem; color: var(--color-text-muted); } .timeline-event-type { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-card-border)); background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-card-bg)); color: var(--color-text); font-size: 0.62rem; padding: 0.12rem 0.38rem; } .timeline-popover-character-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; } .timeline-character-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid color-mix(in srgb, var(--lane-color, var(--color-card-border)) 34%, var(--color-card-border)); border-radius: 999px; padding: 0.18rem 0.48rem 0.18rem 0.2rem; background-color: color-mix(in srgb, var(--lane-color, var(--color-card-bg)) 10%, var(--color-card-bg)); font-size: 0.72rem; color: var(--color-text); } .timeline-popover-muted { font-size: 0.76rem; color: var(--color-text-muted); } .timeline-event-popover-description { margin-bottom: 0.75rem; } .timeline-event-popover-description p { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--color-text-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .timeline-popover-link { background: transparent; border: 0; box-shadow: none; color: var(--color-primary); padding: 0; margin-top: 0.35rem; font-size: 0.74rem; font-weight: 600; } .timeline-popover-link:hover { background: transparent; box-shadow: none; transform: none; } .timeline-chapter-jump { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--color-card-border); background-color: var(--color-bg-alt); color: var(--color-text); border-radius: 999px; font-size: 0.58rem; padding: 0.08rem 0.34rem; cursor: pointer; } .timeline-chapter-jump i { font-size: 0.56rem; } .timeline-multi-indicator { display: inline-flex; align-items: center; font-size: 0.56rem; color: var(--color-text-muted); border: 1px dashed color-mix(in srgb, var(--color-text-muted) 60%, var(--color-card-border)); border-radius: 999px; padding: 0.08rem 0.32rem; } .timeline-popover-chapter { margin-bottom: 0.75rem; } .timeline-empty { margin-top: 0.2rem; border-radius: var(--radius-md); padding: 1rem; } .timeline-event-popover-actions { display: flex; justify-content: flex-end; gap: 0.45rem; } .timeline-date-input { appearance: none; -webkit-appearance: none; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background-color: var(--color-card-bg); color: var(--color-text); padding: 0.62rem 0.8rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } .timeline-date-input::-webkit-calendar-picker-indicator { opacity: 0.78; cursor: pointer; } @media (max-width: 640px) { .timeline-summary { grid-template-columns: 1fr; gap: 0.7rem; } .timeline-view-controls { justify-content: flex-start; } .timeline-filter-panel { padding: 0.8rem; } .timeline-filter-field { min-width: calc(50% - 0.4rem); flex: 1 1 calc(50% - 0.4rem); } .timeline-board-controls { justify-content: flex-start; } .timeline-zoom-group { padding-left: 0; margin-left: 0; border-left: 0; } .timeline-filter-panel-row { align-items: stretch; } .timeline-event-popover { width: min(280px, calc(100% - 20px)); } } .timeline-empty p { margin: 0; } /* Avatar and initial placeholders for cards */ .card-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; object-position: center; border: 1px solid var(--color-border); background-color: var(--color-bg-alt); aspect-ratio: 1 / 1; } .avatar-initial { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background-color: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1rem; border: 1px solid var(--color-border); aspect-ratio: 1 / 1; } /* Small edit button inside project cards */ .edit-project-btn { color: var(--color-text-muted); font-size: 1rem; } .edit-project-btn:hover { color: var(--color-primary); } /* Background blur for character detail pages */ .char-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; filter: blur(12px); opacity: 0.3; z-index: -1; } /* Larger avatar used on the character detail page */ .detail-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center; border: 1px solid var(--color-border); } /* The closing brace above intentionally ends the `.detail-avatar` rule. The stray extra `}` that previously followed caused the subsequent file input styling to be wrapped inside an invalid CSS block, preventing our custom file selector styling from being applied. Removing the extra brace restores proper rule nesting and ensures the upload buttons are styled consistently across the application. */ input[type="file"]::file-selector-button { background-color: var(--color-primary); color: #fff; border: none; border-radius: 0.25rem; padding: 0.4rem 0.75rem; margin-right: 0.75rem; cursor: pointer; font-size: 0.85rem; transition: background-color 0.2s ease; } input[type="file"]::file-selector-button:hover { background-color: var(--color-secondary); } /* Progress bar */ .progress-container { background-color: var(--color-card-border); border-radius: 0.5rem; overflow: hidden; height: 1rem; margin-bottom: 1rem; } .progress-bar { height: 100%; background-color: var(--color-primary); width: 0%; transition: width 0.3s ease; } /* Header (top bar) for smaller screens */ .topbar { display: none; background-color: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: 0.75rem 1rem; align-items: center; justify-content: space-between; } .topbar button { background: none; border: none; color: var(--color-primary); font-size: 1.25rem; } /* Responsive adjustments */ @media (max-width: 768px) { .sidebar { position: fixed; z-index: 1000; left: -240px; top: 0; height: 100%; transition: left 0.3s ease; } .sidebar.open { left: 0; } body.sidebar-open { overflow: hidden; } .content { padding: 1rem; min-height: 0; } .topbar { display: flex; } .app-wrapper { flex-direction: column; } #collapseSidebar { display: none; } .content-header { flex-direction: column; align-items: flex-start !important; gap: 0.75rem; } .dashboard-actions { display: grid; grid-template-columns: 1fr; gap: 0.5rem; width: 100%; } .dashboard-actions button { width: 100%; } .auth-shell { padding: 1.5rem 1rem; } .storywell-topbar-lockup { width: 100%; } .storywell-mobile-context { max-width: 42vw; } .dashboard-brand-row { margin-bottom: 0.75rem; } } @media (max-width: 480px) { .storywell-topbar-brand .storywell-brand-wordmark { display: none; } .storywell-mobile-context { max-width: 58vw; padding-left: 0.5rem; } .storywell-auth-brand { width: 100%; justify-content: center; } } /* Utility classes */ .hidden { display: none !important; } .flex { display: flex; } .justify-between { justify-content: space-between; } .items-center { align-items: center; } .mb-1 { margin-bottom: 1rem; } .mt-1 { margin-top: 1rem; } .text-center { text-align: center; } .space-y-1 > * + * { margin-top: 1rem; } /* Responsive layout adjustments */ /* Projects grid: arrange cards in responsive columns on larger screens. On small screens, collapse to a single column for readability. */ #projectList { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 768px) { #projectList { grid-template-columns: 1fr; } } /* List items (characters, locations, items, etc.) should wrap their contents on mobile to avoid overflowing horizontally. Using flex-wrap allows the avatar, text and actions to stack on small screens. */ .list-item { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); padding: 0.9rem 1rem; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; } .status-pill { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: capitalize; border: 1px solid var(--color-border); background-color: var(--color-bg-alt); color: var(--color-primary); } .list-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } @media (max-width: 768px) { .list-item { flex-wrap: wrap; } .list-item > * { margin-bottom: 0.5rem; } .list-item > *:last-child { margin-left: auto; margin-bottom: 0; } } /* Constrain modal sizes for large screens and expand on small devices. */ .modal-content { max-width: 600px; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); max-height: 85vh; overflow-y: auto; } .tutorial-modal .modal-content { max-width: 720px; } .tutorial-progress { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } .tutorial-step h4 { margin-bottom: 0.5rem; color: var(--color-text); } .tutorial-step p { margin-bottom: 0.75rem; } .tutorial-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; } .tutorial-nav button { min-width: 110px; } .detected-entity-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; } .detected-entity-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-alt); } .detected-entity-info { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .detected-entity-row label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .detected-entity-meta { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.3; } .detected-match-section { margin-top: 1rem; } .detected-match-section h4 { margin: 0 0 0.75rem; color: var(--color-text); } .detected-match-list { display: flex; flex-direction: column; gap: 0.85rem; } .detected-match-row { padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-alt); } .detected-match-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .detected-match-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent); background: var(--color-card-bg); } .detected-match-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .detected-match-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem; } .detected-match-actions label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; } @media (max-width: 768px) { .modal-content { width: 90%; height: 90vh; max-width: none; overflow-y: auto; } .detected-match-columns { grid-template-columns: 1fr; } } /* Forms: allow two-column layout on wider screens and collapse to a single column on small screens. Many forms already use flexbox; switching to grid improves responsiveness. */ @media (min-width: 769px) { form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } form button { grid-column: 1 / -1; width: fit-content; justify-self: end; } } @media (max-width: 768px) { form { display: block; } } /* Increase tap targets for buttons on touch devices. */ button { min-height: 36px; min-width: 36px; } /* Make the project filter bar wrap gracefully on small viewports. */ #projectFilterBar { flex-wrap: wrap; } /* Wrap tables for horizontal scrolling on small devices. */ .table-wrap { overflow-x: auto; } /* Adjust typography on very small screens. */ @media (max-width: 420px) { h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } } /* ------------------------------------------------------------------ */ /* Dashboard‑specific styling tweaks */ /* These rules only affect the projects dashboard and ensure that the */ /* filter bar, status row and cards align nicely without impacting */ /* other sections of the app. */ /* Filter bar: flex layout with wrapping and spacing */ #projectFilterBar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; align-items: center; } /* Filter buttons: slightly larger font and padding with clear active state */ .project-filter-btn { padding: 0.4rem 0.85rem; font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-card-bg); color: var(--color-primary); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .project-filter-btn:hover { background-color: var(--color-bg-alt); transform: translateY(-1px); } .project-filter-btn.active-filter { background-color: var(--color-primary); color: var(--color-card-bg); font-weight: 600; border: 1px solid var(--color-primary); } /* Status row alignment on project cards */ .proj-status-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; width: 100%; margin-left: 0; align-self: stretch; } .proj-status-row label { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); line-height: 1; } .proj-status-row select { min-width: 125px; height: 2rem; margin: 0; padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Project cards: ensure vertical stacking of contents */ #projectList .list-item { padding: 0.9rem 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } #projectList .list-item > * { width: 100%; } .project-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; width: 100%; } .project-card-meta { flex: 1 1 180px; min-width: 0; } .project-card-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } @media (max-width: 768px) { .proj-status-row { width: 100%; margin-left: 0; align-self: stretch; justify-content: flex-start; } } /* Progress bar tweaks specifically for project cards */ #projectList .progress-container { background-color: var(--color-bg-alt); border: 1px solid var(--color-card-border); border-radius: 0.5rem; height: 0.6rem; width: 100%; overflow: hidden; margin-bottom: 0.5rem; } #projectList .progress-bar { height: 100%; background-color: var(--color-primary); border-radius: 0.5rem; transition: width 0.25s ease; } /* ------------------------------------------------------------------ */ /* Project overview layout */ .project-overview { display: flex; flex-direction: column; gap: 1.5rem; } .overview-header { align-items: flex-start; gap: 1rem; } .overview-subtitle { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--color-text-muted); } .overview-meta { color: var(--color-text-muted); font-size: 0.8rem; } .overview-description { margin-top: 0.5rem; max-width: 640px; color: var(--color-text-muted); } .overview-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .overview-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; } .metric-card { background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); padding: 0.85rem 1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.35rem; } .metric-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .metric-value { font-size: 1.35rem; font-weight: 600; color: var(--color-text); } .metric-value-sm { font-size: 0.95rem; font-weight: 600; } .metric-sub { font-size: 0.8rem; color: var(--color-text-muted); } .overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .overview-card { background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); padding: 1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.75rem; } .overview-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .overview-card h3 { margin: 0; font-size: 1rem; } .overview-list { display: flex; flex-direction: column; gap: 0.6rem; } .overview-list-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } .overview-list-item:last-child { border-bottom: none; padding-bottom: 0; } .overview-list-title { font-weight: 600; } .overview-list-meta { font-size: 0.75rem; color: var(--color-text-muted); } .overview-list-snippet { font-size: 0.85rem; color: var(--color-text); margin-top: 0.25rem; } .feedback-card { margin-top: 1.5rem; } .overview-muted { font-size: 0.85rem; color: var(--color-text-muted); } .world-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; } .world-tile { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; } .world-tile strong { font-size: 1rem; color: var(--color-text); }