@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ============================================================================ VendGrade , base + component classes Requires tokens.css. All color comes from --vg-* tokens, so this file is theme-agnostic: flip data-theme="dark" on and everything follows. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--vg-bg); color: var(--vg-text); font-family: var(--vg-font-sans); font-size: var(--vg-fs-body); line-height: 1.45; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } a { color: var(--vg-accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; } ::selection { background: color-mix(in srgb, var(--vg-accent) 24%, transparent); } /* ---- utilities ---- */ .vg-mono { font-family: var(--vg-font-mono); } .vg-label { font-family: var(--vg-font-mono); font-size: var(--vg-fs-label); letter-spacing: var(--vg-tracking-label); text-transform: uppercase; color: var(--vg-text-3); } .vg-muted { color: var(--vg-text-2); } .vg-faint { color: var(--vg-text-3); } .vg-hr { height: 1px; background: var(--vg-border); border: 0; } /* ============================================================================ APP SHELL ========================================================================== */ .vg-app { display: flex; width: 1360px; height: 884px; overflow: hidden; background: var(--vg-bg); } .vg-sidebar { width: 224px; flex-shrink: 0; background: var(--vg-surface); border-right: 1px solid var(--vg-border); display: flex; flex-direction: column; padding: 20px 14px 16px; } .vg-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; } .vg-brand__mark { width: 22px; height: 22px; background: var(--vg-accent); border-radius: 5px; transform: rotate(45deg); position: relative; } .vg-brand__mark::after { content: ""; position: absolute; inset: 6px; background: var(--vg-surface); border-radius: 2px; } .vg-brand__word { font-weight: 700; font-size: 16px; letter-spacing: var(--vg-tracking-tight); } .vg-nav { display: flex; flex-direction: column; gap: 2px; } .vg-nav__item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--vg-text-2); } .vg-nav__ico { width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid var(--vg-text-3); flex-shrink: 0; } .vg-nav__item--active { background: var(--vg-accent-weak); color: var(--vg-accent-strong); font-weight: 600; box-shadow: inset 2px 0 0 var(--vg-accent); } .vg-nav__item--active .vg-nav__ico { background: var(--vg-accent); border-color: transparent; } .vg-sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; } .vg-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px; } /* min-width:0 is REQUIRED: without it this flex child refuses to shrink below its content and the email overflows the 224px sidebar instead of ellipsing. Full address stays one hover away (title). */ .vg-user__meta { min-width: 0; } .vg-user__name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vg-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; flex-shrink: 0; background: var(--vg-standard-line); } .vg-avatar--accent { background: var(--vg-accent); } .vg-upsell { padding: 11px 12px; border: 1px solid var(--vg-border); border-radius: 9px; background: var(--vg-surface-2); } /* persona change-control (never a trap; design 2.2) */ .vg-mode__seg { display: flex; gap: 4px; padding: 3px; background: var(--vg-surface-2); border: 1px solid var(--vg-border); border-radius: 9px; } .vg-mode__btn { flex: 1; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--vg-text-2); } .vg-mode__btn.is-on { background: var(--vg-surface); color: var(--vg-accent-strong); box-shadow: var(--vg-shadow-card); } .vg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .vg-topbar { min-height: 62px; flex-shrink: 0; border-bottom: 1px solid var(--vg-border); background: var(--vg-surface); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .vg-topbar__title { font-size: var(--vg-fs-title); font-weight: var(--vg-fw-title); letter-spacing: var(--vg-tracking-tight); line-height: 1.1; } .vg-topbar__sub { font-size: 12.5px; color: var(--vg-text-2); } .vg-topbar__right { display: flex; align-items: center; gap: 12px; } .vg-scroll { flex: 1; overflow-y: auto; padding: 22px 26px 44px; } .vg-scroll::-webkit-scrollbar { width: 10px; } .vg-scroll::-webkit-scrollbar-thumb { background: var(--vg-border-strong); border-radius: 6px; border: 3px solid var(--vg-surface); } /* ============================================================================ PRIMITIVES ========================================================================== */ /* buttons */ .vg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--vg-radius-md); font-size: 12.5px; font-weight: 600; white-space: nowrap; } .vg-btn--primary { background: var(--vg-accent); color: #fff; } .vg-btn--ghost { border: 1px solid var(--vg-border-strong); background: var(--vg-surface); color: var(--vg-text); } .vg-btn--sm { padding: 6px 12px; font-size: 11.5px; } .vg-btn--link { padding: 0; background: none; color: var(--vg-accent); font-size: 11.5px; font-weight: 600; } .vg-btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* generic bordered chip / dropdown-look */ .vg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--vg-border-strong); border-radius: 7px; font-size: 12px; color: var(--vg-text-2); } .vg-chip--active { border-color: var(--vg-accent); background: var(--vg-accent-weak); color: var(--vg-accent-strong); } .vg-chip strong { color: var(--vg-text); font-weight: 600; } .vg-caret { font-size: 9px; color: var(--vg-text-3); } .vg-tag { font-family: var(--vg-font-mono); font-size: 11px; padding: 3px 9px; border-radius: 5px; background: var(--vg-surface-2); color: var(--vg-text-2); } .vg-plan-tag { font-family: var(--vg-font-mono); font-size: 9px; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 4px; background: var(--vg-accent-weak); color: var(--vg-accent-strong); text-transform: uppercase; } /* TIER chip , the semantic workhorse */ .vg-tier { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--vg-radius-sm); font-size: 11px; font-weight: 600; width: fit-content; } .vg-tier__sq { width: 7px; height: 7px; border-radius: 2px; background: currentColor; } .vg-tier--critical { background: var(--vg-critical-bg); color: var(--vg-critical); } .vg-tier--important { background: var(--vg-important-bg); color: var(--vg-important); } .vg-tier--standard { background: var(--vg-standard-bg); color: var(--vg-standard); } /* status text + dot */ .vg-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .vg-status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .vg-status--ok { color: var(--vg-ok); } .vg-status--warn { color: var(--vg-attention); } .vg-status--over { color: var(--vg-overdue); } .vg-status--info { color: var(--vg-accent-strong); } .vg-status--muted { color: var(--vg-text-2); } /* aging badge (mono) */ .vg-badge { font-family: var(--vg-font-mono); font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: var(--vg-surface-2); color: var(--vg-text-2); width: fit-content; } .vg-badge--over { background: var(--vg-overdue-bg); color: var(--vg-overdue); } .vg-badge--warn { background: var(--vg-attention-bg); color: var(--vg-attention); } /* verdict pill */ .vg-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--vg-radius-sm); font-size: 11.5px; font-weight: 600; } .vg-verdict--ok { background: var(--vg-ok-bg); color: var(--vg-ok); } .vg-verdict--weak { background: var(--vg-important-bg); color: var(--vg-important); } /* ---- THE REVEAL GESTURE , "there but not there" --------------------------- .vg-why = the circle-i node (a