/* Tracker v2 — Linear-like dark-by-default UI. Theme is resolved to a concrete data-theme="dark"|"light" attribute on by the inline pre-paint script in index.html + js/lib/theme.js — no bare prefers-color-scheme fallback needed here, just two explicit blocks. */ :root { /* ---- dark palette (default) ---- */ --bg: #101114; --bg-secondary: #16181c; --bg-hover: #202329; --bg-elevated: #1b1d22; --bg-input: #17191e; --border: #262930; --border-strong: #34373f; --text: #e9eaed; --text-secondary: #9a9fab; --text-dim: #6d7178; --accent: #6c74f0; --accent-hover: #838af5; --accent-text: #ffffff; --danger: #f2555a; --danger-bg: rgba(242, 85, 90, 0.14); --success: #3ecf8e; --success-bg: rgba(62, 207, 142, 0.14); --warning: #e8a33d; --warning-bg: rgba(232, 163, 61, 0.14); --shadow: 0 10px 40px rgba(0, 0, 0, 0.55); --state-triage: #f2994a; --state-backlog: #888c96; --state-unstarted: #888c96; --state-started: #f2c94c; --state-completed: #3ecf8e; --state-canceled: #888c96; --state-duplicate: #888c96; --pri-0: #6d7178; --pri-1: #f2555a; --pri-2: #f2994a; --pri-3: #f2c94c; --pri-4: #6c74f0; color-scheme: dark; font-size: 13px; } :root[data-theme='light'] { --bg: #ffffff; --bg-secondary: #f7f7f9; --bg-hover: #eef0f4; --bg-elevated: #ffffff; --bg-input: #ffffff; --border: #e4e5ea; --border-strong: #d2d4db; --text: #1c1e24; --text-secondary: #63666f; --text-dim: #93969e; --accent: #5a5fd8; --accent-hover: #4a4fcf; --accent-text: #ffffff; --danger: #d92d33; --danger-bg: rgba(217, 45, 51, 0.08); --success: #16875a; --success-bg: rgba(22, 135, 90, 0.10); --warning: #a5680d; --warning-bg: rgba(165, 104, 13, 0.10); --shadow: 0 4px 20px rgba(20, 20, 30, 0.10); --state-triage: #e08a3c; --state-backlog: #9599a3; --state-unstarted: #9599a3; --state-started: #e0b638; --state-completed: #16875a; --state-canceled: #9599a3; --state-duplicate: #9599a3; --pri-0: #9599a3; --pri-1: #d92d33; --pri-2: #c1712e; --pri-3: #b08d0e; --pri-4: #5a5fd8; color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: var(--accent); color: var(--accent-text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } #app { display: flex; height: 100vh; overflow: hidden; } /* ---------------------------------------------------------------- sidebar */ .sidebar { width: 232px; flex: none; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .sidebar-header { padding: 14px 14px 8px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; } .sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; } .sidebar-search { margin: 0 10px 10px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); display: flex; justify-content: space-between; align-items: center; font-size: 12px; width: calc(100% - 20px); } .sidebar-search kbd { font-family: inherit; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 11px; } .nav-section { padding: 4px 8px; } .nav-section + .nav-section { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 8px; } .nav-label { padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); } .nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--text-secondary); white-space: nowrap; } .nav-item:hover { background: var(--bg-hover); color: var(--text); } .nav-item.active { background: var(--bg-hover); color: var(--text); font-weight: 600; } .nav-icon { width: 16px; text-align: center; flex: none; opacity: 0.9; } .nav-badge { margin-left: auto; background: var(--accent); color: var(--accent-text); border-radius: 10px; padding: 0 6px; font-size: 11px; line-height: 16px; } .nav-badge.warning { background: var(--warning); color: #1c1300; } /* ------------------------------------------------------------ sidebar footer */ .sidebar-footer { flex: none; border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 6px; position: relative; } .theme-toggle { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 2px; gap: 2px; } .theme-toggle button { flex: 1; border: none; background: transparent; color: var(--text-dim); border-radius: 5px; padding: 5px 0; font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 4px; } .theme-toggle button:hover { color: var(--text); } .theme-toggle button.active { background: var(--bg-hover); color: var(--text); font-weight: 600; } .user-menu-trigger { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; border: none; background: transparent; width: 100%; text-align: left; color: var(--text); } .user-menu-trigger:hover { background: var(--bg-hover); } .user-menu-trigger .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } .user-menu-trigger .chev { color: var(--text-dim); font-size: 10px; } .user-menu { position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; display: flex; flex-direction: column; z-index: 40; } .user-menu button, .user-menu a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; border: none; background: transparent; text-align: left; width: 100%; font-size: 12.5px; } .user-menu button:hover, .user-menu a:hover { background: var(--bg-hover); } .user-menu .danger { color: var(--danger); } .user-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 45; } /* ----------------------------------------------------------------- main */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 46px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); } .topbar h1 { font-size: 14px; font-weight: 600; margin: 0; } .topbar .spacer { flex: 1; } .view { flex: 1; overflow-y: auto; padding: 18px 22px; } .view.no-pad { padding: 0; } .icon-btn { border: none; background: transparent; color: var(--text-secondary); border-radius: 6px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .icon-btn:hover { background: var(--bg-hover); color: var(--text); } .sidebar-toggle { display: none; } .btn { border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); border-radius: 6px; padding: 5px 10px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { background: var(--bg-hover); border-color: var(--border-strong); } .btn.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; } .btn.primary:hover { background: var(--accent-hover); } .btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; } .btn.danger:hover { background: var(--danger-bg); } .btn.small { padding: 2px 7px; font-size: 11.5px; } .btn.icon { padding: 5px 7px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn kbd { font-family: inherit; opacity: 0.7; font-size: 10.5px; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; } input[type=text], input[type=search], input[type=date], input[type=number], input[type=email], textarea, select { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; color: var(--text); } input:focus, select:focus, textarea:focus { border-color: var(--accent); } textarea { width: 100%; resize: vertical; font-family: inherit; } label { color: var(--text-secondary); font-size: 12px; } /* --------------------------------------------------------------- badges */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; font-size: 11px; background: var(--bg-hover); color: var(--text-secondary); white-space: nowrap; } .badge.success { background: var(--success-bg); color: var(--success); } .badge.danger { background: var(--danger-bg); color: var(--danger); } .badge.warning { background: var(--warning-bg); color: var(--warning); } .badge.accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .state-dot.type-triage { background: var(--state-triage); } .state-dot.type-backlog { background: transparent; border: 2px dashed var(--state-backlog); } .state-dot.type-unstarted { background: var(--state-unstarted); border: 2px solid var(--state-unstarted); background-clip: content-box; } .state-dot.type-started { background: conic-gradient(var(--state-started) 50%, transparent 0); border-radius: 50%; } .state-dot.type-completed { background: var(--state-completed); } .state-dot.type-canceled, .state-dot.type-duplicate { background: var(--state-canceled); } .pri-dot { color: var(--text-dim); font-weight: 700; } .pri-1 { color: var(--pri-1); } .pri-2 { color: var(--pri-2); } .pri-3 { color: var(--pri-3); } .pri-4 { color: var(--pri-4); } .label-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 999px; font-size: 11px; background: var(--bg-hover); } .label-chip .dot { width: 6px; height: 6px; } .avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex: none; } .avatar.agent { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-strong); } .avatar.lg { width: 32px; height: 32px; font-size: 13px; } /* ---------------------------------------------------------------- board */ .board { display: flex; gap: 12px; height: 100%; overflow-x: auto; } .board-col { width: 264px; flex: none; display: flex; flex-direction: column; background: var(--bg-secondary); border-radius: 8px; max-height: 100%; } .board-col-header { padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-weight: 600; border-bottom: 1px solid var(--border); } .board-col-count { color: var(--text-dim); font-weight: 400; margin-left: auto; } .board-col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .board-col-body.drag-over { background: var(--bg-hover); } .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 7px; padding: 8px 9px; cursor: grab; display: flex; flex-direction: column; gap: 5px; } .card:hover { border-color: var(--border-strong); } .card.dragging { opacity: 0.4; } .card-id { color: var(--text-dim); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .card-title { font-size: 12.5px; } .card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .card-env { font-size: 10px; } /* ----------------------------------------------------------------- list */ .filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .filters select, .filters input { font-size: 12px; } .list-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--border); } .list-row:hover { background: var(--bg-hover); } .list-row .card-id { width: 62px; flex: none; } .list-row .card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-group-header { padding: 10px 8px 4px; font-weight: 600; color: var(--text-secondary); font-size: 12px; } /* ---------------------------------------------------------------- issue */ .issue-layout { display: flex; gap: 24px; align-items: flex-start; height: 100%; } .issue-main { flex: 1; min-width: 0; padding-bottom: 40px; } .issue-side { width: 260px; flex: none; display: flex; flex-direction: column; gap: 14px; } .issue-id { color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .issue-title { font-size: 20px; font-weight: 600; width: 100%; border: none; background: transparent; padding: 4px 0; margin: 4px 0 10px; } .issue-title:focus { outline: 1px solid var(--border); border-radius: 4px; } .field-group { display: flex; flex-direction: column; gap: 3px; } .field-row { display: flex; align-items: center; justify-content: space-between; } .markdown-body { line-height: 1.6; } .markdown-body :is(h1,h2,h3) { margin: 1em 0 0.4em; } .markdown-body p { margin: 0.5em 0; } .markdown-body pre { background: var(--bg-secondary); padding: 8px 10px; border-radius: 6px; overflow-x: auto; } .markdown-body code { background: var(--bg-secondary); padding: 1px 4px; border-radius: 4px; font-size: 12px; } .markdown-body ul, .markdown-body ol { padding-left: 1.4em; } .markdown-editor { min-height: 120px; } .editable-md { border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; } .editable-md:hover { border-color: var(--border); } .comment { display: flex; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); } .comment-body { flex: 1; min-width: 0; } .comment-meta { color: var(--text-dim); font-size: 11px; margin-bottom: 3px; } .subissue-row, .relation-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .history-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); padding: 4px 0; } /* --------------------------------------------------------------- panels */ .panel-section { margin-bottom: 20px; } .panel-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .panel-box { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--bg-secondary); } /* ------------------------------------------------------------- git panel */ .env-progress { display: flex; align-items: center; margin-bottom: 12px; } .env-step { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 11.5px; } .env-step .env-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-hover); border: 1px solid var(--border-strong); flex: none; } .env-step.done { color: var(--text); } .env-step.done .env-dot { background: var(--success); border-color: var(--success); } .env-step.current { color: var(--accent); font-weight: 600; } .env-step.current .env-dot { background: var(--accent); border-color: var(--accent); } .env-line { flex: 1; height: 2px; background: var(--border); margin: 0 6px; min-width: 12px; } .env-line.done { background: var(--success); } .branch-row, .pr-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 12px; } .branch-row:first-child, .pr-row:first-child { border-top: none; } .branch-name, .pr-title { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-secondary); } .pr-title { font-family: inherit; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-state { text-transform: capitalize; } .pr-state.open { background: var(--success-bg); color: var(--success); } .pr-state.draft { background: var(--bg-hover); color: var(--text-dim); } .pr-state.merged { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .pr-state.closed { background: var(--danger-bg); color: var(--danger); } .git-empty { color: var(--text-dim); font-size: 12px; padding: 4px 0; } /* ------------------------------------------------------------- plan panel */ .plan-panel-header { display: flex; align-items: center; gap: 8px; } .plan-status { font-size: 11px; } .plan-status.approved { color: var(--success); } .plan-status.pending { color: var(--warning); } .plan-status.rejected { color: var(--danger); } .plan-status.none { color: var(--text-dim); } .plan-meta-row { display: flex; align-items: center; gap: 14px; color: var(--text-dim); font-size: 11.5px; margin: 6px 0 10px; flex-wrap: wrap; } .plan-files-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .plan-files-list li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-secondary); } .estimate-picker { display: flex; gap: 6px; } .estimate-chip { width: 30px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } .estimate-chip.selected { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .estimate-chip:not(.readonly):hover { border-color: var(--border-strong); } .plan-approve-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .plan-blocked-note { color: var(--text-dim); font-size: 11.5px; } .gate-banner { display: flex; align-items: flex-start; gap: 8px; background: var(--danger-bg); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; } /* ---------------------------------------------------------------- delegate */ .delegate-row { display: flex; align-items: center; gap: 8px; } .delegate-empty { color: var(--text-dim); font-size: 12px; } /* ---------------------------------------------------------------- modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(5, 5, 8, 0.55); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 50; } .modal { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); width: 560px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; } .modal.wide { width: 720px; } .modal-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; } .modal-body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .modal-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .search-results { max-height: 50vh; overflow-y: auto; } .search-group-title { padding: 6px 4px; color: var(--text-dim); font-size: 11px; text-transform: uppercase; } .search-result { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; } .search-result:hover { background: var(--bg-hover); } /* --------------------------------------------------------------- cards2 */ .projects-grid { display: flex; flex-direction: column; gap: 8px; } .project-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .progress-bar { height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; } .progress-bar > div { height: 100%; background: var(--success); } .doc-list-item { padding: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .notification-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 8px; border-bottom: 1px solid var(--border); } .notification-row.unread { background: var(--bg-secondary); } .notification-row.unread::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none; } .empty-state { color: var(--text-dim); padding: 30px 10px; text-align: center; } .cycles-grid { display: flex; gap: 16px; flex-wrap: wrap; } .cycle-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px; width: 320px; } .cycle-card h3 { margin: 0 0 6px; font-size: 13px; } .kbd-hint { color: var(--text-dim); } /* -------------------------------------------------------------- tabs */ .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .tab-item { padding: 8px 4px; color: var(--text-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 12.5px; } .tab-item:hover { color: var(--text); } .tab-item.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } /* ------------------------------------------------------------- login page */ body.is-login .sidebar, body.is-login .topbar, body.is-login .sidebar-backdrop { display: none; } body.is-login .view { padding: 0; } .login-page { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; padding: 20px; } .login-card { width: 360px; max-width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; } .login-logo { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .login-card h1 { font-size: 16px; margin: 0; } .login-card p { color: var(--text-secondary); margin: 0; font-size: 12.5px; } .login-card input { width: 100%; } .login-code-input { letter-spacing: 0.4em; text-align: center; font-size: 18px; font-family: ui-monospace, monospace; } .login-code-input::placeholder { letter-spacing: normal; font-size: 14px; font-family: inherit; } .login-error { color: var(--danger); font-size: 12px; } .login-hint { color: var(--text-dim); font-size: 11.5px; } .login-devcode { background: var(--warning-bg); color: var(--warning); border-radius: 6px; padding: 8px 10px; font-size: 11.5px; } /* --------------------------------------------------------------- settings */ .settings-layout { display: flex; gap: 28px; align-items: flex-start; } .settings-nav { width: 190px; flex: none; display: flex; flex-direction: column; gap: 2px; } .settings-nav a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text-secondary); font-size: 12.5px; } .settings-nav a:hover { background: var(--bg-hover); color: var(--text); } .settings-nav a.active { background: var(--bg-hover); color: var(--text); font-weight: 600; } .settings-content { flex: 1; min-width: 0; max-width: 860px; } .settings-section { margin-bottom: 28px; } .settings-section h2 { font-size: 14px; margin: 0 0 4px; } .settings-section .desc { color: var(--text-secondary); font-size: 12px; margin: 0 0 14px; } .data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .data-table th { text-align: left; color: var(--text-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; padding: 6px 8px; border-bottom: 1px solid var(--border); } .data-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .vendor-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 5px; background: var(--bg-hover); font-size: 11px; } .capability-chip { display: inline-flex; padding: 1px 6px; border-radius: 999px; background: var(--bg-hover); font-size: 10.5px; color: var(--text-secondary); margin-right: 3px; } .token-reveal { background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .token-reveal code { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12px; word-break: break-all; user-select: all; } .token-warning { color: var(--warning); font-size: 12px; display: flex; gap: 6px; align-items: flex-start; } .onboarding-tabs { display: flex; gap: 4px; margin-bottom: 8px; } .onboarding-tabs button { border: 1px solid var(--border); background: var(--bg-elevated); border-radius: 6px; padding: 4px 9px; font-size: 11.5px; color: var(--text-secondary); } .onboarding-tabs button.active { color: var(--text); border-color: var(--accent); } .onboarding-snippet { background: #0a0a0d; color: #d7d9e0; border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; overflow-x: auto; white-space: pre; position: relative; border: 1px solid var(--border); } :root[data-theme='light'] .onboarding-snippet { background: #14151a; color: #e6e7ea; } .copy-btn { position: absolute; top: 8px; right: 8px; } .repo-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; } .repo-row:first-child { border-top: none; } .repo-row .repo-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } /* --------------------------------------------------------------- batches */ .batches-grid { display: flex; flex-direction: column; gap: 12px; } .batch-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--bg-secondary); } .batch-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .batch-issues { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .batch-files { display: flex; flex-wrap: wrap; gap: 6px; } .batch-files .badge { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------------------------------------------------------------- memory */ .memory-search { margin-bottom: 16px; width: 100%; max-width: 360px; } .memory-day { margin-bottom: 22px; } .memory-day-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; position: sticky; top: 0; background: var(--bg); padding: 4px 0; } .memory-entry { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; background: var(--bg-secondary); } .memory-entry-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .memory-entry-title { font-weight: 600; font-size: 12.5px; flex: 1; min-width: 0; } .source-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; } .source-badge.screenpipe { background: var(--accent); color: var(--accent-text); opacity: 0.85; } .source-badge.agent { background: var(--success-bg); color: var(--success); } .source-badge.human { background: var(--bg-hover); color: var(--text-secondary); } .memory-tags { display: flex; gap: 5px; margin-top: 6px; } /* --------------------------------------------------------------- steward */ .steward-group { margin-bottom: 22px; } .steward-group-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .finding-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; background: var(--bg-secondary); } .finding-message { flex: 1; min-width: 0; font-size: 12.5px; } .finding-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; } /* -------------------------------------------------------------- velocity */ .velocity-team-tabs { display: flex; gap: 6px; margin-bottom: 16px; } .velocity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .metric-tile { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--bg-secondary); } .metric-tile .metric-label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; } .metric-tile .metric-value { font-size: 22px; font-weight: 700; } .metric-tile .metric-sub { color: var(--text-secondary); font-size: 11.5px; margin-top: 3px; } .metric-tile.highlight { border-color: var(--accent); } .metric-tile.highlight .metric-value { color: var(--accent); } .bottleneck-badge { display: inline-flex; margin-top: 6px; } .chart-box { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: var(--bg-secondary); margin-bottom: 20px; } .chart-box h3 { margin: 0 0 12px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; } .chart-legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); } .chart-legend .swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; } .over-capacity-warning { display: flex; align-items: flex-start; gap: 8px; background: var(--warning-bg); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius: 8px; padding: 10px 12px; margin: 12px 0; font-size: 12.5px; } /* -------------------------------------------------------------- offline */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: var(--warning); color: #1c1300; text-align: center; font-size: 12px; padding: 5px; transform: translateY(-100%); transition: transform .2s ease; } .offline-banner.show { transform: translateY(0); } /* ----------------------------------------------------------------- toast */ .toast-stack { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; align-items: center; } .toast { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text); border-radius: 8px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 12.5px; max-width: 420px; opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s; cursor: pointer; display: flex; align-items: center; gap: 10px; } .toast.show { opacity: 1; transform: translateY(0); } .toast-error { border-color: var(--danger); color: var(--danger); } .toast-success { border-color: var(--success); color: var(--success); } .toast-text { flex: 1; min-width: 0; } .toast-action { flex: none; } /* ------------------------------------------------------------- skeletons */ .skeleton-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; } .skeleton-row { display: flex; align-items: center; gap: 10px; } .skeleton-chip, .skeleton-line, .skeleton-card { background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border) 37%, var(--bg-hover) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: 5px; } .skeleton-chip { width: 54px; height: 14px; flex: none; } .skeleton-line { height: 14px; flex: none; } .skeleton-card { height: 56px; border-radius: 7px; margin-bottom: 6px; } .skeleton-board-col { background: var(--bg-secondary); border-radius: 8px; padding: 8px; } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* -------------------------------------------------------- stale-data note */ .stale-note { display: flex; align-items: center; gap: 6px; background: var(--warning-bg); color: var(--warning); border-radius: 6px; padding: 6px 10px; font-size: 11.5px; margin-bottom: 10px; } .not-saved-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; background: var(--warning-bg); color: var(--warning); } /* -------------------------------------------------------------- utility */ .stack-h { display: flex; align-items: center; gap: 8px; } .text-dim { color: var(--text-dim); } .mt-0 { margin-top: 0; } /* ============================================================= mobile === */ @media (max-width: 760px) { .sidebar-toggle { display: inline-flex; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 46; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: var(--shadow); } #app.sidebar-open .sidebar { transform: translateX(0); } #app.sidebar-open .sidebar-backdrop { display: block; } .view { padding: 14px; } .issue-layout { flex-direction: column; } .issue-side { width: 100%; order: 2; flex-direction: row; flex-wrap: wrap; gap: 10px 18px; } .issue-side .field-group { min-width: 130px; } .issue-main { order: 1; width: 100%; } .board { gap: 10px; } .board-col { width: 82vw; scroll-snap-align: start; } .board { scroll-snap-type: x mandatory; } .settings-layout { flex-direction: column; gap: 16px; } .settings-nav { width: 100%; flex-direction: row; overflow-x: auto; } .velocity-grid { grid-template-columns: 1fr 1fr; } .repo-row { grid-template-columns: 1fr; gap: 4px; } .modal { width: 94vw; } .filters { gap: 6px; } .filters select, .filters input { font-size: 12px; flex: 1 1 auto; min-width: 0; } }