/* Default theme tokens — keep in sync with web/index.html :root / html[data-theme="light"] */ :root { --bg: #0a192f; --surface: #0d2138; --border: #2a3f5c; /* Primary copy: off-white (slightly grayer than pure #fafafa) to ease contrast on dark surfaces */ --text: color-mix(in srgb, #fafafa 97%, #9a9a9a 3%); --muted: #a1a1a1; --accent: #89cff0; --accent-dim: rgba(137, 207, 240, 0.18); --accent-soft: rgba(137, 207, 240, 0.1); --accent-glow: color-mix(in srgb, var(--accent) 32%, transparent); --cta-on-accent: #0a1628; /* Hyperlinks on dark surfaces — brighter than UA default blue (Cursor / VS Code–style) */ --link-url: #55b4ff; --link-url-hover: #7ec8ff; } [data-theme="light"] { --bg: #f5f7fb; --surface: #ffffff; --border: #d8dee9; --text: #0f172a; --muted: #556070; --accent: #5eb8e8; --accent-dim: rgba(94, 184, 232, 0.2); --accent-soft: rgba(94, 184, 232, 0.12); --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent); --cta-on-accent: #0a1628; --link-url: #0969da; --link-url-hover: #0550ae; } /* Dashboard color palettes: set data-palette on (saved in localStorage). Night/Day still uses data-theme. */ html[data-palette="ocean"]:not([data-theme="light"]) { --bg: #0a0f1a; --surface: #111b2e; --border: #2a4f6e; --text: color-mix(in srgb, #e8f0ff 97%, #9a9a9a 3%); --muted: #6b8fb3; } html[data-theme="light"][data-palette="ocean"] { --bg: #eef6ff; --surface: #ffffff; --border: #c7d9ee; --text: #0c1829; --muted: #4a678a; } html[data-palette="forest"]:not([data-theme="light"]) { --bg: #0a120f; --surface: #131f1a; --border: #2a4f42; --text: color-mix(in srgb, #e8f5ef 97%, #9a9a9a 3%); --muted: #6b9a7f; } html[data-theme="light"][data-palette="forest"] { --bg: #f0faf4; --surface: #ffffff; --border: #c5e0d4; --text: #0f2418; --muted: #3d6b52; } html[data-palette="sunset"]:not([data-theme="light"]) { --bg: #140d0d; --surface: #1f1412; --border: #4f3a30; --text: color-mix(in srgb, #fff0ea 97%, #9a9a9a 3%); --muted: #c48b7a; } html[data-theme="light"][data-palette="sunset"] { --bg: #fff8f4; --surface: #ffffff; --border: #f0d4c4; --text: #2a1410; --muted: #8a5c4a; } html[data-palette="lavender"]:not([data-theme="light"]) { --bg: #100d14; --surface: #181222; --border: #3f3552; --text: color-mix(in srgb, #f3edff 97%, #9a9a9a 3%); --muted: #9b8bb8; } html[data-theme="light"][data-palette="lavender"] { --bg: #f8f5ff; --surface: #ffffff; --border: #e0d6f5; --text: #1f1530; --muted: #6b5a8a; } html[data-palette="ember"]:not([data-theme="light"]) { --bg: #120a08; --surface: #1e110c; --border: #4f3628; --text: color-mix(in srgb, #ffe8dc 97%, #9a9a9a 3%); --muted: #c9856a; } html[data-theme="light"][data-palette="ember"] { --bg: #fff6f0; --surface: #ffffff; --border: #efd4c8; --text: #281210; --muted: #7a5344; } html[data-palette="arctic"]:not([data-theme="light"]) { --bg: #0c1014; --surface: #131a20; --border: #344452; --text: color-mix(in srgb, #eef5fa 97%, #9a9a9a 3%); --muted: #7a95ab; } html[data-theme="light"][data-palette="arctic"] { --bg: #f4f8fb; --surface: #ffffff; --border: #d4e1ea; --text: #111920; --muted: #4a5f72; } html[data-palette="slate"]:not([data-theme="light"]) { --bg: #0c0e12; --surface: #151922; --border: #3a4352; --text: color-mix(in srgb, #eef1f7 97%, #9a9a9a 3%); --muted: #8892a6; } html[data-theme="light"][data-palette="slate"] { --bg: #f5f6f8; --surface: #ffffff; --border: #dbe0e8; --text: #12161f; --muted: #5a6578; } html[data-palette="midnight"]:not([data-theme="light"]) { --bg: #080a18; --surface: #101428; --border: #2e345a; --text: color-mix(in srgb, #eae8ff 97%, #9a9a9a 3%); --muted: #8b87c4; } html[data-theme="light"][data-palette="midnight"] { --bg: #f4f3ff; --surface: #ffffff; --border: #ddd6f5; --text: #15122a; --muted: #5c5288; } html[data-palette="sakura"]:not([data-theme="light"]) { --bg: #120e11; --surface: #1a1418; --border: #4c3a46; --text: color-mix(in srgb, #ffeaf2 97%, #9a9a9a 3%); --muted: #c49aaa; } html[data-theme="light"][data-palette="sakura"] { --bg: #fff5f8; --surface: #ffffff; --border: #f5d0de; --text: #2a1620; --muted: #8a5a6e; } html[data-palette="sand"]:not([data-theme="light"]) { --bg: #100e0c; --surface: #1a1714; --border: #4c463a; --text: color-mix(in srgb, #f5efe6 97%, #9a9a9a 3%); --muted: #b8a892; } html[data-theme="light"][data-palette="sand"] { --bg: #faf7f1; --surface: #ffffff; --border: #e8dfd0; --text: #231f18; --muted: #6e6558; } html[data-palette="mint"]:not([data-theme="light"]) { --bg: #0a1211; --surface: #121d1c; --border: #2e4a46; --text: color-mix(in srgb, #e6fff9 97%, #9a9a9a 3%); --muted: #6ab5a8; } html[data-theme="light"][data-palette="mint"] { --bg: #f0faf8; --surface: #ffffff; --border: #cce8e2; --text: #102320; --muted: #3d7268; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } .hub-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: var(--border); flex-wrap: wrap; gap: 0.75rem; background: var(--surface); } @supports (color: color-mix(in srgb, white 50%, black 50%)) { .hub-header { border-bottom-color: color-mix(in srgb, var(--border) 65%, var(--text) 35%); } } .hub-header h1 { margin: 0; font-size: 1.25rem; } .hub-auth { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .btn-new-note { background: #22c55e; color: #000; border-color: #22c55e; font-weight: 600; } .btn-new-note:hover { filter: brightness(1.08); border-color: #4ade80; } .btn-secondary { background: var(--surface); } .btn-primary { background: var(--accent); color: var(--cta-on-accent); border-color: var(--accent); font-weight: 600; } /* * Header nav: 35%/65% border/accent. Header outline: 1.61px. * Search row matches Save preset (.browse-toolbar .presets-row button): 1.1px, border 90% + accent 10%. * Re-index: 1.3px border (unchanged weight), soft accent fill; Clear/Apply use preset stroke. */ .hub-header .btn-secondary { border-width: 1.61px; border-style: solid; border-color: color-mix(in srgb, var(--border) 35%, var(--accent) 65%); transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .hub-header .btn-secondary:hover { border-color: color-mix(in srgb, var(--accent) 82%, white 18%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent); filter: brightness(1.12); } .hub-header .btn-secondary:focus-visible { border-color: color-mix(in srgb, var(--accent) 82%, white 18%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent); filter: brightness(1.12); outline: none; } .hub-header .btn-secondary:active { filter: brightness(1.02); box-shadow: none; } /* Search: same stroke as Save preset — see .browse-toolbar .presets-row button */ .search-section .search-row-filters input[type="text"], .search-section .search-row-filters select, .search-section .search-row-dates-actions input[type="date"], .search-section .search-row-dates-actions .btn-secondary:not(#btn-reindex) { border-width: 1.1px; border-style: solid; border-color: color-mix(in srgb, var(--border) 90%, var(--accent) 10%); transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .search-section .btn-inline-field-help { border-width: 1.1px; border-color: color-mix(in srgb, var(--border) 90%, var(--accent) 10%); } /* Re-index: keep heavier border; soft fill so it reads as a primary maintenance action */ .search-section .search-row-dates-actions #btn-reindex { border-width: 1.3px; border-style: solid; border-color: color-mix( in srgb, color-mix(in srgb, var(--border) 35%, var(--accent) 65%) 80%, black 20% ); background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .search-section .search-row-dates-actions .btn-secondary:not(#btn-reindex):hover, .search-section .search-row-dates-actions .btn-secondary:not(#btn-reindex):focus-visible { border-color: color-mix(in srgb, var(--border) 75%, var(--accent) 25%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); filter: none; outline: none; } .search-section .search-row-dates-actions .btn-secondary:not(#btn-reindex):active { box-shadow: none; } .search-section .search-row-dates-actions #btn-reindex:hover, .search-section .search-row-dates-actions #btn-reindex:focus-visible { border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%); background: color-mix(in srgb, var(--accent) 20%, var(--surface) 80%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); filter: none; outline: none; } .search-section .search-row-dates-actions #btn-reindex:active { background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%); box-shadow: none; } /* * "Last indexed: N minutes ago" passive UI. Lives next to the Re-index button * (see #btn-reindex above) and is populated by `web/hub/hub.js` from the * `GET /api/v1/index/status` sidecar that both sync and background re-indexes * write via `lib/bridge-index-last-indexed.mjs`. Intentionally muted styling * because this is read-only context, not an action — the eye should land on * the Re-index button first. */ .search-section .search-row-dates-actions .hub-index-status { font-size: 12px; color: color-mix(in srgb, var(--text) 60%, transparent 40%); align-self: center; margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .search-section .search-row-dates-actions .hub-index-status.hub-index-status-running { /* When a background job is in flight the status flips to a softly-pulsing accent color so users know to wait before clicking Re-index again. */ color: color-mix(in srgb, var(--accent) 75%, var(--text) 25%); } /* Search fields: hover/focus — same family as Save preset + presets name input */ .search-section .search-row-filters input[type="text"]:hover, .search-section .search-row-filters select:hover, .search-section .search-row-dates-actions input[type="date"]:hover, .search-section .search-row-filters input[type="text"]:focus-visible, .search-section .search-row-filters select:focus-visible, .search-section .search-row-dates-actions input[type="date"]:focus-visible { border-color: color-mix(in srgb, var(--border) 75%, var(--accent) 25%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); outline: none; } .search-section .btn-inline-field-help:hover, .search-section .btn-inline-field-help:focus-visible { border-color: color-mix(in srgb, var(--border) 75%, var(--accent) 25%); outline: none; } /* Browse + proposal filters: outlined controls — slightly stronger than base button (not search row) */ .browse-toolbar .view-tab, .browse-toolbar .presets-row button, .proposal-list-filters .btn-secondary { border-width: 1.1px; border-color: color-mix(in srgb, var(--border) 90%, var(--accent) 10%); } .browse-toolbar .view-tab:hover { border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%); } .browse-toolbar .presets-row button:hover, .proposal-list-filters .btn-secondary:hover { border-color: color-mix(in srgb, var(--border) 75%, var(--accent) 25%); } .btn-primary:hover:not(:disabled):not(.btn-busy) { filter: brightness(1.1); border-color: var(--accent); } .btn-primary:active:not(:disabled):not(.btn-busy) { filter: brightness(0.95); } .muted { color: var(--muted); font-size: 0.9rem; } .small { font-size: 0.8rem; } .hidden { display: none !important; } button { cursor: pointer; padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } button:hover { border-color: var(--accent); } /* Long-running API actions (hosted latency): in-progress label + spinner */ button.btn-busy, button.btn-busy:hover { cursor: wait; opacity: 0.92; } button.btn-busy::after { content: ''; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.4em; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; vertical-align: -0.12em; animation: spin 0.65s linear infinite; } button.btn-primary.btn-busy::after, button.btn-new-note.btn-busy::after { border-color: rgba(0, 0, 0, 0.22); border-top-color: rgba(0, 0, 0, 0.75); } .btn-provider { background: var(--accent); color: var(--cta-on-accent); border-color: var(--accent); } .login-buttons-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .oauth-setup { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); } .oauth-setup code { font-size: 0.85rem; background: var(--bg); padding: 0.15rem 0.4rem; border-radius: 4px; } .oauth-steps { margin: 0.75rem 0; padding-left: 1.25rem; } .oauth-steps li { margin-bottom: 0.5rem; } .panel { padding: 2rem 1.5rem; max-width: 640px; } .search-section { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.5rem; background: var(--surface); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: var(--border); align-items: stretch; } @supports (color: color-mix(in srgb, white 50%, black 50%)) { .search-section { border-bottom-color: color-mix(in srgb, var(--border) 65%, var(--text) 35%); } } .search-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .search-row-filters input[type="text"] { flex: 1; min-width: 200px; padding: 0.5rem 0.75rem; border-radius: 6px; /* border: unified with .hub-header .btn-secondary (see block above) */ background: var(--surface); color: var(--text); } /* Date inputs: native calendar glyph ignores theme (often black). Paint accent via mask + background (WebKit/Blink). */ input[type="date"] { accent-color: var(--accent); } html:not([data-theme="light"]) input[type="date"] { color-scheme: dark; } /* Calendar icon: mask SVG (white = visible) × background-color = theme accent — works on dark + light + palettes */ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; width: 1.125rem; height: 1.125rem; padding: 0.12rem; box-sizing: content-box; margin-left: 0.15rem; background-color: var(--accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2zm0 18H4V10h16v11zM4 6V5h16v1H4z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2zm0 18H4V10h16v11zM4 6V5h16v1H4z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } input[type="date"]::-moz-calendar-picker-indicator { cursor: pointer; opacity: 1; width: 1.125rem; height: 1.125rem; padding: 0.12rem; margin-left: 0.15rem; background-color: var(--accent); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2zm0 18H4V10h16v11zM4 6V5h16v1H4z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .search-section .search-row-filters select { padding: 0.5rem 0.75rem; border-radius: 6px; /* border: unified with header (see .hub-header .btn-secondary block) */ background: var(--surface); color: var(--text); } .search-section .filter-date-label { font-size: 0.8rem; color: var(--muted); margin-right: 0.2rem; } .search-section .search-row-dates-actions input[type="date"] { padding: 0.5rem 0.75rem; border-radius: 6px; /* border: unified with header */ background: var(--surface); color: var(--text); } .search-section .search-hint { margin: 0.25rem 0 0; line-height: 1.45; max-width: 72rem; } .browse-key-wrap { display: inline-flex; align-items: center; } .browse-toolbar-key-details { margin: 0; display: inline-block; vertical-align: middle; } .browse-toolbar-key-details[open] { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.65rem 0.75rem; width: 100%; } .browse-toolbar-key-details[open] .search-key-body { flex: 1 1 18rem; min-width: 0; margin-top: 0; } .search-key-summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; cursor: pointer; user-select: none; padding: 0.2rem 0.25rem; line-height: 1; border: none; border-radius: 4px; background: transparent; color: #4ade80; box-sizing: border-box; } .search-key-collapse-cue { display: none; font-size: 0.55rem; line-height: 1; color: inherit; opacity: 0.95; } .browse-toolbar-key-details[open] .search-key-collapse-cue { display: inline-block; } .search-key-summary:hover { filter: brightness(1.12); } [data-theme="light"] .search-key-summary { color: #15803d; } .search-key-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .search-key-summary::-webkit-details-marker { display: none; } .search-key-summary::marker { content: ''; } .search-key-icon { display: block; flex-shrink: 0; width: 31px; height: 31px; /* 30% smaller than 44px (~1.4× original 22px) */ } .search-key-body { margin: 0.5rem 0 0; padding: 0.85rem 1rem; max-width: min(52rem, 100%); font-size: 0.9375rem; line-height: 1.55; color: var(--muted); border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); } .search-key-lede { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); } .search-key-assist { margin: 0.55rem 0 0; padding: 0.5rem 0.7rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); } .search-key-assist-title { margin: 0 0 0.4rem; } .search-key-assist-lede { margin: 0 0 0.35rem; font-size: 0.82rem; line-height: 1.45; color: var(--muted); } .search-key-assist-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); } .search-key-assist-pair p { margin: 0; } .search-key-meta + .search-key-assist.search-key-assist-after-memory { margin-top: 0.75rem; margin-bottom: 0; } .how-to-connection-helpers { margin-top: 1.25rem; margin-bottom: 0; } @media (max-width: 640px) { .search-key-assist-pair { grid-template-columns: 1fr; } } .search-key-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.35rem; margin-top: 0.75rem; padding-bottom: 0.85rem; align-items: start; } @media (max-width: 720px) { .search-key-columns { grid-template-columns: 1fr; } } .search-key-col-title { margin: 0 0 0.45rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.055em; color: var(--accent); } .search-key-col .search-key-list li:last-child { margin-bottom: 0; } .search-key-meta { margin: 1.15rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); } .search-key-meta-heading { margin-top: 0; } .search-key-meta .search-key-list { margin: 0; } .search-key-list { list-style: none; margin: 0; padding: 0; } .search-key-list li { margin: 0 0 0.7rem; padding: 0; } .search-key-list li:last-child { margin-bottom: 0; } .search-key-term { font-weight: 600; color: var(--text); } @supports (color: color-mix(in srgb, white 50%, black 50%)) { .search-key-term { color: color-mix(in srgb, var(--text) 78%, var(--accent) 22%); } } .search-key-body code { font-size: 0.88em; } .search-key-reindex { margin: 1.85rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--border); font-size: 0.9rem; } .search-key-body p { margin: 0; } @supports selector(:has(*)) { .view-modes:has(.browse-toolbar-key-details[open]) .browse-key-wrap { flex: 1 1 100%; width: 100%; } .view-modes:has(.browse-toolbar-key-details[open]) .browse-toolbar-key-details { min-width: 0; } .view-modes:has(.browse-toolbar-key-details[open]) .search-key-body { max-width: 100%; } } .search-row-dates-actions { align-items: center; } .filter-project-wrap { display: inline-flex; align-items: center; gap: 0.2rem; } .filter-project-wrap select { min-width: 8.5rem; } .btn-inline-field-help { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--accent); line-height: 0; flex-shrink: 0; } .btn-inline-field-help:hover { border-color: var(--accent); } .modal-card-projects-help { max-width: 26rem; } .modal-projects-help-body { padding: 0 1.25rem 1.25rem; font-size: 0.9rem; line-height: 1.55; } .modal-projects-help-body pre { margin: 0.5rem 0 0.75rem; font-size: 0.78rem; padding: 0.55rem 0.65rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .modal-projects-help-details { margin-top: 1rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--accent) 6%, transparent); } .modal-projects-help-details summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent); } .modal-projects-help-details[open] summary { margin-bottom: 0.5rem; } .import-modal-lead { margin-bottom: 0.75rem; line-height: 1.45; max-width: 40rem; } .import-modal-help { margin: 0.75rem 0 0.65rem 0; } .import-modal-help .small { line-height: 1.5; margin: 0 0 0.5rem; } .import-modal-help .small:last-of-type { margin-bottom: 0; } .create-msg.warn { color: #fbbf24; } [data-theme="light"] .create-msg.warn { color: #b45309; } .detail-project-hint.warn { color: #fbbf24; } [data-theme="light"] .detail-project-hint.warn { color: #b45309; } input[readonly]#detail-edit-project, input[readonly]#full-project { opacity: 0.92; cursor: default; } /* Vault access: save is easy to miss after Apply — keep a visible outline at rest */ .btn-vault-access-save-emphasis { border: 2px solid var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .btn-vault-access-save-emphasis:hover { filter: brightness(1.06); } .browse-toolbar { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 0.75rem; } .view-modes { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .toolbar-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-right: 0.25rem; } .view-tab { padding: 0.35rem 0.85rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.875rem; font-weight: 600; } .view-tab.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* In .view-modes: Quick + chevron sit on the Browse row after the key; children join parent flex via contents */ .filter-chips { display: contents; } .filter-chips-header { display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; flex-shrink: 0; } .filter-chips-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.4rem; margin: 0; border: none; border-radius: 6px; background: transparent; color: var(--accent); cursor: pointer; line-height: 1; } .filter-chips-toggle:hover { background: var(--accent-soft); color: var(--accent); } .filter-chips-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .filter-chips-toggle svg { display: block; transition: transform 0.2s ease; } .filter-chips.is-expanded .filter-chips-toggle svg { transform: rotate(90deg); } .filter-chips-panel { display: none; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .filter-chips.is-expanded .filter-chips-panel { display: flex; flex-basis: 100%; width: 100%; } .filter-chips .chip-btn { cursor: pointer; font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background: var(--accent-soft); color: var(--accent); font-weight: 500; } .filter-chips .chip-btn:hover, .filter-chips .chip-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } /* Phase 12 — blockchain chip tint */ .filter-chips .chip-blockchain { border-color: color-mix(in srgb, #7c6fff 40%, var(--border)); color: color-mix(in srgb, #7c6fff 80%, var(--muted)); } .filter-chips .chip-blockchain:hover, .filter-chips .chip-blockchain.active { border-color: #7c6fff; color: #7c6fff; } .presets-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .presets-row input { padding: 0.35rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); width: 10rem; } .presets-list { display: flex; flex-wrap: wrap; gap: 0.35rem; } .preset-pill { font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--border); color: var(--muted); border: none; cursor: pointer; } .preset-pill:hover { background: var(--accent); color: var(--cta-on-accent); } .tabs { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); } .tabs-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 1rem; width: 100%; } .tabs-buttons { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } .tabs-list-controls { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin-left: auto; } .hub-sort-label { font-size: 0.8rem; color: var(--muted); } .tabs-list-controls select { padding: 0.35rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.875rem; min-width: 11rem; } .proposal-filters-bar { padding: 0.5rem 1.5rem 0.75rem; border-bottom: 1px solid var(--border); } .proposal-filters-bar.hidden { display: none; } .proposal-filters-bar .proposal-list-filters { margin-bottom: 0; padding-bottom: 0; } .tab { padding: 0.5rem 1rem; border: none; background: transparent; color: var(--muted); } .tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); margin-bottom: -1px; } .tab-panel { padding: 1rem 1.5rem; } .notes-view-panel { min-height: 200px; } .list { display: flex; flex-direction: column; gap: 0.5rem; } .list-item { padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; } .list-item:hover { border-color: var(--accent); } .list-item .path, .list-item .row-title { font-family: ui-monospace, monospace; font-size: 0.9rem; color: var(--accent); } .list-item .row-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; } .chip { font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 4px; display: inline-block; box-sizing: border-box; } .chip-project { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); } .chip-tag { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); } .list-item .status { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; } .activity-item.status-approved .row-title { color: #22c55e; } .activity-item.status-discarded .row-title { color: var(--muted); } .activity-item.status-proposed .row-title { color: var(--accent); } .total { margin-top: 0.75rem; } .empty-state { padding: 2rem; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; } .empty-state a { color: var(--accent); cursor: pointer; } .btn-link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: inherit; } .btn-link:hover { color: color-mix(in srgb, var(--accent) 58%, white); } /* Login first screen (Phase 11.1) */ .login-first-screen { margin: 0 auto; } .login-hero { margin-bottom: 1rem; } .login-title { font-size: 1.75rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text); letter-spacing: -0.02em; } .login-title-main-only { font-size: clamp(1.5rem, 4vw, 1.85rem); font-weight: 600; margin: 0 0 0.35rem; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; } .login-title-equation { font-size: clamp(1.35rem, 4vw, 1.85rem); line-height: 1.35; max-width: 20em; margin-left: auto; margin-right: auto; } .login-title-equation .login-title-main { display: block; font-size: 1.15em; } .login-title-equation .login-title-eq { font-weight: 500; color: var(--muted); font-size: 0.85em; } .login-tagline { font-size: 1.1rem; color: var(--text); margin: 0 0 0.25rem; font-weight: 500; } .login-tagline-sub { margin: 0 0 0.5rem; font-size: 1rem; color: var(--muted); } .login-intent { font-size: 1rem; color: var(--muted); margin: 0; line-height: 1.5; max-width: 32em; } .login-two-paths { margin: 0.75rem 0 0.5rem; padding: 0.65rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); } .login-two-paths-title { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text); } .login-two-paths-list { margin: 0; padding-left: 1.15rem; color: var(--muted); font-size: 0.85rem; line-height: 1.5; } .login-two-paths-list li { margin-bottom: 0.35rem; } .login-two-paths-list li:last-child { margin-bottom: 0; } .login-two-paths-list code { font-size: 0.8em; background: var(--bg); padding: 0.1rem 0.3rem; border-radius: 4px; } .login-two-paths-list a.btn-link { color: var(--accent); text-decoration: underline; } .login-cta-block { margin-top: 0.35rem; } .login-cta-label { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.95rem; } #app.login-screen .hub-header .btn-provider { padding: 0.6rem 1.25rem; font-size: 1rem; font-weight: 600; } .login-how-to-wrap { margin-top: 1rem; } .login-invite-banner { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 500; } /* Self-hosted: API base points at hosted gateway (localStorage hub_api_url or ?api=) */ .hub-api-footgun-banner { margin: 0; padding: 0.65rem 1rem; background: color-mix(in srgb, #d97706 24%, transparent); color: var(--text); border-bottom: 1px solid var(--border); font-size: 0.9rem; line-height: 1.45; } .hub-api-footgun-banner code { font-size: 0.85em; word-break: break-all; } .hub-api-footgun-banner p { margin: 0.35rem 0; } .hub-api-footgun-banner p:first-child { margin-top: 0; } .hub-api-footgun-banner p:last-child { margin-bottom: 0; } .invite-link-block { margin-top: 0.75rem; } .invite-link-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.35rem; } .invite-link-input { flex: 1; padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.9rem; } .invite-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .btn-revoke-invite.small { font-size: 0.8rem; padding: 0.3rem 0.6rem; } .hosted-note { margin-top: 0.75rem; } /* Hub login ecosystem graphic (folder center, rings, connection icons) */ .hub-ecosystem { margin: 1.25rem auto 0; max-width: 320px; } .hub-ecosystem-rings { position: relative; width: 320px; height: 320px; margin: 0 auto; } .hub-ecosystem-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hub-ring { transition: stroke 0.2s ease; } .hub-ecosystem-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; z-index: 2; padding: 1.25rem; min-width: 100px; min-height: 90px; box-sizing: border-box; } .hub-ecosystem-core-icon { font-size: 2.75rem; line-height: 1; filter: grayscale(0.15); } .hub-ecosystem-core-label { color: var(--accent); font-weight: 600; font-size: 0.95rem; } .hub-ecosystem-icon { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; transform-origin: center center; z-index: 1; opacity: 0.9; } /* Inner ring (8 icons, r=90px — clear gap from center folder + label) */ .hub-ecosystem-icon-1 { transform: rotate(0deg) translate(0, -90px); } .hub-ecosystem-icon-2 { transform: rotate(45deg) translate(0, -90px); } .hub-ecosystem-icon-3 { transform: rotate(90deg) translate(0, -90px); } .hub-ecosystem-icon-4 { transform: rotate(135deg) translate(0, -90px); } .hub-ecosystem-icon-5 { transform: rotate(180deg) translate(0, -90px); } .hub-ecosystem-icon-6 { transform: rotate(225deg) translate(0, -90px); } .hub-ecosystem-icon-7 { transform: rotate(270deg) translate(0, -90px); } .hub-ecosystem-icon-8 { transform: rotate(315deg) translate(0, -90px); } /* Outer ring (12 icons, r=135px) */ .hub-ecosystem-icon-9 { transform: rotate(0deg) translate(0, -135px); } .hub-ecosystem-icon-10 { transform: rotate(30deg) translate(0, -135px); } .hub-ecosystem-icon-11 { transform: rotate(60deg) translate(0, -135px); } .hub-ecosystem-icon-12 { transform: rotate(90deg) translate(0, -135px); } .hub-ecosystem-icon-13 { transform: rotate(120deg) translate(0, -135px); } .hub-ecosystem-icon-14 { transform: rotate(150deg) translate(0, -135px); } .hub-ecosystem-icon-15 { transform: rotate(180deg) translate(0, -135px); } .hub-ecosystem-icon-16 { transform: rotate(210deg) translate(0, -135px); } .hub-ecosystem-icon-17 { transform: rotate(240deg) translate(0, -135px); } .hub-ecosystem-icon-18 { transform: rotate(270deg) translate(0, -135px); } .hub-ecosystem-icon-19 { transform: rotate(300deg) translate(0, -135px); } .hub-ecosystem-icon-20 { transform: rotate(330deg) translate(0, -135px); } /* Calendar */ .calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .calendar-nav h3 { margin: 0; font-size: 1.1rem; } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 0.25rem; font-size: 0.7rem; color: var(--muted); text-align: center; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 560px; } .cal-cell { aspect-ratio: 1; min-height: 3rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0.25rem; cursor: pointer; font-size: 0.8rem; } .cal-cell:hover { border-color: var(--accent); } .cal-cell.out { opacity: 0.25; cursor: default; } .cal-cell.today { outline: 1px solid var(--accent); } .cal-cell .cal-day-num { font-weight: 600; } .cal-cell .cal-count { font-size: 0.65rem; color: var(--accent); margin-top: 0.15rem; } .calendar-day-list { margin-top: 1rem; } .calendar-day-list h4 { margin: 0.5rem 0 1rem; } /* Dashboard / charts */ .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .dash-card { padding: 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); } .dash-card .dash-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); } .dash-card .dash-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; } .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 700px) { .chart-row { grid-template-columns: 1fr; } } .chart-box { padding: 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); min-height: 220px; } .chart-wide { margin-bottom: 1rem; min-height: 240px; } .dashboard-footnote { font-size: 0.8rem; margin-top: 0.5rem; } /* Meaning-search index may lag vault edits until user runs Re-index */ .hub-index-stale-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 1rem; margin-bottom: 0.75rem; padding: 0.55rem 0.85rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft, rgba(137, 207, 240, 0.1)); font-size: 0.88rem; line-height: 1.35; } .hub-index-stale-banner.hidden { display: none; } .hub-index-stale-banner-text { flex: 1 1 12rem; min-width: 0; } .hub-index-stale-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; flex-shrink: 0; } .hub-index-stale-banner .btn-small { padding: 0.3rem 0.65rem; font-size: 0.82rem; } .detail-panel { position: fixed; top: 0; right: 0; width: min(420px, 100vw); height: 100vh; max-height: 100dvh; background: var(--surface); border-left: 1px solid var(--border); overflow: hidden; z-index: 10; display: flex; flex-direction: column; box-sizing: border-box; } .detail-resize-handle { position: absolute; top: 0; left: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 11; } .detail-resize-handle:hover, .detail-resize-handle.dragging { background: color-mix(in srgb, var(--accent) 42%, transparent); opacity: 0.45; } .list-item { position: relative; } .list-item-delete { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); background: none; border: none; color: var(--text-muted, #888); font-size: 0.75rem; line-height: 1; padding: 0.25rem 0.35rem; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; } .list-item:hover .list-item-delete { opacity: 0.6; } .list-item-delete:hover { opacity: 1 !important; color: var(--danger, #f66); } .detail-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--border); } .detail-header h2 { margin: 0; font-size: 1rem; word-break: break-all; flex: 1; } .detail-header-actions { display: flex; gap: 0.35rem; flex-shrink: 0; align-items: center; } .detail-header-actions button { padding: 0.35rem 0.6rem; font-size: 0.8rem; } /* Note path explainer (hover / focus for title + aria-label) */ .detail-header-info { padding: 0.2rem; min-width: 1.75rem; min-height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--muted); cursor: help; flex-shrink: 0; line-height: 0; } .detail-header-info:hover, .detail-header-info:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); outline: none; } .detail-header-info svg { display: block; } /* Note read body + optional copy control */ .detail-body-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } .detail-copy-body-btn { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2; padding: 0.35rem; border-radius: 6px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, var(--bg)); color: var(--muted); cursor: pointer; line-height: 0; } .detail-copy-body-btn:hover, .detail-copy-body-btn:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); outline: none; } .detail-copy-body-btn.hidden { display: none; } .duplicate-source-banner { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--accent-soft, rgba(137, 207, 240, 0.08)); } .duplicate-source-banner-lede { margin: 0 0 0.65rem; } .duplicate-delete-label { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; margin: 0; } .duplicate-delete-hint { margin: 0.4rem 0 0; font-size: 0.8rem; } #detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; white-space: pre-wrap; font-size: 0.9rem; } /* Rendered markdown note body */ #detail-body.note-rendered-body { white-space: normal; line-height: 1.65; padding-top: 2.35rem; } #detail-body.note-rendered-body h1, #detail-body.note-rendered-body h2, #detail-body.note-rendered-body h3, #detail-body.note-rendered-body h4 { margin: 1.1rem 0 0.4rem; font-weight: 700; line-height: 1.3; } #detail-body.note-rendered-body h1 { font-size: 1.25rem; } #detail-body.note-rendered-body h2 { font-size: 1.1rem; } #detail-body.note-rendered-body h3 { font-size: 1rem; } #detail-body.note-rendered-body p { margin: 0.6rem 0; } #detail-body.note-rendered-body ul, #detail-body.note-rendered-body ol { padding-left: 1.4rem; margin: 0.5rem 0; } #detail-body.note-rendered-body li { margin: 0.25rem 0; } #detail-body.note-rendered-body a { color: var(--accent, #6c8ebf); text-decoration: underline; } #detail-body.note-rendered-body a:hover { opacity: 0.8; } #detail-body.note-rendered-body img { max-width: 100%; border-radius: 6px; margin: 0.5rem 0; display: block; } #detail-body.note-rendered-body img[src=""],[alt=""] { display: none; } #detail-body.note-rendered-body code { font-family: ui-monospace, monospace; font-size: 0.85em; background: var(--border); padding: 0.1em 0.35em; border-radius: 3px; } #detail-body.note-rendered-body pre { background: var(--border); border-radius: 6px; padding: 0.75rem 1rem; overflow-x: auto; margin: 0.75rem 0; } #detail-body.note-rendered-body pre code { background: none; padding: 0; font-size: 0.82em; } #detail-body.note-rendered-body blockquote { border-left: 3px solid var(--accent, #6c8ebf); margin: 0.5rem 0; padding: 0.25rem 0.75rem; opacity: 0.8; } #detail-body.note-rendered-body hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } #detail-body.note-rendered-body table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; font-size: 0.88em; } #detail-body.note-rendered-body th, #detail-body.note-rendered-body td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; } #detail-body.note-rendered-body th { background: var(--border); font-weight: 600; } /* Metadata block */ .note-meta-block { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 0.82rem; } .note-meta-block summary { cursor: pointer; color: var(--muted, #888); font-size: 0.8rem; user-select: none; padding: 0.2rem 0; } .note-meta-block summary:hover { opacity: 0.75; } .note-meta-pre { margin-top: 0.5rem; background: var(--border); border-radius: 5px; padding: 0.6rem 0.8rem; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 0.8rem; white-space: pre; } .note-meta-hint { margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted, #888); } .note-body-fallback { white-space: pre-wrap; font-size: 0.9rem; } /* Edit form lives in #detail-body which defaults to pre-wrap for read view — override for layout. */ #detail-body.detail-edit-container { white-space: normal; } .detail-edit-container { display: flex; flex-direction: column; gap: 0.75rem; } .detail-edit-container label { font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 0.25rem; } .detail-edit-body, .detail-edit-fm { width: 100%; min-height: 8rem; padding: 0.5rem; font-family: inherit; font-size: 0.9rem; resize: vertical; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); } .detail-edit-fm { min-height: 6rem; font-family: ui-monospace, monospace; } /* Body editor wrapper: no flex-grow; flex-shrink 0 so the block cannot collapse to zero height. Default textarea size uses CSS (height auto); JS only sets height after user drags grip. */ #detail-body.detail-edit-container #detail-edit-body-wrap { flex: 0 0 auto; align-self: stretch; min-width: 0; display: flex; flex-direction: column; } #detail-body.detail-edit-container #detail-edit-body-wrap > textarea.detail-edit-body { width: 100%; min-height: 12rem; height: auto; max-height: min(52vh, 30rem); flex: 0 0 auto; resize: none; overflow: auto; box-sizing: border-box; } #detail-body.detail-edit-container #detail-edit-body-wrap > #media-toolbar { flex: 0 0 auto; } .detail-edit-body-resize-handle { flex: 0 0 auto; height: 10px; margin: 0; border-radius: 0 0 6px 6px; cursor: ns-resize; background: color-mix(in srgb, var(--border) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-top: none; box-sizing: border-box; } .detail-edit-body-resize-handle:hover { background: color-mix(in srgb, var(--accent) 28%, var(--border) 72%); } .detail-actions { flex-shrink: 0; padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .detail-actions button { flex: 1; min-width: 6rem; } .section-source-panel { flex: 1 0 100%; max-height: 32vh; overflow: auto; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, var(--bg)); } .section-source-header h3 { margin: 0 0 0.15rem; font-size: 0.95rem; } .section-source-header p, .section-source-state { margin: 0; } .section-source-panel-loading, .section-source-panel-empty, .section-source-panel-error { color: var(--muted); } .section-source-panel-error { border-color: color-mix(in srgb, #ef4444 55%, var(--border)); } .section-source-truncated { margin-top: 0.5rem; color: var(--accent); } .section-source-list { margin: 0.65rem 0 0; padding-left: 1.25rem; } .section-source-item { margin: 0.5rem 0; padding-left: 0.25rem; } .section-source-level-3, .section-source-level-4, .section-source-level-5, .section-source-level-6 { margin-left: 0.75rem; } .section-source-heading { display: flex; align-items: baseline; gap: 0.45rem; margin: 0; font-weight: 650; line-height: 1.35; } .section-source-level-label { flex: 0 0 auto; padding: 0.05rem 0.35rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.72rem; line-height: 1.2; } .section-source-heading-text { min-width: 0; overflow-wrap: anywhere; } .section-source-detail, .section-source-path, .section-source-children, .section-source-debug { margin: 0.1rem 0 0; word-break: break-word; } .section-source-debug summary { cursor: pointer; width: fit-content; } .section-source-debug-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 0.5rem; margin: 0.2rem 0 0; } .section-source-debug-list dt { font-weight: 650; } .section-source-debug-list dd { margin: 0; overflow-wrap: anywhere; } .detail-footer { flex-shrink: 0; position: relative; z-index: 12; padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--border); background: var(--surface); } .detail-footer-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .detail-footer-hint { flex: 1; min-width: 10rem; margin: 0; line-height: 1.4; } .detail-close-bottom { flex: 0 0 auto; box-sizing: border-box; min-width: 5rem; } .detail-panel.detail-panel-proposal-wide { width: min(560px, 100vw); } .proposal-list-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; margin-bottom: 0.75rem; padding: 0.5rem 0; } .proposal-filter-label { font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.2rem; } .proposal-filter-label input { min-width: 8rem; padding: 0.25rem 0.4rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); } #detail-body.detail-body-proposal { white-space: normal; } .proposal-meta-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; } .proposal-chip { font-size: 0.7rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--border); color: var(--text); } .proposal-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.75rem 0; } @media (max-width: 640px) { .proposal-diff-grid { grid-template-columns: 1fr; } } .proposal-diff-grid h4 { margin: 0 0 0.35rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .proposal-pre { margin: 0; max-height: 14rem; overflow: auto; font-size: 0.75rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); white-space: pre-wrap; word-break: break-word; } .proposal-md-heading { display: block; margin: 0.75rem 0 0.35rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .proposal-md { font-size: 0.9rem; line-height: 1.45; } .proposal-md h1, .proposal-md h2, .proposal-md h3, .proposal-md h4, .proposal-md h5, .proposal-md h6 { font-size: 1rem; font-weight: 600; margin: 0.65rem 0 0.25rem; line-height: 1.3; } .proposal-md pre { overflow: auto; max-height: 10rem; } .proposal-assistant { margin-top: 1rem; padding: 0.75rem; border-radius: 8px; border: 1px dashed var(--border); font-size: 0.85rem; } .proposal-suggested-fm { margin-top: 1rem; padding: 0.75rem; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--border, #444) 70%, transparent); font-size: 0.85rem; } .proposal-suggested-fm-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 0.35rem; } .proposal-suggested-fm-table th { text-align: left; vertical-align: top; padding: 0.25rem 0.5rem 0.25rem 0; width: 38%; color: var(--muted); font-weight: 600; } .proposal-suggested-fm-table td { padding: 0.25rem 0; word-break: break-word; } .proposal-eval, .proposal-eval-waiver { margin-top: 1rem; padding: 0.75rem 0.85rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent); font-size: 0.85rem; } .proposal-eval-summary { margin: 0.35rem 0 0.65rem; padding: 0.5rem 0.6rem; border-radius: 6px; background: color-mix(in srgb, var(--border, #444) 12%, transparent); } .proposal-eval-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; font-size: 0.8rem; } .proposal-eval-field select, .proposal-eval-field input[type='text'], .proposal-eval-field textarea { font: inherit; padding: 0.35rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .proposal-eval-checklist { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.35rem 0 0.5rem; } .proposal-eval-check { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.8rem; line-height: 1.35; } .proposal-filter-checkbox { display: flex; align-items: center; gap: 0.35rem; } .proposal-filter-checkbox input { margin: 0; } /* Modal */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* Stacked above Settings / other modals when opened from Integrations tiles */ #modal-integ-guide { z-index: 110; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); } .modal-card { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .modal-card-narrow { max-width: 420px; } .modal-card-settings { max-width: 820px; width: 92%; height: 82vh; min-height: 420px; max-height: 82vh; overflow: hidden; display: flex; flex-direction: column; } .modal-card-settings .settings-body { overflow: auto; flex: 1; min-height: 0; padding-bottom: 1.5rem; } .settings-panel { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; } .settings-panel.active { display: flex; } .settings-panel .settings-body { flex: 1; min-height: 280px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .modal-header h2 { margin: 0; font-size: 1.1rem; } .modal-header-actions { display: flex; align-items: center; gap: 0.5rem; } .btn-link-small { font-size: 0.875rem; padding: 0.25rem 0.5rem; } .modal-close { border: none; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--muted); padding: 0 0.25rem; } .modal-close:hover { color: var(--text); } .modal-tabs { display: flex; border-bottom: 1px solid var(--border); } .modal-tab { flex: 1; padding: 0.65rem; border: none; background: transparent; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .create-panel { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .create-panel label { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; } /* New note path row: lead word bolder + brighter accent tint (not full --text / white). */ #create-full label .create-label-em, #import-create-path-block label .create-label-em { font-weight: 700; color: color-mix(in srgb, var(--accent) 72%, var(--muted) 28%); } .create-panel input, .create-panel textarea { padding: 0.5rem 0.65rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; } /* Hint key terms: bold only; same color as surrounding .muted copy. */ #create-full .create-hint-em, #create-full .muted strong, #import-create-path-block .create-hint-em, #import-create-path-block .muted strong { font-weight: 700; color: inherit; } .create-msg { min-height: 1.25rem; font-size: 0.85rem; } .create-msg.ok { color: #22c55e; } .create-msg.err { color: #f87171; } /* How to use modal — wide, step-by-step */ .modal-card-how-to-use { width: 92vw; max-width: 960px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; } .how-to-use-body { padding: 1.25rem 1.75rem 1.75rem; overflow: auto; flex: 1; min-height: 0; } .how-to-two-paths-box { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } /* Hosted-first lead in How to use → Setup (Phase 5) */ .how-to-hosted-lead { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); } .how-to-hosted-lead .how-to-two-paths-title { color: var(--text); } .how-to-selfhosted-details > summary { font-weight: 600; } .how-to-two-paths-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--text); } .how-to-two-paths-list { margin: 0 0 0.5rem; padding-left: 1.25rem; font-size: 0.9rem; line-height: 1.6; color: var(--muted); } .how-to-two-paths-list li { margin-bottom: 0.5rem; } .how-to-two-paths-list li:last-child { margin-bottom: 0; } .how-to-two-paths-list code { font-size: 0.85em; background: var(--bg); padding: 0.1rem 0.35rem; border-radius: 4px; } .how-to-intro { margin: 0 0 1rem; font-size: 0.95rem; color: var(--muted); line-height: 1.5; } .how-to-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.5rem; padding: 0.75rem 1rem; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); } .flow-step { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; } .flow-num { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent); color: var(--cta-on-accent); font-weight: 700; font-size: 0.7rem; } .flow-arrow { color: var(--muted); font-size: 0.9rem; } .how-to-step { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .how-to-step:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .how-to-step h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; } .step-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 6px; background: var(--accent); color: var(--cta-on-accent); font-weight: 700; font-size: 0.8rem; } .step-what { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem 0.5rem 1rem; background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 0.85rem; color: var(--muted); line-height: 1.45; } .how-to-step ul { margin: 0 0 0.75rem; padding-left: 1.25rem; } .how-to-step li { margin-bottom: 0.35rem; font-size: 0.9rem; line-height: 1.5; } .how-to-step code { font-size: 0.8rem; background: var(--bg); padding: 0.1rem 0.35rem; border-radius: 4px; } .how-to-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.88rem; } .how-to-table th, .how-to-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--border); text-align: left; vertical-align: top; } .how-to-table th { background: var(--bg); color: var(--muted); font-weight: 600; } .how-to-table code { font-size: 0.8rem; } .example-block { margin-top: 0.5rem; padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } .example-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.35rem; display: block; } .example-block pre { margin: 0; font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; } .diagram-box { margin: 1rem 0; padding: 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } .diagram-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; } .diagram-svg { width: 100%; height: auto; max-height: 90px; } .diagram-svg-network { max-height: 200px; } .diagram-text { fill: var(--text); font-size: 11px; font-family: system-ui, sans-serif; } .diagram-text-small { fill: var(--muted); font-size: 9px; font-family: system-ui, sans-serif; } .how-to-sub { margin: 1rem 0 0.5rem; font-size: 0.95rem; color: var(--accent); } .how-to-step-inline { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); } .how-to-step-inline h5 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; } .how-to-step-inline p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.5; } .how-to-step-inline .how-to-note { margin-top: 0.5rem; } .integration-card { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } .integration-card h5 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--accent); } .integration-card p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.5; } .integration-card .example-block { margin-top: 0.5rem; } .how-to-details { margin-top: 0.75rem; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .how-to-details summary { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.9rem; color: var(--accent); background: var(--surface); list-style: none; } .how-to-details summary:hover { color: var(--text); } .how-to-details summary:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .how-to-details summary::-webkit-details-marker { display: none; } .how-to-details-body { padding: 0.75rem 1rem; border-top: 1px solid var(--border); font-size: 0.9rem; line-height: 1.5; } /* Settings modals: stack technical
under short leads (Integrations, etc.) */ .settings-body .how-to-details { margin-top: 0.65rem; } .how-to-steps-list { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; } .how-to-steps-list li { margin-bottom: 0.5rem; } .settings-list { margin: 0 0 0.75rem; padding-left: 1.25rem; font-size: 0.9rem; line-height: 1.55; } .settings-list li { margin-bottom: 0.5rem; } .how-to-note { margin-top: 1rem; padding: 0.5rem 0.75rem; background: var(--surface); border-radius: 6px; font-size: 0.85rem; line-height: 1.5; } .how-to-code { margin: 0.5rem 0 0.75rem; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-family: monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-all; } /* How to use + Settings + onboarding: explicit link color (UA default blue is too dark on dark theme) */ .modal-card-how-to-use a[href], .modal-card-settings .settings-body a[href], .onboarding-step-body a[href], .onboarding-resume-hint a[href] { color: var(--link-url); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link-url) 50%, transparent); text-underline-offset: 0.12em; } .modal-card-how-to-use a[href]:hover, .modal-card-settings .settings-body a[href]:hover, .onboarding-step-body a[href]:hover, .onboarding-resume-hint a[href]:hover { color: var(--link-url-hover); text-decoration-color: color-mix(in srgb, var(--link-url-hover) 55%, transparent); } .modal-card-how-to-use a[href]:visited, .modal-card-settings .settings-body a[href]:visited, .onboarding-step-body a[href]:visited, .onboarding-resume-hint a[href]:visited { color: var(--link-url); } .settings-body { padding: 1rem 1.25rem; } .settings-body > h3, .settings-body > .settings-h3, .settings-body > h4, .settings-body > .settings-h4 { margin-top: 1.75rem; } .settings-body > h3:first-child, .settings-body > .settings-h3:first-child { margin-top: 0; } .settings-intro { margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); } .settings-row { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; } .settings-label { font-weight: 600; min-width: 6rem; } .settings-value { color: var(--accent); } .settings-value-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .settings-code { font-size: 0.85rem; background: var(--bg); padding: 0.2rem 0.5rem; border-radius: 4px; word-break: break-all; } .btn-copy-small { padding: 0.2rem 0.5rem; font-size: 0.75rem; } .settings-h4 { margin: 1rem 0 0.5rem; font-size: 0.95rem; } .team-roles-list { display: flex; flex-direction: column; gap: 0.25rem; } .team-roles-list .team-role-row { font-family: ui-monospace, monospace; font-size: 0.85rem; } .team-role-row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; justify-content: space-between; } .team-evaluator-approve-inline { display: inline-flex; align-items: center; gap: 0.35rem; font-family: inherit; font-size: 0.8rem; color: var(--muted); margin-left: auto; } .team-evaluator-approve-add { align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.88rem; color: var(--muted); } .settings-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 1rem; } .settings-tab { padding: 0.65rem 1rem; border: none; background: transparent; color: var(--muted); font-size: 0.9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .settings-tab:hover { color: var(--text); } .settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .how-to-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 1.25rem; } .how-to-tab { padding: 0.65rem 1rem; border: none; background: transparent; color: var(--muted); font-size: 0.9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .how-to-tab:hover { color: var(--text); } .how-to-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .how-to-panel { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; } .how-to-panel.active { display: flex; } .settings-steps-list { margin: 0 0 0.75rem; padding-left: 1.25rem; font-size: 0.9rem; line-height: 1.6; color: var(--text); } .settings-steps-list li { margin-bottom: 0.35rem; } .settings-label-hint { font-weight: normal; color: var(--muted); font-size: 0.85em; } .theme-section-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; } .theme-dashboard-colors-link { flex-shrink: 0; } .theme-toggle { display: flex; gap: 0.5rem; flex-wrap: wrap; } .theme-btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.9rem; cursor: pointer; } .theme-btn:hover { border-color: var(--accent); } .theme-btn[aria-pressed="true"] { background: var(--accent); color: var(--cta-on-accent); border-color: var(--accent); } /* Accent: presets (left) + large custom + hex (right) */ .accent-color-layout { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem 1.5rem; margin-top: 0.5rem; width: 100%; } .accent-preset-groups { display: flex; flex-direction: column; gap: 0.85rem; flex: 1 1 16rem; min-width: min(100%, 16rem); max-width: 100%; margin-top: 0; } .accent-preset-group { width: 100%; } .accent-custom-column { flex: 0 1 20rem; width: min(100%, 20rem); min-width: 14rem; display: flex; flex-direction: column; align-self: flex-start; align-items: center; text-align: center; gap: 0.5rem; padding: 0.75rem 1rem 0.9rem; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--surface) 90%, var(--bg)); margin-left: auto; } .accent-custom-heading { margin: 0 0 0.1rem; align-self: center; width: 100%; } /* Inline color UI (@jaames/iro): box + hue, centered in the column */ .accent-iro-root { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 8rem; overflow: hidden; border-radius: 8px; } .accent-iro-root .IroColorPicker, .accent-iro-root [class^='Iro'] { margin-left: auto; margin-right: auto; } .accent-custom-hex-row { margin: 0.1rem 0 0; text-align: center; width: 100%; } .accent-custom-hex { font-size: 0.88rem; font-family: ui-monospace, 'Cascadia Code', monospace; color: var(--accent); background: var(--bg); padding: 0.2rem 0.45rem; border-radius: 4px; border: 1px solid var(--border); } @media (max-width: 520px) { .accent-custom-column { width: 100%; max-width: 100%; min-width: 0; margin-left: 0; } } .accent-preset-group-label { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .accent-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)); gap: 0.45rem; width: 100%; align-items: start; justify-items: center; } /* Fill set in JS from data-accent (was var(--bg) so swatches looked all black in dark mode) */ .accent-swatch { width: min(100%, 2.75rem); aspect-ratio: 1; height: auto; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .accent-swatch:hover { border-color: var(--text); transform: scale(1.08); } .accent-swatch.active { border-color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px var(--surface), 0 0 0 3px var(--text); } [data-theme="light"] .accent-swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } [data-theme="light"] .accent-swatch.active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--surface), 0 0 0 3px var(--text); } /* Appearance → dashboard color theme cards */ .dashboard-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 0.65rem; margin-top: 0.5rem; width: 100%; } .dashboard-theme-card { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; padding: 0.55rem 0.5rem; border-radius: 10px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .dashboard-theme-card:hover { border-color: var(--muted); transform: translateY(-1px); } .dashboard-theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } /* Night | Day: bg → surface → border → muted for each (matches theme tokens; muted + light half read clearly). */ .dashboard-theme-preview { height: 2.65rem; border-radius: 6px; display: block; width: 100%; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); } .dashboard-theme-name { font-size: 0.78rem; font-weight: 600; line-height: 1.25; } .dashboard-theme-preview--classic { background: linear-gradient( 90deg, #0a192f 0% 12.5%, #0d2138 12.5% 25%, #2a3f5c 25% 37.5%, #89cff0 37.5% 50%, #f5f7fb 50% 62.5%, #ffffff 62.5% 75%, #d8dee9 75% 87.5%, #556070 87.5% 100% ); } .dashboard-theme-preview--ocean { background: linear-gradient( 90deg, #0a0f1a 0% 12.5%, #111b2e 12.5% 25%, #1e3d5c 25% 37.5%, #6b8fb3 37.5% 50%, #eef6ff 50% 62.5%, #ffffff 62.5% 75%, #c7d9ee 75% 87.5%, #4a678a 87.5% 100% ); } .dashboard-theme-preview--forest { background: linear-gradient( 90deg, #0a120f 0% 12.5%, #131f1a 12.5% 25%, #1e3d32 25% 37.5%, #6b9a7f 37.5% 50%, #f0faf4 50% 62.5%, #ffffff 62.5% 75%, #c5e0d4 75% 87.5%, #3d6b52 87.5% 100% ); } .dashboard-theme-preview--sunset { background: linear-gradient( 90deg, #140d0d 0% 12.5%, #1f1412 12.5% 25%, #3d2820 25% 37.5%, #c48b7a 37.5% 50%, #fff8f4 50% 62.5%, #ffffff 62.5% 75%, #f0d4c4 75% 87.5%, #8a5c4a 87.5% 100% ); } .dashboard-theme-preview--lavender { background: linear-gradient( 90deg, #100d14 0% 12.5%, #181222 12.5% 25%, #2d2540 25% 37.5%, #9b8bb8 37.5% 50%, #f8f5ff 50% 62.5%, #ffffff 62.5% 75%, #e0d6f5 75% 87.5%, #6b5a8a 87.5% 100% ); } .dashboard-theme-preview--ember { background: linear-gradient( 90deg, #120a08 0% 12.5%, #1e110c 12.5% 25%, #3d2418 25% 37.5%, #c9856a 37.5% 50%, #fff6f0 50% 62.5%, #ffffff 62.5% 75%, #efd4c8 75% 87.5%, #7a5344 87.5% 100% ); } .dashboard-theme-preview--arctic { background: linear-gradient( 90deg, #0c1014 0% 12.5%, #131a20 12.5% 25%, #243240 25% 37.5%, #7a95ab 37.5% 50%, #f4f8fb 50% 62.5%, #ffffff 62.5% 75%, #d4e1ea 75% 87.5%, #4a5f72 87.5% 100% ); } .dashboard-theme-preview--slate { background: linear-gradient( 90deg, #0c0e12 0% 12.5%, #151922 12.5% 25%, #2a3140 25% 37.5%, #8892a6 37.5% 50%, #f5f6f8 50% 62.5%, #ffffff 62.5% 75%, #dbe0e8 75% 87.5%, #5a6578 87.5% 100% ); } .dashboard-theme-preview--midnight { background: linear-gradient( 90deg, #080a18 0% 12.5%, #101428 12.5% 25%, #1e2448 25% 37.5%, #8b87c4 37.5% 50%, #f4f3ff 50% 62.5%, #ffffff 62.5% 75%, #ddd6f5 75% 87.5%, #5c5288 87.5% 100% ); } .dashboard-theme-preview--sakura { background: linear-gradient( 90deg, #120e11 0% 12.5%, #1a1418 12.5% 25%, #3a2834 25% 37.5%, #c49aaa 37.5% 50%, #fff5f8 50% 62.5%, #ffffff 62.5% 75%, #f5d0de 75% 87.5%, #8a5a6e 87.5% 100% ); } .dashboard-theme-preview--sand { background: linear-gradient( 90deg, #100e0c 0% 12.5%, #1a1714 12.5% 25%, #3a342a 25% 37.5%, #b8a892 37.5% 50%, #faf7f1 50% 62.5%, #ffffff 62.5% 75%, #e8dfd0 75% 87.5%, #6e6558 87.5% 100% ); } .dashboard-theme-preview--mint { background: linear-gradient( 90deg, #0a1211 0% 12.5%, #121d1c 12.5% 25%, #1e3834 25% 37.5%, #6ab5a8 37.5% 50%, #f0faf8 50% 62.5%, #ffffff 62.5% 75%, #cce8e2 75% 87.5%, #3d7268 87.5% 100% ); } .settings-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; } .settings-msg { font-size: 0.9rem; color: var(--muted); } .settings-msg.ok { color: var(--accent); font-weight: 500; } .settings-msg.err { color: #f87171; } .settings-hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; } /* Setup checklist (Guided Setup) */ .setup-checklist { list-style: none; padding: 0; margin: 0.75rem 0 0; } .setup-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .setup-step:last-child { border-bottom: none; } .setup-step-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--muted); } .setup-step.setup-step-done .setup-step-icon { background: var(--accent); border-color: var(--accent); color: var(--cta-on-accent); } .setup-step-label { font-weight: 500; flex-shrink: 0; } .setup-step-hint { margin-left: auto; font-size: 0.8rem; color: var(--muted); min-width: 0; } @media (max-width: 480px) { .setup-step-hint { display: none; } } .settings-h3 { margin: 0 0 0.5rem; font-size: 1rem; } .settings-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } .settings-form label:not(.settings-checkbox-label) { font-size: 0.9rem; font-weight: 500; } .settings-form input[type="text"] { padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .settings-input-inline, .settings-select-inline { padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.9rem; } /* Settings modal: native