/* ==================================================================================================== * FILE : css/main.css * PURPOSE : Core application styles for Cojoro: TextSync. * Covers design tokens, reset, layout, header, auth screen, workspace, * tab bar, editor, welcome state, modals, scrollbar, and responsive rules. * * SCOPE : Host application UI only. * Does NOT style the changelog modal (css/changelog.css) * or footer (css/footer.css) — those are managed by their own stylesheets. * * THEME MODEL : * - Light tokens defined in :root * - Dark tokens override via [data-theme="dark"] and @media prefers-color-scheme: dark * (when data-theme="auto") * - Manual override: data-theme="light" or "dark" on locks the theme * * FONTS : Loaded via Google Fonts in index.html * - DM Serif Display → display headings * - DM Mono → editor, monospace UI * - DM Sans → body text, UI controls * ==================================================================================================== */ /* ── Light theme tokens (default) ────────────────────────────────────── */ :root { --bg: #f5f3ef; --surface: #ffffff; --surface-2: #ede9e2; --border: #d9d3c9; --border-light: #e8e3db; --ink: #1a1714; --ink-2: #5a5450; --ink-3: #9c958e; --accent: #c4622d; --accent-light: #f0e4dc; --accent-dark: #a34d20; --green: #3a7d52; --green-light: #daf0e4; --amber: #b08030; --amber-light: #fdf3dc; --red: #c43a3a; --red-light: #fce8e8; --meta-bg: #f0ede8; --meta-border: #ddd8d0; --radius: 10px; --radius-sm: 6px; --shadow: 0 2px 12px rgba(26,23,20,0.08), 0 1px 3px rgba(26,23,20,0.06); --shadow-lg: 0 8px 32px rgba(26,23,20,0.12), 0 2px 8px rgba(26,23,20,0.08); --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; --transition: 0.18s ease; } /* ── Dark theme tokens ───────────────────────────────────────────────── */ /* * Applied when: * (a) data-theme="dark" → manual override * (b) data-theme="auto" + system prefers dark */ [data-theme="dark"], [data-theme="auto"] { color-scheme: dark; } [data-theme="dark"] { --bg: #28241f; --surface: #312d28; --surface-2: #3a3530; --border: #4a4540; --border-light: #403c37; --ink: #ede9e2; --ink-2: #a89f96; --ink-3: #6b6460; --accent: #d4724d; --accent-light: #3a2318; --accent-dark: #e8865e; --green: #4a9d6a; --green-light: #1a3024; --amber: #c09040; --amber-light: #2e2410; --red: #d45050; --red-light: #2e1414; --meta-bg: #2e2a26; --meta-border: #4a4540; --shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2); --shadow-lg: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg: #28241f; --surface: #312d28; --surface-2: #3a3530; --border: #4a4540; --border-light: #403c37; --ink: #ede9e2; --ink-2: #a89f96; --ink-3: #6b6460; --accent: #d4724d; --accent-light: #3a2318; --accent-dark: #e8865e; --green: #4a9d6a; --green-light: #1a3024; --amber: #c09040; --amber-light: #2e2410; --red: #d45050; --red-light: #2e1414; --meta-bg: #2e2a26; --meta-border: #4a4540; --shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2); --shadow-lg: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); } } /* ── Reset & Base ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; } /* ── Layout ──────────────────────────────────────────────────────────── */ #app { display: flex; flex-direction: column; min-height: 94vh; width: 100%; overflow: hidden; } /* ── Header ──────────────────────────────────────────────────────────── */ header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; gap: 16px; height: 56px; flex-shrink: 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(26,23,20,0.06); } .logo { display: flex; align-items: baseline; gap: 6px; text-decoration: none; flex-shrink: 0; } .logo-brand { font-family: var(--font-display); font-size: 18px; color: var(--ink); letter-spacing: -0.01em; } .logo-product { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent-light); padding: 2px 7px; border-radius: 20px; } .header-spacer { flex: 1; } /* ── Status Pill ─────────────────────────────────────────────────────── */ #status-pill { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; background: var(--surface-2); color: var(--ink-2); transition: all var(--transition); min-width: 100px; justify-content: center; } #status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; transition: background var(--transition); } #status-pill.saving { background: var(--amber-light); color: var(--amber); } #status-pill.saving .dot { background: var(--amber); } #status-pill.saved { background: var(--green-light); color: var(--green); } #status-pill.saved .dot { background: var(--green); animation: pulse 1.2s ease-out; } #status-pill.error { background: var(--red-light); color: var(--red); } #status-pill.error .dot { background: var(--red); } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } /* ── Lock Button ─────────────────────────────────────────────────────── */ #btn-lock { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; transition: all var(--transition); } #btn-lock:hover { background: var(--surface-2); color: var(--ink); } /* ── Theme Toggle Button ─────────────────────────────────────────────── */ /* ── Tag pills on tabs ───────────────────────────────────────────────── */ .tab-tag-pill { font-size: 9px; font-weight: 600; font-family: var(--font-body); padding: 1px 5px; border-radius: 999px; background: var(--accent-light); color: var(--accent); white-space: nowrap; flex-shrink: 0; max-width: 60px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background var(--transition), color var(--transition); } .tab-tag-pill:hover { background: var(--accent); color: #fff; } .tab-tag-pill.active-filter { background: var(--accent); color: #fff; } /* ── Tab bar tag filter strip ────────────────────────────────────────── */ #tab-filter-bar { display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--accent-light); border-bottom: 1px solid var(--accent); font-size: 11px; font-family: var(--font-body); font-weight: 500; color: var(--accent); min-height: 26px; flex-shrink: 0; } .tab-filter-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab-filter-clear { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 15px; line-height: 1; padding: 0 2px; border-radius: var(--radius-sm); flex-shrink: 0; transition: background var(--transition), color var(--transition); } .tab-filter-clear:hover { background: var(--accent); color: #fff; } .ctx-tags-preview { font-size: 11px; color: var(--ink-3); margin-left: auto; font-family: var(--font-mono); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Tag Picker ──────────────────────────────────────────────────────── */ #tag-picker { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; z-index: 501; width: 220px; display: none; animation: fadeIn 0.1s ease; } #tag-picker.open { display: block; } #tag-picker-header { display: flex; gap: 6px; margin-bottom: 8px; } #tag-input { flex: 1; font-family: var(--font-body); font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); outline: none; transition: border-color var(--transition); } #tag-input:focus { border-color: var(--accent); } #tag-input::placeholder { color: var(--ink-3); } #tag-add-btn { font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 5px 10px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition); flex-shrink: 0; } #tag-add-btn:hover { background: var(--accent-dark); } #tag-suggestions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; min-height: 0; } #tag-current { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--border-light); padding-top: 8px; min-height: 0; } .tag-suggestion-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); cursor: pointer; transition: all var(--transition); font-family: var(--font-body); } .tag-suggestion-pill:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); } .tag-current-pill { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 6px 2px 8px; border-radius: 999px; background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent); font-family: var(--font-body); font-weight: 600; } .tag-remove-btn { background: transparent; border: none; cursor: pointer; color: var(--accent); font-size: 12px; line-height: 1; padding: 0; opacity: 0.7; transition: opacity var(--transition); } .tag-remove-btn:hover { opacity: 1; } /* ── Note Analysis Modal ─────────────────────────────────────────────── */ /* ── Version History Modal ───────────────────────────────────────── */ .modal.history-modal-inner { max-width: 780px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; padding: 24px 28px 20px; } .history-modal-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; } .history-layout { display: flex; gap: 16px; flex: 1; min-height: 0; } .history-sidebar { width: 220px; flex-shrink: 0; overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--radius-sm); scrollbar-width: thin; } .history-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border-light); transition: background var(--transition); } .history-item:last-child { border-bottom: none; } .history-item:hover { background: var(--surface-2); } .history-item.active { background: var(--accent-light); } .history-date { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .history-meta { display: block; font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); } .history-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .history-info { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); margin-bottom: 8px; flex-shrink: 0; min-height: 16px; } .history-preview { flex: 1; width: 100%; box-sizing: border-box; resize: none; border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); background: var(--surface); line-height: 1.6; scrollbar-width: thin; } .history-loading, .history-empty { padding: 16px 12px; font-size: 13px; color: var(--ink-3); text-align: center; } @media (max-width: 600px) { .history-layout { flex-direction: column; } .history-sidebar { width: 100%; max-height: 140px; } .modal.history-modal-inner { padding: 18px 16px 14px; } } .modal.analysis-modal-inner { max-width: 450px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; padding: 24px 28px 20px; } #analysis-header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; } .analysis-note-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 6px; } .analysis-meta-line { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); margin-bottom: 2px; } #analysis-body { flex: 1; overflow-y: auto; scrollbar-width: thin; } .analysis-section { margin-bottom: 16px; } .analysis-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } .analysis-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--border-light); } .analysis-label { color: var(--ink-2); } .analysis-value { color: var(--ink); font-weight: 600; font-family: var(--font-mono); font-size: 12px; } .analysis-row-full { margin-top: 4px; border-bottom: 1px solid var(--border-light); padding: 3px 0; } .analysis-value-word { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); word-break: break-all; text-align: right; flex: 1; padding-left: 12px; } @media (max-width: 600px) { .analysis-grid { grid-template-columns: 1fr; } .analysis-modal-inner { padding: 18px 16px 14px; } } /* ── Tab Groups ──────────────────────────────────────────────────────── */ .tab-group-block { display: flex; align-items: stretch; position: relative; flex-shrink: 0; } .tab-group-label { display: flex; align-items: center; gap: 5px; padding: 0 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all var(--transition); user-select: none; -webkit-touch-callout: none; /* Suppress iOS callout on long-press */ flex-shrink: 0; color: var(--ink-2); min-height: 44px; } .tab-group-label:hover { background: var(--surface-2); } .tab-group-chevron { font-size: 9px; transition: transform 0.2s ease; color: var(--ink-3); } .tab-group-chevron.open { transform: rotate(90deg); } .tab-group-tabs { display: flex; align-items: stretch; gap: 2px; } .tab-group-tabs.collapsed { display: none; } .tab-group-count { font-size: 10px; font-family: var(--font-mono); background: var(--surface-2); color: var(--ink-3); padding: 1px 5px; border-radius: 999px; } /* ── Group Picker ────────────────────────────────────────────────────── */ #group-picker { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 4px 0; z-index: 501; min-width: 180px; display: none; animation: fadeIn 0.1s ease; } #group-picker.open { display: block; } /* ── Tab colour dot ──────────────────────────────────────────────────── */ .tab-colour-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tab-pin-icon { font-size: 10px; flex-shrink: 0; opacity: 0.7; } .tab.pinned { border-bottom-style: solid; } /* ── Group focus mode ────────────────────────────────────────────────── */ /* Applied to tab-group-block elements and individual tab elements that */ /* fall outside the active group when group focus mode is 'dim'. */ .group-focus-dimmed { opacity: 0.35; transition: opacity var(--transition); } .group-focus-dimmed:hover { opacity: 0.7; } /* ── Tab Context Menu ────────────────────────────────────────────────── */ #tab-context-menu { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 4px 0; z-index: 500; min-width: 180px; display: none; animation: fadeIn 0.1s ease; } #tab-context-menu.open { display: block; } .ctx-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; color: var(--ink); cursor: pointer; transition: background var(--transition); user-select: none; } .ctx-item:hover { background: var(--surface-2); } .ctx-item.ctx-danger { color: var(--red); } .ctx-item.ctx-danger:hover { background: var(--red-light); } .ctx-icon { font-size: 13px; width: 16px; text-align: center; } .ctx-label { flex: 1; } .ctx-divider { height: 1px; background: var(--border-light); margin: 3px 0; } .ctx-colours { flex-wrap: wrap; gap: 6px; cursor: default; } .ctx-colours:hover { background: transparent; } #ctx-swatches { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ctx-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s ease, border-color 0.1s ease; padding: 0; flex-shrink: 0; } .ctx-swatch:hover { transform: scale(1.25); } .ctx-swatch.active { border-color: var(--ink); } /* ── Tab Tooltip ─────────────────────────────────────────────────────── */ #tab-tooltip { position: fixed; background: var(--ink); color: var(--bg); font-size: 12px; font-family: var(--font-body); padding: 6px 10px; border-radius: var(--radius-sm); pointer-events: none; z-index: 400; display: none; max-width: 240px; line-height: 1.5; white-space: pre-line; box-shadow: var(--shadow); } /* ── Overview Button & Tab Count Badge ───────────────────────────────── */ #btn-overview { display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; min-width: 32px; padding: 0 6px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); transition: all var(--transition); position: relative; } #btn-overview:hover { background: var(--surface-2); color: var(--ink); } #btn-overview.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } #tab-count-badge { font-size: 11px; font-weight: 600; font-family: var(--font-mono); color: var(--ink-3); min-width: 16px; text-align: center; } #btn-overview.active #tab-count-badge { color: var(--accent); } /* ── Notes Overview Sidebar ──────────────────────────────────────────── */ #overview-sidebar { position: fixed; top: 56px; left: 0; bottom: 0; width: 300px; background: var(--surface); border-right: 1px solid var(--border); box-shadow: 4px 0 20px rgba(26,23,20,0.12); z-index: 150; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.22s ease; } #overview-sidebar.open { transform: translateX(0); } #overview-backdrop { position: fixed; inset: 0; z-index: 149; background: transparent; } #overview-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } #overview-title { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; } #overview-controls { display: flex; align-items: center; gap: 8px; } #overview-sort { font-family: var(--font-body); font-size: 12px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 6px; cursor: pointer; outline: none; transition: border-color var(--transition); } #overview-sort:focus { border-color: var(--accent); } #overview-close { background: transparent; border: none; cursor: pointer; color: var(--ink-3); font-size: 1.3rem; line-height: 1; padding: 0 2px; transition: color var(--transition); } #overview-close:hover { color: var(--ink); } #overview-list { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; } #overview-footer { flex-shrink: 0; border-top: 1px solid var(--border-light); padding: 8px 12px; } #overview-trash-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all var(--transition); text-align: left; } #overview-trash-btn:hover { background: var(--surface-2); color: var(--ink); } #overview-trash-badge { font-size: 11px; font-weight: 600; background: var(--red-light); color: var(--red); padding: 1px 6px; border-radius: 999px; margin-left: auto; display: none; } .overview-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; cursor: pointer; transition: background var(--transition); border-left: 3px solid transparent; } .overview-item:hover { background: var(--surface-2); } .overview-item.active { background: var(--accent-light); border-left-color: var(--accent); } .overview-item-label { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overview-item.active .overview-item-label { color: var(--accent); } .overview-item-meta { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); display: flex; gap: 8px; flex-wrap: wrap; } /* ── Tab Drag Reordering ─────────────────────────────────────────────── */ .tab.dragging { opacity: 0.4; cursor: grabbing; } .tab.drag-over { border-left: 2px solid var(--accent); } .tab { cursor: grab; } .tab:active { cursor: grabbing; } /* ── Conflict Warning Banner ─────────────────────────────────────────── */ #conflict-banner { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: var(--amber-light); color: var(--amber); font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--amber); animation: fadeIn 0.2s ease; } #conflict-banner.visible { display: flex; } #conflict-banner-actions { display: flex; gap: 8px; flex-shrink: 0; } .conflict-btn { font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); border: 1px solid var(--amber); background: transparent; color: var(--amber); } .conflict-btn:hover { background: var(--amber); color: #fff; } .conflict-btn.primary { background: var(--amber); color: #fff; } .conflict-btn.primary:hover { background: var(--accent); border-color: var(--accent); } /* ── Search Button ───────────────────────────────────────────────────── */ #btn-search { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); transition: all var(--transition); padding: 0; } #btn-search:hover { background: var(--surface-2); color: var(--ink); } #btn-search.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } #btn-find { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); transition: all var(--transition); padding: 0; } #btn-find:hover { background: var(--surface-2); color: var(--ink); } #btn-find.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } /* ── Cross-tab Search Panel ──────────────────────────────────────────── */ #search-panel { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 4px 16px rgba(26,23,20,0.1); animation: fadeIn 0.15s ease; position: relative; z-index: 90; } #search-panel-inner { max-width: 900px; width: 100%; margin: 0 auto; padding: 12px 24px; } #search-input-row { display: flex; align-items: center; gap: 10px; color: var(--ink-3); } #search-input { flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--ink); background: transparent; border: none; outline: none; padding: 0; } #search-input::placeholder { color: var(--ink-3); } #search-count { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); white-space: nowrap; min-width: 60px; text-align: right; } #search-close { background: transparent; border: none; cursor: pointer; color: var(--ink-3); font-size: 1.3rem; line-height: 1; padding: 0 2px; transition: color var(--transition); } #search-close:hover { color: var(--ink); } #search-results { margin-top: 8px; } .search-result { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-light); cursor: pointer; transition: background var(--transition); border-radius: var(--radius-sm); padding-left: 4px; padding-right: 4px; } .search-result:hover { background: var(--surface-2); } .search-result-label { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; flex-shrink: 0; min-width: 100px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .search-result-snippet { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-family: var(--font-mono); } .search-result-snippet mark { background: var(--amber-light); color: var(--amber); border-radius: 2px; padding: 0 2px; font-weight: 600; } .search-no-results { font-size: 13px; color: var(--ink-3); padding: 8px 4px; border-top: 1px solid var(--border-light); } /* ── Editor selection colour ─────────────────────────────────────────── */ #editor::selection { background: var(--accent); color: #fff; } #find-bar { display: flex; flex-direction: column; gap: 0; position: absolute; top: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-top: none; border-right: none; border-radius: 0 0 0 var(--radius); box-shadow: -2px 2px 8px rgba(26,23,20,0.12); padding: 6px 10px; z-index: 10; animation: fadeIn 0.15s ease; } /* ── Find row — toggle chevron + input + count + nav + close ─────────── */ #find-row { display: flex; align-items: center; gap: 4px; } /* ── Replace row — hidden until toggled ──────────────────────────────── */ #replace-row { display: flex; align-items: center; gap: 4px; margin-top: 5px; padding-left: 26px; /* aligns replace input with find input (22px toggle + 4px gap) */ } /* ── Replace toggle icon button ──────────────────────────────────────── */ #find-replace-toggle { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: transparent; border: none; cursor: pointer; color: var(--ink-3); border-radius: var(--radius-sm); transition: all var(--transition); padding: 0; flex-shrink: 0; } #find-replace-toggle:hover { color: var(--ink); background: var(--surface-2); } #find-bar.replace-open #find-replace-toggle { color: var(--accent); background: var(--accent-light); } #find-input { font-family: var(--font-body); font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; width: 150px; padding: 4px 8px; transition: border-color var(--transition); } #find-input:focus { border-color: var(--accent); } #find-input::placeholder { color: var(--ink-3); } #find-count { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); white-space: nowrap; min-width: 46px; text-align: center; } #find-prev, #find-next { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: 1px solid var(--border); cursor: pointer; color: var(--ink-2); border-radius: var(--radius-sm); transition: all var(--transition); padding: 0; flex-shrink: 0; } #find-prev:hover, #find-next:hover { background: var(--surface-2); color: var(--ink); border-color: var(--accent); } #find-prev:disabled, #find-next:disabled { opacity: 0.35; cursor: default; } #find-close { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: transparent; border: none; cursor: pointer; color: var(--ink-3); font-size: 1.1rem; line-height: 1; border-radius: var(--radius-sm); transition: all var(--transition); padding: 0; margin-left: 2px; } #find-close:hover { background: var(--red-light); color: var(--red); } /* ── Replace input ───────────────────────────────────────────────────── */ #replace-input { font-family: var(--font-body); font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; width: 150px; padding: 4px 8px; transition: border-color var(--transition); } #replace-input:focus { border-color: var(--accent); } #replace-input::placeholder { color: var(--ink-3); } /* ── Replace / All buttons ───────────────────────────────────────────── */ #replace-one, #replace-all { font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--ink-2); cursor: pointer; transition: all var(--transition); white-space: nowrap; flex-shrink: 0; } #replace-one:hover { background: var(--surface-2); color: var(--ink); border-color: var(--accent); } #replace-all:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); } #replace-one:disabled, #replace-all:disabled { opacity: 0.35; cursor: default; } /* editor-wrapper needs position:relative for find-bar absolute positioning */ #editor-wrapper { position: relative; } /* ── Search highlight in editor ──────────────────────────────────────── */ /* Applied via JS by temporarily selecting ranges — no extra CSS needed */ /* ── Settings Modal ──────────────────────────────────────────────────── */ .settings-modal-inner { max-width: 480px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; padding: 24px 28px 20px; } .settings-header { flex-shrink: 0; margin-bottom: 16px; } .settings-title { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin-bottom: 2px; } .settings-subtitle { font-size: 12px; color: var(--ink-3); font-style: italic; } .settings-accordion { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .settings-section { padding: 4px 0 8px; } .settings-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .settings-divider { height: 1px; background: var(--border-light); margin: 12px 0; } #settings-autolock { width: 100%; font-family: var(--font-body); font-size: 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); outline: none; transition: border-color var(--transition), box-shadow var(--transition); cursor: pointer; } #settings-autolock:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } /* ── Passphrase Strength Bar ─────────────────────────────────────────── */ #pp-strength-bar { height: 4px; background: var(--border-light); border-radius: 2px; margin-top: 8px; overflow: hidden; } #pp-strength-fill, [id*="strength-fill"] { height: 100%; width: 0; border-radius: 2px; transition: width 0.25s ease, background 0.25s ease; } #pp-strength-fill.weak, [id*="strength-fill"].weak { background: var(--red); } #pp-strength-fill.fair, [id*="strength-fill"].fair { background: var(--amber); } #pp-strength-fill.strong, [id*="strength-fill"].strong { background: var(--green); } #pp-strength-fill.vstrong, [id*="strength-fill"].vstrong { background: var(--green); } #pp-strength-label.weak, [id*="strength-label"].weak { color: var(--red); } #pp-strength-label.fair, [id*="strength-label"].fair { color: var(--amber); } #pp-strength-label.strong, [id*="strength-label"].strong { color: var(--green); } #pp-strength-label.vstrong, [id*="strength-label"].vstrong { color: var(--green); } /* ── Passphrase change status ────────────────────────────────────────── */ #pp-change-status { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; } #pp-change-status.success { background: var(--green-light); color: var(--green); } #pp-change-status.error { background: var(--red-light); color: var(--red); } /* ── Trash button ────────────────────────────────────────────────────── */ #btn-trash { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 6px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); transition: all var(--transition); } #btn-trash:hover { background: var(--surface-2); color: var(--ink); } /* ── Trash Modal ─────────────────────────────────────────────────────── */ .trash-modal-inner { max-width: 540px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; padding: 24px 28px 20px; } .trash-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; } #trash-list { flex: 1; overflow-y: auto; scrollbar-width: thin; } .trash-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); gap: 12px; } .trash-item-info { flex: 1; min-width: 0; } .trash-item-label { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trash-item-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-family: var(--font-mono); } .trash-item-days { font-size: 11px; color: var(--red); font-weight: 600; flex-shrink: 0; white-space: nowrap; } .trash-item-actions { display: flex; gap: 6px; flex-shrink: 0; } .trash-item-actions .btn-ghost { font-size: 12px; padding: 4px 10px; } .trash-item-actions .btn-danger { font-size: 12px; padding: 4px 10px; } .trash-empty-state { text-align: center; padding: 32px 16px; color: var(--ink-3); font-size: 13.5px; } @media (max-width: 600px) { .trash-modal-inner { padding: 18px 16px 14px; } .trash-modal-header { flex-direction: column; gap: 10px; } } /* ── Sort direction toggle ───────────────────────────────────────────── */ #overview-sort-dir { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink-2); transition: all var(--transition); flex-shrink: 0; } #overview-sort-dir:hover { background: var(--surface-2); color: var(--ink); } #overview-sort-dir.reversed { color: var(--accent); border-color: var(--accent); } /* ── Mobile overflow menu ────────────────────────────────────────────── */ #btn-more { display: none !important; /* shown only via media query below */ align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 6px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); transition: all var(--transition); } #btn-more:hover { background: var(--surface-2); color: var(--ink); } #more-menu { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 4px 0; z-index: 500; min-width: 180px; animation: fadeIn 0.1s ease; } /* Mobile toolbar overflow — moved to end of file */ #btn-settings { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); transition: all var(--transition); padding: 0; } #btn-settings:hover { background: var(--surface-2); color: var(--ink); } /* ── Error Banner ────────────────────────────────────────────────────── */ /* * Slides in below the header when a save or network error occurs. * Dismissed by × button or automatically after 10 seconds. */ #error-banner { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: var(--red-light); color: var(--red); font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--red); animation: fadeIn 0.2s ease; } #error-banner.visible { display: flex; } #error-banner-close { background: transparent; border: none; cursor: pointer; color: var(--red); font-size: 1.4rem; line-height: 1; padding: 0 4px; opacity: 0.7; flex-shrink: 0; transition: opacity var(--transition); } #error-banner-close:hover { opacity: 1; } /* ── Size Warning ────────────────────────────────────────────────────── */ /* * Shown in the editor footer when note content approaches the 512 KB limit. * Amber at 80%, red at 95%. */ #size-warning { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; } #size-warning.warn { color: var(--amber); } #size-warning.danger { color: var(--red); } #btn-help { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); transition: all var(--transition); padding: 0; } #btn-help:hover { background: var(--surface-2); color: var(--ink); } /* ── Auth Screen ─────────────────────────────────────────────────────── */ #auth-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px 44px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); } .auth-card h1 { font-family: var(--font-display); font-size: 28px; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.02em; } .auth-card .subtitle { font-size: 13.5px; color: var(--ink-2); margin-bottom: 32px; line-height: 1.6; } .field { margin-bottom: 20px; } .field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px; } .field input { width: 100%; font-family: var(--font-mono); font-size: 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); outline: none; transition: border-color var(--transition), box-shadow var(--transition); letter-spacing: 0.04em; } .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .field input::placeholder { color: var(--ink-3); } /* Light theme — explicit */ [data-theme="light"] .field select { width: 100%; font-family: var(--font-mono); font-size: 14px; padding: 10px 14px; border: 1px solid #e8e3db; border-radius: var(--radius-sm); background: #faf8f5; color: #1a1714; outline: none; transition: border-color var(--transition); appearance: none; cursor: pointer; } [data-theme="light"] .field select:focus { border-color: #c4622d; box-shadow: 0 0 0 3px #f0e4dc; } /* Auto theme in light system */ @media (prefers-color-scheme: light) { [data-theme="auto"] .field select { width: 100%; font-family: var(--font-mono); font-size: 14px; padding: 10px 14px; border: 1px solid #e8e3db; border-radius: var(--radius-sm); background: #faf8f5; color: #1a1714; outline: none; transition: border-color var(--transition); appearance: none; cursor: pointer; } [data-theme="auto"] .field select:focus { border-color: #c4622d; box-shadow: 0 0 0 3px #f0e4dc; } } /* Dark theme — explicit */ [data-theme="dark"] .field select { width: 100%; font-family: var(--font-mono); font-size: 14px; padding: 10px 14px; border: 1px solid #403c37; border-radius: var(--radius-sm); background: #28241f; color: #ede9e2; outline: none; transition: border-color var(--transition); appearance: none; cursor: pointer; } [data-theme="dark"] .field select:focus { border-color: #d4724d; box-shadow: 0 0 0 3px #3a2318; } /* Auto theme in dark system */ @media (prefers-color-scheme: dark) { [data-theme="auto"] .field select { width: 100%; font-family: var(--font-mono); font-size: 14px; padding: 10px 14px; border: 1px solid #403c37; border-radius: var(--radius-sm); background: #28241f; color: #ede9e2; outline: none; transition: border-color var(--transition); appearance: none; cursor: pointer; } [data-theme="auto"] .field select:focus { border-color: #d4724d; box-shadow: 0 0 0 3px #3a2318; } } .field-hint { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); } .btn-primary { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--transition), transform var(--transition); letter-spacing: 0.01em; margin-top: 4px; } .btn-primary:hover { background: var(--accent-dark); } .btn-primary:active { transform: scale(0.99); } .btn-secondary { padding: 11px 18px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--transition), transform var(--transition); } .btn-secondary:hover { background: var(--border-light); } .btn-secondary:active { transform: scale(0.99); } /* Empty vault confirmation — shown when unlock succeeds but vault is empty */ #empty-vault-confirm { text-align: center; padding: 8px 0 4px; animation: fadeIn 0.2s ease; } .empty-vault-icon { font-size: 32px; margin-bottom: 12px; } .empty-vault-message { font-size: 15px; color: var(--ink); margin-bottom: 8px; } .empty-vault-sub { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 0; } .auth-notice { margin-top: 20px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12px; color: var(--ink-2); line-height: 1.6; display: flex; gap: 8px; align-items: flex-start; } .auth-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); } #auth-error { display: none; margin-top: 14px; padding: 10px 14px; background: var(--red-light); color: var(--red); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; } /* ── Main Workspace ──────────────────────────────────────────────────── */ #workspace { display: none; flex: 1; flex-direction: column; animation: fadeIn 0.25s ease; min-height: 0; overflow: hidden; max-height: calc(100vh - 56px); } #workspace.active { display: flex; } /* Landing mode — workspace visible before unlock for first-time visitors */ #workspace.landing { display: flex; flex: 1; } #workspace.landing #tab-bar-outer { display: none; } /* ── Tab Bar ─────────────────────────────────────────────────────────── */ /* ── Tab Bar Outer ───────────────────────────────────────────────────── */ #tab-bar-outer { background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: stretch; min-height: 44px; flex-shrink: 0; position: relative; } /* ── Tab Bar Inner (scrollable) ──────────────────────────────────────── */ #tab-bar { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 0 4px; } #tab-bar::-webkit-scrollbar { display: none; } /* ── Tab scroll chevrons ─────────────────────────────────────────────── */ #tab-scroll-left, #tab-scroll-right { display: flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; background: var(--surface); border: none; cursor: pointer; color: var(--ink-3); transition: all var(--transition); padding: 0; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); } #tab-scroll-left:hover, #tab-scroll-right:hover { background: var(--surface-2); color: var(--ink); } .tab { display: flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 44px; border-bottom: 2px solid transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color var(--transition), border-color var(--transition), background var(--transition); position: relative; flex-shrink: 0; user-select: none; -webkit-touch-callout: none; /* Suppress iOS callout on long-press */ } .tab:hover { color: var(--ink); background: var(--surface-2); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .tab-label { outline: none; border: none; background: transparent; font: inherit; color: inherit; cursor: pointer; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .tab-label[contenteditable="true"] { cursor: text; background: var(--accent-light); padding: 1px 4px; border-radius: 3px; min-width: 60px; } .tab-close { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; border: none; cursor: pointer; color: var(--ink-3); font-size: 11px; padding: 0; transition: all var(--transition); opacity: 0; } .tab:hover .tab-close, .tab.active .tab-close { opacity: 1; } .tab-close:hover { background: var(--red-light); color: var(--red); } #btn-add-tab { display: flex; align-items: center; gap: 5px; padding: 0 14px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: var(--surface); border: none; border-right: 1px solid var(--border-light); cursor: pointer; transition: all var(--transition); white-space: nowrap; flex-shrink: 0; font-family: var(--font-body); } #btn-add-tab:hover { color: var(--accent); background: var(--accent-light); } /* ── Editor ──────────────────────────────────────────────────────────── */ #editor-pane { flex: 1; display: flex; flex-direction: column; padding: 24px; width: 100%; margin: 0 auto; gap: 0; min-height: 0; overflow: hidden; } #editor::placeholder { color: var(--ink-3); font-style: italic; } /* ── Editor Wrapper — single continuous border around find bar + editor ─ */ #editor-wrapper { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); min-height: 0; } /* When meta bar is showing, flatten the top of the wrapper to join with it */ #meta-bar[style*="flex"] + #editor-wrapper, #editor-pane.has-meta #editor-wrapper { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } #editor-wrapper:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px var(--accent-light); } /* When meta bar is present and editor is focused — accent the meta bar too */ #editor-pane.has-meta:focus-within #meta-bar { border-color: var(--accent); border-bottom-color: var(--border-light); box-shadow: 0 0 0 3px var(--accent-light); /* Clip bottom of ring so it doesn't double up with wrapper's ring */ clip-path: inset(-4px -4px 0 -4px); } /* Suppress top ring on wrapper when meta bar is handling it */ #editor-pane.has-meta #editor-wrapper:focus-within { box-shadow: var(--shadow), 0 0 0 3px var(--accent-light); clip-path: inset(0 -4px -4px -4px); } /* ── Meta Bar — stays at top of editor pane ─────────────────────────── */ #meta-bar { display: none; width: 100%; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--border); border-bottom: 1px solid var(--border-light); border-radius: var(--radius) var(--radius) 0 0; padding: 8px 22px; user-select: none; letter-spacing: 0.01em; box-sizing: border-box; flex-shrink: 0; /* Two-column layout: date left, Line/Column right */ flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } /* Show as flex when JS sets display:flex */ #meta-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #meta-bar-linecol { flex-shrink: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; } /* ── Editor textarea — auto-grows with content ───────────────────────── */ #editor { flex: 1; width: 100%; padding: 20px 22px; font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--ink); background: var(--surface); border: none; border-radius: 0; resize: none; /* auto-grows via autoGrow(); manual resize not applicable */ outline: none; overflow-y: auto; /* Editor content scrolls independently, never vertical collapse */ overflow-x: hidden; tab-size: 2; min-height: 0; } .editor-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 0; font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); } /* ── Welcome / Empty State ───────────────────────────────────────────── */ #welcome-panel { display: none; flex: 1; align-items: center; justify-content: center; padding: 48px 24px; } #welcome-panel.visible { display: flex; } .welcome-inner { max-width: 520px; text-align: center; } /* In landing mode, give the welcome panel a bit more room */ #workspace.landing .welcome-inner { max-width: 680px; } .welcome-icon { width: 64px; height: 64px; background: var(--accent-light); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--accent); } .welcome-inner h2 { font-family: var(--font-display); font-size: 24px; color: var(--ink); margin-bottom: 10px; } .welcome-inner p { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin-bottom: 24px; } .tips-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; text-align: left; } .tip-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 14px 16px; font-size: 13px; } .tip-card .tip-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; } .tip-card .tip-body { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; } /* Welcome panel passphrase entry — landing mode only */ .welcome-auth { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-light); text-align: center; } .welcome-auth-label { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; } .welcome-auth .field input { width: 100%; box-sizing: border-box; } /* ── Delete Confirmation Modal ───────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(26,23,20,0.45); z-index: 200; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border-radius: 14px; padding: 32px 36px; max-width: 400px; width: 100%; box-shadow: var(--shadow-lg); } .modal h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; } .modal p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 22px; line-height: 1.6; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .btn-ghost { padding: 8px 16px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--ink-2); transition: all var(--transition); } .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } .btn-danger { padding: 8px 16px; background: var(--red); border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; color: #fff; transition: all var(--transition); } .btn-danger:hover { background: #a32e2e; } .btn-danger:disabled { opacity: 0.6; cursor: not-allowed; } /* Danger zone accordion header — subtle red tint */ .acc-header-danger { color: var(--red); } .acc-header-danger:hover { background: var(--red-light); } /* Keyboard shortcuts table */ .shortcuts-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } .shortcuts-table tr + tr td { border-top: 1px solid var(--border-light); } .shortcuts-table td { padding: 7px 6px; vertical-align: middle; } .shortcuts-table td:first-child { white-space: nowrap; color: var(--ink-2); width: 1%; } .shortcuts-table td:last-child { color: var(--ink); padding-left: 16px; } kbd { display: inline-block; padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); line-height: 1.5; } /* ── Help Modal — Accordion ──────────────────────────────────────────── */ .help-modal-inner { max-width: 600px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; padding: 28px 28px 20px; } .help-header { text-align: center; flex-shrink: 0; margin-bottom: 20px; } .help-title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 4px; } .help-subtitle { font-size: 12.5px; color: var(--ink-3); font-style: italic; } .help-accordion { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .acc-item { border-bottom: 1px solid var(--border-light); } .acc-header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; background: transparent; border: none; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: left; transition: color var(--transition); gap: 8px; } .acc-header:hover { color: var(--accent); } .acc-chevron { font-size: 10px; color: var(--ink-3); transition: transform 0.2s ease; flex-shrink: 0; } .acc-header.open .acc-chevron { transform: rotate(90deg); } /* Dim inactive headers when any sibling is open */ .settings-accordion:has(.acc-header.open) .acc-header:not(.open), .help-accordion:has(.acc-header.open) .acc-header:not(.open) { opacity: 0.4; transition: opacity 0.2s ease; } .settings-accordion .acc-header, .help-accordion .acc-header { transition: color var(--transition), opacity 0.2s ease; } /* Help guide search bar */ .help-search-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); flex-shrink: 0; } .help-search-wrap svg { flex-shrink: 0; color: var(--ink-3); } .help-search-wrap input { flex: 1; border: none; background: transparent; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); outline: none; } .help-search-wrap input::placeholder { color: var(--ink-3); } .help-search-wrap button { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--ink-3); padding: 0 2px; line-height: 1; transition: color var(--transition); } .help-search-wrap button:hover { color: var(--ink); } /* Search highlight */ mark.help-highlight { background: var(--amber-light, #fef3cd); color: var(--ink); border-radius: 2px; padding: 0 1px; } .acc-body { display: none; padding: 0 4px 14px; font-size: 13px; color: var(--ink-2); line-height: 1.65; } .acc-body.open { display: block; } .acc-body p { margin-bottom: 8px; } .acc-body ul { padding-left: 18px; margin-bottom: 10px; } .acc-body li { margin-bottom: 5px; } .acc-body strong { color: var(--ink); } .acc-body code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; } @media (max-width: 600px) { .help-modal-inner { padding: 20px 16px 16px; max-height: 92vh; } .help-title { font-size: 19px; } } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 860px) { .tips-grid { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE — must be last so media queries override all rules ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* ── Toolbar overflow — show ··· and hide ALL individual buttons ── */ #btn-more.workspace-visible { display: flex !important; } #btn-overview, #btn-trash, #btn-help, #btn-settings, #btn-search, #btn-find, #btn-lock { display: none !important; } /* ── Layout fixes ── */ .auth-card { padding: 28px 22px; } header { padding: 0 14px; } /* ── Editor ── */ #editor-pane { padding: 14px; flex: 1; overflow-y: auto; } #editor-wrapper { flex: 1; } #workspace.active { height: auto; overflow: hidden; } /* ── Welcome panel ── */ .tips-grid { grid-template-columns: 1fr; } /* ── Meta bar ── */ #meta-bar-linecol { display: none; } /* ── Tab bar ── */ #tab-bar-outer { padding: 0; } /* ── Editor footer ── */ .editor-footer { flex-wrap: wrap; gap: 4px; } } /* ── iPhone portrait (max-width: 600px) ── */ @media (max-width: 600px) and (orientation: portrait) { #app { min-height: 100dvh; } #workspace { max-height: 90vh; } } /* ── iPhone landscape (max-width: 600px) ── */ @media (max-width: 600px) and (orientation: landscape) { #app { min-height: 100dvh; } /* Show Find & Replace button in landscape */ #btn-find.workspace-visible { display: flex !important; } } /* ── iPad portrait (600px < width ≤ 1024px) ── */ @media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) { #app { min-height: 100dvh; } #workspace { max-height: 90vh; } /* Show buttons on tablet portrait */ #btn-overview, #btn-trash, #btn-search, #btn-find, #btn-help, #btn-settings, #btn-lock { display: flex !important; } } /* ── iPad landscape (600px < width ≤ 1024px) ── */ @media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) { #app { min-height: 100dvh; } /* Show buttons on tablet landscape */ #btn-overview, #btn-trash, #btn-search, #btn-find, #btn-help, #btn-settings, #btn-lock { display: flex !important; } } /* ── Desktop and larger (width > 1024px) ── */ @media (min-width: 1025px) { #btn-overview, #btn-trash, #btn-search, #btn-find, #btn-help, #btn-settings, #btn-lock { display: flex !important; } }