/* Projects Dashboard (Insights > Dashboards > Projects). Verbatim translation of
   docs/design/dashboards/Projects Dashboard.dc.html. Namespaced .pd-root; renders IN the app-shell content
   slot (position:absolute;inset:0 anchored to the shell <main>). Signal token vars are applied to .pd-root
   at runtime (projects.js compositionComplete via dashShared) so light/dark follow the in-page toggle. */
@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');

.pd-root, .pd-root * { box-sizing: border-box; }
.pd-root {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg, #F5F6FB);
  color: var(--text, #1A1D2E);
  -webkit-font-smoothing: antialiased;
}
.pd-root ::selection { background: #C2CCFB; }
.pd-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.pd-root ::-webkit-scrollbar-thumb { background: #cfd4e4; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

@keyframes pd-rise { 0% { transform: scaleY(.35); opacity: .3 } 100% { transform: scaleY(1); opacity: 1 } }
@keyframes pd-grow { 0% { transform: scaleX(.2); opacity: .4 } 100% { transform: scaleX(1); opacity: 1 } }
@keyframes pd-fade { 0% { opacity: 0; transform: translateY(5px) } 100% { opacity: 1; transform: translateY(0) } }