/* Signal typefaces — Plus Jakarta Sans (UI) + IBM Plex Mono (data/codes). The app shell only loads Inter, so without this the verbatim mockup's literal 'Plus Jakarta Sans' falls back to serif. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ============================================================================ Manage Projects v3 (PM3) — bespoke PM power form on the Trendsic "Signal" design language. Light "shell" is the DEFAULT (.pm3); dark "console" is .pm3.dark. Namespaced .pm3 / .pm3-* (distinct from PM2's .pm / .pm-* so both can co-exist). Full-screen takeover (hosted on ). Plus Jakarta Sans UI, IBM Plex Mono data. PM2's token NAMES are kept so the downstream .pm3-* rules resolve unchanged — only the values flip per mode. Status pills read bg/fg pairs (--*-bg / --*-fg). ============================================================================ */ .pm3 { /* neutrals — shell / light */ --bg: #F5F6FB; --bg-2: #FFFFFF; --panel: #FFFFFF; --panel-2: #FAFBFE; --panel-3: #F1F2F6; --line: #E5E8F2; --line-2: #D2D7E6; --text: #1A1D2E; --text-2: #4A4F63; --text-3: #767C92; --faint: #A2A7BC; /* brand + status */ --accent: #4C63E6; --accent-2: #4C6EF5; --good: #15A06B; --warn: #EE8A2E; --gold: #D99B12; --bad: #E04646; --purple: #8B5CF6; --info: #4C6EF5; --brand-50: #EEF1FE; --brand-100: #DDE3FD; --brand-200: #C2CCFB; --brand-700: #3D4FC9; --brand-800: #3340A0; --brand-grad: linear-gradient(135deg,#5E76EE,#8A63E8); --crew: #4C6EF5; --eq: #8B5CF6; --mat: #EE8A2E; /* status pill bg/fg pairs */ --info-bg: #ECEFFB; --info-fg: #3D4FC9; --ok-bg: #E2F6EE; --ok-fg: #0E6B47; --warn-bg: #FCEEDD; --warn-fg: #B5651A; --gold-bg: #FBF1D6; --gold-fg: #8A6A0C; --bad-bg: #FCE7E7; --bad-fg: #B3262B; --pur-bg: #EFE9FD; --pur-fg: #6D45C9; --neutral-bg: #F1F2F6; --neutral-fg: #6B7080; --radius: 16px; --radius-sm: 12px; --shadow: 0 8px 24px rgba(20,25,55,.12); /* Signal token NAMES used verbatim by the translated Claude-Design markup (shell / light) */ --surface: #FFFFFF; --surface-2: #FAFBFE; --border: #E5E8F2; --border-strong: #D2D7E6; --muted: #767C92; --success: #15A06B; --danger: #E04646; --warning: #EE8A2E; --brand-300: #9BAAF7; --brand-400: #7B8FF3; --brand-500: #5E76EE; --brand-600: #4C63E6; --brand-900: #28297A; --r-md: 12px; --r-lg: 16px; --e1: 0 1px 2px rgba(20,25,55,.06); --e2: 0 2px 8px rgba(20,25,55,.08); --e-drawer: -8px 0 32px rgba(14,20,48,.18); --ease: cubic-bezier(.2,.8,.2,1); --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* In-slot: fill the app-shell content area (its

is position:relative), NOT the viewport. No body-park, no index.aspx sizer, no zoom — so the shell chrome stays visible and SPA navigation can't jam the router (the old body-park + cleanup race left a detached view). */ position: absolute; inset: 0; /* !important beats Durandal/jQuery's inline display:block on the composed view root. */ display: flex !important; flex-direction: column; z-index: 1; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; } .pm3 * { box-sizing: border-box; } .pm3 button { font-family: inherit; cursor: pointer; } /* ============================================================================ VERBATIM PORT LAYER — "Manage Projects - Overview Redesign.dc.html" Ported screens carry the design's literal inline styles (its markup is inline-styled); this layer supplies only what inline styles cannot: the design's 16px base font (the mockup's body has NO font-size → browser default 16px), the mockup's