/** * OneLineJournal - E-Ink Inspired Stylesheet * Calm, minimal, monospace aesthetic * * Theme system: data-theme on , data-font on */ /* CSS Custom Properties — Default (Classic) */ :root { --bg-primary: #f5f5f3; --bg-secondary: #eaeae8; --bg-paper: #fafaf8; --text-primary: #2c2c2c; --text-secondary: #5a5a5a; --text-muted: #888888; --border-color: #d0d0d0; --border-light: #e5e5e5; --accent: #444444; --accent-hover: #222222; --error: #8b0000; --success: #2d5a2d; --warning: #8b6914; --shadow: rgba(0, 0, 0, 0.05); --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace; --font-serif: 'Literata', 'Georgia', 'Cambria', serif; --font-sans: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif; --font-hand: 'Caveat', 'Segoe Print', cursive; --font-active: var(--font-mono); --font-size-base: 15px; --line-height: 1.6; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --max-width: 640px; --border-radius: 3px; --transition: 150ms ease; --grain-opacity: 0.03; } /* ═══════════════════════════════════════════════ THEME: Warm Paper — cream, cozy, antique ═══════════════════════════════════════════════ */ [data-theme="warm"] { --bg-primary: #f3ece2; --bg-secondary: #ebe3d7; --bg-paper: #faf5ec; --text-primary: #3a3028; --text-secondary: #6b5d50; --text-muted: #96887a; --border-color: #d4c8b8; --border-light: #e5ddd0; --accent: #5a4a3a; --accent-hover: #3a2a1a; --error: #8b2020; --success: #3a5a2d; --warning: #8b6914; --shadow: rgba(60, 40, 10, 0.06); --grain-opacity: 0.04; } /* ═══════════════════════════════════════════════ THEME: Dark — clean dark mode ═══════════════════════════════════════════════ */ [data-theme="dark"] { --bg-primary: #1a1a1a; --bg-secondary: #222222; --bg-paper: #252525; --text-primary: #e0e0e0; --text-secondary: #a0a0a0; --text-muted: #707070; --border-color: #3a3a3a; --border-light: #333333; --accent: #c0c0c0; --accent-hover: #ffffff; --error: #ff6b6b; --success: #69db7c; --warning: #ffd43b; --shadow: rgba(0, 0, 0, 0.3); --grain-opacity: 0.02; } /* ═══════════════════════════════════════════════ THEME: Midnight — deep blue, literary ═══════════════════════════════════════════════ */ [data-theme="midnight"] { --bg-primary: #161b2e; --bg-secondary: #1c2240; --bg-paper: #1f2544; --text-primary: #d0d4e8; --text-secondary: #8890b0; --text-muted: #5a6080; --border-color: #2d3460; --border-light: #262d54; --accent: #a0aad0; --accent-hover: #d0d8f0; --error: #ff7070; --success: #70d080; --warning: #f0c050; --shadow: rgba(0, 0, 40, 0.3); --grain-opacity: 0.02; } /* ═══════════════════════════════════════════════ THEME: Typewriter — high contrast, off-white ═══════════════════════════════════════════════ */ [data-theme="typewriter"] { --bg-primary: #f0ede6; --bg-secondary: #e6e2da; --bg-paper: #f8f6f0; --text-primary: #111111; --text-secondary: #333333; --text-muted: #777777; --border-color: #c0bbb0; --border-light: #ddd8ce; --accent: #111111; --accent-hover: #000000; --error: #990000; --success: #1a4d1a; --warning: #7a5500; --shadow: rgba(0, 0, 0, 0.08); --grain-opacity: 0.05; } /* ═══════════════════════════════════════════════ THEME: Sage — soft green, meditative ═══════════════════════════════════════════════ */ [data-theme="sage"] { --bg-primary: #eef2ec; --bg-secondary: #e3e9e0; --bg-paper: #f5f8f3; --text-primary: #2a332a; --text-secondary: #505c50; --text-muted: #7a877a; --border-color: #c4d0c0; --border-light: #d8e2d5; --accent: #3a5038; --accent-hover: #1a3018; --error: #8b3030; --success: #2d5a2d; --warning: #7a6514; --shadow: rgba(20, 40, 20, 0.05); --grain-opacity: 0.03; } /* ═══════════════════════════════════════════════ FONT OVERRIDES — applied via data-font ═══════════════════════════════════════════════ */ [data-font="mono"] { --font-active: var(--font-mono); } [data-font="serif"] { --font-active: var(--font-serif); --line-height: 1.7; } [data-font="sans"] { --font-active: var(--font-sans); } [data-font="hand"] { --font-active: var(--font-hand); --line-height: 1.5; } /* ═══════════════════════════════════════════════ FONT SIZE — applied via data-fontsize ═══════════════════════════════════════════════ */ [data-fontsize="small"] { --font-size-base: 13px; } [data-fontsize="default"] { --font-size-base: 15px; } [data-fontsize="large"] { --font-size-base: 17px; } [data-fontsize="xlarge"] { --font-size-base: 19px; } /* Hand font gets a bump to keep visual balance */ [data-font="hand"][data-fontsize="small"] { --font-size-base: 15px; } [data-font="hand"][data-fontsize="default"] { --font-size-base: 18px; } [data-font="hand"][data-fontsize="large"] { --font-size-base: 20px; } [data-font="hand"][data-fontsize="xlarge"] { --font-size-base: 23px; } /* Dark theme overrides for mood entry backgrounds */ [data-theme="dark"] .entry[data-mood="ecstatic"] { background: #2a2820; border-color: #4a4530; } [data-theme="dark"] .entry[data-mood="happy"] { background: #202820; border-color: #304530; } [data-theme="dark"] .entry[data-mood="grateful"] { background: #232820; border-color: #354530; } [data-theme="dark"] .entry[data-mood="calm"] { background: #202528; border-color: #303a40; } [data-theme="dark"] .entry[data-mood="reflective"] { background: #252525; border-color: #3a3a3a; } [data-theme="dark"] .entry[data-mood="neutral"] { background: var(--bg-paper); } [data-theme="dark"] .entry[data-mood="anxious"] { background: #282420; border-color: #453a30; } [data-theme="dark"] .entry[data-mood="stressed"] { background: #282020; border-color: #453030; } [data-theme="dark"] .entry[data-mood="sad"] { background: #202028; border-color: #303045; } [data-theme="dark"] .entry[data-mood="angry"] { background: #281e1e; border-color: #452828; } [data-theme="midnight"] .entry[data-mood="ecstatic"] { background: #252a20; border-color: #3a4030; } [data-theme="midnight"] .entry[data-mood="happy"] { background: #1f2a22; border-color: #2d4030; } [data-theme="midnight"] .entry[data-mood="grateful"] { background: #222a20; border-color: #304028; } [data-theme="midnight"] .entry[data-mood="calm"] { background: #1e2535; border-color: #283550; } [data-theme="midnight"] .entry[data-mood="reflective"] { background: #1f2544; border-color: #2d3460; } [data-theme="midnight"] .entry[data-mood="neutral"] { background: var(--bg-paper); } [data-theme="midnight"] .entry[data-mood="anxious"] { background: #252220; border-color: #403530; } [data-theme="midnight"] .entry[data-mood="stressed"] { background: #251e20; border-color: #402830; } [data-theme="midnight"] .entry[data-mood="sad"] { background: #1e1e30; border-color: #282850; } [data-theme="midnight"] .entry[data-mood="angry"] { background: #281c1e; border-color: #452025; } /* Paper grain texture (subtle) */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--grain-opacity, 0.03); z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* Reset & Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-active); font-size: 1rem; line-height: var(--line-height); color: var(--text-primary); background-color: var(--bg-primary); min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } /* App Container */ .app-container { min-height: 100vh; display: flex; flex-direction: column; } /* Header */ .header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-light); background: var(--bg-paper); } .logo { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); } .logo-icon { flex-shrink: 0; } .nav { display: flex; align-items: center; gap: var(--spacing-md); font-size: 0.85rem; } .user-email { color: var(--text-muted); } .user-info { display: flex; align-items: center; gap: 6px; } .user-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .nav-link { color: var(--text-secondary); } /* Main Content */ .main { flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); } /* Footer */ .footer { padding: var(--spacing-lg); text-align: center; font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid var(--border-light); } /* Forms */ .form-group { margin-bottom: var(--spacing-md); } .form-group label { display: block; margin-bottom: var(--spacing-xs); font-size: 0.85rem; color: var(--text-secondary); } .form-hint-link { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); text-decoration: none; } .form-hint-link:hover { color: var(--text-primary); text-decoration: underline; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea { width: 100%; padding: var(--spacing-sm) var(--spacing-md); font-family: var(--font-mono); font-size: 1rem; color: var(--text-primary); background: var(--bg-paper); border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: border-color var(--transition), box-shadow var(--transition); } input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--shadow); } input::placeholder, textarea::placeholder { color: var(--text-muted); } textarea { resize: vertical; min-height: 100px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-md); font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; color: var(--bg-paper); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition); text-decoration: none; } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-paper); } .btn-secondary { color: var(--text-primary); background: transparent; border-color: var(--border-color); } .btn-secondary:hover { background: var(--bg-secondary); color: var(--text-primary); } .btn-primary { background: var(--text-primary); border-color: var(--text-primary); } .btn-block { width: 100%; } .btn-small { padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.8rem; } .btn-danger { background: var(--error); border-color: var(--error); } .btn-success { background: var(--success); border-color: var(--success); } .btn-warning { background: var(--warning); border-color: var(--warning); } /* Alerts */ .alert { padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-md); border-radius: var(--border-radius); font-size: 0.9rem; } .alert-error { background: #fef2f2; color: var(--error); border: 1px solid #fecaca; } .alert-success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; } /* Auth Pages */ .auth-container { max-width: 360px; margin: var(--spacing-2xl) auto; } .auth-title { font-size: 1.25rem; font-weight: 500; margin-bottom: 8px; text-align: center; } .auth-subtitle { font-size: 0.9rem; color: var(--text-muted); text-align: center; margin-bottom: var(--spacing-lg); } .auth-form { padding: var(--spacing-lg); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: var(--border-radius); } .auth-footer { margin-top: var(--spacing-md); text-align: center; font-size: 0.85rem; color: var(--text-secondary); } /* OAuth Buttons */ .oauth-buttons { margin-bottom: var(--spacing-md); } .btn-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition); text-decoration: none; border: 1px solid var(--border-color); background: var(--bg-paper); color: var(--text-primary); } .btn-oauth:hover { border-color: var(--text-primary); background: var(--bg-primary); } .oauth-icon { flex-shrink: 0; } /* Auth Divider */ .auth-divider { display: flex; align-items: center; gap: 12px; margin: var(--spacing-lg) 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); } .auth-divider span { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } /* Terms note for OAuth signup */ .auth-terms-note { text-align: center; font-size: 0.7rem; color: var(--text-muted); margin-top: var(--spacing-sm); line-height: 1.5; } .auth-terms-note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } /* Connected badge in settings */ .connected-badge { display: inline-block; font-size: 0.75rem; color: var(--success); padding: 2px 8px; background: #f0f8f0; border-radius: 3px; margin-right: 8px; } .btn-link { background: none; border: none; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; } .btn-link-danger { color: var(--error); } .btn-link:hover { color: var(--text-primary); } .btn-sm { padding: 6px 14px; font-size: 0.8rem; } .settings-hint-inline { font-size: 0.7rem; color: var(--text-muted); font-style: italic; } .settings-inline-form .form-group { margin-bottom: var(--spacing-sm); } .settings-inline-form .form-group input { width: 100%; padding: 8px 12px; font-family: var(--font-mono); font-size: 0.85rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: var(--bg-primary); } /* Journal */ .journal-container { width: 100%; } /* Add Entry Form */ .add-entry-form { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); align-items: flex-start; } .input-wrapper { flex: 1; position: relative; } .input-wrapper textarea { width: 100%; min-height: 80px; padding: var(--spacing-sm) var(--spacing-md); padding-right: 60px; font-family: var(--font-mono); font-size: 1rem; color: var(--text-primary); background: var(--bg-paper); border: 1px solid var(--border-color); border-radius: var(--border-radius); resize: none; line-height: 1.5; transition: border-color var(--transition), box-shadow var(--transition); } .input-wrapper textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--shadow); } .input-wrapper textarea::placeholder { color: var(--text-muted); } .char-count { position: absolute; right: var(--spacing-sm); bottom: var(--spacing-sm); font-size: 0.7rem; color: var(--text-muted); background: var(--bg-paper); padding: 2px 4px; } .submit-hint { font-size: 0.68rem; color: var(--text-muted); margin: 3px 0 0 2px; opacity: 0.7; } .btn-add { width: 44px; height: 44px; padding: 0; font-size: 1.5rem; font-weight: 300; line-height: 1; flex-shrink: 0; align-self: flex-end; margin-bottom: 18px; } /* Search */ .search-form { position: relative; margin-bottom: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border-color); } .search-clear { position: absolute; right: var(--spacing-sm); top: calc(var(--spacing-lg) + 50%); transform: translateY(-50%); font-size: 1.25rem; color: var(--text-muted); line-height: 1; } .search-results-info { margin-bottom: var(--spacing-md); font-size: 0.85rem; color: var(--text-secondary); } /* Entries List */ .entries-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .entry { padding: var(--spacing-md); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: var(--border-radius); transition: border-color var(--transition); } .entry:hover { border-color: var(--border-color); } /* Mood-tinted entry backgrounds (subtle pastels) */ .entry[data-mood="ecstatic"] { background: #fffceb; border-color: #f5e6a3; } .entry[data-mood="happy"] { background: #f2faf3; border-color: #c8e6c9; } .entry[data-mood="grateful"] { background: #f5faf0; border-color: #d5e8c0; } .entry[data-mood="calm"] { background: #f0f9fa; border-color: #b2ebf2; } .entry[data-mood="reflective"] { background: #f7f7f7; border-color: #e0e0e0; } .entry[data-mood="neutral"] { background: var(--bg-paper); } .entry[data-mood="anxious"] { background: #fff8f0; border-color: #ffe0b2; } .entry[data-mood="stressed"] { background: #fef5f5; border-color: #ffcdd2; } .entry[data-mood="sad"] { background: #f5f5fc; border-color: #c5cae9; } .entry[data-mood="angry"] { background: #fef2f2; border-color: #ef9a9a; } .entry-content { margin-bottom: var(--spacing-sm); word-wrap: break-word; overflow-wrap: break-word; } .entry-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); } .entry-meta-left { display: flex; align-items: center; gap: 6px; } /* Mood Badge — visible, not overwhelming */ .mood-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.04); cursor: default; flex-shrink: 0; } /* Quick Insight Banner — organic, like a handwritten note */ .insight-banner { padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); background: transparent; border: none; border-bottom: 1px solid var(--border-light); font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; } .insight-text { font-style: italic; color: var(--text-primary); opacity: 0.85; } .insight-stat { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); font-style: normal; } .insight-link { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); } .insight-link:hover { color: var(--text-primary); } .entry-actions { display: flex; gap: var(--spacing-sm); opacity: 0; transition: opacity var(--transition); } .entry:hover .entry-actions { opacity: 1; } .entry-action { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; font-family: inherit; } .entry-action:hover { color: var(--text-primary); } .entry-delete:hover { color: var(--error); } /* Favorite star */ .entry-fav { color: var(--text-muted); transition: color 0.2s, transform 0.2s; } .entry-fav:hover { color: #d4a017; transform: scale(1.2); } .entry-fav.is-fav { color: #d4a017; } /* Show actions row on favorited entries so star is always visible */ .entry-favorited .entry-actions { opacity: 1; } /* Private toggle button */ .entry-private-toggle { color: var(--text-muted); opacity: 0.4; transition: color 0.2s, opacity 0.2s, transform 0.2s; } .entry-private-toggle:hover { opacity: 0.8; transform: scale(1.2); } .entry-private-toggle.is-private { opacity: 1; color: #8b6050; } /* Show actions row on private entries so lock is always visible */ .entry-private .entry-actions { opacity: 1; } /* Subtle dashed border for private entries */ .entry-private { border-left: 3px dashed rgba(139, 96, 80, 0.3); } .empty-state { text-align: center; padding: var(--spacing-2xl); color: var(--text-muted); } .empty-hint { font-size: 0.85rem; margin-top: var(--spacing-sm); opacity: 0.7; } /* Edit Page */ .edit-container { max-width: 500px; margin: 0 auto; } .edit-title { font-size: 1.1rem; font-weight: 500; margin-bottom: var(--spacing-lg); } .edit-form textarea { min-height: 120px; } .edit-form .form-group { position: relative; } .edit-form .char-count { position: absolute; right: var(--spacing-sm); bottom: var(--spacing-sm); } .edit-actions { display: flex; gap: var(--spacing-sm); justify-content: flex-end; margin-top: var(--spacing-md); } .edit-meta { margin-top: var(--spacing-lg); font-size: 0.75rem; color: var(--text-muted); } /* Pagination */ .pagination { display: flex; justify-content: center; align-items: center; gap: var(--spacing-lg); margin-top: var(--spacing-xl); font-size: 0.85rem; } .page-info { color: var(--text-muted); } .page-link { color: var(--text-secondary); } /* Admin */ .admin-container { width: 100%; max-width: 900px; margin: 0 auto; } .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); } .admin-title { font-size: 1.25rem; font-weight: 500; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-xl); } .stat-card { padding: var(--spacing-lg); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: var(--border-radius); text-align: center; } .stat-value { font-size: 2rem; font-weight: 500; color: var(--text-primary); } .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--spacing-xs); } .admin-nav { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } .admin-nav-link { padding: var(--spacing-sm) var(--spacing-md); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: var(--border-radius); color: var(--text-secondary); } .admin-nav-link:hover { border-color: var(--border-color); color: var(--text-primary); } /* Tables */ .table-container { overflow-x: auto; margin-bottom: var(--spacing-lg); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .admin-table th, .admin-table td { padding: var(--spacing-sm) var(--spacing-md); text-align: left; border-bottom: 1px solid var(--border-light); } .admin-table th { font-weight: 500; color: var(--text-secondary); background: var(--bg-secondary); } .admin-table tr.inactive { opacity: 0.6; } .admin-table .entry-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge { display: inline-block; padding: 2px 6px; font-size: 0.7rem; border-radius: 2px; text-transform: uppercase; } .badge-admin { background: var(--text-primary); color: var(--bg-paper); } .badge-user { background: var(--bg-secondary); color: var(--text-secondary); } .status-active { color: var(--success); } .status-inactive { color: var(--error); } .inline-form { display: inline; } .text-muted { color: var(--text-muted); } /* Error Pages */ .error-container { text-align: center; padding: var(--spacing-2xl); } .error-code { font-size: 4rem; font-weight: 500; color: var(--text-muted); line-height: 1; } .error-message { font-size: 1.25rem; margin: var(--spacing-md) 0; } .error-description { color: var(--text-secondary); margin-bottom: var(--spacing-lg); } /* Responsive */ @media (max-width: 600px) { [data-fontsize="default"] { --font-size-base: 14px; } .header { flex-direction: column; gap: var(--spacing-sm); text-align: center; } .nav { flex-wrap: wrap; justify-content: center; } .main { padding: var(--spacing-md); } .add-entry-form { flex-direction: column; } .input-wrapper { width: 100%; } .input-wrapper textarea { min-height: 100px; max-height: 140px; width: 100%; font-size: 16px; /* Prevents iOS auto-zoom on focus */ } .form-input, .search-input { font-size: 16px; /* Prevents iOS auto-zoom on focus */ } .btn-add { width: 100%; height: auto; padding: var(--spacing-sm); margin-bottom: 0; align-self: stretch; } .entry-actions { opacity: 1; } .time-filters { gap: 4px; } .time-filter { padding: 5px 8px; font-size: 0.75rem; } .smart-filters { margin-bottom: var(--spacing-md); } .smart-filter-row { gap: 4px; } .smart-pill { padding: 3px 8px; font-size: 0.7rem; } .smart-filter-label { font-size: 0.6rem; min-width: 35px; } .smart-filter-active-info { font-size: 0.7rem; flex-wrap: wrap; } .settings-row { flex-direction: column; align-items: flex-start; gap: 2px; } .delete-actions { flex-direction: column; } .delete-actions .btn { width: 100%; } .export-actions { flex-direction: column; } .export-actions .btn { width: 100%; } .admin-header { flex-direction: column; gap: var(--spacing-sm); text-align: center; } .admin-table { font-size: 0.75rem; } .admin-table th, .admin-table td { padding: var(--spacing-xs) var(--spacing-sm); } .theme-picker { grid-template-columns: repeat(3, 1fr); gap: 8px; } .theme-swatch { padding: 8px 4px 6px; } .swatch-preview { height: 40px; padding: 6px 8px; } .swatch-label { font-size: 0.58rem; } .font-picker { grid-template-columns: repeat(2, 1fr); gap: 8px; } .font-option { padding: 10px 6px 8px; } .font-sample { font-size: 1.1rem; } .fontsize-picker { grid-template-columns: repeat(4, 1fr); gap: 6px; } .fontsize-option { padding: 8px 4px 6px; } .fontsize-label { font-size: 0.5rem; } /* Diary view mobile */ .diary-page-body { padding: 16px 16px 16px 40px; } .diary-page-body::before { left: 30px; } .diary-entry-mood { margin-left: -24px; width: 18px; font-size: 0.75rem; } .diary-date-header { padding: 10px 16px 8px; } .diary-page-footer { padding: 6px 16px; } /* View toggle mobile */ .view-toggle-btn { padding: 3px 8px; font-size: 0.62rem; } } /* Time Filter Tabs */ .time-filters { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .time-filters::-webkit-scrollbar { display: none; } .time-filter { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: var(--border-radius); white-space: nowrap; transition: all var(--transition); } .time-filter:hover { border-color: var(--border-color); color: var(--text-primary); } .time-filter-active { background: var(--text-primary); color: var(--bg-paper); border-color: var(--text-primary); } .time-filter-active:hover { color: var(--bg-paper); } .time-filter-count { font-size: 0.7rem; opacity: 0.7; } .time-filter-active .time-filter-count { opacity: 0.85; } /* ═══════════════════════════════════════════════ View Toggle (Timeline ↔ Diary) ═══════════════════════════════════════════════ */ .view-toggle-bar { display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .view-toggle { display: flex; align-items: center; gap: 2px; background: var(--bg-secondary); border-radius: 20px; padding: 2px; } .view-toggle-btn { padding: 4px 12px; font-size: 0.7rem; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 18px; font-family: var(--font-active); transition: all 0.2s; white-space: nowrap; } .view-toggle-btn:hover { color: var(--text-secondary); } .view-toggle-btn.active { background: var(--bg-paper); color: var(--text-primary); box-shadow: 0 1px 3px var(--shadow); } /* ═══════════════════════════════════════════════ Diary View — Handwritten Daily Format ═══════════════════════════════════════════════ */ .diary-view { margin-top: var(--spacing-md); } .diary-page { background: var(--bg-paper); border: 1px solid var(--border-color); border-radius: 4px; margin-bottom: var(--spacing-lg); padding: 0; overflow: hidden; position: relative; box-shadow: 1px 2px 6px var(--shadow); } /* Subtle lined paper effect */ .diary-page-body { padding: 24px 32px 24px 52px; background-image: repeating-linear-gradient( transparent, transparent 31px, var(--border-light) 31px, var(--border-light) 32px ); background-size: 100% 32px; background-position: 0 0; position: relative; min-height: 80px; } /* Red margin line */ .diary-page-body::before { content: ''; position: absolute; left: 40px; top: 0; bottom: 0; width: 1px; background: #e8a0a0; opacity: 0.5; } .diary-date-header { padding: 14px 24px 10px; border-bottom: 1px solid var(--border-light); display: flex; align-items: baseline; justify-content: space-between; } .diary-date-main { font-size: 1.05rem; font-weight: 500; color: var(--text-primary); } .diary-date-sub { font-size: 0.72rem; color: var(--text-muted); } .diary-entry { padding: 6px 0; line-height: 32px; position: relative; display: flex; gap: 10px; align-items: flex-start; } .diary-entry + .diary-entry { border-top: none; } .diary-entry-mood { flex-shrink: 0; width: 22px; text-align: center; font-size: 0.85rem; line-height: 32px; margin-left: -30px; } .diary-entry-body { flex: 1; min-width: 0; } .diary-entry-text { color: var(--text-primary); word-wrap: break-word; } .diary-entry-time { font-size: 0.65rem; color: var(--text-muted); display: inline; margin-left: 6px; } .diary-entry-topics { display: inline; margin-left: 4px; } .diary-topic-icon { font-size: 0.65rem; } .diary-page-footer { padding: 8px 24px; border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; font-size: 0.65rem; color: var(--text-muted); } .diary-blip-count { opacity: 0.7; } .diary-mood-summary { display: flex; gap: 4px; } /* Diary page navigation */ .diary-nav { display: flex; justify-content: center; gap: var(--spacing-md); padding: var(--spacing-md) 0; } .diary-nav-link { font-size: 0.8rem; color: var(--text-secondary); padding: 6px 14px; border: 1px solid var(--border-light); border-radius: 20px; } .diary-nav-link:hover { border-color: var(--accent); color: var(--accent); } /* Handwriting font enhancement for diary */ [data-font="hand"] .diary-entry-text { letter-spacing: 0.3px; } [data-font="hand"] .diary-date-main { font-size: 1.2rem; } /* Dark themes: soften the margin line */ [data-theme="dark"] .diary-page-body::before, [data-theme="midnight"] .diary-page-body::before { background: #665050; opacity: 0.3; } [data-theme="dark"] .diary-page-body, [data-theme="midnight"] .diary-page-body { background-image: repeating-linear-gradient( transparent, transparent 31px, var(--border-light) 31px, var(--border-light) 32px ); } /* Diary Export */ .diary-inline-export { display: inline; } .diary-export-btn { padding: 4px 12px; font-size: 0.68rem; font-family: var(--font-active); background: var(--bg-paper); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 14px; cursor: pointer; transition: all 0.2s; } .diary-export-btn:hover { border-color: var(--accent); color: var(--accent); } .diary-export-range { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .diary-export-field { flex: 1; } .diary-export-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 3px; } .diary-export-date { width: 100%; padding: 6px 8px; font-size: 0.8rem; font-family: var(--font-active); background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius); } /* Smart View Filters (Topics & Moods) */ .smart-filters { margin-bottom: var(--spacing-lg); } .smart-filter-row { display: flex; align-items: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-xs); flex-wrap: wrap; padding-bottom: 2px; } .smart-filter-label { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.7; white-space: nowrap; min-width: 40px; text-transform: uppercase; letter-spacing: 0.5px; } .smart-pill { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: 20px; white-space: nowrap; transition: all var(--transition); text-decoration: none; } .smart-pill:hover { border-color: var(--border-color); color: var(--text-primary); transform: translateY(-1px); } .smart-pill-active { background: var(--text-primary); color: var(--bg-paper); border-color: var(--text-primary); } .smart-pill-active:hover { color: var(--bg-paper); transform: translateY(-1px); } .smart-pill-count { font-size: 0.65rem; opacity: 0.6; } .smart-pill-active .smart-pill-count { opacity: 0.85; } .smart-filter-active-info { display: flex; align-items: center; gap: var(--spacing-xs); font-size: 0.75rem; color: var(--text-secondary); padding: 6px 0; margin-top: 4px; } .active-filter-tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; background: var(--bg-paper); border: 1px solid var(--border-color); border-radius: 12px; font-size: 0.75rem; } .clear-filters { color: var(--text-secondary); font-size: 0.7rem; opacity: 0.7; margin-left: auto; } .clear-filters:hover { opacity: 1; color: var(--text-primary); } /* Topic Badge on Entry Cards */ .topic-badge { display: inline-flex; align-items: center; font-size: 0.7rem; padding: 1px 5px; border-radius: 8px; line-height: 1.4; } /* Settings Page */ .settings-container { max-width: 520px; margin: 0 auto; } .settings-title { font-size: 1.25rem; font-weight: 500; margin-bottom: var(--spacing-xl); } .settings-section { margin-bottom: var(--spacing-xl); } .settings-section-title { font-size: 0.95rem; font-weight: 500; margin-bottom: var(--spacing-sm); color: var(--text-primary); } .settings-description { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--spacing-md); line-height: 1.5; } .settings-card { padding: var(--spacing-lg); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: var(--border-radius); } .settings-card-danger { border-color: #fecaca; } .settings-row { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) 0; font-size: 0.85rem; } .settings-row + .settings-row { border-top: 1px solid var(--border-light); } .settings-label { color: var(--text-secondary); } .settings-value { color: var(--text-primary); font-weight: 500; } .settings-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--spacing-sm); } .export-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } /* Danger Zone — Account Deletion */ .settings-danger-zone .settings-section-title { color: var(--error); } .delete-confirmation { margin-top: var(--spacing-lg); } .delete-warning { font-size: 0.85rem; color: var(--text-primary); margin-bottom: var(--spacing-sm); font-weight: 500; } .delete-list { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); list-style: disc; } .delete-list li { margin-bottom: 4px; } .delete-password-input { margin-bottom: var(--spacing-md); } .delete-actions { display: flex; gap: var(--spacing-sm); justify-content: flex-end; } /* ═══════════════════════════════════════════════ Theme & Font Pickers (Settings) ═══════════════════════════════════════════════ */ .theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; background: none; border: 2px solid var(--border-light); border-radius: 6px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; font-family: var(--font-active); } .theme-swatch:hover { border-color: var(--text-muted); } .theme-swatch-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .swatch-preview { width: 100%; height: 48px; border-radius: 4px; border: 1px solid; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; gap: 5px; position: relative; } .swatch-line { height: 3px; width: 70%; border-radius: 2px; opacity: 0.7; } .swatch-line-short { width: 45%; } .swatch-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid; } .swatch-label { font-size: 0.65rem; color: var(--text-secondary); letter-spacing: 0.3px; } .font-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .font-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; background: none; border: 2px solid var(--border-light); border-radius: 6px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .font-option:hover { border-color: var(--text-muted); } .font-option-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .font-sample { font-size: 1.3rem; color: var(--text-primary); line-height: 1.3; } .font-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-mono); } .fontsize-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .fontsize-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; background: none; border: 2px solid var(--border-light); border-radius: 6px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; font-family: var(--font-active); } .fontsize-option:hover { border-color: var(--text-muted); } .fontsize-option-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .fontsize-sample { color: var(--text-primary); font-weight: 500; line-height: 1.3; } .fontsize-label { font-size: 0.55rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; font-family: var(--font-mono); } /* Legal Pages (Terms, Privacy) */ .legal-container { max-width: 600px; margin: 0 auto; } .legal-title { font-size: 1.25rem; font-weight: 500; margin-bottom: 4px; } .legal-updated { font-size: 0.8rem; color: var(--text-muted); margin-bottom: var(--spacing-xl); } .legal-content { font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); } .legal-section { margin-bottom: var(--spacing-xl); } .legal-section h2 { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--spacing-sm); } .legal-section p { margin-bottom: var(--spacing-sm); } .legal-section p:last-child { margin-bottom: 0; } /* Checkbox (Registration) */ .form-group-checkbox { margin-bottom: var(--spacing-lg); } .checkbox-label { display: flex; align-items: flex-start; gap: var(--spacing-sm); font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; line-height: 1.5; } .checkbox-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); } .checkbox-label a { text-decoration: underline; } /* Footer Legal Links */ .footer-legal { margin-top: 4px; font-size: 0.7rem; } .footer-legal a { color: var(--text-muted); } .footer-legal a:hover { color: var(--text-secondary); } .footer-sep { margin: 0 4px; color: var(--text-muted); } /* Print */ @media print { .header, .footer, .add-entry-form, .search-form, .entry-actions, .pagination, .admin-nav, .time-filters { display: none !important; } .entry { border: none; border-bottom: 1px solid #ccc; border-radius: 0; } } /* PWA Install Banner (optional) */ .pwa-install-banner { position: fixed; bottom: 0; left: 0; right: 0; padding: var(--spacing-md); background: var(--bg-paper); border-top: 1px solid var(--border-color); display: flex; justify-content: center; gap: var(--spacing-md); z-index: 1000; } .pwa-install-banner.hidden { display: none; } /* ================================================================= INSIGHTS & REFLECTION PAGES Personal reflection aesthetic — calm, minimal, E-Ink inspired ================================================================= */ .insights-container { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-md) 0 var(--spacing-2xl); } /* Navigation (prev/next week/month + tabs) */ .insights-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-light); } .insights-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 1.1rem; color: var(--text-secondary); border: 1px solid var(--border-light); border-radius: var(--border-radius); transition: all var(--transition); text-decoration: none; } .insights-nav-btn:hover { color: var(--text-primary); border-color: var(--border-color); } .insights-nav-btn.disabled { opacity: 0.25; cursor: default; pointer-events: none; } .insights-nav-center { text-align: center; flex: 1; } .insights-period { font-size: 1.15rem; font-weight: 500; margin-bottom: 6px; } .insights-tabs { display: inline-flex; gap: 4px; background: var(--bg-secondary); padding: 3px; border-radius: var(--border-radius); } .insights-tab { font-size: 0.75rem; padding: 4px 14px; color: var(--text-muted); text-decoration: none; border-radius: 2px; transition: all var(--transition); } .insights-tab.active { background: var(--bg-paper); color: var(--text-primary); box-shadow: 0 1px 2px var(--shadow); } .insights-tab:hover:not(.active) { color: var(--text-secondary); } /* Sections */ .insights-section { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--border-light); } .insights-section:last-child { border-bottom: none; } .insights-section-title { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: var(--spacing-md); } /* Vibe Check */ .insights-vibe-section { border-bottom: none; padding-bottom: 0; margin-bottom: var(--spacing-md); } .insights-vibe { font-size: 1.05rem; line-height: 1.7; color: var(--text-primary); font-style: italic; opacity: 0.9; } .insights-freq { font-size: 0.85rem; color: var(--text-secondary); margin-top: 6px; } .insights-narrative { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--spacing-md); line-height: 1.6; font-style: italic; } .insights-quiet-note { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--spacing-sm); } /* Stats Row */ .insights-stats-row { display: flex; gap: var(--spacing-md); border-bottom: 1px solid var(--border-light); } .insights-stat-box { flex: 1; text-align: center; padding: var(--spacing-md) var(--spacing-sm); } .stat-number { display: block; font-size: 1.3rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; } .stat-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.5px; } /* Mood Distribution Bars */ .mood-bars { display: flex; flex-direction: column; gap: 8px; } .mood-bar-row { display: flex; align-items: center; gap: 8px; } .mood-bar-emoji { font-size: 1rem; width: 24px; text-align: center; flex-shrink: 0; } .mood-bar-label { font-size: 0.75rem; color: var(--text-secondary); width: 70px; flex-shrink: 0; } .mood-bar-track { flex: 1; height: 14px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; } .mood-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; min-width: 3px; } .mood-bar-count { font-size: 0.75rem; color: var(--text-muted); width: 24px; text-align: right; flex-shrink: 0; } /* Blipping Patterns (time of day) */ .pattern-timeline { display: flex; gap: var(--spacing-md); } .pattern-slot { flex: 1; text-align: center; padding: var(--spacing-md) var(--spacing-sm); border-radius: var(--border-radius); background: var(--bg-paper); border: 1px solid var(--border-light); opacity: 0.5; transition: opacity var(--transition); } .pattern-slot.active { opacity: 1; } .pattern-emoji { display: block; font-size: 1.2rem; margin-bottom: 4px; } .pattern-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.5px; } .pattern-dots { display: flex; justify-content: center; gap: 3px; margin-bottom: 4px; min-height: 10px; } .pattern-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-primary); opacity: 0.5; } .pattern-dot.empty { background: var(--border-light); opacity: 0.4; } .pattern-count { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); } /* Highlights */ .highlights-list { display: flex; flex-direction: column; gap: 10px; } .highlight-entry { display: flex; align-items: flex-start; gap: 10px; padding: var(--spacing-sm) var(--spacing-md); background: var(--bg-paper); border: 1px solid var(--border-light); border-radius: var(--border-radius); } .highlight-emoji { font-size: 1.1rem; flex-shrink: 0; line-height: 1.5; } .highlight-text { font-size: 0.85rem; color: var(--text-primary); line-height: 1.6; } /* Trend Note */ .insights-trend { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; text-align: center; } /* Encouragement */ .insights-encouragement { text-align: center; font-size: 0.85rem; color: var(--text-secondary); font-style: italic; padding: var(--spacing-lg) 0; border-bottom: none; opacity: 0.8; } /* Empty State */ .insights-empty { text-align: center; padding: var(--spacing-2xl) var(--spacing-md); } .insights-empty-msg { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: var(--spacing-md); } .insights-empty-link { font-size: 0.85rem; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } /* ================================================================= MONTHLY MOOD CALENDAR ================================================================= */ .mood-calendar { margin-top: var(--spacing-sm); } .mood-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; } .mood-cal-header span { text-align: center; font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; } .mood-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .mood-cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-secondary); border-radius: 3px; font-size: 0.75rem; position: relative; transition: all var(--transition); } .mood-cal-cell.empty { background: transparent; } .mood-cal-cell.has-data { cursor: default; } .mood-cal-cell.today { outline: 2px solid var(--text-primary); outline-offset: -1px; } .mood-cal-day { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; } .mood-cal-cell.has-data .mood-cal-day { color: var(--text-primary); } .mood-cal-dots { font-size: 0.6rem; color: var(--text-muted); letter-spacing: 1px; line-height: 1; } .mood-cal-legend { display: flex; justify-content: center; gap: 12px; margin-top: var(--spacing-md); flex-wrap: wrap; } .legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 0.65rem; color: var(--text-muted); } .legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* Day-of-week pattern bars (monthly view) */ .day-pattern-row { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: var(--spacing-md); } .day-pattern-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; } .day-bar-track { flex: 1; width: 100%; max-width: 32px; background: var(--bg-secondary); border-radius: 2px; display: flex; align-items: flex-end; overflow: hidden; } .day-bar-fill { width: 100%; background: var(--text-primary); opacity: 0.25; border-radius: 2px; transition: height 0.4s ease; min-height: 2px; } .day-label { font-size: 0.65rem; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.5px; } .day-count { font-size: 0.7rem; color: var(--text-secondary); } /* ================================================================= INSIGHTS RESPONSIVE ================================================================= */ @media (max-width: 600px) { .insights-stats-row { gap: var(--spacing-sm); } .stat-number { font-size: 1.1rem; } .pattern-timeline { gap: var(--spacing-sm); } .pattern-slot { padding: var(--spacing-sm) 4px; } .pattern-label { font-size: 0.6rem; } .mood-bar-label { width: 55px; font-size: 0.7rem; } .mood-cal-cell { aspect-ratio: auto; min-height: 36px; } .mood-cal-day { font-size: 0.65rem; } .day-pattern-row { height: 90px; } }