/* ============================================================================ * DESIGN TOKENS * ========================================================================= */ /* --- 1. Reference tokens (universal) ----------------------------------- */ :root { color-scheme: light dark; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 16px; --space-8: 20px; --space-9: 24px; --space-10: 32px; --space-11: 48px; --space-12: 64px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-full: 999px; --radius: var(--radius-lg); --z-header: 50; --z-dropdown: 20; --z-backdrop: 99; --z-sidebar: 100; --motion-fast: 0.12s ease; --motion-mid: 0.18s ease; --text-xs: 10.5px; --text-sm: 11.5px; --text-md: 12.5px; --text-base: 13.5px; --text-body: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --radius-control: 8px; --radius-card: 12px; --radius-pill: 999px; --radius-checkbox: 5px; --border-width: 1px; --pad-card-x-base: 14px; --pad-card-y-base: 12px; --pad-row-y-base: 10px; --pad-button-x: 9px; --pad-button-y: 6px; --pad-pill-x: 8px; --pad-pill-y: 2px; --pad-seg-x: 11px; --pad-seg-y: 5px; --gap-card-content-base: 12px; /* Density (Settings → General, kv view.density). One multiplier scales the * card/row spacing tokens; themes override only the *-base values so each * keeps its own rhythm at every density. Chrome (buttons, pills, segs) stays * fixed — density is about content rows, not controls. */ --density: 1; --pad-card-x: calc(var(--pad-card-x-base) * var(--density)); --pad-card-y: calc(var(--pad-card-y-base) * var(--density)); --pad-row-y: calc(var(--pad-row-y-base) * var(--density)); --gap-card-content: calc(var(--gap-card-content-base) * var(--density)); /* Accent / brand voltage. Defaults to ink so the non-Granola themes render * exactly as before; the Granola theme overrides these with olive-oat-green. */ --accent: var(--ink); --accent-hover: var(--ink); --accent-ink: var(--surface); --accent-soft: var(--surface-2); --highlight: transparent; --focus: var(--ink-3); --font-display: var(--font-sans); } /* Density levels — data-density on (default "cozy" needs no rule). */ :root[data-density="comfortable"] { --density: 1.2; } :root[data-density="compact"] { --density: 0.75; } /* Compact also drops the feed's secondary content: the participant pill row * under meeting titles and the task context lines. Both stay available in the * meeting side panel (its own .detail-people / .detail-task-summary classes). */ :root[data-density="compact"] #list .meeting-people, :root[data-density="compact"] #list .task-summary { display: none; } /* --- 2. Theme: GRANOLA (light) — id stays "default" -------------------- */ /* The "oats" palette: warm cream canvas, olive-oat-green CTA voltage, an * oat-yellow highlighter accent, Fraunces serif display + Geist body. */ :root { --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: "SF Mono", "Geist Mono", "Menlo", "Consolas", monospace; --font-feature-settings: normal; --bg: #f7f7f2; --surface: #ffffff; --surface-2: #f1f1ea; --hover-surface: rgba(91, 111, 0, 0.05); --hover-strong: rgba(91, 111, 0, 0.09); --ink: #0e0f0c; --ink-2: #454745; --ink-3: #72726e; --ink-4: #b6b4aa; --line: #e3e3e3; --line-soft: #eaebe5; --radius-checkbox: 999px; --accent: #5b6f00; --accent-hover: #788c15; --accent-ink: #ffffff; --accent-soft: #e5eacd; --highlight: #febe29; --focus: #b2c248; --owner-bg: #e5eacd; --owner-border: rgba(91, 111, 0, 0.20); --owner-text: #4a5a00; --things-bg: #fdf3d6; --things-bg-hover: #f8e8b2; --things-border: rgba(193, 145, 22, 0.30); --things-text: #8a6712; --things-added-text: #5b6f00; --things-added-border: rgba(91, 111, 0, 0.25); --things-added-hover: #eef1dd; --error-bg: #fbeae5; --error-border: #f1c6b8; --error-ink: #bd4a30; --error-code-bg: rgba(255, 255, 255, 0.6); --green: #5b6f00; --amber: #c0851b; --red: #bd4a30; --shadow-sm: 0 1px 2px rgba(14, 15, 12, 0.05); --shadow-md: 0 2px 8px rgba(14, 15, 12, 0.06); --proj-tag-bg: #e5eacd; --proj-tag-border: rgba(91, 111, 0, 0.22); --proj-tag-text: #4a5a00; --internal-tag-bg: #f4e2a6; --internal-tag-border: rgba(160, 120, 20, 0.30); --internal-tag-text: #7a5e0a; } /* --- 2. Theme: GRANOLA (dark) — warm charcoal-olive paper -------------- */ [data-mode="dark"] { --bg: #15160f; --surface: #1e201a; --surface-2: #262820; --hover-surface: rgba(210, 224, 67, 0.06); --hover-strong: rgba(210, 224, 67, 0.11); --ink: #f3f2e9; --ink-2: #c3c4b6; --ink-3: #8f9082; --ink-4: #5d5f52; --line: rgba(243, 242, 233, 0.12); --line-soft: rgba(243, 242, 233, 0.06); --accent: #aebd3a; --accent-hover: #c2d24a; --accent-ink: #1a1c12; --accent-soft: rgba(174, 189, 58, 0.16); --highlight: #febe29; --focus: #b2c248; --owner-bg: rgba(174, 189, 58, 0.16); --owner-border: rgba(174, 189, 58, 0.32); --owner-text: #cdd97a; --things-bg: rgba(214, 160, 30, 0.16); --things-bg-hover: rgba(214, 160, 30, 0.26); --things-border: rgba(214, 160, 30, 0.40); --things-text: #e0b85a; --things-added-text: #b7c84a; --things-added-border: rgba(174, 189, 58, 0.40); --things-added-hover: rgba(174, 189, 58, 0.12); --error-bg: rgba(233, 93, 61, 0.14); --error-border: rgba(233, 93, 61, 0.40); --error-ink: #f0a892; --error-code-bg: rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --proj-tag-bg: rgba(174, 189, 58, 0.16); --proj-tag-border: rgba(174, 189, 58, 0.34); --proj-tag-text: #cdd97a; --internal-tag-bg: rgba(244, 226, 166, 0.14); --internal-tag-border: rgba(244, 226, 166, 0.30); --internal-tag-text: #e6d290; } /* --- 3. Theme: SOLARIZED ----------------------------------------------- */ [data-theme="solarized"] { --font-sans: "IBM Plex Sans", "PlexSans", "Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "PlexMono", "Plex Mono", "SF Mono", "Menlo", monospace; --font-feature-settings: normal; --bg: #fdf6e3; --surface: #fffbf0; --surface-2: #eee8d5; --hover-surface: rgba(181, 137, 0, 0.06); --hover-strong: rgba(181, 137, 0, 0.1); --ink: #073642; --ink-2: #586e75; --ink-3: #93a1a1; --ink-4: #c0b7a0; --line: rgba(7, 54, 66, 0.12); --line-soft: rgba(7, 54, 66, 0.05); --owner-bg: rgba(108, 113, 196, 0.12); --owner-border: rgba(108, 113, 196, 0.30); --owner-text: #5b60b8; --things-bg: rgba(181, 137, 0, 0.12); --things-bg-hover: rgba(181, 137, 0, 0.22); --things-border: rgba(181, 137, 0, 0.30); --things-text: #8b6914; --things-added-text: #6f8200; --things-added-border: rgba(133, 153, 0, 0.30); --things-added-hover: rgba(133, 153, 0, 0.08); --error-bg: rgba(220, 50, 47, 0.08); --error-border: rgba(220, 50, 47, 0.32); --error-ink: #b32a27; --error-code-bg: rgba(255, 251, 240, 0.7); --green: #859900; --amber: #b58900; --red: #dc322f; /* Own accent (Solarized blue) so the olive Granola CTA doesn't leak in. */ --accent: #268bd2; --accent-hover: #1f6fa8; --accent-ink: #fdf6e3; --accent-soft: rgba(38, 139, 210, 0.14); --shadow-sm: 0 1px 2px rgba(7, 54, 66, 0.06); --shadow-md: 0 4px 12px rgba(7, 54, 66, 0.08); --proj-tag-bg: rgba(133, 153, 0, 0.10); --proj-tag-border: rgba(133, 153, 0, 0.28); --proj-tag-text: #6b7a00; --internal-tag-bg: rgba(42, 161, 152, 0.10); --internal-tag-border: rgba(42, 161, 152, 0.28); --internal-tag-text: #2aa198; } [data-theme="solarized"][data-mode="dark"] { --bg: #002b36; --surface: #073642; --surface-2: #0a4150; --hover-surface: rgba(253, 246, 227, 0.04); --hover-strong: rgba(253, 246, 227, 0.07); --ink: #fdf6e3; --ink-2: #93a1a1; --ink-3: #839496; --ink-4: #586e75; --line: rgba(253, 246, 227, 0.10); --line-soft: rgba(253, 246, 227, 0.05); --owner-bg: rgba(108, 113, 196, 0.22); --owner-border: rgba(108, 113, 196, 0.40); --owner-text: #aab0ff; --things-bg: rgba(181, 137, 0, 0.18); --things-bg-hover: rgba(181, 137, 0, 0.28); --things-border: rgba(181, 137, 0, 0.40); --things-text: #d4a73e; --things-added-text: #b3c84d; --things-added-border: rgba(133, 153, 0, 0.40); --things-added-hover: rgba(133, 153, 0, 0.14); --error-bg: rgba(220, 50, 47, 0.14); --error-border: rgba(220, 50, 47, 0.40); --error-ink: #ee756f; --error-code-bg: rgba(0, 43, 54, 0.55); --green: #b3c84d; --amber: #cb930b; --red: #ee756f; --accent: #2aa1d8; --accent-hover: #4cb3e2; --accent-ink: #002b36; --accent-soft: rgba(42, 161, 216, 0.20); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --proj-tag-bg: rgba(133, 153, 0, 0.18); --proj-tag-border: rgba(133, 153, 0, 0.38); --proj-tag-text: #b3c84d; --internal-tag-bg: rgba(42, 161, 152, 0.18); --internal-tag-border: rgba(42, 161, 152, 0.38); --internal-tag-text: #2aa198; } /* --- 4. Theme: CARBON -------------------------------------------------- */ [data-theme="carbon"] { --font-sans: "IBM Plex Sans", "PlexSans", "Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "PlexMono", "Plex Mono", "SF Mono", "Menlo", monospace; --font-feature-settings: normal; --radius-control: 0px; --radius-card: 0px; --radius-pill: 0px; --radius-checkbox: 0px; --pad-card-x-base: 16px; --pad-card-y-base: 14px; --pad-row-y-base: 12px; --pad-button-x: 12px; --pad-button-y: 7px; --pad-pill-x: 8px; --pad-pill-y: 4px; --pad-seg-x: 12px; --pad-seg-y: 6px; --gap-card-content-base: 14px; --bg: #ffffff; --surface: #f4f4f4; --surface-2: #ffffff; --hover-surface: #e8e8e8; --hover-strong: #d8d8d8; --ink: #161616; --ink-2: #525252; --ink-3: #6f6f6f; --ink-4: #a8a8a8; --line: #c6c6c6; --line-soft: #e0e0e0; --owner-bg: #edf5ff; --owner-border: #78a9ff; --owner-text: #0043ce; --things-bg: #fdf6dd; --things-bg-hover: #fcefc4; --things-border: #d2a106; --things-text: #6e5202; --things-added-text: #198038; --things-added-border: #6fdc8c; --things-added-hover: #defbe6; --error-bg: #fff1f1; --error-border: #fcd6d6; --error-ink: #a2191f; --error-code-bg: #ffffff; --green: #198038; --amber: #d2a106; --red: #da1e28; /* Own accent (IBM Carbon interactive blue). */ --accent: #0f62fe; --accent-hover: #0353e9; --accent-ink: #ffffff; --accent-soft: rgba(15, 98, 254, 0.12); --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --proj-tag-bg: #defbe6; --proj-tag-border: #6fdc8c; --proj-tag-text: #0e6027; --internal-tag-bg: #e5f6ff; --internal-tag-border: #82cfff; --internal-tag-text: #003a6d; } [data-theme="carbon"][data-mode="dark"] { --bg: #161616; --surface: #262626; --surface-2: #393939; --hover-surface: #353535; --hover-strong: #4c4c4c; --ink: #f4f4f4; --ink-2: #c6c6c6; --ink-3: #8d8d8d; --ink-4: #6f6f6f; --line: #525252; --line-soft: #393939; --owner-bg: #1c2a5a; --owner-border: #4589ff; --owner-text: #a6c8ff; --things-bg: #3d3000; --things-bg-hover: #5c4800; --things-border: #d2a106; --things-text: #f1c21b; --things-added-text: #6fdc8c; --things-added-border: rgba(111, 220, 140, 0.4); --things-added-hover: #1f3526; --error-bg: #3d1010; --error-border: rgba(218, 30, 40, 0.5); --error-ink: #ffb3b8; --error-code-bg: #262626; --green: #42be65; --amber: #f1c21b; --red: #fa4d56; --accent: #4589ff; --accent-hover: #6ea6ff; --accent-ink: #161616; --accent-soft: rgba(69, 137, 255, 0.18); --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5); --proj-tag-bg: #1f3526; --proj-tag-border: rgba(111, 220, 140, 0.38); --proj-tag-text: #6fdc8c; --internal-tag-bg: #001141; --internal-tag-border: rgba(130, 207, 255, 0.38); --internal-tag-text: #82cfff; } /* --- 5. Theme: MATERIAL 3 ---------------------------------------------- */ [data-theme="material"] { --font-sans: "Roboto Flex", "Roboto", "Roboto Variable", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "Roboto Mono", "SF Mono", "Menlo", monospace; --font-feature-settings: normal; --radius-control: 20px; --radius-card: 16px; --radius-pill: 8px; --radius-checkbox: 2px; --pad-card-x-base: 20px; --pad-card-y-base: 16px; --pad-row-y-base: 14px; --pad-button-x: 16px; --pad-button-y: 10px; --pad-pill-x: 12px; --pad-pill-y: 6px; --pad-seg-x: 14px; --pad-seg-y: 8px; --gap-card-content-base: 16px; --bg: #FEF7FF; --surface: #F3EDF7; --surface-2: #ECE6F0; --hover-surface: rgba(103, 80, 164, 0.08); --hover-strong: rgba(103, 80, 164, 0.12); --ink: #1D1B20; --ink-2: #49454F; --ink-3: #79747E; --ink-4: #CAC4D0; --line: #CAC4D0; --line-soft: #E7E0EC; --owner-bg: #EADDFF; --owner-border: rgba(103, 80, 164, 0.30); --owner-text: #21005D; --things-bg: #FFD8E4; --things-bg-hover: #FFC9DE; --things-border: rgba(125, 82, 96, 0.30); --things-text: #31111D; --things-added-text: #006D3F; --things-added-border: rgba(0, 109, 63, 0.30); --things-added-hover: #CEEFCF; --error-bg: #F9DEDC; --error-border: #F2B8B5; --error-ink: #B3261E; --error-code-bg: #FFFBFE; --green: #006D3F; --amber: #BF6A02; --red: #B3261E; /* Own accent (Material 3 primary / on-primary). */ --accent: #6750A4; --accent-hover: #58438c; --accent-ink: #ffffff; --accent-soft: rgba(103, 80, 164, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --proj-tag-bg: #CEEFCF; --proj-tag-border: rgba(0, 109, 63, 0.28); --proj-tag-text: #006D3F; --internal-tag-bg: #E0F7FA; --internal-tag-border: rgba(0, 131, 143, 0.28); --internal-tag-text: #00838f; } [data-theme="material"][data-mode="dark"] { --bg: #141218; --surface: #211F26; --surface-2: #2B2930; --hover-surface: rgba(208, 188, 255, 0.08); --hover-strong: rgba(208, 188, 255, 0.12); --ink: #E6E0E9; --ink-2: #CAC4D0; --ink-3: #938F99; --ink-4: #49454F; --line: #49454F; --line-soft: #36343B; --owner-bg: #4F378B; --owner-border: rgba(208, 188, 255, 0.40); --owner-text: #EADDFF; --things-bg: #633B48; --things-bg-hover: #7A4859; --things-border: rgba(255, 177, 200, 0.30); --things-text: #FFD8E4; --things-added-text: #6FDBA0; --things-added-border: rgba(111, 219, 160, 0.40); --things-added-hover: #1F3526; --error-bg: #8C1D18; --error-border: rgba(242, 184, 181, 0.40); --error-ink: #F2B8B5; --error-code-bg: #141218; --green: #6FDBA0; --amber: #E2A058; --red: #F2B8B5; --accent: #D0BCFF; --accent-hover: #E0D0FF; --accent-ink: #381E72; --accent-soft: rgba(208, 188, 255, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5); --proj-tag-bg: #1F3526; --proj-tag-border: rgba(111, 219, 160, 0.36); --proj-tag-text: #6FDBA0; --internal-tag-bg: rgba(0, 131, 143, 0.18); --internal-tag-border: rgba(0, 188, 212, 0.34); --internal-tag-text: #4dd0e1; } /* ============================================================================ * GRANOLA THEME — chrome refinements, scoped to [data-theme="default"] so the * other three themes stay pixel-identical. Fraunces serif wordmark + section * heads, the oat-yellow highlighter gesture, and oat-green focus rings. * ========================================================================= */ [data-theme="default"] header.page h1, [data-theme="default"] .auth-box h2, [data-theme="default"] .smodal-pane h2, [data-theme="default"] .gtdlg-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; } [data-theme="default"] .auth-box h2 { font-size: 23px; } /* The brand's hero gesture: a yellow-highlighter strip behind the wordmark. */ [data-theme="default"] .hl { background: linear-gradient(var(--highlight), var(--highlight)) no-repeat; background-size: 100% 0.42em; background-position: 0 0.92em; border-radius: 2px; padding: 0 0.08em; } /* Soft oat-green focus rings on inputs. */ [data-theme="default"] .auth-input:focus, [data-theme="default"] .token-input:focus, [data-theme="default"] .prompt-textarea:focus, [data-theme="default"] .feedback-text:focus { border-color: var(--focus); box-shadow: 0 0 0 2px var(--accent-soft); } [data-theme="default"] .search-wrap:focus-within { border-color: var(--focus); } /* ============================================================================ * GRANOLA THEME — editorial polish to the Design System ("oats"). * Everything below is scoped to [data-theme="default"] so it covers Granola in * both light and dark mode while leaving solarized / carbon / material untouched. * Type scale = Fraunces serif display + Geist body (DS tokens); serif weight * never exceeds 500. Density tokens are redefined here (NOT in :root) so the * roomier spacing reaches only Granola — solarized inherits the base :root. * ========================================================================= */ /* Roomier (but still balanced) density — only for Granola. */ [data-theme="default"] { --pad-card-x-base: 18px; --pad-card-y-base: 14px; --pad-row-y-base: 13px; --gap-card-content-base: 14px; --pad-pill-x: 11px; --pad-pill-y: 3px; --pad-seg-x: 12px; --pad-seg-y: 6px; } /* Editorial type scale. */ [data-theme="default"] header.page h1 { font-size: 34px; line-height: 38px; font-weight: 500; letter-spacing: -0.5px; } [data-theme="default"] .subtitle { font-size: 16px; line-height: 20px; letter-spacing: 0.16px; } [data-theme="default"] .meeting-title { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.3px; } [data-theme="default"] .meeting-meta { font-size: 13px; font-weight: 500; } [data-theme="default"] .task-title { font-size: 16px; line-height: 20px; letter-spacing: 0.16px; } [data-theme="default"] .task-summary { font-size: 14px; line-height: 18px; letter-spacing: 0.14px; } [data-theme="default"] .detail-title { font-size: 34px; line-height: 38px; letter-spacing: -0.5px; } [data-theme="default"] .detail-task-title { font-size: 16px; } /* Pills, chips and actions settle on the DS button/caption size (13px / 500). */ [data-theme="default"] .chip { font-size: 13px; font-weight: 500; letter-spacing: 0.13px; } [data-theme="default"] .pill, [data-theme="default"] .pill.owner, [data-theme="default"] .pill.due { font-size: 13px; letter-spacing: 0.13px; } [data-theme="default"] .found-badge { font-size: 13px; line-height: 16px; font-weight: 500; } /* Search bar → full pill with a touch more padding; status line a hair larger. */ [data-theme="default"] .search-wrap { padding: 8px 14px; border-radius: var(--radius-pill); } [data-theme="default"] .search-wrap input { font-size: 14px; } [data-theme="default"] .status-bar { font-size: 13px; } /* Airier list rhythm. */ [data-theme="default"] #list { gap: 18px; } [data-theme="default"] .title-row { margin-bottom: 18px; } /* Avatars are a Granola-theme flourish; outside it they'd render as a bare letter, so hide them entirely in the other themes and show the assignee name only. */ :root:not([data-theme="default"]) .owner-avatar, :root:not([data-theme="default"]) .avatar { display: none; } /* Assignee avatar — DS yellow circle + serif initial (read-only surfaces only). */ [data-theme="default"] .pill.owner .owner-avatar { width: 16px; height: 16px; border-radius: var(--radius-pill); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 9px; font-weight: 500; background: var(--highlight); color: var(--ink); margin-left: -3px; } /* Detail-panel assignee avatar → brand yellow (overrides the hue-rotated default, including dark mode via the higher-specificity descendant selector). */ [data-theme="default"] .detail-val .avatar { background: var(--highlight); color: var(--ink); font-family: var(--font-display); } /* Owner-kind colours in the oats theme: me = olive CTA, other = oat-yellow highlight, custom = neutral. (Base rules cover the other themes.) */ [data-theme="default"] .pill.owner.other { background: rgba(254, 190, 41, 0.20); border-color: rgba(254, 190, 41, 0.55); color: #5a4a00; } /* "Me" mirrors the soft "other" pill but in the olive CTA hue (with an olive-filled avatar), so it reads as elegant soft-green rather than a solid block. */ [data-theme="default"] .pill.owner.me { background: rgba(91, 111, 0, 0.14); border-color: rgba(91, 111, 0, 0.45); color: #4a5a00; } [data-theme="default"] .pill.owner.me .owner-avatar { background: var(--accent); color: var(--accent-ink); } [data-theme="default"] .pill.owner.custom .owner-avatar { background: var(--surface-2); color: var(--ink-2); } /* Unassigned chip (DS): three greys — a dark "?" avatar (Granola display font), a mid-grey "Unassigned" label, on a light-grey pill. */ [data-theme="default"] .pill.owner.na { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); } [data-theme="default"] .pill.owner.na .owner-avatar-na, [data-theme="default"] .detail-val .avatar.avatar-na { background: var(--ink-4); color: var(--ink-2); font-family: var(--font-display); font-style: normal; font-weight: 500; } [data-mode="dark"][data-theme="default"] .pill.owner.na { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--ink-3); } [data-mode="dark"][data-theme="default"] .pill.owner.na .owner-avatar-na, [data-mode="dark"][data-theme="default"] .detail-val .avatar.avatar-na { background: rgba(255,255,255,0.20); color: var(--ink); } [data-mode="dark"][data-theme="default"] .pill.owner.other { color: #f0d894; } [data-mode="dark"][data-theme="default"] .pill.owner.me { background: rgba(174, 189, 58, 0.16); border-color: rgba(174, 189, 58, 0.40); color: #cdd97a; } /* ============================================================================ * BASE * ========================================================================= */ * { box-sizing: border-box; } /* Explicit `display` on a class would otherwise beat the UA's [hidden] rule * (auth boxes, settings sections, …) — enforce the attribute everywhere. */ [hidden] { display: none !important; } html { touch-action: manipulation; } /* no double-tap zoom on touch devices */ body.scroll-locked { overflow: hidden; } /* freeze page scroll behind modals */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font-sans); font-feature-settings: var(--font-feature-settings); -webkit-font-smoothing: antialiased; /* Stop iOS from auto-inflating text after a landscape→portrait rotation. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; transition: background var(--motion-mid), color var(--motion-mid); } [data-mode="dark"] body { background: var(--bg); min-height: 100vh; } .wrap { max-width: 860px; margin: 0 auto; padding: 20px 20px 80px; } /* ============================================================================ * AUTH GATE * ========================================================================= */ .auth-gate { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; background: var(--bg); z-index: 200; padding: 24px; overflow: auto; } .auth-gate[hidden] { display: none; } .auth-box { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-md); } .auth-box[hidden] { display: none; } .auth-box h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; } .auth-box p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; } .auth-input-row { display: flex; flex-direction: column; gap: 6px; } .auth-input-row label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.01em; } .auth-input { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 9px 11px; outline: none; width: 100%; transition: border-color 0.12s ease, box-shadow 0.12s ease; font-family: var(--font-mono); } .auth-input:focus { border-color: var(--ink-3); box-shadow: 0 0 0 2px var(--line); } .auth-error { font-size: 12px; color: var(--red); display: none; } .auth-error.visible { display: block; } .auth-submit { background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; border-radius: var(--radius-control); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.12s ease; width: 100%; } .auth-submit:hover { opacity: 0.85; } /* ============================================================================ * HEADER * ========================================================================= */ header.page { position: sticky; top: 0; z-index: 50; margin: -20px -20px 0; padding: 20px 20px 12px; background: var(--bg); transition: background 0.18s ease; } header.page::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: linear-gradient(to bottom, var(--bg), transparent); pointer-events: none; z-index: 1; } .title-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; min-height: 32px; } header.page h1 { font-size: 24px; font-weight: 650; margin: 0; letter-spacing: -0.02em; color: var(--ink); } .subtitle { color: var(--ink-3); font-size: 13px; font-weight: 400; flex: 1; } .header-actions { display: flex; gap: 4px; align-items: center; align-self: center; } .header-btn { background: transparent; border: 1px solid var(--line); padding: var(--pad-button-y) var(--pad-button-x); border-radius: var(--radius-control); font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s ease; text-decoration: none; white-space: nowrap; } .header-btn:hover { background: var(--hover-surface); color: var(--ink); border-color: var(--ink-4); } .header-btn.danger:hover { color: var(--red); border-color: rgba(220,38,38,0.3); background: rgba(220, 38, 38, 0.06); } .header-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .header-btn.icon-only { padding: 6px 7px; } .header-btn:disabled { opacity: 0.5; cursor: progress; } .header-btn.spinning svg { animation: spin 0.9s linear infinite; } .header-btn.shake { animation: shake 0.32s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } } .header-btn .chev { width: 9px; height: 9px; margin-left: -1px; opacity: 0.6; flex-shrink: 0; } /* Uniform height across the header action buttons (Sync / activity / settings), * regardless of whether they carry a text label or just an icon. */ .header-actions .header-btn { height: 30px; box-sizing: border-box; line-height: 1; } /* ============================================================================ * DROPDOWNS * ========================================================================= */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 4px; display: flex; flex-direction: column; gap: 1px; z-index: 100; animation: menu-in 0.12s ease; } .dropdown-menu[hidden] { display: none; } @keyframes menu-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } .dropdown-menu button { text-align: left; background: transparent; border: 0; padding: var(--pad-seg-y) var(--pad-seg-x); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dropdown-menu button:hover { background: var(--hover-surface); } .dropdown-menu button .hint { font-size: 10.5px; color: var(--ink-3); font-weight: 400; } .dropdown-menu .sep { height: 1px; background: var(--line-soft); margin: 3px 2px; padding: 0; } .dropdown-menu button.danger { color: var(--red); } .dropdown-menu button.danger:hover { background: rgba(220, 38, 38, 0.08); } .dropdown-menu button.danger .hint { color: var(--red); opacity: 0.7; } /* Full re-sync scope modal + themed alert/confirm/prompt dialogs. * Sits above the settings modal (130/131) and detail panel (132/133) so * dialogs launched from those panes are never trapped behind them. */ .gtdlg-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 24px; } .gtdlg-box { width: 100%; max-width: 440px; background: var(--surface); color: var(--ink); border: var(--border-width) solid var(--line-soft); border-radius: 14px; padding: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); } .gtdlg-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: 4px; } .gtdlg-sub { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: 14px; } .gtdlg-opt { display: block; width: 100%; text-align: left; cursor: pointer; background: var(--surface-2); border: var(--border-width) solid var(--line-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; transition: border-color 0.15s ease, background 0.15s ease; } .gtdlg-opt:hover { border-color: var(--ink-3); background: var(--hover-surface); } .gtdlg-opt.danger:hover { border-color: rgba(220, 38, 38, 0.4); background: rgba(220, 38, 38, 0.06); } .gtdlg-opt-title { display: block; font-size: var(--text-base); font-weight: 600; } .gtdlg-opt.danger .gtdlg-opt-title { color: var(--red); } .gtdlg-opt-sub { display: block; font-size: var(--text-sm); color: var(--ink-3); margin-top: 3px; line-height: 1.4; } .gtdlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } /* Themed alert / confirm / prompt dialogs (appAlert/appConfirm/appPrompt) */ .gtdlg-confirm { max-width: 400px; } .gtdlg-confirm .gtdlg-title { font-size: var(--text-lg); margin-bottom: 0; } .gtdlg-body { font-size: var(--text-body); color: var(--ink-3); line-height: 1.5; margin-top: 6px; } .gtdlg-input { width: 100%; box-sizing: border-box; margin-top: 14px; background: var(--surface-2); color: var(--ink); border: var(--border-width) solid var(--line-soft); border-radius: var(--radius-control); padding: 9px 12px; font: inherit; font-size: var(--text-base); } .gtdlg-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--accent-soft); } .gtdlg-confirm .gtdlg-actions { margin-top: 16px; } .gtdlg-confirm .gtdlg-actions .header-btn { font-size: var(--text-base); padding: 8px 16px; } .gtdlg-actions .header-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .gtdlg-actions .header-btn.primary:hover { opacity: 0.88; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .gtdlg-actions .header-btn.primary.danger { background: var(--red); color: var(--surface); border-color: var(--red); } .gtdlg-actions .header-btn.primary.danger:hover { opacity: 0.88; background: var(--red); border-color: var(--red); color: var(--surface); } /* Subtle entrance — opt-in via .anim so the full re-sync modal stays instant */ .gtdlg-backdrop.anim { opacity: 0; transition: opacity 0.17s ease; } .gtdlg-backdrop.anim.open { opacity: 1; } .gtdlg-backdrop.anim .gtdlg-box { transform: scale(0.97); transition: transform 0.17s cubic-bezier(0.34, 1.4, 0.64, 1); } .gtdlg-backdrop.anim.open .gtdlg-box { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .gtdlg-backdrop.anim, .gtdlg-backdrop.anim .gtdlg-box { transition: none; } } /* ============================================================================ * TOOLBAR * ========================================================================= */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: var(--pad-card-y) var(--pad-card-x); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .seg { display: inline-flex; padding: 2px; gap: 1px; background: var(--surface-2); border-radius: var(--radius-control); border: 1px solid var(--line-soft); } .seg button { background: transparent; border: 0; padding: var(--pad-seg-y) var(--pad-seg-x); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; border-radius: var(--radius-control); transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 4px; } .seg button:hover:not(:disabled):not(.active) { background: var(--hover-surface); color: var(--ink); } .seg button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 0.5px var(--line); } .seg button:disabled { opacity: 0.5; cursor: progress; } .seg button svg { width: 11px; height: 11px; opacity: 0.7; } .search-wrap { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 140px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-control); padding: var(--pad-button-y) var(--pad-button-x); transition: border-color var(--motion-fast), background var(--motion-fast); } .search-wrap:focus-within { border-color: var(--ink-3); background: var(--surface); } .search-wrap > svg { width: 13px; height: 13px; color: var(--ink-3); flex-shrink: 0; } .search-wrap input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font: inherit; font-size: 12.5px; color: var(--ink); padding: 0; } .search-wrap input::placeholder { color: var(--ink-3); } .search-wrap input::-webkit-search-cancel-button { display: none; } .search-clear { background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--motion-fast), color var(--motion-fast); } .search-wrap.has-text .search-clear { opacity: 0.7; pointer-events: auto; } .search-clear:hover { opacity: 1; color: var(--ink); } .search-clear svg { width: 12px; height: 12px; } .filter-chips { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; } /* All three toolbar controls (Archived, assignee filter, sort) are chips, so they share one icon-aware pill shape; the active green is the shared selected state. */ .chip { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--line); color: var(--ink-3); padding: 4px 10px; border-radius: var(--radius-pill); font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all var(--motion-fast); } .chip:hover:not(.active) { background: var(--hover-surface); color: var(--ink-2); border-color: var(--ink-4); } .chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chip svg { width: 13px; height: 13px; opacity: 0.8; flex-shrink: 0; } /* The assignee filter's trailing chevron stays a touch quieter than the lead icon. */ .chip .chip-caret { width: 11px; height: 11px; opacity: 0.55; margin-left: -1px; } .hidden-by-search { display: none !important; } /* Mobile filter toggle: a funnel button on the right of the search bar that collapses/reveals the three filter chips. Desktop never shows it (the chips are always visible there); the mobile media query opts it back in. */ .filter-toggle { display: none; position: relative; } .filter-toggle-dot { display: none; } /* ============================================================================ * STATUS BAR * ========================================================================= */ /* Sits in normal flow just under the (sticky) header so it scrolls away with the feed and is only visible at the top — it slides up behind the sticky header. */ .status-bar { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; padding: 0 4px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-height: 18px; flex-wrap: nowrap; } /* Stay one row: the status verb is fixed-width, the sync detail ellipsizes so a long "Checking for new meetings since…" never wraps and shoves the feed down (which then snapped back when sync finished). */ .status-bar #status { flex: 0 0 auto; white-space: nowrap; } .status-bar .last-sync { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The "Synced X ago" text is the sync trigger (the header button is now the Inbox). An unstyled inline button; on hover-capable devices the label swaps to "Sync now" — suppressed mid-sync (.busy keeps the progress text readable) and when locked (no Granola key). */ .last-sync-btn { display: inline-grid; align-items: center; justify-items: start; grid-template-columns: minmax(0, max-content); flex: 0 1 auto; min-width: 0; background: none; border: 0; padding: 2px 6px; margin: -2px -6px; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-pill); } /* Stack the two labels in one grid cell so the button width is always the wider of the two and NEVER reflows on hover. (With a display-swap the button shrank to "Sync now", the pointer slipped off the old "Synced X ago" width, :hover dropped, it grew back — a flicker loop near the right edge.) visibility:hidden still reserves space, so the track keeps its max width. */ .last-sync-btn > .last-sync, .last-sync-btn > .sync-now-label { grid-area: 1 / 1; } .last-sync-btn .sync-now-label { color: var(--accent); font-size: 11.5px; font-weight: 500; white-space: nowrap; visibility: hidden; } @media (hover: hover) { .last-sync-btn:hover { background: var(--hover-surface); } .last-sync-btn:not(.busy):not(:disabled):hover .last-sync { visibility: hidden; } .last-sync-btn:not(.busy):not(:disabled):hover .sync-now-label { visibility: visible; } } .last-sync-btn:disabled { cursor: progress; } .last-sync-btn:disabled:hover { background: none; } .last-sync-btn.sync-locked { cursor: not-allowed; } .last-sync-btn.shake { animation: shake 0.32s ease-in-out; } .last-sync-btn[hidden] { display: none; } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot.green { background: var(--green); } .dot.amber { background: var(--amber); animation: pulse 1.4s ease-in-out infinite; } .dot.gray { background: var(--ink-4); } .dot.red { background: var(--red); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .last-sync { color: var(--ink-3); font-size: 11.5px; } /* ============================================================================ * MEETING CARDS & TASKS * ========================================================================= */ #list { display: flex; flex-direction: column; gap: calc(14px * var(--density)); margin-top: calc(16px * var(--density)); } .meeting { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; } /* Hover affordances are pointer-only: on touch, iOS applies :hover stickily on tap (a scrolled-from row stayed highlighted) and re-evaluates hover chains while the finger drags — the background/box-shadow transitions then repaint cards mid-scroll and read as scroll lag. */ @media (hover: hover) { .meeting:hover { box-shadow: var(--shadow-md); } } .meeting-head { display: flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; padding: var(--pad-card-y) var(--pad-card-x); background: var(--surface-2); border-bottom: 1px solid var(--line); } /* Keep the right-side cluster (tag, date pill, project button, reprocess * icon, open-arrow) on the header's single first row: .meeting-title uses * flex-basis 0 (not auto), so its hypothetical size going into line-packing * is 0 rather than its full nowrap text width — with basis auto, a long * title's full-text width was what decided the row's contents, shoving the * cluster onto a wrapped second line. With basis 0 the cluster always wins * row one and the title grows into the leftover space, ellipsizing when it * runs out (one line always — a multi-line title made header spacing uneven * between cards). Wrapping is enabled only so the full-width participant row * (.meeting-people, basis 100%) can drop onto its own line below. */ .meeting-head > :not(.meeting-title):not(.meeting-people) { flex-shrink: 0; } /* Participant group under the title in the feed (idea #18) — desktop only. The * row sits on its own line (flex-basis 100%) below the title; the .meeting-head * 2px row-gap spaces it tight against the title to match the meeting sidebar * (.detail-people margin-top). Drop the meeting-pane button's own block margins. */ .meeting-people { flex: 0 0 100%; display: flex; min-width: 0; } .meeting-people .detail-people { margin: 0 0 0 -3px; } .meeting-title { font-size: 14.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.008em; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meeting-meta { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); padding: var(--pad-pill-y) var(--pad-pill-x); border-radius: var(--radius-pill); letter-spacing: -0.005em; } .tag-internal { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--internal-tag-text); background: var(--internal-tag-bg); border: 1px solid var(--internal-tag-border); padding: var(--pad-pill-y) var(--pad-pill-x); border-radius: var(--radius-pill); flex-shrink: 0; } .icon-btn { background: transparent; border: 0; padding: 4px; border-radius: var(--radius-control); cursor: pointer; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s ease; text-decoration: none; min-width: 28px; min-height: 28px; } .icon-btn:hover:not(:disabled) { background: var(--hover-strong); color: var(--ink); } .icon-btn:disabled { opacity: 0.4; cursor: progress; } .icon-btn svg { width: 14px; height: 14px; } .icon-btn.spinning svg { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Locked because no Granola key is connected (not mid-sync): signal "unavailable", not "loading", by overriding the disabled `progress` cursor. Compound selectors keep specificity above the per-element `:disabled` rules above. */ .header-btn.sync-locked:disabled, .icon-btn.sync-locked:disabled, .pe-btn.sync-locked:disabled { cursor: not-allowed; } ul.tasks { list-style: none; padding: 6px 0; margin: 0; } li.task { display: grid; grid-template-columns: 36px 1fr auto; gap: 4px; padding: var(--pad-row-y) var(--pad-card-x); border-top: 1px solid var(--line-soft); transition: opacity 0.2s ease, background 0.12s ease; align-items: start; } li.task:first-child { border-top: 0; } /* Pointer-only (see the .meeting:hover note): sticky iOS tap-hover kept rows grey. */ @media (hover: hover) { li.task:hover { background: var(--surface-2); } } li.task.done { opacity: 0.5; } /* Added tasks stay first-class visible (no dimming) now that adding doesn't archive. */ li.task.deleted { opacity: 0.45; background: var(--hover-surface); } /* Vertical collapse used by the long-press delete (Archived off) for task rows + cards. */ .task.collapsing, .meeting.collapsing { transition: height 0.28s ease, opacity 0.22s ease, padding 0.28s ease, margin 0.28s ease; } @media (prefers-reduced-motion: reduce) { .task.collapsing, .meeting.collapsing { transition: none; } } li.task.deleted .task-title { text-decoration: line-through; text-decoration-color: var(--ink-3); } .checkbox { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0 4px; border: 1.5px solid var(--ink-4); border-radius: var(--radius-checkbox); cursor: pointer; background: var(--surface); position: relative; transition: all 0.12s ease; flex-shrink: 0; } .checkbox:hover { border-color: var(--ink-2); } .checkbox:checked { background: var(--accent); border-color: var(--accent); } .checkbox:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px; border: solid var(--accent-ink); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); } /* Deleted-row check: a white ✕ on a red fill so "deleted" reads at a glance. Clicking it marks the task done + clears the deleted flag (deleted → done). */ .check-deleted { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0 4px; padding: 0; flex-shrink: 0; border: 1.5px solid var(--red); border-radius: var(--radius-checkbox); background: var(--red); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: filter 0.12s ease; } .check-deleted:hover { filter: brightness(1.08); } .check-deleted svg { width: 12px; height: 12px; } .task-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .task-title { font-size: 13.5px; font-weight: 400; color: var(--ink); line-height: 1.42; word-wrap: break-word; letter-spacing: -0.003em; } li.task.done .task-title { text-decoration: line-through; text-decoration-thickness: 1px; } .task-summary { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; word-wrap: break-word; } .task-title[contenteditable], .task-summary[contenteditable] { outline: none; border-radius: 6px; padding: 2px 5px; margin: -2px -5px; cursor: text; transition: background 0.1s ease, box-shadow 0.1s ease; white-space: pre-wrap; word-break: break-word; /* Shrink the hit/edit target to the rendered text only — clicking the empty remainder of the row should not start an edit. */ align-self: flex-start; max-width: 100%; } .task-title[contenteditable]:hover, .task-summary[contenteditable]:hover { background: var(--hover-surface); } .task-title[contenteditable]:focus, .task-summary[contenteditable]:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--line); } /* Gray placeholders are baked into every empty task field so blank fields read as tappable; pointer-events:none lets a click fall through to focus the field, and the placeholder vanishes the moment any text is typed (the field is no longer :empty). */ .task-title[contenteditable]:empty::before { content: 'Title'; color: var(--ink-3); } /* 'Description' shows on every task without one, so it stays extra-faint (--ink-4: lighter in light themes, darker in dark) to read as a whisper. */ .task-summary[contenteditable]:empty::before { content: 'Description'; color: var(--ink-4); } .task-title[contenteditable]:empty::before, .task-summary[contenteditable]:empty::before { pointer-events: none; } .pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line-soft); white-space: nowrap; transition: all 0.1s ease; } .pill.owner { background: var(--owner-bg); border-color: var(--owner-border); color: var(--owner-text); font-weight: 500; } .pill.owner.na { background: var(--surface-2); border-color: var(--line-soft); color: var(--ink-2); font-weight: 400; } /* Three owner kinds: me (soft accent tint), other (themed owner colour), custom (neutral dashed = a typed name not yet in the roster). */ .pill.owner.me { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } .pill.owner.other { background: var(--owner-bg); border-color: var(--owner-border); color: var(--owner-text); } .pill.owner.custom { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); border-style: dashed; } /* The owner pill is a button (opens the assignee dropdown). */ button.pill.owner { font: inherit; cursor: pointer; } button.pill.owner:hover { box-shadow: 0 0 0 2px var(--line); } button.pill.owner:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-3); } /* Right-side per-task action column: a connector "+" (only when configured) and a bin. Both icon cells are vertically centred and revealed on row hover (desktop); hovering a cell fills it with a soft pastel rectangle. On touch they're reached by swiping the row left (see the @media (hover: none) block below). */ .task-actions { grid-column: 3; align-self: stretch; display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.12s ease; } li.task:hover .task-actions, li.task:focus-within .task-actions { opacity: 1; } .task-act { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; border-radius: var(--radius-control); cursor: pointer; color: var(--ink-3); text-decoration: none; transition: background 0.1s ease, color 0.1s ease; } .task-act svg { width: 17px; height: 17px; } .task-act.add:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .task-act.add.added { color: var(--accent); } .task-act.trash:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } /* Put-back (restore) action — sits in the bin's slot on deleted rows, neutral (not destructive): hover tints toward the brand accent. */ .task-act.restore:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } li.task.pending-extract { opacity: 0.6; padding: var(--pad-row-y) var(--pad-card-x); display: flex; align-items: center; gap: 10px; } li.task.pending-extract .pe-label { font-size: 12.5px; color: var(--ink-3); font-style: italic; flex: 1; } li.task.pending-extract .pe-btn { font: inherit; font-size: 11px; color: var(--ink-3); background: transparent; border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.1s ease; min-height: 30px; } li.task.pending-extract .pe-btn:hover:not(:disabled) { background: var(--hover-surface); color: var(--ink); border-color: var(--ink-4); } li.task.pending-extract .pe-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* "Add task" line — a thin, near-invisible row at the bottom of each meeting's task list. Hover/focus highlights it and brings the "+" (aligned with the checkbox column) and label forward; the whole line is the click target. */ li.task.task-add { cursor: pointer; align-items: center; min-height: 0; /* Pull the row down to absorb ul.tasks' 6px bottom padding so the hover highlight reaches the card's bottom edge (no white gap). The card clips it. */ padding-top: 6px; padding-bottom: 12px; margin-bottom: -6px; color: var(--ink-4); transition: background 0.12s ease, color 0.12s ease; } li.task.task-add:focus-visible { background: var(--surface-2); color: var(--ink-2); outline: none; } @media (hover: hover) { li.task.task-add:hover { background: var(--surface-2); color: var(--ink-2); outline: none; } } .task-add-plus { grid-column: 1; justify-self: start; width: 20px; height: 20px; margin: 0 0 0 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-4); opacity: 0.45; transition: opacity 0.12s ease, color 0.12s ease; } li.task.task-add:focus-visible .task-add-plus { opacity: 1; color: var(--accent); } @media (hover: hover) { li.task.task-add:hover .task-add-plus { opacity: 1; color: var(--accent); } } .task-add-plus svg { width: 15px; height: 15px; } .task-add-label { grid-column: 2; font-size: 12.5px; color: var(--ink-4); opacity: 0.55; transition: opacity 0.12s ease, color 0.12s ease; } li.task.task-add:focus-visible .task-add-label { opacity: 1; color: var(--ink-2); } @media (hover: hover) { li.task.task-add:hover .task-add-label { opacity: 1; color: var(--ink-2); } } /* Detail-panel variant — mirrors the feed add-row inside the meeting pane's task list. */ .detail-task.detail-task-add { display: flex; align-items: center; gap: 12px; cursor: pointer; /* Match the task rows' horizontal inset (padding: 12px 14px) so the + lines up with the checkbox column above it. */ padding: 8px 14px; color: var(--ink-4); transition: color 0.12s ease; } .detail-task.detail-task-add:hover, .detail-task.detail-task-add:focus-visible { color: var(--ink-2); outline: none; } .detail-task.detail-task-add .task-add-plus { margin: 0; opacity: 0.5; } .detail-task.detail-task-add:hover .task-add-plus, .detail-task.detail-task-add:focus-visible .task-add-plus { opacity: 1; color: var(--accent); } .detail-task.detail-task-add .task-add-label { font-size: 13px; opacity: 0.7; } .detail-task.detail-task-add:hover .task-add-label { opacity: 1; color: var(--ink-2); } .empty { padding: 28px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-card); color: var(--ink-3); font-size: 13px; background: var(--surface); } .empty strong { color: var(--ink-2); font-weight: 500; display: block; margin-bottom: 4px; } .empty-demo { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); } .error { padding: 14px 16px; border: 1px solid var(--error-border); background: var(--error-bg); color: var(--error-ink); border-radius: var(--radius-card); font-size: 13px; } .error code { background: var(--error-code-bg); padding: 2px 5px; border-radius: var(--radius-control); font-size: 11.5px; word-break: break-all; } /* ============================================================================ * SIDEBARS — LOGS * ========================================================================= */ .logs-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 99; } .logs-backdrop.open { opacity: 1; pointer-events: auto; } .logs-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 95vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 36px rgba(0,0,0,0.10); transform: translateX(100%); transition: transform 0.22s ease; z-index: 100; display: flex; flex-direction: column; } .logs-sidebar.open { transform: translateX(0); } .logs-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .logs-head h2 { margin: 0; font-size: 14px; font-weight: 650; flex: 1; letter-spacing: -0.01em; color: var(--ink); } .logs-list { flex: 1; overflow-y: auto; padding: 6px; } .log-entry { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); } .log-entry:last-child { border-bottom: 0; } .log-time { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 10.5px; white-space: nowrap; align-self: start; padding-top: 2px; overflow: hidden; text-overflow: ellipsis; } .log-body { min-width: 0; } .log-msg { color: var(--ink); line-height: 1.4; font-size: 12.5px; word-break: break-word; } .log-msg .lvl { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .log-msg .lvl.info { background: var(--ink-4); } .log-msg .lvl.ok { background: var(--green); } .log-msg .lvl.warn { background: var(--amber); } .log-msg .lvl.error { background: var(--red); } .log-meta { color: var(--ink-3); font-size: 11px; margin-top: 2px; line-height: 1.35; word-break: break-word; } .logs-empty { padding: 30px 16px; text-align: center; color: var(--ink-3); font-size: 12.5px; } .log-resync-btn { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 11px; color: var(--ink-3); background: transparent; border: 1px solid var(--line); padding: 2px 7px; border-radius: var(--radius-pill); cursor: pointer; margin-top: 5px; transition: all 0.1s ease; } .log-resync-btn:hover:not(:disabled) { background: var(--hover-surface); color: var(--ink); border-color: var(--ink-4); } .log-resync-btn:disabled { opacity: 0.45; cursor: progress; } .log-resync-btn svg { width: 10px; height: 10px; } /* ============================================================================ * DEBUG / LIVE ACTIVITY PANEL * ========================================================================= */ .debug-panel { /* Sits above the desktop "Preview in Granola" launcher (.preview-fab, z-index 132), which shares the bottom-right corner — the live activity panel wins. */ position: fixed; bottom: 16px; right: 16px; z-index: 133; width: min(380px, calc(100vw - 32px)); max-height: min(480px, 55vh); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.14); display: flex; flex-direction: column; animation: menu-in 0.14s ease; } .debug-panel[hidden] { display: none; } .debug-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; flex-shrink: 0; } .debug-title { flex: 1; font-size: 11.5px; font-weight: 650; color: var(--ink-2); letter-spacing: 0.03em; text-transform: uppercase; } .debug-act { background: transparent; border: 1px solid var(--line); color: var(--ink-3); font: inherit; font-size: 10.5px; padding: 2px 7px; border-radius: var(--radius-pill); cursor: pointer; display: flex; align-items: center; gap: 3px; transition: all 0.1s ease; } .debug-act:hover { background: var(--hover-surface); color: var(--ink); border-color: var(--ink-4); } .debug-act.debug-close { padding: 2px 5px; } .debug-act.debug-close svg { width: 11px; height: 11px; } .debug-list { flex: 1; overflow-y: auto; padding: 4px 0; font-family: var(--font-mono); font-size: 10.5px; scroll-behavior: smooth; } .debug-entry { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; padding: 4px 13px; border-bottom: 1px solid var(--line-soft); line-height: 1.35; } .debug-entry:last-child { border-bottom: 0; } .debug-entry .de-time { color: var(--ink-4); white-space: nowrap; align-self: start; padding-top: 1px; } .debug-entry .de-msg { color: var(--ink-2); word-break: break-word; } .debug-entry.de-ok .de-msg { color: var(--green); } .debug-entry.de-warn .de-msg { color: var(--amber); } .debug-entry.de-error .de-msg { color: var(--red); } .debug-empty { padding: 24px 13px; color: var(--ink-4); font-size: 11px; text-align: center; } .header-btn.active { background: var(--hover-strong); } /* ============================================================================ * FEEDBACK — floating launcher + panel (bug reports / ideas / requests) * ========================================================================= */ .feedback-btn { position: fixed; bottom: 16px; left: 16px; z-index: 132; display: inline-flex; align-items: center; gap: 6px; background: var(--accent); border: 1px solid transparent; color: var(--accent-ink); padding: 8px 13px; border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-size: 12.5px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: opacity 0.12s ease; } .feedback-btn:hover { opacity: 0.85; } .feedback-btn[hidden] { display: none; } /* Don't let the floating launchers (z-index 132) sit on top of an open overlay's content — settings, meeting detail, the Granola preview all lock page scroll while open. */ body.scroll-locked .feedback-btn, body.scroll-locked .preview-fab { display: none; } .feedback-btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* Owner-only red "new" count, pinned to the button corner. */ .feedback-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); } .feedback-badge[hidden] { display: none; } /* Owner-only Admin Tools launcher: same pill as Feedback, stacked just above it (bottom-left). Shares .feedback-btn styling; only its offset differs. */ .admin-fab { bottom: 60px; } /* The header Inbox button hosts the same badge — needs its own positioning context. */ #inbox-btn { position: relative; } #inbox-btn[hidden] { display: none; } /* Desktop-only floating "Preview in Granola" launcher, bottom-right. */ .preview-fab { position: fixed; bottom: 16px; right: 16px; z-index: 132; display: inline-flex; align-items: center; gap: 7px; background: var(--accent); border: 1px solid transparent; color: var(--accent-ink); padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: opacity 0.12s ease; } .preview-fab svg { width: 15px; height: 15px; color: var(--accent-ink); } .preview-fab:hover { opacity: 0.85; } .preview-fab[hidden] { display: none; } @media (max-width: 640px) { .preview-fab { display: none; } } /* First-login coach marks for the floating launchers. A light scrim dims/blurs the feed while the launchers themselves are lifted above it (body.fab-coaching → z-index below) so they stay crisp and spotlit; a small callout sits above each — Feedback (bottom-left) and "Preview in Granola" (bottom-right, desktop only) — with a downward tail tying it to its button. Shown once per user per browser (localStorage, never in kv); a click anywhere dismisses and stores the flag (no explicit control — clicking a launcher fires it and dismisses too). */ .fab-coach { position: fixed; inset: 0; z-index: 150; cursor: pointer; } .fab-coach-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 52%, transparent); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: menu-in 0.16s ease; } /* Lift the launchers above the scrim so they read as the highlighted subjects, not part of the dimmed/blurred background. */ body.fab-coaching .feedback-btn, body.fab-coaching .admin-fab, body.fab-coaching .preview-fab { z-index: 160; } .fab-coach-bubble { position: fixed; bottom: 66px; width: min(232px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgba(0,0,0,0.16); padding: 12px 14px; } .fab-coach-bubble.left { left: 16px; } .fab-coach-bubble.right { right: 16px; text-align: right; align-items: flex-end; } .fab-coach-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); } .fab-coach-ico svg { width: 15px; height: 15px; } .fab-coach-copy { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); } .fab-coach-copy strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; } /* Downward tail tying each bubble to its launcher (a rotated square whose two outer edges keep the hairline; its top merges into the bubble body). */ .fab-coach-arrow { position: absolute; bottom: -8px; width: 15px; height: 15px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-left: 0; transform: rotate(45deg); } .fab-coach-bubble.left .fab-coach-arrow { left: 24px; } .fab-coach-bubble.right .fab-coach-arrow { right: 24px; } @media (max-width: 640px) { .fab-coach-bubble { bottom: 74px; } } @media (prefers-reduced-motion: reduce) { .fab-coach-scrim { animation: none; } } /* Granola theme — the callout title uses the Fraunces display face like the rest of the DS chrome. Scoped so Solarized / Carbon / Material keep theirs. */ [data-theme="default"] .fab-coach-copy strong { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.1px; font-size: 14px; } .feedback-panel { position: fixed; bottom: 16px; left: 16px; z-index: 132; width: min(340px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.16); display: flex; flex-direction: column; animation: menu-in 0.14s ease; } .feedback-panel[hidden] { display: none; } .feedback-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; flex-shrink: 0; } .feedback-title { flex: 1; font-size: 11.5px; font-weight: 650; color: var(--ink-2); letter-spacing: 0.03em; text-transform: uppercase; } .feedback-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 10px; } .feedback-seg { display: flex; width: 100%; align-self: stretch; } .feedback-seg button { flex: 1; justify-content: center; } .feedback-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; font: inherit; font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 9px 11px; outline: none; } .feedback-text:focus { border-color: var(--ink-4); } .feedback-attach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .feedback-attach .header-btn { font-size: 12px; } .feedback-attach-hint { font-size: 11px; color: var(--ink-4); } .feedback-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .feedback-thumbs:empty { display: none; } .feedback-thumb { position: relative; width: 56px; height: 56px; border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--line); } .feedback-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .feedback-thumb-rm { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .feedback-thumb-rm:hover { background: rgba(0,0,0,0.8); } .feedback-panel.drag-over { outline: 2px dashed var(--ink-4); outline-offset: -4px; } @media (max-width: 600px) { /* Compact to a round, icon-only launcher bottom-left. */ .feedback-btn { padding: 0; width: 44px; height: 44px; border-radius: 50%; justify-content: center; } .feedback-btn-label { display: none; } .feedback-btn svg { width: 18px; height: 18px; } /* Clear the taller (44px) Feedback circle it stacks above. */ .admin-fab { bottom: 68px; } .feedback-panel { left: 12px; right: 12px; bottom: 12px; width: auto; } } /* ============================================================================ * SIDEBARS — SETTINGS * ========================================================================= */ .settings-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 99; } .settings-backdrop.open { opacity: 1; pointer-events: auto; } .settings-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 96vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 36px rgba(0,0,0,0.10); transform: translateX(100%); transition: transform 0.22s ease; z-index: 100; display: flex; flex-direction: column; } .settings-sidebar.open { transform: translateX(0); } .settings-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-shrink: 0; } .settings-head h2 { margin: 0; font-size: 14px; font-weight: 650; flex: 1; letter-spacing: -0.01em; color: var(--ink); } .settings-body { flex: 1; overflow-y: auto; padding: 18px 16px 32px; display: flex; flex-direction: column; gap: 24px; } .settings-section { display: flex; flex-direction: column; gap: 8px; } .settings-label { font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.09em; text-transform: uppercase; } .settings-hint { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px; line-height: 1.5; } .settings-help-link { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .settings-help-link:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); } .settings-status { display: block; margin-top: 3px; } .settings-checkbox { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; } .settings-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } .theme-seg { display: flex; padding: 4px; gap: 2px; background: var(--surface-2); border-radius: var(--radius-pill); border: 0; align-self: stretch; max-width: 360px; } #model-seg { max-width: 300px; } .theme-seg button { flex: 1; justify-content: center; white-space: nowrap; background: transparent; border: 0; padding: 9px 10px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; border-radius: var(--radius-pill); transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 6px; } .theme-seg button svg { width: 14px; height: 14px; opacity: 0.8; } .theme-seg button:hover:not(.active) { color: var(--ink); } .theme-seg button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.04); } .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .theme-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--radius-card); cursor: pointer; font: inherit; color: var(--ink); text-align: left; transition: all var(--motion-fast); } .theme-card:hover:not(.active) { border-color: var(--ink-4); background: var(--surface); } .theme-card.active { border-color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .theme-swatches { display: flex; gap: 0; height: 54px; border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--line-soft); } .theme-swatch { flex: 1; display: block; } .theme-card-label { font-size: 14px; font-weight: 500; text-align: center; color: var(--ink); } /* Desktop: shrink the theme cards so the General tab fits without scrolling (scrolling is only needed once "Advanced" is expanded). */ @media (min-width: 641px) { .theme-card { padding: 10px; gap: 7px; } .theme-swatches { height: 36px; } .theme-card-label { font-size: 13px; } } .prompt-textarea { width: 100%; min-height: 168px; font: 12.5px/1.55 var(--font-mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 10px 12px; resize: vertical; transition: border-color 0.12s ease, box-shadow 0.12s ease; outline: none; } .prompt-textarea:focus { border-color: var(--ink-3); box-shadow: 0 0 0 2px var(--line); } .settings-divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; } /* AI tab: sub-labels, char counter, language combobox, shorter guidance box */ .settings-sub { font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin: 18px 0 9px; } .settings-count { font-size: 12px; color: var(--ink-4); align-self: center; font-variant-numeric: tabular-nums; } /* Output language: a custom design-system dropdown (trigger button + popover list) replacing the native