/* Pulse — styles Theme tokens live on :root and are flipped by data-theme on . Density and accent come through inline custom props from React state. */ :root { --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Instrument Serif', ui-serif, Georgia, serif; /* Density (overridden inline from JS) */ --row-h: 36px; --row-px: 16px; /* Accent */ --accent: #c97b3f; --accent-fg: #fff; --accent-soft: oklch(from var(--accent) l c h / 0.12); --accent-tint: oklch(from var(--accent) 0.96 0.03 h); } /* --- LIGHT (warm paper) --- */ html[data-theme='paper'] { --bg: #f4f1ea; --bg-elev: #faf8f2; --bg-soft: #ebe7dd; --bg-row-hover: #ece8dd; --bg-row-sel: #e5dfd0; --line: rgba(40, 30, 15, 0.09); --line-strong: rgba(40, 30, 15, 0.16); --text: #1e1b16; --text-mut: rgba(30, 27, 22, 0.62); --text-fade: rgba(30, 27, 22, 0.42); --text-quiet: rgba(30, 27, 22, 0.32); --shadow-panel: 0 24px 60px -20px rgba(40, 30, 15, 0.3), 0 8px 18px -12px rgba(40, 30, 15, 0.18); --type-bug: #c13e2f; --type-feature: #5a6ce0; --type-improvement: #2e8a5a; --type-ux: #b05cc0; --type-performance: #c47a1a; --type-question: #2b7fa8; --type-other: #786e5f; --status-new: #c97b3f; --status-progress: #4d7bc5; --status-accepted: #8579c9; --status-delivered: #6e8f69; --prio-low: rgba(30, 27, 22, 0.28); --prio-medium: rgba(30, 27, 22, 0.55); --prio-high: #c97b3f; --prio-critical: #c13e2f; } /* --- DARK (graphite warm) --- */ html[data-theme='graphite'] { --bg: #16161a; --bg-elev: #1c1d22; --bg-soft: #202126; --bg-row-hover: #1f2025; --bg-row-sel: #262830; --line: rgba(255, 250, 240, 0.07); --line-strong: rgba(255, 250, 240, 0.14); --text: #e9e6df; --text-mut: rgba(233, 230, 223, 0.62); --text-fade: rgba(233, 230, 223, 0.4); --text-quiet: rgba(233, 230, 223, 0.28); --shadow-panel: 0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 18px -12px rgba(0, 0, 0, 0.5); --type-bug: #e76a5c; --type-feature: #8f9df0; --type-improvement: #4db882; --type-ux: #d07be0; --type-performance: #e09a3a; --type-question: #4aa8d0; --type-other: #a99e8a; --status-new: #e0935b; --status-progress: #6e97d9; --status-accepted: #9c90dd; --status-delivered: #8eaf89; --prio-low: rgba(233, 230, 223, 0.25); --prio-medium: rgba(233, 230, 223, 0.55); --prio-high: #e0935b; --prio-critical: #e76a5c; } /* --- INK (near-black) --- */ html[data-theme='ink'] { --bg: #0a0b0e; --bg-elev: #111216; --bg-soft: #15171c; --bg-row-hover: #161820; --bg-row-sel: #1d2029; --line: rgba(255, 255, 255, 0.05); --line-strong: rgba(255, 255, 255, 0.12); --text: #f1efea; --text-mut: rgba(241, 239, 234, 0.6); --text-fade: rgba(241, 239, 234, 0.36); --text-quiet: rgba(241, 239, 234, 0.24); --shadow-panel: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --type-bug: #f37565; --type-feature: #9aa5f7; --type-improvement: #5fcb92; --type-ux: #da8eea; --type-performance: #f0aa4a; --type-question: #5abde0; --type-other: #b0a795; --status-new: #f2a26c; --status-progress: #7ba3e0; --status-accepted: #ada1e8; --status-delivered: #99be93; --prio-low: rgba(241, 239, 234, 0.22); --prio-medium: rgba(241, 239, 234, 0.55); --prio-high: #f2a26c; --prio-critical: #f37565; } /* --- LINEN (clean light) --- */ html[data-theme='linen'] { --bg: #fafaf7; --bg-elev: #ffffff; --bg-soft: #f0efea; --bg-row-hover: #f3f2ec; --bg-row-sel: #ebe9df; --line: rgba(20, 20, 20, 0.08); --line-strong: rgba(20, 20, 20, 0.14); --text: #161512; --text-mut: rgba(22, 21, 18, 0.6); --text-fade: rgba(22, 21, 18, 0.4); --text-quiet: rgba(22, 21, 18, 0.3); --shadow-panel: 0 24px 60px -20px rgba(0, 0, 0, 0.18); --type-bug: #c13e2f; --type-feature: #4f61d2; --type-improvement: #2e8a5a; --type-ux: #9a42aa; --type-performance: #b06e10; --type-question: #1f6e96; --type-other: #786e5f; --status-new: #c97b3f; --status-progress: #4d7bc5; --status-accepted: #7367bd; --status-delivered: #5c8157; --prio-low: rgba(22, 21, 18, 0.26); --prio-medium: rgba(22, 21, 18, 0.52); --prio-high: #c97b3f; --prio-critical: #c13e2f; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans), sans-serif; font-size: 13px; line-height: 1.4; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01' on, 'ss02' on, 'cv11' on; } button, input, textarea, select { font-family: inherit; color: inherit; } /* ── App shell ───────────────────────────────────────────── */ .app { display: grid; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg); } .app[data-sidebar='on'] { grid-template-columns: 232px 1fr; } .app[data-sidebar='off'] { grid-template-columns: 1fr; } /* When detail panel is split mode, add a fixed column */ .app[data-panel='split'][data-detail-open='1'][data-sidebar='on'] { grid-template-columns: 232px 1fr 400px; } .app[data-panel='split'][data-detail-open='1'][data-sidebar='off'] { grid-template-columns: 1fr 400px; } /* Push mode: detail panel takes a column */ .app[data-panel='push'][data-detail-open='1'][data-sidebar='on'] { grid-template-columns: 232px minmax(0, 1fr) 420px; } .app[data-panel='push'][data-detail-open='1'][data-sidebar='off'] { grid-template-columns: minmax(0, 1fr) 420px; } /* Tight viewport: shrink panel + sidebar, finally fall to overlay */ @media (max-width: 1280px) { .app[data-panel='push'][data-detail-open='1'][data-sidebar='on'] { grid-template-columns: 200px minmax(0, 1fr) 380px; } .app[data-panel='split'][data-detail-open='1'][data-sidebar='on'] { grid-template-columns: 200px minmax(0, 1fr) 360px; } } @media (max-width: 1024px) { .app[data-panel='push'][data-detail-open='1'][data-sidebar='on'], .app[data-panel='split'][data-detail-open='1'][data-sidebar='on'] { grid-template-columns: 200px minmax(0, 1fr); } .app[data-panel='push'][data-detail-open='1'][data-sidebar='off'], .app[data-panel='split'][data-detail-open='1'][data-sidebar='off'] { grid-template-columns: minmax(0, 1fr); } .app[data-panel='push'][data-detail-open='1'] .detail, .app[data-panel='split'][data-detail-open='1'] .detail { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 88vw); z-index: 50; box-shadow: var(--shadow-panel); } } /* ── Sidebar ─────────────────────────────────────────────── */ .sidebar { border-right: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .sidebar-brand { display: flex; align-items: center; gap: 8px; padding: 14px 16px 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .sidebar-brand .logo { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); display: grid; place-items: center; color: var(--accent-fg); font-family: var(--font-mono), monospace; font-size: 10px; font-weight: 700; letter-spacing: -0.04em; } .sidebar-brand .ver { margin-left: auto; font-family: var(--font-mono), monospace; font-size: 10px; color: var(--text-quiet); letter-spacing: 0.02em; } .sidebar-section { padding: 14px 12px 6px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-quiet); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 16px; margin: 0 6px; border-radius: 6px; font-size: 13px; color: var(--text-mut); cursor: default; user-select: none; position: relative; height: 28px; } .nav-item:hover { background: var(--bg-row-hover); color: var(--text); } .nav-item[data-active='1'] { background: var(--bg-row-sel); color: var(--text); } .nav-item .nav-ico { width: 14px; height: 14px; display: grid; place-items: center; color: var(--text-fade); flex-shrink: 0; } .nav-item[data-active='1'] .nav-ico { color: var(--accent); } .nav-item .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item .nav-count { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--text-fade); font-variant-numeric: tabular-nums; } .nav-item[data-active='1'] .nav-count { color: var(--text-mut); } .nav-item .nav-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .sidebar-foot { margin-top: auto; padding: 10px 14px; font-size: 10.5px; color: var(--text-quiet); font-family: var(--font-mono), monospace; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } /* ── Main column ─────────────────────────────────────────── */ .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); overflow: hidden; } /* Topbar */ .topbar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 52px; border-bottom: 1px solid var(--line); background: var(--bg); flex-shrink: 0; } .topbar-title { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .topbar-title .sub { font-weight: 400; font-size: 12px; color: var(--text-fade); font-variant-numeric: tabular-nums; white-space: nowrap; } .topbar-spacer { flex: 1; } .topbar-search { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-soft); width: 240px; color: var(--text-mut); font-size: 12.5px; cursor: text; flex-shrink: 0; } .topbar-search:hover { border-color: var(--line-strong); } .topbar-search kbd { margin-left: auto; } .topbar-btn { appearance: none; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text-mut); height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; cursor: default; } .topbar-btn:hover { background: var(--bg-row-hover); color: var(--text); } .topbar-btn .ico { width: 14px; height: 14px; display: grid; place-items: center; } /* Dark/light toggle — animated sun ↔ moon */ .theme-toggle { padding: 0; width: 28px; height: 28px; display: grid; place-items: center; position: relative; overflow: hidden; } .theme-toggle .theme-toggle-thumb { position: relative; display: grid; place-items: center; width: 14px; height: 14px; transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-toggle[data-dark='1'] .theme-toggle-thumb { transform: rotate(-360deg); } .theme-toggle[data-dark='0'] .theme-toggle-thumb { transform: rotate(0deg); } .theme-toggle[data-dark='0'] { color: var(--accent); } .theme-toggle[data-dark='1'] { color: var(--text-mut); } /* Filter bar */ .filters { display: flex; align-items: center; gap: 4px; padding: 8px 12px 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filter-group { display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--bg-soft); border-radius: 7px; border: 1px solid var(--line); } .filter-chip { appearance: none; border: 0; background: transparent; color: var(--text-mut); font-size: 12px; padding: 3px 9px; border-radius: 5px; cursor: default; display: flex; align-items: center; gap: 5px; height: 22px; white-space: nowrap; } .filter-chip:hover { color: var(--text); } .filter-chip[data-on='1'] { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .filter-chip .cnt { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--text-quiet); font-variant-numeric: tabular-nums; margin-left: 2px; } .filter-chip[data-on='1'] .cnt { color: var(--text-mut); } .filter-chip .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .filters-spacer { flex: 1; } .results-meta { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-fade); white-space: nowrap; display: flex; align-items: center; gap: 8px; } .results-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4; } /* ── List ────────────────────────────────────────────────── */ .list-wrap { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); } .list-wrap::-webkit-scrollbar { width: 10px; } .list-wrap::-webkit-scrollbar-track { background: transparent; } .list-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; border: 3px solid transparent; background-clip: content-box; } .list-group-header { display: flex; align-items: center; gap: 10px; padding: 12px 18px 6px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-quiet); } .list-group-header .line { flex: 1; height: 1px; background: var(--line); } .list-group-header .count { font-family: var(--font-mono), monospace; font-size: 10px; color: var(--text-fade); font-variant-numeric: tabular-nums; } /* Row */ .row { display: grid; align-items: center; height: var(--row-h); padding: 0 var(--row-px); gap: 12px; position: relative; cursor: default; border-bottom: 1px solid var(--line); color: var(--text-mut); } /* default layout: [unread][type][id][priority][title...][project][meta][time] */ .row[data-layout='dense'] { grid-template-columns: 14px /* unread */ 16px /* type */ 62px /* id */ 20px /* prio */ 1fr /* title + desc inline */ auto /* project */ auto /* status */ 52px; /* time */ } .row[data-layout='comfort'] { grid-template-columns: 14px 16px 62px 20px 1fr auto auto 52px; height: calc(var(--row-h) + 18px); } .row[data-layout='cards'] { grid-template-columns: 14px 16px 62px 20px 1fr auto auto 52px; height: calc(var(--row-h) + 30px); padding: 8px var(--row-px); } .row:hover { background: var(--bg-row-hover); color: var(--text); } .row[data-selected='1'] { background: var(--bg-row-sel); color: var(--text); } .row[data-selected='1']::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); } .row .unread { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); justify-self: center; } .row[data-unread='0'] .unread { background: transparent; box-shadow: none; } .row .id { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-fade); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .row[data-unread='1'] .id { color: var(--text-mut); } .row .title-cell { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; } .row .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 13px; font-weight: 400; flex: 0 1 auto; min-width: 0; max-width: 380px; } .row[data-unread='1'] .title { font-weight: 600; } .row .preview { color: var(--text-fade); font-size: 12.5px; font-weight: 400; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row[data-unread='1'] .preview { color: var(--text-mut); } /* Two-line title in comfort mode */ .row[data-layout='comfort'] .title-cell, .row[data-layout='cards'] .title-cell { flex-direction: column; align-items: flex-start; gap: 2px; justify-content: center; } .row[data-layout='cards'] .preview { white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } .row .time { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-fade); text-align: right; font-variant-numeric: tabular-nums; } /* Type icon */ .type-ico { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 4px; flex-shrink: 0; } .type-ico[data-type='bug'] { color: var(--type-bug); } .type-ico[data-type='feature'] { color: var(--type-feature); } .type-ico[data-type='improvement'] { color: var(--type-improvement); } .type-ico[data-type='ux'] { color: var(--type-ux); } .type-ico[data-type='performance'] { color: var(--type-performance); } .type-ico[data-type='question'] { color: var(--type-question); } .type-ico[data-type='other'] { color: var(--type-other); } .type-ico.style-pill { width: 18px; height: 14px; font-family: var(--font-mono), monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: var(--bg); text-transform: uppercase; } .type-ico.style-pill[data-type='bug'] { background: var(--type-bug); } .type-ico.style-pill[data-type='feature'] { background: var(--type-feature); } .type-ico.style-pill[data-type='improvement'] { background: var(--type-improvement); } .type-ico.style-pill[data-type='ux'] { background: var(--type-ux); } .type-ico.style-pill[data-type='performance'] { background: var(--type-performance); } .type-ico.style-pill[data-type='question'] { background: var(--type-question); } .type-ico.style-pill[data-type='other'] { background: var(--type-other); } .type-ico.style-dot { width: 8px; height: 8px; } .type-ico.style-dot[data-type='bug'] { background: var(--type-bug); } .type-ico.style-dot[data-type='feature'] { background: var(--type-feature); } .type-ico.style-dot[data-type='improvement'] { background: var(--type-improvement); } .type-ico.style-dot[data-type='ux'] { background: var(--type-ux); } .type-ico.style-dot[data-type='performance'] { background: var(--type-performance); } .type-ico.style-dot[data-type='question'] { background: var(--type-question); } .type-ico.style-dot[data-type='other'] { background: var(--type-other); } /* Priority bars */ .prio-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 12px; width: 14px; } .prio-bars i { flex: 1; background: var(--prio-low); border-radius: 0.5px; } .prio-bars i.on { background: currentColor; } .prio-bars i:nth-child(1) { height: 30%; } .prio-bars i:nth-child(2) { height: 55%; } .prio-bars i:nth-child(3) { height: 80%; } .prio-bars i:nth-child(4) { height: 100%; } .prio-bars[data-prio='low'] { color: var(--prio-low); } .prio-bars[data-prio='medium'] { color: var(--prio-medium); } .prio-bars[data-prio='high'] { color: var(--prio-high); } .prio-bars[data-prio='critical'] { color: var(--prio-critical); } /* Priority dot */ .prio-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .prio-dot[data-prio='low'] { background: var(--prio-low); } .prio-dot[data-prio='medium'] { background: var(--prio-medium); } .prio-dot[data-prio='high'] { background: var(--prio-high); } .prio-dot[data-prio='critical'] { background: var(--prio-critical); box-shadow: 0 0 0 2px color-mix(in oklab, var(--prio-critical) 25%, transparent); } /* Priority text */ .prio-text { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .prio-text[data-prio='low'] { color: var(--prio-low); } .prio-text[data-prio='medium'] { color: var(--prio-medium); } .prio-text[data-prio='high'] { color: var(--prio-high); } .prio-text[data-prio='critical'] { color: var(--prio-critical); } /* Project chip */ .proj-chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px 0 6px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; font-size: 11px; color: var(--text-mut); font-weight: 500; white-space: nowrap; } .proj-chip .sq { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; } .proj-chip.style-flat { background: transparent; border: 0; padding: 0; } /* Status pill */ .status-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 99px; font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--bg-soft); border: 1px solid var(--line); } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .status-pill[data-status='new'] { color: var(--status-new); } .status-pill[data-status='new'] .dot { background: var(--status-new); } .status-pill[data-status='in_progress'] { color: var(--status-progress); } .status-pill[data-status='in_progress'] .dot { background: var(--status-progress); } .status-pill[data-status='accepted'] { color: var(--status-accepted); } .status-pill[data-status='accepted'] .dot { background: var(--status-accepted); } .status-pill[data-status='delivered'] { color: var(--status-delivered); } .status-pill[data-status='delivered'] .dot { background: var(--status-delivered); } /* kbd */ kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; font-family: var(--font-mono), monospace; font-size: 10px; font-weight: 500; background: var(--bg-elev); border: 1px solid var(--line); border-bottom-width: 1.5px; border-radius: 4px; color: var(--text-mut); letter-spacing: 0; line-height: 1; } /* Tooltip */ .tt-wrap { position: relative; } .tt-wrap > .tt { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px); background: var(--text); color: var(--bg); font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.12s; z-index: 100; display: flex; align-items: center; gap: 6px; } .tt-wrap > .tt kbd { background: rgba(255, 255, 255, 0.16); border-color: transparent; color: var(--bg); } html[data-theme='paper'] .tt-wrap > .tt kbd, html[data-theme='linen'] .tt-wrap > .tt kbd { background: rgba(255, 255, 255, 0.18); color: var(--bg); } .tt-wrap:hover > .tt { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.3s; } /* ── Detail panel ────────────────────────────────────────── */ .detail { background: var(--bg-elev); border-left: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .app[data-panel='overlay'] .detail { position: fixed; right: 0; top: 0; bottom: 0; width: 480px; z-index: 50; box-shadow: var(--shadow-panel); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.4, 1); } .app[data-panel='overlay'][data-detail-open='1'] .detail { transform: translateX(0); } .detail-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--bg-elev); } .detail-head .id { font-family: var(--font-mono), monospace; font-size: 11.5px; color: var(--text-mut); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .detail-head .spacer { flex: 1; } .detail-head .icon-btn { appearance: none; border: 0; background: transparent; color: var(--text-fade); width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; cursor: default; } .detail-head .icon-btn:hover { background: var(--bg-row-hover); color: var(--text); } .detail-body { flex: 1; overflow-y: auto; padding: 18px 22px 60px; } .detail-title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.32; color: var(--text); margin: 0 0 14px; text-wrap: balance; } .detail-meta-grid { display: grid; grid-template-columns: 92px 1fr; gap: 7px 16px; margin: 14px 0 22px; align-items: center; } .detail-meta-grid dt { font-size: 11.5px; color: var(--text-fade); font-weight: 400; } .detail-meta-grid dd { margin: 0; font-size: 12.5px; color: var(--text); } .detail-meta-grid dd .pop-trigger { cursor: default; } .detail-section-h { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-quiet); } .detail-section-h .line { flex: 1; height: 1px; background: var(--line); } .detail-desc { font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-wrap; } .url-block { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono), monospace; font-size: 11.5px; color: var(--text-mut); word-break: break-all; } .url-block .copy-btn { margin-left: auto; flex-shrink: 0; font-family: var(--font-sans), sans-serif; font-size: 11px; background: transparent; border: 0; color: var(--text-fade); cursor: default; padding: 2px 6px; border-radius: 4px; } .url-block .copy-btn:hover { background: var(--bg-row-hover); color: var(--text); } .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .meta-card { padding: 8px 10px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; } .meta-card .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-quiet); margin-bottom: 2px; } .meta-card .value { font-family: var(--font-mono), monospace; font-size: 11.5px; color: var(--text); } /* Screenshot */ .screenshot-thumb { position: relative; cursor: zoom-in; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); max-height: 200px; display: flex; align-items: center; justify-content: center; } .screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; max-height: 200px; } .screenshot-expand { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; pointer-events: none; } .screenshot-thumb:hover .screenshot-expand { opacity: 1; } .screenshot-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .screenshot-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; cursor: default; } .screenshot-lightbox-inner img { display: block; max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); } .screenshot-lightbox-close { position: absolute; top: -14px; right: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .screenshot-lightbox-close:hover { background: var(--bg-row-hover); } /* Notes */ .notes-textarea { width: 100%; min-height: 90px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--text); resize: vertical; outline: none; font-family: var(--font-sans), sans-serif; } .notes-textarea:focus { border-color: var(--accent); } .notes-textarea[data-style='mono'] { font-family: var(--font-mono), monospace; font-size: 12px; } .notes-textarea[data-style='serif'] { font-family: var(--font-serif), serif; font-size: 15.5px; line-height: 1.5; } .journal { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .journal-entry { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .journal-entry:last-child { border-bottom: 0; } .journal-entry .ts { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--text-fade); white-space: nowrap; } .journal-entry .body { font-size: 12.5px; line-height: 1.5; color: var(--text); } .journal-add { display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg-elev); } .journal-add input { flex: 1; background: transparent; border: 0; outline: none; font-size: 12.5px; color: var(--text); } .journal-add input::placeholder { color: var(--text-fade); } .journal-add button { appearance: none; background: var(--accent); color: var(--accent-fg); border: 0; height: 24px; padding: 0 10px; border-radius: 5px; font-size: 11.5px; font-weight: 500; cursor: default; } /* Pill control inline */ .inline-control { appearance: none; border: 1px solid var(--line); background: transparent; color: inherit; cursor: default; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 8px; border-radius: 6px; font-size: 12px; font-family: inherit; } .inline-control:hover { background: var(--bg-row-hover); border-color: var(--line-strong); } .inline-control .chev { color: var(--text-quiet); margin-left: 2px; } /* Popover (status/priority menu) */ .popover { position: absolute; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-panel); padding: 4px; z-index: 200; min-width: 180px; animation: pop-in 0.12s cubic-bezier(0.3, 0.7, 0.4, 1); } @keyframes pop-in { from { opacity: 0; transform: translateY(-2px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .popover-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; font-size: 12.5px; color: var(--text); cursor: default; } .popover-item:hover, .popover-item[data-active='1'] { background: var(--bg-row-sel); } .popover-item .pi-key { margin-left: auto; font-family: var(--font-mono), monospace; font-size: 10px; color: var(--text-fade); } .popover-item .pi-check { color: var(--accent); width: 12px; text-align: center; } /* ── Command palette ─────────────────────────────────────── */ .cmdk-backdrop { position: fixed; inset: 0; background: color-mix(in oklab, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1000; display: grid; place-items: start center; padding-top: 120px; animation: fade 0.14s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .cmdk { width: 580px; max-width: 90vw; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-panel); overflow: hidden; animation: cmdk-in 0.14s cubic-bezier(0.3, 0.7, 0.4, 1); } @keyframes cmdk-in { from { transform: translateY(-6px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .cmdk-input { width: 100%; border: 0; outline: 0; padding: 16px 18px; background: transparent; font-size: 16px; color: var(--text); border-bottom: 1px solid var(--line); } .cmdk-input::placeholder { color: var(--text-fade); } .cmdk-list { max-height: 380px; overflow-y: auto; padding: 6px; } .cmdk-group-h { padding: 8px 10px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-quiet); font-weight: 500; } .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: default; color: var(--text); font-size: 13px; } .cmdk-item[data-active='1'] { background: var(--bg-row-sel); } .cmdk-item .cmd-id { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--text-fade); min-width: 56px; } .cmdk-item .cmd-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk-item .cmd-shortcut { display: flex; gap: 4px; } .cmdk-foot { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--bg-soft); font-size: 11px; color: var(--text-fade); } .cmdk-foot .hint { display: flex; align-items: center; gap: 4px; } /* ── Empty / loading ─────────────────────────────────────── */ .empty { display: grid; place-items: center; height: 100%; color: var(--text-fade); text-align: center; padding: 40px; } .empty h3 { font-family: var(--font-serif), serif; font-size: 26px; font-style: italic; margin: 0 0 6px; font-weight: 400; color: var(--text-mut); } .empty p { font-size: 13px; margin: 0; max-width: 320px; } /* Toast */ .toast-stack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 1500; pointer-events: none; } .toast { background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-panel); display: flex; align-items: center; gap: 8px; animation: toast-in 0.18s cubic-bezier(0.3, 0.7, 0.4, 1); } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .toast kbd { background: rgba(255, 255, 255, 0.18); border: 0; color: var(--bg); } /* Tweaks panel hint for first run */ .first-hint { position: fixed; bottom: 24px; right: 24px; padding: 8px 12px; background: var(--bg-elev); color: var(--text-mut); border: 1px solid var(--line); border-radius: 8px; font-size: 11.5px; box-shadow: var(--shadow-panel); display: flex; align-items: center; gap: 8px; z-index: 50; } /* Subtle accent strip variants */ .row[data-strip='1']::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0.5; } .row[data-selected='1'][data-strip='1']::after { opacity: 0; } /* ───────────────────────────────────────────────────────────── Project page ───────────────────────────────────────────────────────────── */ .project-header { padding: 22px 28px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--bg); } .ph-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .ph-utilities { margin-left: auto; display: flex; align-items: center; gap: 6px; } .ph-utilities .ph-search { width: 200px; } .ph-sq { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; } .ph-name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.018em; color: var(--text); } .ph-url { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono), monospace; font-size: 11.5px; color: var(--text-fade); text-decoration: none; padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-soft); } .ph-url:hover { color: var(--text-mut); border-color: var(--line-strong); } .ph-desc { margin: 4px 0 16px; font-size: 13.5px; color: var(--text-mut); max-width: 720px; line-height: 1.5; } .ph-metrics { display: flex; gap: 32px; align-items: stretch; } .ph-metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ph-metric-v { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; } .ph-metric-l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-fade); white-space: nowrap; } .ph-metric-dot { width: 7px; height: 7px; border-radius: 50%; } .ph-metric.ph-metric-quiet { opacity: 0.7; margin-left: auto; align-items: flex-end; text-align: right; } .ph-metric.ph-metric-quiet .ph-metric-l { color: var(--text-quiet); } /* ── Tabs ───────────────────────────────────────────────────── */ .project-tabs { display: flex; gap: 0; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg); flex-shrink: 0; } .project-tab { appearance: none; background: transparent; border: 0; padding: 12px 4px; margin: 0 14px 0 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-fade); cursor: default; display: inline-flex; align-items: center; gap: 7px; position: relative; letter-spacing: -0.005em; } .project-tab:hover { color: var(--text-mut); } .project-tab[data-active='1'] { color: var(--text); } .project-tab[data-active='1']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 1px; } .project-tab-count { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-quiet); font-variant-numeric: tabular-nums; padding: 1px 5px; background: var(--bg-soft); border-radius: 4px; border: 1px solid var(--line); } .project-tab[data-active='1'] .project-tab-count { color: var(--text-mut); background: var(--bg-row-sel); border-color: var(--line-strong); } /* ── Roadmap board ──────────────────────────────────────────── */ .roadmap { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--bg); } .roadmap-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); } .roadmap-col:last-child { border-right: 0; } .roadmap-col-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mut); position: sticky; top: 0; background: var(--bg); z-index: 5; } .roadmap-col-dot { width: 7px; height: 7px; border-radius: 50%; } .roadmap-col-label { flex: 1; } .roadmap-col-count { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-quiet); font-variant-numeric: tabular-nums; font-weight: 500; text-transform: none; letter-spacing: 0; } .roadmap-col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 4px; } .roadmap-col-body::-webkit-scrollbar { width: 8px; } .roadmap-col-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } .roadmap-col-body[data-drop-over='1'] { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 6px; outline: 1.5px dashed var(--accent); outline-offset: -2px; } .roadmap-empty { color: var(--text-quiet); font-size: 12px; padding: 16px 4px; text-align: center; font-family: var(--font-mono), monospace; } .roadmap-item { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-elev); cursor: default; display: flex; flex-direction: column; gap: 4px; position: relative; transition: border-color 0.12s, background 0.12s; } .roadmap-item:hover { border-color: var(--line-strong); background: var(--bg-row-hover); } .roadmap-item[data-selected='1'] { border-color: var(--accent); background: var(--bg-row-sel); } .roadmap-item[data-prio='critical'] { border-left: 2px solid var(--prio-critical); padding-left: 9px; } .roadmap-item[data-prio='high'] { border-left: 2px solid var(--prio-high); padding-left: 9px; } .roadmap-item-top { display: flex; align-items: center; gap: 6px; } .roadmap-item-id { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--text-fade); letter-spacing: -0.01em; } .roadmap-item-spacer { flex: 1; } .roadmap-item-title { font-size: 12.5px; line-height: 1.35; color: var(--text); font-weight: 500; letter-spacing: -0.005em; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Changelog ──────────────────────────────────────────────── */ .changelog { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 60px; } .changelog::-webkit-scrollbar { width: 10px; } .changelog::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; border: 3px solid transparent; background-clip: content-box; } .changelog-week { margin: 0; } .changelog-week-head { display: flex; align-items: center; gap: 10px; padding: 22px 28px 8px; font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; } .changelog-week-head > span:first-child { white-space: nowrap; } .changelog-week-count { font-family: var(--font-mono), monospace; font-size: 10.5px; color: var(--text-fade); font-variant-numeric: tabular-nums; font-weight: 400; } .changelog-week-head .line { flex: 1; height: 1px; background: var(--line); } .changelog-item { display: grid; grid-template-columns: 16px 62px 1fr 60px; align-items: center; gap: 12px; padding: 8px 28px; cursor: default; border-bottom: 1px solid var(--line); color: var(--text-mut); } .changelog-item:hover { background: var(--bg-row-hover); color: var(--text); } .changelog-item-id { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-fade); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .changelog-item-title { font-size: 13px; color: var(--text); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .changelog-item-date { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-fade); text-align: right; font-variant-numeric: tabular-nums; } /* ── Mobile nav bar (hidden on desktop, shown via media query below) ── */ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--bg-elev); border-top: 1px solid var(--line); z-index: 100; padding-bottom: env(safe-area-inset-bottom); } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; appearance: none; border: none; background: transparent; color: var(--text-fade); font-size: 10px; font-family: var(--font-sans), sans-serif; cursor: pointer; position: relative; padding: 6px 0 4px; touch-action: manipulation; } .mobile-nav-item[data-active='1'] { color: var(--accent); } .mobile-nav-badge { position: absolute; top: 4px; right: calc(50% - 16px); min-width: 16px; height: 16px; padding: 0 4px; background: var(--accent); color: var(--accent-fg); border-radius: 99px; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono), monospace; line-height: 1; } /* ── Mobile drawer (projects) ── */ .mobile-drawer-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, 0.4); } .mobile-drawer { position: fixed; bottom: 56px; left: 0; right: 0; z-index: 160; background: var(--bg-elev); border-top: 1px solid var(--line-strong); border-radius: 16px 16px 0 0; padding: 12px 0 8px; max-height: 60vh; overflow-y: auto; animation: cmdk-up 0.2s cubic-bezier(0.3, 0.7, 0.4, 1); } .mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 12px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-quiet); } .mobile-drawer-new { appearance: none; border: none; background: var(--accent); color: var(--accent-fg); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; font-family: var(--font-sans), sans-serif; cursor: pointer; text-transform: none; letter-spacing: 0; } .mobile-drawer-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; appearance: none; border: none; background: transparent; color: var(--text-mut); font-size: 13.5px; font-family: var(--font-sans), sans-serif; cursor: pointer; text-align: left; touch-action: manipulation; } .mobile-drawer-item[data-active='1'] { color: var(--text); background: var(--bg-row-sel); } .mobile-drawer-item .nav-count { margin-left: auto; font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-fade); } /* ═══════════════════════════════════════════════════════════════ MOBILE RESPONSIVE ≤ 640px ═══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* ── App shell ── */ .app { grid-template-columns: 1fr !important; } .sidebar { display: none !important; } /* Push list content above the fixed bottom nav */ .list-wrap { padding-bottom: 56px; } /* ── Bottom nav bar ── */ .mobile-nav { display: flex; } /* ── Topbar ── */ .topbar { padding: 0 12px; height: 48px; } .topbar-title { font-size: 15px; } .topbar-title .sub { display: none; } /* Search becomes icon-only */ .topbar-search { width: 34px; padding: 0; justify-content: center; border-radius: 8px; } .topbar-search span, .topbar-search kbd { display: none; } /* ── Filters ── */ .filters { padding: 6px 10px; gap: 6px; } .filter-chip { height: 28px; padding: 0 10px; font-size: 12.5px; touch-action: manipulation; } /* ── Row — mobile card layout ── */ .row[data-layout='dense'], .row[data-layout='comfort'], .row[data-layout='cards'] { grid-template-columns: 6px 1fr auto; grid-template-rows: auto auto; height: auto; min-height: 56px; padding: 10px 14px 10px 10px; gap: 2px 8px; align-items: start; } /* col 1 row 1-2: unread dot */ .row .unread { grid-column: 1; grid-row: 1 / 3; align-self: center; margin-top: 0; } /* col 2 row 1: title */ .row .title-cell { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; gap: 6px; } .row .title { font-size: 13.5px; max-width: none; } .row .preview { display: none; } /* col 3 row 1: time */ .row .time { grid-column: 3; grid-row: 1; align-self: start; font-size: 11px; } /* col 2 row 2: chips row */ .row .id { grid-column: 2; grid-row: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-fade); } /* col 3 row 2: priority */ .row .prio-bars, .row .prio-dot, .row .prio-text { grid-column: 3; grid-row: 2; align-self: end; } /* Hide project chip and status pill in row — visible in detail */ .row .proj-chip, .row .status-pill { display: none; } /* ── Detail panel — full screen ── */ .app[data-panel='overlay'] .detail, .app[data-panel='split'] .detail, .app[data-panel='push'] .detail { position: fixed; inset: 0; width: 100% !important; z-index: 200; transform: translateY(100%); transition: transform 0.26s cubic-bezier(0.3, 0.7, 0.4, 1); border-left: none; border-top: 1px solid var(--line); } .app[data-detail-open='1'] .detail { transform: translateY(0) !important; } /* Adjust grid so detail doesn't push content */ .app[data-panel='split'][data-detail-open='1'], .app[data-panel='push'][data-detail-open='1'] { grid-template-columns: 1fr !important; } .detail-body { padding: 16px 16px 80px; } .detail-title { font-size: 17px; } /* Meta grid single column */ .detail-meta-grid { grid-template-columns: 80px 1fr; gap: 6px 12px; } /* Tech meta cards single column */ .meta-grid { grid-template-columns: 1fr 1fr; } /* Journal timestamp stacks */ .journal-entry { grid-template-columns: 1fr; gap: 4px; } /* ── Command palette — bottom sheet ── */ .cmdk-backdrop { padding-top: 0; align-items: end; } .cmdk { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 80vh; display: flex; flex-direction: column; animation: cmdk-up 0.2s cubic-bezier(0.3, 0.7, 0.4, 1); } @keyframes cmdk-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .cmdk-list { max-height: calc(80vh - 110px); flex: 1; } .cmdk-item .cmd-id { display: none; } /* ── Project header — metrics wrap ── */ .ph-metrics { flex-wrap: wrap; gap: 8px; } .ph-metric { flex: 1 1 calc(33% - 8px); min-width: 80px; } /* ── Roadmap — horizontal scroll ── */ .roadmap { grid-template-columns: repeat(3, 78vw); overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding-bottom: 8px; } .roadmap-col { scroll-snap-align: start; border-right: 1px solid var(--line); min-height: 0; overflow-y: auto; } /* ── Toast — above bottom nav ── */ .toast-stack { bottom: 68px; } /* ── Group header ── */ .list-group-header { padding: 10px 14px 4px; } /* ── New project modal / login — full width ── */ .login-card { width: 100%; max-width: 360px; margin: 0 16px; } } /* ── Login page ─────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); } .login-card { background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; padding: 32px 28px; width: 320px; box-shadow: var(--shadow-panel); }