/* Kaam Karne — design tokens. * * Principle: colour carries signal, nothing else. The neutral ramp does * all the structural work (surfaces, borders, text), so the only saturated * things on screen are priority bands, overdue dates, and blocked flags. * A red P0 badge should be the loudest pixel in the viewport. * * Light is the default; dark is a real palette, not an inversion. The * viewer's system preference wins unless they pick a theme, which is * stamped on . */ :root { /* Neutral ramp — light */ --bg: #f7f8fa; --surface: #ffffff; --surface-sunk: #f0f2f6; --border: #e3e6ec; --border-strong: #c9cfda; --text: #0f1420; --text-muted: #626b7d; --text-faint: #8a92a3; --accent: #2b59ff; --accent-hover: #1d47e0; --accent-weak: #eaefff; --on-accent: #ffffff; /* Priority bands. Eleven levels share four colours; the exact level is * always spelled out in the badge text, never inferred from hue. */ --p-critical: #d31f3c; --p-critical-bg: #ffe8ec; --p-high: #b45309; --p-high-bg: #fdf0dc; --p-medium: #1f5fa8; --p-medium-bg: #e7f0fb; --p-low: #626b7d; --p-low-bg: #eef0f4; --danger: #d31f3c; --danger-bg: #ffe8ec; --warning: #b45309; --warning-bg: #fdf0dc; --success: #157347; --success-bg: #e3f5eb; --radius: 10px; --radius-sm: 7px; --radius-lg: 15px; --shadow-sm: 0 1px 2px rgba(15, 20, 32, 0.05); --shadow-md: 0 4px 16px rgba(15, 20, 32, 0.08); --shadow-lg: 0 16px 48px rgba(15, 20, 32, 0.16); --sidebar-width: 232px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0f1a; --surface: #131926; --surface-sunk: #0f1421; --border: #232c3d; --border-strong: #35415a; --text: #eef1f7; --text-muted: #99a3b8; --text-faint: #6b7689; --accent: #5c82ff; --accent-hover: #7093ff; --accent-weak: #1a2340; --on-accent: #0b0f1a; --p-critical: #ff6b81; --p-critical-bg: #351019; --p-high: #f0a742; --p-high-bg: #33240e; --p-medium: #6ba6f0; --p-medium-bg: #12243a; --p-low: #99a3b8; --p-low-bg: #1b2231; --danger: #ff6b81; --danger-bg: #351019; --warning: #f0a742; --warning-bg: #33240e; --success: #4ecb8a; --success-bg: #102b1e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0b0f1a; --surface: #131926; --surface-sunk: #0f1421; --border: #232c3d; --border-strong: #35415a; --text: #eef1f7; --text-muted: #99a3b8; --text-faint: #6b7689; --accent: #5c82ff; --accent-hover: #7093ff; --accent-weak: #1a2340; --on-accent: #0b0f1a; --p-critical: #ff6b81; --p-critical-bg: #351019; --p-high: #f0a742; --p-high-bg: #33240e; --p-medium: #6ba6f0; --p-medium-bg: #12243a; --p-low: #99a3b8; --p-low-bg: #1b2231; --danger: #ff6b81; --danger-bg: #351019; --warning: #f0a742; --warning-bg: #33240e; --success: #4ecb8a; --success-bg: #102b1e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } h1, h2, h3 { letter-spacing: -0.018em; } h1 { font-size: 1.5rem; font-weight: 650; margin: 0; } h2 { font-size: 1rem; font-weight: 620; margin: 0; } h3 { font-size: 0.9rem; font-weight: 600; margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } .muted { color: var(--text-muted); } .hint { color: var(--text-faint); font-size: 0.8rem; } .boot-loading { display: flex; align-items: center; justify-content: center; height: 100vh; color: var(--text-muted); } /* ------------------------------------------------------------- Login -- */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); } .login-card h1 { margin-bottom: 6px; letter-spacing: -0.03em; } .login-subtitle { color: var(--text-muted); margin: 0 0 24px; font-size: 0.87rem; } .login-form label, .change-password-form label { display: block; margin-bottom: 16px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; } .login-form input, .change-password-form input { display: block; width: 100%; margin-top: 7px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.95rem; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* --------------------------------------------------------------- App -- */ .app-shell { display: flex; min-height: 100vh; } .primary-nav { background: var(--surface); border-right: 1px solid var(--border); width: var(--sidebar-width); display: flex; flex-direction: column; padding: 20px 12px; gap: 2px; flex-shrink: 0; } .nav-brand { font-weight: 680; font-size: 1.05rem; letter-spacing: -0.03em; padding: 6px 12px 22px; } .nav-item { display: flex; align-items: center; gap: 11px; background: none; border: none; border-radius: var(--radius-sm); padding: 9px 12px; text-align: left; cursor: pointer; color: var(--text-muted); transition: background 0.12s, color 0.12s; } .nav-item:hover { background: var(--surface-sunk); color: var(--text); } .nav-item.active { background: var(--accent-weak); color: var(--accent); font-weight: 600; } .nav-logout { margin-top: auto; } .nav-icon { width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-label { font-size: 0.87rem; font-weight: 500; } .theme-toggle { display: flex; align-items: center; gap: 11px; background: none; border: none; border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; color: var(--text-muted); text-align: left; } .theme-toggle:hover { background: var(--surface-sunk); color: var(--text); } .content { flex: 1; padding: 32px 36px 96px; max-width: 1120px; margin: 0 auto; width: 100%; } .view-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .view-header h1 { margin-bottom: 3px; } .section-heading { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 12px; } .section-heading h2 { letter-spacing: -0.01em; } .section-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- Phone -- */ @media (max-width: 900px) { .app-shell { flex-direction: column; } .primary-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; flex-direction: row; justify-content: space-around; border-right: none; border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 20; box-shadow: 0 -1px 12px rgba(0,0,0,0.06); } .nav-brand { display: none; } .nav-item, .theme-toggle { flex-direction: column; gap: 3px; padding: 7px 10px; min-width: 56px; justify-content: center; } .nav-item.active { background: transparent; } .nav-label { font-size: 0.65rem; } .nav-logout { margin-top: 0; } .content { padding: 18px 16px 92px; } h1 { font-size: 1.3rem; } /* On a phone the fold is precious: the subtitle is decorative and the header CTA doesn't need to be full width, so neither is allowed to push the actual action items below the fold. */ .view-header { margin-bottom: 16px; gap: 10px; align-items: center; } .view-header p.muted { display: none; } .view-header .btn { padding: 7px 12px; font-size: 0.8rem; } .section-heading { margin: 22px 0 10px; } .overview-strip { gap: 8px; } .stat-tile { padding: 11px 13px; } .stat-value { font-size: 1.5rem; } } /* ----------------------------------------------------------- Buttons -- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 560; font-size: 0.86rem; transition: background 0.12s, border-color 0.12s; } .btn:hover { background: var(--surface-sunk); } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; } .btn-danger:hover { background: var(--danger-bg); } .btn-small { padding: 5px 10px; font-size: 0.76rem; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .form-error { background: var(--danger-bg); color: var(--danger); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.82rem; margin-bottom: 16px; } .toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 0.82rem; z-index: 50; box-shadow: var(--shadow-md); } /* --------------------------------------------------- Priority badges -- */ .pri { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 7px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; flex-shrink: 0; } .pri-critical { background: var(--p-critical-bg); color: var(--p-critical); } .pri-high { background: var(--p-high-bg); color: var(--p-high); } .pri-medium { background: var(--p-medium-bg); color: var(--p-medium); } .pri-low { background: var(--p-low-bg); color: var(--p-low); } /* P0 is the one thing allowed to shout. */ .pri-critical { box-shadow: inset 0 0 0 1px var(--p-critical); } /* ------------------------------------------------------ Stat tiles ---- */ .overview-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-bottom: 4px; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .stat-value { font-size: 1.75rem; font-weight: 660; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; } .stat-label { color: var(--text-muted); font-size: 0.76rem; margin-top: 3px; font-weight: 500; } .stat-danger .stat-value { color: var(--danger); } .stat-warning .stat-value { color: var(--warning); } .stat-success .stat-value { color: var(--success); } .stat-neutral .stat-value { color: var(--text); } /* ------------------------------------------------- My action items ---- */ .item-rows { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .item-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; text-align: left; background: none; border-left: none; border-right: none; border-top: none; width: 100%; } .item-row:last-child { border-bottom: none; } .item-row:hover { background: var(--surface-sunk); } .item-row-main { flex: 1; min-width: 0; } .item-row-title { font-weight: 530; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-row-meta { display: flex; gap: 10px; align-items: center; margin-top: 3px; font-size: 0.76rem; color: var(--text-muted); flex-wrap: wrap; } .project-tag { font-size: 0.72rem; color: var(--text-muted); background: var(--surface-sunk); border: 1px solid var(--border); padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .due-overdue { color: var(--danger); font-weight: 600; } .due-normal { color: var(--text-muted); } .empty-state { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 36px 24px; text-align: center; color: var(--text-muted); } /* --------------------------------------------------- Project strip ---- */ .project-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .project-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 9px; transition: border-color 0.12s, box-shadow 0.12s; text-align: left; } .project-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .project-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .project-card-top h3 { font-size: 0.92rem; } .project-card-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .status-pill { font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--border); color: var(--text-muted); text-transform: capitalize; white-space: nowrap; font-weight: 550; } .progress-bar { height: 5px; background: var(--surface-sunk); border-radius: 3px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; } .badge { font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; font-weight: 600; } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-success { background: var(--success-bg); color: var(--success); } .badge-danger { background: var(--danger-bg); color: var(--danger); } /* ---------------------------------------------------------- Tabs ------ */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; } .tab-btn { background: none; border: none; padding: 9px 13px; cursor: pointer; font-weight: 560; font-size: 0.85rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } /* -------------------------------------------------------- Add form ---- */ .add-item-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .add-item-form input[type="text"] { flex: 1; min-width: 170px; } .add-item-form input, .add-item-form select { padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.86rem; } /* ---------------------------------------------------------- Board ----- */ .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .board { grid-template-columns: 1fr; } } .board-column h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 10px; font-weight: 620; } .item-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 9px; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; } .item-card:hover { box-shadow: var(--shadow-sm); } .item-card.pri-band-critical { border-left-color: var(--p-critical); } .item-card.pri-band-high { border-left-color: var(--p-high); } .item-card.pri-band-medium { border-left-color: var(--p-medium); } .item-card.pri-band-low { border-left-color: var(--p-low); } .item-card.status-done { opacity: 0.6; } .item-card-top { display: flex; gap: 8px; align-items: flex-start; } .item-card-title { flex: 1; font-weight: 530; font-size: 0.89rem; } .item-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; color: var(--text-muted); margin-top: 7px; flex-wrap: wrap; } .blocked-by { font-size: 0.74rem; color: var(--warning); margin-top: 6px; } .item-links { margin-top: 7px; display: flex; gap: 10px; flex-wrap: wrap; } .item-link { font-size: 0.75rem; color: var(--accent); } /* -------------------------------------------------- Priority view ----- */ .priority-group { margin-bottom: 22px; } .priority-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .priority-group-head h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ------------------------------------------------------ Item editor --- */ .item-editor-overlay { position: fixed; inset: 0; background: rgba(8, 11, 18, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; } .item-editor { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .item-editor h3 { margin-bottom: 18px; font-size: 1.05rem; } .item-editor label { display: block; margin-bottom: 14px; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); } .item-editor select, .item-editor input, .item-editor textarea { display: block; width: 100%; margin-top: 5px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.88rem; } .item-editor textarea { min-height: 72px; resize: vertical; } .item-editor-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; } /* ---------------------------------------------------------- Gantt ----- */ .gantt-range { font-size: 0.75rem; color: var(--text-faint); margin-bottom: 12px; font-variant-numeric: tabular-nums; } .gantt-row { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; } .gantt-label { width: 190px; flex-shrink: 0; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .gantt-label { width: 110px; font-size: 0.75rem; } } .gantt-track { position: relative; flex: 1; height: 20px; background: var(--surface-sunk); border-radius: 5px; } .gantt-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--accent); min-width: 6px; } .gantt-bar.pri-band-critical { background: var(--p-critical); } .gantt-bar.pri-band-high { background: var(--p-high); } .gantt-bar.pri-band-medium { background: var(--p-medium); } .gantt-bar.pri-band-low { background: var(--p-low); } .gantt-bar.status-done { opacity: 0.45; } .gantt-target-marker { position: relative; height: 22px; margin-left: 202px; border-left: 2px dashed var(--danger); font-size: 0.72rem; color: var(--danger); padding-left: 6px; } /* ---------------------------------------------------------- Graph ----- */ .graph-wrap { display: flex; justify-content: center; } .dependency-graph { width: 100%; max-width: 540px; height: auto; } .graph-edge { stroke: var(--border-strong); stroke-width: 1.5; } .graph-node { fill: var(--accent); } .graph-node.status-done { fill: var(--success); } .graph-node.status-open { fill: var(--text-faint); } .graph-node.redacted { fill: var(--surface); stroke: var(--text-faint); stroke-dasharray: 3; } .graph-label { font-size: 9px; fill: var(--text); text-anchor: middle; } /* ------------------------------------------------------- Roadblock ---- */ .roadblock-list { display: flex; flex-direction: column; gap: 9px; } .roadblock-item { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .roadblock-item strong { flex: 1; min-width: 140px; font-weight: 550; font-size: 0.89rem; } /* ----------------------------------------------------------- Cards ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; } .card h2 { margin-bottom: 14px; } .card form label, .settings-form label, .account-view label { display: block; margin-bottom: 14px; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); } .card form input, .card form select, .card form textarea, .settings-form input, .settings-form select { display: block; width: 100%; max-width: 340px; margin-top: 5px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.88rem; } .checkbox-label { display: flex; align-items: center; gap: 9px; } .checkbox-label input { width: auto; margin-top: 0; } .member-list { list-style: none; padding: 0; margin: 0; font-size: 0.86rem; } .member-list li { padding: 7px 0; border-bottom: 1px solid var(--border); } .member-list li:last-child { border-bottom: none; } .roster-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .roster-table th, .roster-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--border); } .roster-table th { color: var(--text-faint); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; } .table-scroll { overflow-x: auto; } /* ------------------------------------------------------- AI assist ---- */ .ai-assist-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 14px; margin-bottom: 18px; } .ai-assist-panel summary { cursor: pointer; padding: 12px 0; font-weight: 580; font-size: 0.87rem; list-style: none; } .ai-assist-panel summary::-webkit-details-marker { display: none; } .ai-assist-panel summary::before { content: "▸ "; color: var(--text-faint); } .ai-assist-panel[open] summary::before { content: "▾ "; } .ai-assist-body { padding: 4px 0 16px; display: flex; flex-direction: column; gap: 10px; } .ai-assist-body textarea { width: 100%; padding: 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); resize: vertical; font-size: 0.88rem; } .ai-candidate-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); } .ai-candidate-row input[type="text"] { flex: 1; min-width: 160px; padding: 6px 9px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 5px; } .ai-candidate-row select, .ai-candidate-row input[type="date"] { padding: 6px 9px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 5px; font-size: 0.82rem; } .ai-results { display: flex; flex-direction: column; gap: 2px; }