/* ========================================================================== Procede AI Triage — shared design system Single source of truth for all three dashboard pages (index, stats, improvements). Tokens first, then shared components. Dark mode is driven by the system preference AND by a manual [data-theme] override on so the header toggle wins in both directions. Palette/meter/tile specs follow the dataviz skill; status hues keep the colors users already recognize (resolved/suggested/escalated/needs-review). ========================================================================== */ :root { color-scheme: light; /* surfaces & ink (light) */ --bg: #f4f4f2; /* page plane */ --surface: #ffffff; /* cards, rows, drawer */ --surface-2: #f5f5f3; /* insets, meter tracks, code, tiles */ --surface-hover: #f0f0ed; --text: #1d1d1f; --text-2: #52514e; /* secondary ink */ --muted: #86857f; /* labels, timestamps */ --border: #e6e5df; --border-strong: #d3d2cc; --shadow: 0 1px 3px rgba(0,0,0,0.06); --shadow-lg: 0 16px 48px rgba(0,0,0,0.22); /* brand */ --accent: #2d6cdf; --accent-hover: #1f5bc4; --link: #0067c5; /* header (dark in both themes) */ --header-bg: #1d1d1f; --header-fg: #ffffff; /* status pairs — bg wash + readable fg + a solid accent for bars/rails */ --ok-bg: #d1f4dd; --ok-fg: #1d6b3b; --ok-solid: #16a34a; --warn-bg: #fef3c7; --warn-fg: #92400e; --warn-solid: #b8791b; --danger-bg: #fde2e2; --danger-fg: #991b1b; --danger-solid: #d03b3b; --info-bg: #e0e7ff; --info-fg: #3730a3; --info-solid: #4f46e5; /* confidence scale (meter fills) — deepened amber reads on a light track */ --conf-high: #0ca30c; --conf-med: #d1900c; --conf-low: #d03b3b; --conf-track:#e7e7e2; /* neutral chip */ --chip-bg: #ececef; --chip-fg: #3a3a3d; --radius: 8px; --radius-sm: 5px; --radius-lg: 14px; --maxw: 1200px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* Dark values — applied when the OS prefers dark AND the user hasn't forced light. Keep in sync with the [data-theme="dark"] block below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #242422; --surface-hover: #2c2c2a; --text: #f7f7f5; --text-2: #c3c2b7; --muted: #93928b; --border: #2f2f2c; --border-strong: #3a3a37; --shadow: 0 1px 3px rgba(0,0,0,0.5); --shadow-lg: 0 16px 48px rgba(0,0,0,0.6); --accent: #4d86f0; --accent-hover: #6a9bf4; --link: #6ba6ff; --ok-bg: rgba(34,197,94,0.16); --ok-fg: #57d98a; --ok-solid: #22c55e; --warn-bg: rgba(234,179,8,0.16); --warn-fg: #f5c344; --warn-solid: #eab308; --danger-bg: rgba(239,68,68,0.18); --danger-fg: #f79393; --danger-solid: #ef4444; --info-bg: rgba(129,140,248,0.20); --info-fg: #b3bdfb; --info-solid: #818cf8; --conf-high: #22c55e; --conf-med: #eab308; --conf-low: #ef4444; --conf-track:#2f2f2c; --chip-bg: #2c2c2a; --chip-fg: #d3d2cc; } } /* Manual dark — always wins over system light. Mirror of the block above. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #242422; --surface-hover: #2c2c2a; --text: #f7f7f5; --text-2: #c3c2b7; --muted: #93928b; --border: #2f2f2c; --border-strong: #3a3a37; --shadow: 0 1px 3px rgba(0,0,0,0.5); --shadow-lg: 0 16px 48px rgba(0,0,0,0.6); --accent: #4d86f0; --accent-hover: #6a9bf4; --link: #6ba6ff; --ok-bg: rgba(34,197,94,0.16); --ok-fg: #57d98a; --ok-solid: #22c55e; --warn-bg: rgba(234,179,8,0.16); --warn-fg: #f5c344; --warn-solid: #eab308; --danger-bg: rgba(239,68,68,0.18); --danger-fg: #f79393; --danger-solid: #ef4444; --info-bg: rgba(129,140,248,0.20); --info-fg: #b3bdfb; --info-solid: #818cf8; --conf-high: #22c55e; --conf-med: #eab308; --conf-low: #ef4444; --conf-track:#2f2f2c; --chip-bg: #2c2c2a; --chip-fg: #d3d2cc; } /* ============================ base ============================ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--link); } h2 { font-size: 1.05rem; margin: 1.5rem 0 0.75rem; } main { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem; } .lede { color: var(--text-2); font-size: 0.95rem; line-height: 1.5; margin: 0 0 1.25rem; } .note { background: var(--warn-bg); border-left: 3px solid var(--warn-solid); padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 1.25rem; color: var(--text); } #status { padding: 1rem; text-align: center; color: var(--muted); } code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; font-family: var(--mono); } pre { font-size: 0.75rem; background: var(--surface-2); color: var(--text); padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--border); line-height: 1.5; } /* ============================ header ============================ */ header { background: var(--header-bg); color: var(--header-fg); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; } header h1 { margin: 0; font-size: 1.25rem; } header nav { display: flex; align-items: center; gap: 1rem; } header nav a { color: #fff; opacity: 0.75; text-decoration: none; font-size: 0.85rem; } header nav a:hover { opacity: 1; } header nav a.changelog, header nav a.analytics, header nav a.trending, header nav a.adoption { color: #fff; opacity: 1; padding: 0.4rem 0.8rem; border-radius: 6px; font-weight: 600; } header nav a.changelog { background: #2d6cdf; } header nav a.changelog:hover { background: #1f5bc4; } header nav a.analytics { background: #16a34a; } header nav a.analytics:hover { background: #128a3e; } header nav a.trending { background: #e0651a; } header nav a.trending:hover { background: #c4540f; } header nav a.adoption { background: #6d4aa8; } header nav a.adoption:hover { background: #5a3b8e; } #me { font-size: 0.85rem; opacity: 0.7; } .help-btn { width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: transparent; color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; opacity: 0.8; padding: 0; } .help-btn:hover { opacity: 1; background: rgba(255,255,255,0.12); } .theme-toggle { width: 1.9rem; height: 1.9rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.28); background: transparent; color: #fff; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: rgba(255,255,255,0.14); } /* ============================ cards / KPI summary ============================ */ .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .card { background: var(--surface); padding: 0.75rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); } .card .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); } .card .value { font-size: 1.5rem; font-weight: 600; margin-top: 0.25rem; } .card .sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.1rem; } /* ============================ badges / pills / chips ============================ */ .badge { font-size: 0.72rem; padding: 2px 7px; border-radius: 10px; color: #fff; white-space: nowrap; } .resolution { font-size: 0.8rem; padding: 2px 8px; border-radius: 3px; display: inline-block; font-weight: 500; } .resolution.resolved { background: var(--ok-bg); color: var(--ok-fg); } .resolution.suggested { background: var(--warn-bg); color: var(--warn-fg); } .resolution.escalated { background: var(--danger-bg); color: var(--danger-fg); } .resolution.needs-review { background: var(--info-bg); color: var(--info-fg); } .chip { display: inline-block; font-size: 0.78rem; padding: 2px 9px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-fg); line-height: 1.5; } .chip.mono { font-family: var(--mono); font-size: 0.75rem; } .chip.add { background: var(--ok-bg); color: var(--ok-fg); } .chip.remove { background: var(--danger-bg); color: var(--danger-fg); } .pill { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; display: inline-block; } .pill.crit, .pill.critical, .pill.high { background: var(--danger-bg); color: var(--danger-fg); } .pill.medium, .pill.med { background: var(--warn-bg); color: var(--warn-fg); } .pill.low, .pill.neutral { background: var(--chip-bg); color: var(--chip-fg); } .pill.info { background: var(--info-bg); color: var(--info-fg); } .pill.good { background: var(--ok-bg); color: var(--ok-fg); } /* ============================ confidence meter ============================ */ .meter { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; } .meter .track { position: relative; flex: 1 1 auto; height: 6px; min-width: 40px; border-radius: 999px; background: var(--conf-track); overflow: hidden; } .meter .fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 999px; background: var(--conf-med); } .meter.high .fill { background: var(--conf-high); } .meter.med .fill { background: var(--conf-med); } .meter.low .fill { background: var(--conf-low); } .meter .val { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--text-2); min-width: 2.4ch; text-align: right; } /* ============================ callouts / sections / kv ============================ */ .callout { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; line-height: 1.55; font-size: 0.9rem; } .callout.warn { border-left-color: var(--warn-solid); } .callout.danger { border-left-color: var(--danger-solid); } .section-title { display: flex; align-items: center; gap: 0.5rem; margin: 1.7rem 0 0.7rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); font-weight: 700; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); } /* Sub-headers within a section (e.g. Docs matches, Jira actions) recede below the main header. */ .section-title.sub { margin: 0.9rem 0 0.25rem; font-size: 0.7rem; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; padding-bottom: 0; border-bottom: 0; } .section-title .count { font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; color: var(--text-2); } /* ============================ filter bar ============================ */ .filter-bar { background: var(--surface); padding: 0.75rem; border-radius: var(--radius); margin-bottom: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; box-shadow: var(--shadow); border: 1px solid var(--border); } .filter-bar input, .filter-bar select { padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 0.9rem; background: var(--surface); color: var(--text); } /* ============================ tables ============================ */ table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: 0.72rem; text-transform: uppercase; color: var(--muted); font-weight: 600; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ============================ empty state ============================ */ .empty-state { background: var(--surface); padding: 3rem; text-align: center; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); } .empty-state h2 { margin: 0 0 0.5rem; } .empty-state p { color: var(--muted); margin: 0; } /* ============================ modal ============================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; } .modal-overlay[hidden] { display: none; } .modal { background: var(--surface); color: var(--text); max-width: 560px; width: 100%; border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-lg); position: relative; max-height: 85vh; overflow-y: auto; border: 1px solid var(--border); } .modal h2 { margin: 0 0 0.75rem; font-size: 1.2rem; } .modal h3 { margin: 1.1rem 0 0.4rem; font-size: 0.98rem; } .modal p, .modal li { line-height: 1.55; } .modal p { margin: 0 0 0.85rem; } .modal ol, .modal ul { line-height: 1.55; margin: 0 0 0.85rem; padding-left: 1.25rem; } .modal li { margin-bottom: 0.4rem; } .modal .note { background: var(--surface-2); border-left: 3px solid var(--accent); } .modal-close, .modal .close { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; } .modal-close:hover, .modal .close:hover { color: var(--text); } /* ============================ copy button ============================ */ .copy-btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); border-radius: 6px; font-size: 0.72rem; padding: 2px 8px; cursor: pointer; line-height: 1.4; } .copy-btn:hover { background: var(--surface-2); color: var(--text); } .copy-btn.ok { color: var(--ok-fg); border-color: var(--ok-solid); } /* ============================ right-side drawer ============================ */ #backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 60; } #backdrop.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; height: 100vh; width: clamp(560px, 44vw, 1060px); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.4,0,0.2,1); z-index: 61; display: flex; flex-direction: column; } .drawer.open { transform: none; } .drawer-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-body { overflow-y: auto; padding: 1rem 1.25rem 3rem; } .drawer-close { margin-left: auto; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 0.2rem; flex-shrink: 0; } .drawer-close:hover { color: var(--text); } @media (max-width: 640px) { .drawer { width: 100vw; } } @media (prefers-reduced-motion: reduce) { .drawer { transition: none; } #backdrop { transition: none; } }